Mobile Web Best Practices

W3C IconYesterday the W3C released a Candidate Recommendation document called “Mobile Web Best Practices 1.0“. With this document W3C is offering a set of guidelines to help web developers deliver a better user experience to mobile users.

The deadline for providing feedback to W3C is the 27th of August 2006 and all developers are encouraged to try it out.

At the core of the recommendation are 60 statements that every web developer should follow:

  1. Thematic Consistency
    Ensure that content provided by accessing a URI yields a thematically coherent experience when accessed from different devices.
  2. Capabilities
    Exploit device capabilities to provide an enhanced user experience.
  3. Deficiencies
    Take reasonable steps to work around deficient implementations.
  4. Testing
    Carry out testing on actual devices as well as emulators.
  5. URIs
    Keep the URIs of site entry points short.
  6. Navbar
    Provide only minimal navigation at the top of the page.
  7. 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.
  8. Navigation
    Provide consistent navigation mechanisms.
  9. Access Keys
    Assign access keys to links in navigational menus and frequently accessed functionality.
  10. Link Target Id
    Clearly identify the target of each link.
  11. Link Target Format
    Note the target file’s format unless you know the device supports it.
  12. Image Maps
    Do not use image maps unless you know the device supports them effectively.
  13. Pop Ups
    Do not cause pop-ups or other windows to appear and do not change the current window without informing the user.
  14. Auto Refresh
    Do not create periodically auto-refreshing pages, unless you have informed the user and provided a means of stopping it.
  15. Redirection
    Do not use markup to redirect pages automatically. Instead, configure the server to perform redirects by means of HTTP 3xx codes.
  16. External Resources
    Keep the number of externally linked resources to a minimum.
  17. Suitable
    Ensure that content is suitable for use in a mobile context.
  18. Clarity
    Use clear and simple language.
  19. Limited
    Limit content to what the user has requested.
  20. Page Size Usable
    Divide pages into usable but limited size portions.
  21. Page Size Limit
    Ensure that the overall size of page is appropriate to the memory limitations of the device.
  22. Scrolling
    Limit scrolling to one direction, unless secondary scrolling cannot be avoided.
  23. Central Meaning
    Ensure that material that is central to the meaning of the page precedes material that is not.
  24. Graphics For Spacing
    Do not use graphics for spacing.
  25. 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.
  26. Use of Color
    Ensure that information conveyed with color is also available without color.
  27. Color Contrast
    Ensure that foreground and background color combinations provide sufficient contrast.
  28. Background Image Readability
    When using background images make sure that content remains readable on the device.
  29. Page Title
    Provide a short but descriptive page title.
  30. No Frames
    Do not use frames.
  31. Structure
    Use features of the markup language to indicate logical document structure.
  32. Tables Support
    Do not use tables unless the device is known to support them.
  33. Tables Nested
    Do not use nested tables.
  34. Tables Layout
    Do not use tables for layout.
  35. Tables Alternatives
    Where possible, use an alternative to tabular presentation.
  36. Non-Text Alternatives
    Provide a text equivalent for every non-text element.
  37. Objects or Script
    Do not rely on embedded objects or script.
  38. Images Specify Size
    Specify the size of images in markup, if they have an intrinsic size.
  39. Images Resizing
    Resize images at the server, if they have an intrinsic size.
  40. Valid Markup
    Create documents that validate to published formal grammars.
  41. Measures
    Do not use pixel measures and do not use absolute units in markup language attribute values and style sheet property values.
  42. Style Sheets Use
    Use style sheets to control layout and presentation, unless the device is known not to support them.
  43. Style Sheets Support
    Organize documents so that if necessary they may be read without style sheets.
  44. Style Sheets Size
    Keep style sheets small.
  45. Minimize
    Use terse, efficient markup.
  46. Content Format Support
    Send content in a format that is known to be supported by the device.
  47. Content Format Preferred
    Where possible, send content in a preferred format.
  48. Character Encoding Support
    Ensure that content is encoded using a character encoding that is known to be supported by the device.
  49. Character Encoding Use
    Indicate in the response the character encoding being used.
  50. Error Messages
    Provide informative error messages and a means of navigating away from an error message back to useful information.
  51. Cookies
    Do not rely on cookies being available.
  52. Caching
    Provide caching information in HTTP responses.
  53. Fonts
    Do not rely on support of font related styling.
  54. Minimize Keystrokes
    Keep the number of keystrokes to a minimum.
  55. Avoid Free Text
    Avoid free text entry where possible.
  56. Provide Defaults
    Provide pre-selected default values where possible.
  57. Default Input Mode
    Specify a default text entry mode, language and/or input format, if the device is known to support it.
  58. Tab Order
    Create a logical order through links, form controls and objects.
  59. Control Labelling
    Label all form controls appropriately and explicitly associate labels with form controls.
  60. Control Position
    Position labels so they lay out properly in relation to the form controls they refer to.

Technorati Tags: , , , , , , , ,

One Response to “Mobile Web Best Practices”

  1. Jesper Rønn-Jensen Says:

    Interesting, and when I relate these to “normal” web pages, it’s surprisingly similar.