Things You Have to Consider When Designing for Mobile


By

Mobile web browsing has been growing exponentially in the past few years. From around 5% in 2007 to about 30% today. In 2014, the number of people accessing the mobile internet is expected to overtake desktop users.

As designers, we will 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 by using “display:block” on your menu’s “a” elements.

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

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 powerful, 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 desktop computers or laptops. That also means they can’t download large files and instantly execute them. Minify your code.

This will help decrease the file size and 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 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.


Top
This page may contain affiliate links. At no extra cost to you, we may earn a commission from any purchase via the links on our site. You can read our Disclosure Policy at any time.