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!
Exactly what the title says. The fat sausages on our hands are bigger than the tiny cursors we have on 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 achived 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’s a few things that this implies. Don’t use more than one column! That means you can’t put sidebars onto 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 in 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 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.
That’s the end of this article. If you have any questions, suggestions, or just, well, comments, check out the comments section below.
- 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
- Newbie Tips For Optimizing Your Blog For Mobile Devices
- Designing a Mobile Stylesheet for your Website
- 30 Free Responsive Email and Newsletter Templates
- What is Responsive Design?