Tailoring Websites for Mobile

Some web sites are more likely to be accessed from mobile phones than others, and savvy web masters can make sure that visitors have an excellent experience by building mobile versions.

As with all good web design, the first step is in understanding users’ needs. When accessing a web site from a mobile phone a user is generally very task driven, time sensitive and is also likely to be location aware.

Task driven means that the user has a very specific purpose for visiting a web site, and the web site needs to help the user to achieve their objective with minimum fuss. For example, a user might want go to a web site to check the score of a cricket match.

Time sensitive means that the user is even less likely to be able to spend time hunting for a solution to their problem, but instead expects to achieve tasks quickly. For example, a user en route to the airport may want to check to see if her flight is on time.

Location aware means that the location of the user often plays a large role in determining her objectives. For example, a user might be looking for restaurant suggestions in a town she is holidaying in.

These need to be factored in when creating web sites for mobile users. Mobile web sites need to be easy to navigate, should not contain more information than they need to, and services should also be tailored to a user’s location. 

Here are some tips when it comes to designing or optimising websites for mobile:  

• Keep it simple - Flash is, for now, still only a dream on most phones. Animated .gif images are probably your best bet if you want movement, but make sure the main message is contained in the first frame, as this at least will be displayed.
• Stay away from tables - Most devices will ignore tables and content will get completely scrambled. Rather use lists where possible.
• Have sufficient links at the top and bottom of each page to easily navigate to otherbpages on the site and don’t try to cram too much content onto a page. Unless you have a touch screen device, scrolling using the keypad is never much fun.
• Keep it portrait - As most devices are still only able to display content in portrait mode, it is important to keep horizontal scrolling down to a minimum - avoid it completely if possible. Some browsers may resize content to fit the width of the screen, so keep this in mind - it might distort the graphical impact. Depending on requirements, aligning content to the left or centre of the screen works quite well.
• Keep images as small as possible - Most graphical editing tools have a “save for web or devices” option - use this when possible.
• Transparency is not guaranteed to work - Hover effects on anchor tags are not supported for the most part and making use of the “background-image” directive is bound to give problems on a number of devices.
• JavaScript and Ajax is another grey area - Even though a couple of WAP browsers have been “supporting” JavaScript for a while now, it is still advised to use it sparingly, if at all. 

One web

“One web” refers to ensuring, as far as possible, that the same information and content is available to web users, regardless of the device they are using to access the Web. So while web sites should be optimised for presentation on various devices, proponents of “one web” would argue that the actual content should not be different.