Mobile Web Design Tips

According to a report on , the number of mobile devices will exceed world’s population in 2012. Despite its long and boring name, Cisco’s “Visual Networking Index (VNI) Global Mobile Data Traffic Forecast Update” is one of the more fascinating data-filled you’ll read this year. The report examines the dramatic growth we’re seeing in the mobile Internet space, including the massive demands for mobile data, the growth of mobile video, and the rise of the smartphone as new gateway to the web itself.

All the above is to say that it’s imperative that web designers and developers learn optimal development and design practices for mobile devices.

Know Your Target Mobile Devices & Users

Cell phone and mobile device platforms vary greatly when it comes to operating system, screen size, resolution, and user interface. So the first thing you need to do in order to build mobile friendly websites is to get to know the hardware and software for mobile devices. The most popular operating systems for mobile devices are Google Android, Windows Mobile, Apple iPhone, Palm OS, Mobile Linux, Symbian OS, and the BlackBerry platform. You will need to find out your target audience and how they access internet. In any case, ensure your website is at least usable on the majority of mobile platforms and web browsers.

Simplify your website for mobile users

The mobile device screens are much smaller than a desktop computer, for example, iPhone 4 has a screen resolution of 640 x 960 pixels, HTC Touch Pro has a 480×640 pixel screen. To work around the problems arose from screen restrictions on mobile devices, you may need to redesign your navigation menu, shrink images, break up text into multiple pages, etc.

Use Clean & Valid Markups for Mobile Website

Use the latest HTML5 doctype for the browsers that support HTML5. It has backward compatibility for earlier HTML versions and markups. Make sure your code validates is as clean and minimalist as possible.

Minimize the Use of Images on Mobile website

Not only because of the smaller display on a mobile device, but also the slower and unstable internet connection speed on mobile devices. We know that in the normal website we usually have some images that serve no purpose other than to look pretty. Eliminate these images on your mobile website cause they will not make your website beautiful on mobile device screen, they will takes longer to load on mobile, they may not be displayed properly, they will prevent other more important content on your website from being viewed properly.

Don’t use hover states on Mobile website

Today’s touch screens can’t detect when a finger is getting close to touching, so the concept of rollovers does not apply. On the iPhone your :hover style will actually display on click and then remain on screen even after the user takes their finger away, which can be really annoying. So the rule is – don’t use :hover in your CSS or mouseover in your JavaScript.

Avoid Flash Videos on Mobile website

One of the top activities for mobile users in particular, is mobile video. For the first time, video accounted for over half of all traffic (52%). This is, in part, due to the increases in connectivity and phones capable of video viewing. By 2016, video will be over 70% of traffic.

Not all phones and mobile devices support Flash, notable the Apple iOS devices, iPad, iPhone, iTouch, do not support Flash at all. Alternative you may consider HTML5 videos.

Include an option for your mobile visitors to view the normal website

Depending on what kind of device your visitors are using, they may want to just use your standard website.