Things you have to Consider when Designing for Mobile

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

Smartphones don’t have the processing capability of today’s desktop computers. This will change in the coming years, but for now, it is an issue. Now, since they aren’t as poweful, you can’t possibly expect a mobile phone to execute complex javascript. For example, I use jQuery Isotope on my site. It works great on desktops and laptops, but when I tried to access it from my phone, the browser would just crash. In other words, the less javascript, the better!

File Sizes

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.

Seemingly Obvious

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.

Conclusion

That’s the end of this article. If you have any questions, suggestions, or just, well, comments, check out the comments section below.

(8 Posts)

Alexandre Smirnov is a web developer and designer who lives and works in California. He enjoys creating cool new stuff out of CSS3 and HTML5, and is convinced that Jquery is the meaning of life. He also regularly writes on his blog, DesignLunatic.com.

Comments

  • AndyGahan

    great work

  • Nice article… I’m not sure about other mobile devices but on the iphone and ipad :hover does work for drop down menus.  One ‘quick’ click will display the menu that is normally displayed by hovering.

  • Luis Suárez

    Nice article Alexandre.
     
    indeed pretty useful nowadayswe are going mobile web. there are a couple of things we designers/developers need to keep in mind also. these are “my two cents”:
     
    Type size matters: remember the basics about type and readability. Emphasize with color helps.
     
    Put Images on diet: again, remember basics when it comes to optimizing images. Use file formats accordingly.
     
    Dont be shy on quality control: There are a lots of brands/platforms/products/browsers that may give you different results when rendering. testing is key.
     
    Beware with “fast track” solutions and propietary plugins/platforms: may well give you an edge, but also could be even more expensive on the long run.
     
    Thanks for sharing.
     
    Cheers!
     
    Luis Suarez. 
     

  • Jason @ mobile website design

    Amazingly enough, this is one of the first articles about this that I have come across on blogs for ages. I’ve been banging on about this for years!

    Thanks

  • Heather

    Your suggestions make a lot of sense – thank you! I am having a lot of trouble finding single column templates for WordPress. Does anyone have any ideas/resources?

  • Great, I’m glad I could help!

  • I agree, these are also great tips.  Especially the image compression; mobile screens don’t need desktop-sized images.

  • Johnc

    There *should* be a hover state, smart phone makers: get on that now!