farid thinks...: Designing for the Mobile Web

Thursday, January 08, 2009

Designing for the Mobile Web - keep it skimpy

It's very common today to have people fish out their cell phones, fire the built-in web browser and look up your company's corporate site as soon as you mention it. I do it myself. Thankfully my Nokia E51 has a full-fledged S60 browser which full support for CSS, Javascript and AJAX. Also I have an unlimited data plan so I need not worry about the many images and lots of text. Unfortunately, many of us are struck with simplified mobile browsers (including many older BlackBerry users) and data plans which charge by the kilobytes downloaded. So it is necessary for the corporate to have a version of their site specially suited for the mobile platform. I am sure your potential client would not appreciate the fact that his prized BlackBerry would break your beautifully designed and information laden site. He would also not like to see what is not relevant while paying through his nose to the mobile service provider.

What you should do? Design a site specifically for the mobile browser and let it point to www.yourcompanydomain.mobi or http://m.yourcompanydomain.com . But before you do that, identify the key content you would like to put in this site. Keeping all the content will defy the entire purpose. Simplify and keep it brief.

Keep the following in mind:

In the home page, simplify the header theme with the company branding.
Use a scaled-down version of the logo
Keep the navigation on top
Give a link to “Skip Navigation” or “Jump to content” at the top of the page
Limit the home-page to the first-level navigation only
Avoid unnecessary graphics
Use CSS Style sheets to style your elements
Use minimum markup
Use the correct DOCTYPE (DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd )
Use the proper META (meta http-equiv="Content-Type" content="application/vnd.wap.xhtml+xml; charset=UTF-8")
Give accesskeys for the main navigation links
Do not forget to give alternate text for the images
Use tables to show tabular data only. Better still avoid them at all since lot of the mobile browsers cannot understand tables and ignores them. Better not to show at all than show something broken
Do not use Pixel font sizes. Use Small, Medium or Large. Different phones use different fonts and the pixel sizes vary
Remove all spaces from the CSS file so that it loads faster
Give a link to the full site so that people like me who has a “full browser” and an unlimited data plan can use
Use XHTML, don't use WML
Don't use frames
Don't use pop up windows
Use stylesheets, not inline styles
Don't use tables for layout
Don't use nested tables
Specify image sizes in markup
Detect the client device and adapt content to suit it; make the most of its capabilities