Mobile web browsing has been growing exponentially in the past few years. From around 5% in 2007 to about 30% today. In 2014, the amount of people that access the mobile internet is expected to overtake desktop users.
As designers, we’re going to have to think about the mobile users that access the sites we make. In other words, we have to start designing not only for desktop users but for mobile users.
Fingers Are Bigger Than Mice!
That is exactly what the title says. The fat sausages on our hands are bigger than the tiny cursors we have on the screen. This means that anything clickable must be big! No tiny links that are barely clickable with mice.
We’re talking big buttons that anyone can click. For example, instead of having a horizontal menu with text-only links, change the code slightly and make the whole nav block clickable. This can easily be achieved just by using “display:block” on the “a” elements in your menu.
Mobile Screens Are Small.
Smartphone screens are smaller than desktop screens. That means you can’t shove everything on your site onto one tiny mobile screen. There are a few things that this implies. Don’t use more than one column!
That means you can’t put sidebars on your site unless you want your users to go blind when they squint to read the text in the sidebar. You would lose a lot of valuable customers that way! Ignore the whole “fold” concept as well. It’s not going to be possible to fit everything on your site onto a mobile screen.
They Aren’t As Powerful
Once again, smartphones aren’t as powerful as a desktop computer or a laptop. That also means they can’t download large files and instantly execute them. Minify your code.
This will help decrease the file size, as well as simplify the interpreting process on the phone itself.
Clean Up Your HTML
This comes into play on any computer; desktops, laptops, smartphones – it doesn’t matter. What matters is clean and valid HTML. While it’s not always possible to have valid HTML, you can at least clean it up. For example, here’s a navbar:
<div id="navbar"> <ul id="navbar-ul"> <li class="navbar-li"><a href="#" class="navbar-a"><span class="navbar-span">Link</span></a></li> <li class="navbar-li"><a href="#" class="navbar-a"><span class="navbar-span">Another link</span></a></li> <li class="navbar-li"><a href="#" class="navbar-a"><span class="navbar-span">A third link</span></a></li> </ul> </div>
Now, take a look at this code:
<ul id="navbar"> <li><a href="#">Link</a></li> <li><a href="#">Another link</a></li> <li><a href="#">A third link</a></li> </ul>
A bit of a difference, isn’t there? Exactly. Clean code is always a good thing, and smartphones are no exception.
This may seem obvious, but here’s the thing: No “:hover” states!
Please, don’t make the mistake of thinking there’s a way to hover with your fingers. There isn’t. This may seem annoying if you have drop-down menus on your site, but you can always make the menus show when a link is clicked.
- What is Responsive Design?
- Keys to Designing a Great Mobile Website Experience
- Mastering Responsive Web Design: The Dos and Dont’s
- Tips for Creating a Truly Functional Mobile Experience
- Design Trends for More Accessible Mobile Content
- Building Websites with a Priority for Mobile
- Rubber Layouts – Combining Static and Fluid Layouts
- How to Design a Mobile Stylesheet for Your Website
- 30 Free Responsive HTML Email & Newsletter Templates
- The 10 Best Free Responsive Joomla Templates