[Skip to the Main Content]

An Excellent Web Standards Checklist

Everyone likes guidelines lists.

I read checklists but I seldom follow them. I read checklists and note which guidelines I’ve used; I note those which I have not used (and I remember my reasons for lack of usage.) It is the Methodology of the Familiar. These days, after having gotten familiar with web standards, my site development includes—Unconsciously—those guidelines I wish to use. Occasionally, I find a checklist that causes me to re-evaluate my methods.

Not Usable has a very good checklist. The ultimate webdesign usability checklist [October 22, 2006] from Rogier Bikker (as found on The Blog Herald).

However, I’ve come to prefer The W3C Summary - Mobile Web Best Practices 1.0, List of Best Practice Statements which offers sixty (60) statements. Most are common for standards-based websites; some are not. Those Best Practice statements which are not commonplace will eventually become so. After all, websites should be accessible for all media types. And, media types include “Handheld”.

I prefer this Best Practices checklist regardless that it’s stated title is “Mobile Web Best Practices”. Limitations are set by those who use them. I supply clients with web standards checklists for SEO projects.

The Best Practices Summary has a cautionary sentence,

“This document is only a summary and should not be used for reference.”

I disagree. It should be used for reference. It is concise. It has simple navigation to its source material. It is encompasses web universality.

List of Best Practice Statements

  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 target 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 target 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.

[Note: After reading this list, one aspect should be noted. Files size. Web Page Analyzer is the companion website for the book, “Speed Up Your Site”. It’s worth reading: it offers size reduction of sites methods.]

I do not have sites which need to be handheld accessible. That doesn’t mean I won’t. I’ve begun using this W3C Best Practices checklist so that I may establish my own methods of best practices for future developments.

And, Remember. A checklist is only as good as the validation tool one uses. This checklist has an excellent validation tool, W3C Mobile Web Best Practices checker. [Note: It’s interesting that they’ve—Officially—named it a “checker” instead of a validation service (even though the URL is validator.w3.org/mobile/).]


Sean Fraser posted this on November 24, 2006 09:07 AM.

  • Add to Technorati Favorites
  • de.licio.us: http://www.elementary-group-standards.com/web-standards/an-excellent-web-standards-checklist.html
  • furl: http://www.elementary-group-standards.com/web-standards/an-excellent-web-standards-checklist.html
  • reddit: http://www.elementary-group-standards.com/web-standards/an-excellent-web-standards-checklist.html

Comments

Wojciech Zając wrote this at February 4, 2007 03:15 AM

Great checklist! Thanks a lot, Sean!


Comment Here

Reply guidelines: Basic HTML (a href, p, code, blockquote, dl, dt, dd, ul, ol, li, cite and q) are allowed. Line breaks and paragraphs are automated.


Inappropriate, unwarranted or self-aggrandizemented comments may suffer redaction. Or, deletion.

[Note: A gravatar, or globally recognized avatar, is that small image in the comments. Gravatar sets-up them.]

The Elementary Standards: A Compendium of Web Standards, CSS, Linguistics and Search Engine Optimization methodology Copyright ©2005-2007 Sean Fraser. All work is published under a Creative Commons License. All Rights Reserved.

Palm trees on a grassy field in Hawai’i

Main Content Returns thus