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.

Author: (7 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