Matt Womer
Mobile Web Initiative Lead Americas
3 October 2007
Orlando Florida, USA
Mobile Web Best Practices 1.0 is a W3C Web Standard that helps people design and deliver content that works well on mobile devices.
Follow these guidelines and content producers will:
Design for One Web
Rely on Web standards
Stay away from "known hazards"
Be cautious of device limitations
Optimize navigation
Check graphics and colors
Keep it small
Use the network sparingly
Help and guide user input
Think of users on the go
Content designed with diverse devices in mind reduces cost, increases flexibility, and reaches the needs of more people.
Ensure that content provided by accessing a URI yields a thematically coherent experience when accessed from different devices.
Exploit device capabilities to provide an enhanced user experience.
Take reasonable steps to work around deficient implementations.
Carry out testing on actual devices as well as emulators.
In the highly fragmented market of devices and browsers, standards are the best guarantee for interoperability.
Create documents that validate to published formal grammars.
Send content in a format known by the device.
Where possible, send content in a preferred format.
Ensure that content is encoded using a character encoding known to be supported by the target device.
Indicate in the response the character encoding being used.
Use style sheets to control layout and presentation, unless the device is known not to support them.
Use features of the markup language to indicate logical document structure.
Provide informative error messages and a means of navigating away from an error message back to useful information.
Thoughtful design can help reduce usability problems due to small screens and keyboards, and other features of mobile devices.
Do not cause pop ups or other windows to appear and do not change the current window without informing the user.
Do not use nested tables.
Do not use tables for layout.
Do not use graphics for spacing.
Do not use frames.
Do not use image maps unless you know the device supports them effectively.
When choosing to use a particular Web technology, consider that mobile devices vary greatly in capability.
Do not rely on cookies being available.
Do not rely on embedded objects or script.
Do not use tables unless the device is known to support them.
Where possible, use an alternative to tabular presentation.
Organize documents so that if necessary they may be read without style sheets.
Do not rely on support of font related styling.
Ensure that information conveyed with color is also available without color.
Simple navigation and typing become critical when using a small screen and keyboard, and limited bandwidth.
Provide only minimal navigation at the top of the page.
Provide consistent navigation mechanisms.
Clearly identify the target of each link.
Note the target file s format unless you know the device supports it.
Assign access keys to links in navigational menus and frequently accessed functionality.
Keep the URIs of site entry points short.
Take into account the trade off between having too many links on a page and asking the user to follow too many links to reach what they are looking for.
Images, colors, and style brighten content, but require care: devices may have low-contrast screens or may not support some formats.
Resize images at the server, if they have an intrinsic size.
Do not use images that cannot be rendered by the device. Avoid large or high resolution images except where critical information would otherwise be lost.
Specify the size of images in markup, if they have an intrinsic size.
Provide a text equivalent for every non-text element.
Ensure that foreground and background color combinations provide sufficient contrast.
When using background images make sure that content remains readable on the device.
Do not use pixel measures and do not use absolute units in markup language attribute values and style sheet property values.
Smaller sites make users happier by costing less in time and money.
Use terse, efficient markup.
Ensure that the overall size of page is appropriate to the memory limitations of the device.
Keep style sheets small.
Limit scrolling to one direction, unless secondary scrolling cannot be avoided.
Web protocol features can help improve the user experience by reducing the impact of network bottlenecks and latencies.
Do not create periodically auto refreshing pages, unless you have informed the user and provided a means of stopping it.
Do not use markup to redirect pages automatically. Instead, configure the server to perform redirects by means of HTTP 3xx codes.
Keep the number of externally linked resources to a minimum.
Provide caching information in HTTP responses
Keyboards and other input methods on mobile devices can be tedious to use, so effective designs minimize the need for them.
Keep the number of keystrokes to a minimum.
Avoid free text entry where possible.
Provide pre-selected default values where possible.
Specify a default text entry mode, language and/or input format, if the target device is known to support it.
Create a logical order through links, form controls and objects.
Label all form controls appropriately and explicitly associate labels with form controls.
Position labels so they lay out properly in relation to the form controls they refer to. Think of users on the go
Web users on the go want compact information when time is short and distractions many.
Provide a short but descriptive page title.
Use clear and simple language.
Ensure that material that is central to the meaning of the page precedes material that is not.
Limit content to what the user has requested.
Ensure that content is suitable for use in a mobile context.
Divide pages into usable but limited size portions.
And a special thanks to our sponsors:
