Best Practices for Mobile Web Content

W3C Mobile Web Initiative

Why Best Practices are needed

My Blog on a mobile phone My Blog on a PC

If it's not validated, it's not valid

A good mobile Web page is a good Web page

Say no to Frames Say no to tables layout Say no to pop ups Say no to image maps

Do not rely on cookies Do not rely on tables Do not rely on scripts Do not rely on styling Do not rely on font effects

Lyrics site with a long top navigation list Lyrics site that gets to the point

Provide a consistent but minimal navigation at the top
Use descriptive links texts, with access keys for the most important ones
Use an easy-to-type address for your entry page
Don't put too many links on a page, but make sure each page of your site is easily reachable

Send images with a resolution adapted to the device screen and declare their dimensions in the markup
Label images with a text equivalent
Ensure used colors don't reduce readability
Use relative measures to let the content adapt to the screen

My blog before I worked on images and resolution → My blog after I worked on images

Screenshot of Phonebook.example loaded

Optimize the size of the markup and style sheets, and keep them withing the memory limitations of the devices
Avoid content that requires scrolling in two directions

Cost and Time for some typical usage of external resources
Site	Markup	Images	Style sheets	Cost	Time
DOM Blog	10 Ko	1 → 1.6 Ko	1 CSS → 4 Ko	0.15 €	4.5s on GPRS
CNN	100 Ko	115 → 300 Ko	2 CSS → 90 Ko (!)	~5 €	2 min on GPRS incl. 1 min latency

Use form controls that needs the least text entries, and provide default values where possible
Label form controls and indicate the expected input mode (e.g. letters or numbers)

Keep the page title short and useful
Prefer a simple and direct language, highlighting the central meaning of the page
Choose short and targeted pages, adapted to users on the go

Screenshot of the checker in action

How do I know what needs to be done for my site?
→ Mobile Web Best Practices checker (example)