W3C | Mobile Web Best Practices Working Group

Implementation report for the Mobile Web Best Practices

This document gathers implementation feedback on the Mobile Web Best Practices Candidate Recommendation dated June 27, 2006. Implementors that wish to take part to this implementation report should fill the implementation report template with the results of their evaluation of their Web site through the Best Practices, accompanied with their comments and feedback on the work required to implement this or that Best Practice and send it to the Mobile Web Best Practices Working Group as described in the template.

In addition, implementors are invited to contribute to the techniques Wiki associated with the Best Practices based on their implementation experience.

The following Best Practice was not succesfully implemented twice: DEFAULT_INPUT_MODE; the Working Group believes it is still a useful addition to sites to work well on mobile devices, and will enhance the user experience over time as support for the inputmode attribute gets improved, and taking into account that aspect, the Director approved keeping this Best Practice in despite the lack of implementation.

In the table below, Implementation A is a Search Engine service, Implementation B a blog, Implementation C a content portal, Implementation D an event presentation site, Implementation E a site presenting a municipality, Implementation F a software sales/support site which includes a 500 000 user community sites (with blogging and puslihing components).

Best Practice Implementation A Implementation B Implementation C Implementation D Implementation E Implementation F Comments Double implementation
1. [THEMATIC_CONSISTENCY] Ensure that content provided by accessing a URI yields a thematically coherent experience when accessed from different devices. Pass Pass Pass Partial Pass Pass Yes
2. [CAPABILITIES] Exploit device capabilities to provide an enhanced user experience. Partial Not answered Pass Fail Pass Pass Impl A:

Basic mobile devices are directed to, for example, example.com/xhtml. More advanced devices are directed to google.com/pda or google.com itself. But this is essentially the extent to which advanced capabilities are exploited. Compliance with this best practice is hard to evaluate. On the one hand, the mobile interfaces could take advantage of Javascript or Flash when available, sure. But in our particular case, "keeping it simple" is an element of the brand, so there is not much interest in exploiting advanced technology anyway. So I find this BP problematic, largely because it is untestably vague, but also because it implies a particular design approach that may not be desirable.

Impl E:

The discovery of client capabilities is carried out through CC/PP (UAProf) and WURFL in this order. Some capabilities as preferred markup are only queried through WURFL.

Images are adapted to the concrete device capabilities (color-depth, resolution and format).

The markup is transcoded to XHTML Basic.

In order to enhance the content readability, large pages are splitted while preserving the content structure and semantics.

CSS stylesheets can be assigned to specific devices by means of a extension made to WURFL.

 Yes
3. [DEFICIENCIES] Take reasonable steps to work around deficient implementations. Pass Not answered N/A N/A Pass Pass Impl A:

There are definitely bits of code behind our sitethat special-case some devices or work around some bad behavior -- for example phones that do not specify acceptable character encodings and that do not accept usual encodings like UTF-8. This one is also hard to test.

Impl E:

The capabilities discovery module is very versatile and takes into account the deficiencies of a client. For example:

In Series 40 Developer Platform all devices claim to support the PNG image format(but that is not true for DP 1.0) : The discovery module fixes this issue by removing the PNG format from the device image capabilities.

Nokia 3300 does not allow changing the link color through CSS (thus, a web page with a blue background would make it impossible to read the hyperlinks): The service provides a different CSS for this device avoiding the blue background.

Besides, the use of WURFL XML file corrects some wrong information in UAProf profiles as declared by some devices so the use of WURFL itself helps correcting those deficiencies in the declaration of capabilities.

A complete deficiencies fix seems impossible because deficiencies will be continuously appearing as new mobile devices are developed. The system allows the administrador to easily fix recently discovered deficiencies and future ones.

 yes
4. [TESTING] Carry out testing on actual devices as well as emulators. Pass Pass Pass Pass Pass Pass Yes
5. [URIS] Keep the URIs of site entry points short. Pass Pass Pass Partial Fail Pass Yes
6. [NAVBAR] Provide only minimal navigation at the top of the page. Partial Pass Pass Pass Pass Pass Impl A:

Search result navigation appears at the bottom of the page, not the top. However there are compelling reasons for this. First is consistency with main site. Second, it really only makes sense to navigate to a next page after reviewing the current page of results, and this requires scrolling down through the results anyway. The secondary navigation (a new search box) is at the bottom, per the best practice.

 Yes
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. Pass Not answered Pass Pass Pass Pass Yes
8. [NAVIGATION] Provide consistent navigation mechanisms. Pass Pass Pass Pass Pass Pass Yes
9. [ACCESS_KEYS] Assign access keys to links in navigational menus and frequently accessed functionality. Pass Partial Fail Pass Pass Pass Impl B:

Implemented partially. Starting page is complete; subpages with comments need implementation

