How to Optimize Your Site for the Mobile Web

&c=” target=”_blank”>mobiles

It’s expected that by 2014, over 1 billion people will have a smartphone. Currently, around 2.5 billion people use the Internet — it’s apparent that not only are mobile devices becoming more popular but that the web is in high demand. People expect both companies and many kinds of people to have a website they can easily access and view on their mobile device.

In this article, we look at the issues with the restrictions imposed on developers and designers creating content for mobile devices along with some practices. We also look at how to best approach content creation for mobile browsers.

Web Apps vs. Native Apps

On a smartphone, there are two types of applications. Those that are based on the web, have been developed generically and don’t use the phone’s native controls and interface elements, and those that have been developed specifically for that device or mobile operating system. It may seem that native applications are your best bet but there are issues that are overlooked when people dive in and create native applications. Let’s take the iPhone for example.

Firstly, you’re app is subject to review and approval by Apple so you don’t have complete freedom with the functionality of your app because they have been notorious for not approving apps and leaving the developer completely stumped as to why the result of their blood, sweat and tears has been rejected. With web apps, you have free reign. You’re only really limited by two things: the technology and your imagination.

Secondly, App Stores are becoming more and more crowded and it’s becoming harder for a developer to shine through the mess of poorly designed applications. Sure, the web can be accused of being populated with terrible websites, but sharing a web app is just a matter of passing on a URL. With a native application, the path to sharing is a bit more complicated.

Finally, people don’t download rubbish they don’t need. Do you want to provide functionality or information? Your company app might be beautiful but if it is the equivalent to the corporate website then using the web is always going to appeal to users more.

Simple, Effective Practices for Mobile Websites and Apps

Sometimes, in the midst of creating something beautiful, designers and developers forget about the restrictions placed on them. Below is a short list of what to do and what not to do:

  • Do design pages for a minimum screen size of 320 by 480 pixels and make it scale!
  • Remember that the user cannot focus on very detailed areas of your design — try pressing a small button while you’re on a train.
  • Do add “alt” tags for pictures as users regularly block image downloads in their web browsers just to reduce bandwidth consumption.
  • Don’t use Flash, excessive JavaScript or other complex inclusions.
  • Don’t use frames or other dividers, they take up a lot of space and do not add value.
  • Don’t use objects that have a fixed size, like tables.
  • Don’t use big pictures — besides the waste of screen space, they also use a lot of bandwidth.
  • Don’t write lengthy copy, since people on the run want just the facts, and fast.

You Should Redirect

Many developers want things to be as efficient as possible and there is the general misconception amongst the design community that having the mobile website and desktop website code in one file is great! It’s not. If your site is fairly simple and your content won’t change between web and mobile versions, it may be the best option for that situation, but it isn’t always the superior option.

With a redirect, you create two separate and completely tailored experiences. Trying to cram a mobile site and a desktop site into one using nothing but media queries and the like means one or both will suffer due to compromises.

With your redirect, make it obvious that the user is using the mobile version of your site. To do this make the URL something blatant like ‘’ or ‘’. With that said, however, you should also a link about to the full version as it’s obvious the mobile site will lack features that users may want access to.

Laying Out a Mobile Site

When designing and laying out a mobile website, it’s easy to become distracted and start designing something that just won’t work well on a mobile device. Mobile devices have screen sizes of all kinds. One user could be looking at your site on 320 x 460px and the next  at 1024 x 768px. It’s impossible to predict. This is where media queries do come in (look here for a primer on these).

The navigation bar is something that should be unobtrusive and should just sit at the top of page. Don’t use anything fancy or make it sticky. Make sure the buttons are accessible and don’t overwhelm the user when they first see it. Typically, a mobile screen cannot handle more than, at best, 5 links along the navigation bar. Even if you wanted more, there isn’t a way to do this elegantly. To deal with this, you should optimize the links in the navigation bar to offer the information mobile users in particular would want to see.

Many designers use icons only in lieu of text to display information and links on the mobile web. This is a good practice, so long as you don’t abuse it. Too many images will slow down load times on cellular networks, and icons need to be obviously self-descriptive.

To combat potential slow load times, always use alt tags that will display text until the image has loaded. If you’re designing a site that’ll use the same codebase for mobile and desktop, you can actually tell the mobile media queries to display alt text for images using code like this: { content: attr(alt); }

Beware of mouseover buttons and states that do not work on mobile devices that use touch instead of a mouse. You would be writing bloated, redundant code for a mobile site if you include these.

Finally, as the seasoned designer you may be, you should know that whitespace is required for something to look good, functional and usable. Some people tend to think there’s no room for whitespace on small devices. Don’t be afraid to use it in your own design. If you don’t have whitespace, your website will immediately overwhelm the user and may be unusable.

Four Examples

Take a look at these examples of considered approaches to mobile web design.


Guardian Website




If you’ve never developed interfaces for mobile before, I hope you’ve gained an insight into what you need to consider if you’re going to go ahead. Employ these principles and you’ll retain many visitors who may have fled from a site that wasn’t designed for mobile devices.

Mobile devices on table photo via Shutterstock.

Fuel Your Coding

Leave a Comment