Mobile Web Best Practices (MWBP) Flipcards

These are the Mobile Web Best Practices Flipcards, which summarize the Mobile Web Best Practices 1.0 document. The flipcards are a useful reminder of the sixty guidelines explained in detail in the specification. A PDF version of the cards is available.

The MWBP flipcards are available in the following languages: French, German, Korean, Portuguese, Spanish, Swedish and Chinese (simplified).

Mobile Web Best Practices


"Mobile Web Best Practices 1.0" is a W3C Web Standard that helps people design and deliver content that works well on mobile devices. This set of cards summarizes the guidelines of that document in ten themes. By following these guidelines, content producers will broaden their audience, create effective Web sites and applications, and make browsing the Web convenient on more devices.

For more information:

10 ways to mobilize

Design for One Web

Content designed with diverse devices in mind reduces cost, increases flexibility, and reaches the needs of more people.

Design for One Web

THEMATIC CONSISTENCY: Ensure that content provided by accessing a URI yields a thematically coherent experience when accessed from different devices.

CAPABILITIES: Exploit device capabilities to provide an enhanced user experience.

DEFICIENCIES: Take reasonable steps to work around deficient implementations.

TESTING: Carry out testing on actual devices as well as emulators.

Rely on Web standards

In the highly fragmented market of devices and browsers, standards are the best guarantee for interoperability.

Rely on Web standards

VALID MARKUP: Create documents that validate to published formal grammars.

CONTENT FORMAT SUPPORT: Send content in a format known by the device.

CONTENT FORMAT PREFERRED: Where possible, send content in a preferred format.

CHARACTER ENCODING SUPPORT: Ensure that content is encoded using a character encoding known to be supported by the target device.

CHARACTER ENCODING USE: Indicate in the response the character encoding being used.

STYLE SHEETS USE: Use style sheets to control layout and presentation, unless the device is known not to support them.

STRUCTURE: Use features of the markup language to indicate logical document structure.

ERROR MESSAGES: Provide informative error messages and a means of navigating away from an error message back to useful information.

Stay away from known hazards

Thoughtful design can help reduce usability problems due to small screens and keyboards, and other features of mobile devices.

Stay away from known hazards

POP UPS: Do not cause pop ups or other windows to appear and do not change the current window without informing the user.

TABLES NESTED: Do not use nested tables.

TABLES LAYOUT: Do not use tables for layout.

GRAPHICS FOR SPACING: Do not use graphics for spacing.

NO FRAMES: Do not use frames.

IMAGE MAPS: Do not use image maps unless you know the device supports them effectively.

Be cautious of device limitations

When choosing to use a particular Web technology, consider that mobile devices vary greatly in capability.

Be cautious of device limitations

COOKIES: Do not rely on cookies being available.

OBJECT OR SCRIPT: Do not rely on embedded objects or script.

TABLES SUPPORT: Do not use tables unless the device is known to support them.

TABLES ALTERNATIVES: Where possible, use an alternative to tabular presentation.

STYLE SHEETS SUPPORT: Organize documents so that if necessary they may be read without style sheets.

FONTS: Do not rely on support of font related styling.

USE OF COLORS: Ensure that information conveyed with color is also available without color.

Optimize navigation

Simple navigation and typing become critical when using a small screen and keyboard, and limited bandwidth.

Optimize navigation

NAVBAR: Provide only minimal navigation at the top of the page.

NAVIGATION: Provide consistent navigation mechanisms.

LINK TARGET ID: Clearly identify the target of each link.

LINK TARGET FORMAT: Note the target file s format unless you know the device supports it.

ACCESS KEYS: Assign access keys to links in navigational menus and frequently accessed functionality.

URIS: Keep the URIs of site entry points short.

BALANCE: 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.

Check graphics & colors

Images, colors, and style brighten content, but require care: devices may have low-contrast screens or may not support some formats.

Check graphics & colors

IMAGES RESIZING: Resize images at the server, if they have an intrinsic size.

LARGE GRAPHICS: 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.

IMAGES SPECIFY SIZE: Specify the size of images in markup, if they have an intrinsic size.

NON-TEXT ALTERNATIVES: Provide a text equivalent for every non-text element.

COLOR CONTRAST: Ensure that foreground and background color combinations provide sufficient contrast.

BACKGROUND IMAGE READABILITY: When using background images make sure that content remains readable on the device.

MEASURES: Do not use pixel measures and do not use absolute units in markup language attribute values and style sheet property values.

Keep it small

Smaller sites make users happier by costing less in time and money.

Keep it small

MINIMIZE: Use terse, efficient markup.

PAGE SIZE LIMIT: Ensure that the overall size of page is appropriate to the memory limitations of the device.

STYLE SHEETS SIZE: Keep style sheets small.

SCROLLING: Limit scrolling to one direction, unless secondary scrolling cannot be avoided.

Use the network sparingly

Web protocol features can help improve the user experience by reducing the impact of network bottlenecks and latencies.

Use the network sparingly

AUTO REFRESH: Do not create periodically auto refreshing pages, unless you have informed the user and provided a means of stopping it.

REDIRECTION: Do not use markup to redirect pages automatically. Instead, configure the server to perform redirects by means of HTTP 3xx codes.

EXTERNAL RESOURCES: Keep the number of externally linked resources to a minimum.

CACHING: Provide caching information in HTTP responses

Help & guide user input

Keyboards and other input methods on mobile devices can be tedious to use, so effective designs minimize the need for them.

Help & guide user input

MINIMIZE KEYSTROKES: Keep the number of keystrokes to a minimum.

AVOID FREE TEXT: Avoid free text entry where possible.

PROVIDE DEFAULTS: Provide pre-selected default values where possible.

DEFAULT INPUT MODE: Specify a default text entry mode, language and/or input format, if the target device is known to support it.

TAB ORDER: Create a logical order through links, form controls and objects.

CONTROL LABELLING: Label all form controls appropriately and explicitly associate labels with form controls.

CONTROL POSITION: 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.

Think of users on the go

PAGE TITLE: Provide a short but descriptive page title.

CLARITY: Use clear and simple language.

CENTRAL MEANING: Ensure that material that is central to the meaning of the page precedes material that is not.

LIMITED: Limit content to what the user has requested.

SUITABLE: Ensure that content is suitable for use in a mobile context.

PAGE SIZE USABLE: Divide pages into usable but limited size portions.

©2011 W3C (ERCIM, Keio University, MIT) - Produced by WithYou - Photographs ©gettyimages - ©corbis