Impl C:

This feature was not required by product marketing.

 Yes
10. [LINK_TARGET_ID] Clearly identify the target of each link. Pass Not answered Pass Pass Pass Partial Yes
11. [LINK_TARGET_FORMAT] Note the target file's format unless you know the device supports it. Pass Pass Pass Pass Pass Partial Yes
12. [IMAGE_MAPS] Do not use image maps unless you know the device supports them effectively. Pass N/A N/A N/A Pass Pass (N/A really means "Pass" in this case, I believe)
13. [POP_UPS] Do not cause pop-ups or other windows to appear and do not change the current window without informing the user. Pass Pass Pass Pass Pass Pass Yes
14. [AUTO_REFRESH] Do not create periodically auto-refreshing pages, unless you have informed the user and provided a means of stopping it. Pass Pass Pass Pass Pass Pass Yes
15. [REDIRECTION] Do not use markup to redirect pages automatically. Instead, configure the server to perform redirects by means of HTTP 3xx codes. Pass Pass Pass Pass Pass Partial Yes
16. [EXTERNAL_RESOURCES] Keep the number of externally linked resources to a minimum. Pass Not answered Pass Pass Pass Pass Yes
17. [SUITABLE] Ensure that content is suitable for use in a mobile context. Pass Partial Pass Pass Pass Partial Impl B:

Since this is a weblog with strong technically oriented context, using a simple language is quite difficult. But I try.

 Yes
18. [CLARITY] Use clear and simple language. Pass Partial Pass Pass Pass Pass Yes
19. [LIMITED] Limit content to what the user has requested. Pass Not answered Partial Pass Pass Pass Yes
20. [PAGE_SIZE_USABLE] Divide pages into usable but limited size portions. Pass Pass Pass Pass Pass Partial Yes
21. [PAGE_SIZE_LIMIT] Ensure that the overall size of page is appropriate to the memory limitations of the device. Pass Partial Pass Pass Pass Partial Impl F:

will be done at least for entry points

 Yes
22. [SCROLLING] Limit scrolling to one direction, unless secondary scrolling cannot be avoided. Pass Pass Pass Pass Pass Pass Yes
23. [CENTRAL_MEANING] Ensure that material that is central to the meaning of the page precedes material that is not. Pass Not answered Pass Pass Pass Pass Yes
24. [GRAPHICS_FOR_SPACING] Do not use graphics for spacing. Pass Pass Fail Pass Pass Pass Yes
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. Pass Pass Pass Pass Pass Partial Impl F:

We do not see that there are insuperable technical barriers, but there are some cases that will require significant work.

 Yes
26. [USE_OF_COLOR] Ensure that information conveyed with color is also available without color. Pass Pass Pass Pass Pass Pass Yes
27. [COLOR_CONTRAST] Ensure that foreground and background color combinations provide sufficient contrast. Pass Pass Pass Pass Pass Partial Impl C:

We do, but some devices (Browser) like Blackberry interpret colours their own way.

 Yes
28. [BACKGROUND_IMAGE_READABILITY] When using background images make sure that content remains readable on the device. Pass Pass Pass Pass Pass Pass Yes
29. [PAGE_TITLE] Provide a short but descriptive page title. Pass Pass Pass Partial Fail Pass Yes
30. [NO_FRAMES] Do not use frames. Pass Pass Pass Pass Pass Pass Yes
31. [STRUCTURE] Use features of the markup language to indicate logical document structure. Fail Pass Partial Pass Pass Pass Impl A:

div is used for each search results, with a span for parts like the URL. This may or may not be great use of structural markup but there's not much significantly better. p could be used more than br.

 Yes
32. [TABLES_SUPPORT] Do not use tables unless the device is known to support them. Pass Pass Pass Pass Pass Pass Yes
33. [TABLES_NESTED] Do not use nested tables. Pass Pass Pass Pass Pass Pass Yes
34. [TABLES_LAYOUT] Do not use tables for layout. Pass Pass Fail Pass Pass Pass Impl C:

The Design is a requirement from product marketing. The Service Provider who realized the requirement used tables for it. However for devices which have problems with tables we are using alternative solutions. These devices get another design wich does not use tables.

 Yes
35. [TABLES_ALTERNATIVES] Where possible, use an alternative to tabular presentation. Pass N/A Pass Pass Pass Pass Impl B:

no tabular presentation used

 Yes
36. [NON-TEXT_ALTERNATIVES] Provide a text equivalent for every non-text element. Pass Pass Partial Pass Pass Partial Impl C:

Results of tests were inconclusive as devices reacted differently

Impl F:

for some user-generated content this is not easy, and is not tested.

 Yes
