Mobile Web Design

In light of the World Wide Web Consortium's (W3C's) "One Web" view, it seems to me that the Mobile Web era is forcing many web designers to build better web sites. From a practical standpoint, if you have a well-designed desktop site, your foray into building a good mobile web site should be a fairly straightforward process. If, however, your desktop site favors table-based layouts, bloated code, frames, and image based navigation, then I'm afraid your first mobile web site will be a whole new experience - which is probably a very good thing.

Dropping Dynamic Effects

Opera for handhelds supports the same dynamic effects as Opera for the desktop. However, a lot of dynamic effects that work well for the screen just do not adapt well to the handheld. Features that are a bit annoying on the desktop become even more annoying on handhelds.

Don’t use frames or pop-up windows. Although Opera can display frames on handhelds, they make navigation and display painfully awkward. Multiple windows are also far more unwieldy on a handheld than on a desktop, so keep all links going to the same window.

As with desktop layouts, make sure navigational elements are accessible even without the mouse. Keyboard events don’t necessarily apply, either; interaction on handhelds is often only with a stylus, which does not track keypress or hover events and cannot right-click or double-click.

Reducing the Images

Mobile phone operators delight in charging per kilobyte of transfer, making image-intensive sites both slow and expensive to download. This often causes users to browse with images turned off to save time and money.

You can make your design less image-intensive by:

• Hiding unnecessary images with display: none so that Opera will not bother to download them.
• Using real text for navigation labels and headers.
• Telling Opera to use an image’s alt text instead of loading the image itself:

  img.as-text { content: attr(alt); }

For the images you do include, set the width and height attributes so that the page can be laid out in its final form even before the images are loaded. Also, images designed for the desktop often do not scale well to the small screen. Crop, scale down, and/or size-optimize images targetted at handhelds.

Don’t forget to write meaningful alternative text. The idea is to replace the image, not to describe it. If the image is purely ornamental, the alt text should always be the empty string ("").

Optimizing HTML

Use efficient, semantic markup and leave the presentation to CSS. CSS is more powerful, more compact, and does not clutter the document with redundant presentational data. Although this is good authoring practice for all media types, it does become even more important when authoring for handheld devices.

• Don’t overdose on class,
  and . If there is a more appropriate HTML tag, use that and subclass if necessary. If the element is not actually necessary, take it out. If you can select based on context, do not introduce another class.
• Choose the tags that best convey the purpose and structure of the content. Semantic HTML tags have universally-recognized meanings, which font changes and author-defined classes don’t. Among other advantages, meaningful markup allows non-CSS browsers, which are more common on small devices than on the desktop, to present the reader with a coherent display of the page content. Semantic tags are also a lot shorter than div+class combinations, leading to smaller file sizes.

Reference: http://alistapart.com/articles/pocket/

---

How does your web site perform on mobile phones?

On-Line Mobile Phone Emulators:

• DotMobi


• http://www.operamini.com/demo/

OnLine Mobile Site Checkers

MobileOK test schemes are based on the W3C Mobile Web Best Practices List shown below.

• http://ready.mobi - on-line mobile site checker


• http://validator.w3.org/mobile/

---

The W3C Mobile Web Best Practices 1.0 Guidelines

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.

Reference: http://www.w3.org/TR/mobile-bp/