graphic with four colored squares W3C logo

Best Practices for Mobile Web Content

W3C Mobile Web Initiative

Why Best Practices are needed

Typical horror reaction of a user faced with some Web sites on a mobile device

Design for One Web

My Blog on a mobile phone  My Blog on a PC

Rely on Web Standards

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

A good mobile Web page is a good Web page

Say No to...

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

Use but do not rely exclusively on...

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

Optimize Navigation

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

Check Graphics and Colors

Example Redesign: Before and After

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

Small is Beautiful

Screenshot of Phonebook.example loaded

Use the Network Sparingly

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

Help and Guide User Input

Enter your country:


Think of Users on the Go

Mobile Web Best Practices checker

Screenshot of the checker in action

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

For Home Study

Final version of slides available at