37. [OBJECTS_OR_SCRIPT] Do not rely on embedded objects or script. Pass Pass Pass Pass Pass Pass Yes
38. [IMAGES_SPECIFY_SIZE] Specify the size of images in markup, if they have an intrinsic size. Fail Fail Pass Pass Pass Pass Impl A:

The logo does not specify width/height.

Impl B:

Will be used in the future

 Yes
39. [IMAGES_RESIZING] Resize images at the server, if they have an intrinsic size. Pass N/A Pass N/A Pass Partial Impl D:

Images have been reduced but they have a fixed size.

 Yes
40. [VALID_MARKUP] Create documents that validate to published formal grammars. Fail Pass Fail Pass Pass Pass Impl A:

Result pages do not validate as XHTML Mobile!

 Yes
41. [MEASURES] Do not use pixel measures and do not use absolute units in markup language attribute values and style sheet property values. Pass Pass Fail Pass Pass Partial Yes
42. [STYLE_SHEETS_USE] Use style sheets to control layout and presentation, unless the device is known not to support them. Partial Pass Pass Pass Pass Pass Impl A:

HTML like br is used for layout to a small extent.

 Yes
43. [STYLE_SHEETS_SUPPORT] Organize documents so that if necessary they may be read without style sheets. Pass Pass Pass Pass Pass Pass Yes
44. [STYLE_SHEETS_SIZE] Keep style sheets small. Pass Pass Pass Pass Pass Fail Yes
45. [MINIMIZE] Use terse, efficient markup. Pass Pass Partial Partial Pass Partial Impl D:

Some blank characters are sent (pretty printing).

 Yes
46. [CONTENT_FORMAT_SUPPORT] Send content in a format that is known to be supported by the device. Pass Pass Pass Partial Pass Partial Impl D:

It is supposed that a mobile device supports XHTML basic. If any mobile device is detected, a response in XHTML Basic is sent.

Impl F:

We send text/html in general, knowing it is supported. We will offer links to content with specific types and serve them as requested.

 Yes
47. [CONTENT_FORMAT_PREFERRED] Where possible, send content in a preferred format. Pass Pass Pass Partial Pass Partial Impl D:

UTF-8 served in all cases.

 Yes
48. [CHARACTER_ENCODING_SUPPORT] Ensure that content is encoded using a character encoding that is known to be supported by the device. Pass Pass Pass Pass Fail Pass Impl E:

iso-8859-1 used

 Yes
49. [CHARACTER_ENCODING_USE] Indicate in the response the character encoding being used. Pass Pass Fail Pass Pass Pass Yes
50. [ERROR_MESSAGES] Provide informative error messages and a means of navigating away from an error message back to useful information. Fail Fail Pass Fail Pass Pass Impl A:

Error pages are not always mobile-friendly, and do not provide a link back to the home page.

Impl B:

Actually only error messages from an older page in german language is displayed. this will be changed in the future.

Impl D:

The error messages are the same of the "non-mobile" version.

 Yes
51. [COOKIES] Do not rely on cookies being available. Pass Pass Pass Pass Pass Pass Yes
52. [CACHING] Provide caching information in HTTP responses. Partial Fail Pass Fail Pass N/A Impl A:

Result pages are not cacheable and headers are set correctly. Main page also has these headers though it is likely cacheable.

Impl B:

Will be implemented

Impl F:

Not carefully tested, but we see no technical barrier and expect to pass.

 Yes
53. [FONTS] Do not rely on support of font related styling. Pass Pass Pass Pass Pass Pass Yes
54. [MINIMIZE_KEYSTROKES] Keep the number of keystrokes to a minimum. Pass Pass Pass N/A Pass Pass Impl D:

Forms have not been included

 Yes
55. [AVOID_FREE_TEXT] Avoid free text entry where possible. Pass Pass Pass N/A Pass Pass Yes
56. [PROVIDE_DEFAULTS] Provide pre-selected default values where possible. Pass Pass Pass N/A Pass Pass Yes
57. [DEFAULT_INPUT_MODE] Specify a default text entry mode, language and/or input format, if the device is known to support it. Fail N/A Partial N/A Fail Partial Impl F:

We do not make much use of this, but we are increasing its application.

 No
58. [TAB_ORDER] Create a logical order through links, form controls and objects. Pass Bug Pass Pass Pass Pass Impl B:

Tabindex is used consistently but not supported by XHTML Basic (according to the W3 Validator)

 Yes
59. [CONTROL_LABELLING] Label all form controls appropriately and explicitly associate labels with form controls. Pass Pass Fail N/A Pass Pass Yes
60. [CONTROL_POSITION] Position labels so they lay out properly in relation to the form controls they refer to. Pass Pass Fail N/A Pass Pass Yes
Dominique Hazaël-Massieux <dom@w3.org>
Last Modified: $Date: 2006/11/02 11:03:05 $