The World Wide Web Consortium (W3C) defined Best Practices for delivering content to mobile devices. The W3C guidelines are a useful starting point if your goal is to design web pages for mobile browser. For the complete list of the best practices, see W3C Mobile Web Best Practices 1.0. Following is a summary of how some of those guidelines apply to developing websites for the Web Browser for S60.
Mobile networks can be slow compared to fixed data connections and often have a measurably higher latency, which can lead to long retrieval times. Also, the user may be paying separately for mobile data transfer. The browsing experience may not be satisfactory if web pages contain content that the user has not specifically requested. In the mobile world, this extra material contributes to poor usability and may add considerably to the cost of retrieval.
A quick list:
Ensure that content provided by accessing a URI yields a thematically coherent experience when accessed from different devices.
Exploit device capabilities to provide an enhanced user experience (Introduction to the Web Browser for S60).
Carry out testing on actual devices as well as emulators (Before you start).
Ensure that the overall size of page is appropriate to the memory limitations of the device.
Provide caching information in HTTP responses (Using cache effectively).
Do not use images that cannot be rendered by the device (Supported image formats).
Device and bandwidth considerations should also be taken into consideration for graphics.
A quick list:
Do not use graphics for spacing (Using graphics effectively).
Avoid large or high resolution images except where critical information would otherwise be lost (Design and user Experience Library section Graphics).
When using background images make sure that content remains readable on the device (Design and user Experience Library section Colours).
Provide a text equivalent for every non-text element (for example <img
src="" alt="Click here" />.
Specify the size of images in markup, if they have an intrinsic size (Using graphics effectively).
Resize images at the server, if they have an intrinsic size (Using graphics effectively).
Mobile users typically have more immediate and goal-directed objectives than desktop Web users. Their intentions are often to locate specific pieces of information that are relevant to their context, and they typically are less interested in lengthy documents or leisurely browsing.
A quick list:
Ensure that content is suitable for use in a mobile context (Creating web content).
Limit content to what the user has requested.
Divide pages into usable but limited size portions.
Provide a short but descriptive page title.
Provide informative error messages and a means of navigating away from an error message back to useful information.
There are design principles that are specific to the smaller displays on mobile devices.
A quick list:
Ensure that information conveyed with color is also available without color.
Ensure that foreground and background color combinations provide sufficient contrast (Design and user Experience Library section Colours).
Do not rely on support of font related styling (Font support, Font style recommendations for the S60 Browser).
Many web pages are laid out for presentation on desktop-size displays. Because of the limited screen size of mobile devices, the subject matter of the page may require considerable scrolling to be visible, and users may not get immediate feedback as to whether they are accessing the right content. Creating a mental image of the site quickly is important as is adopting a consistent style. The S60 Browser has built-in features such as page overview and zooming to assist with gaining that mental view (Introduction to the Web Browser for S60).
A quick list:
Limit scrolling to one direction, unless secondary scrolling cannot be avoided.
Provide only minimal navigation at the top of the page. For information on creating a navigational aid specifically for mobile pages, see Navigational aid.
Ensure that material that is central to the meaning of the page precedes material that is not (Laying out pages).
Provide consistent navigation mechanisms (Navigating in the S60 Browser).
Where possible, use an alternative to tabular presentation (Navigating in the S60 Browser)..
Do not create periodically auto-refreshing pages, unless you have informed the user and provided a means of stopping it (Using cache effectively).
Linking in mobile devices should be considered carefully.
A quick list:
Clearly identify the target of each link (Laying out pages).
Keep the number of externally linked resources to a minimum (Using cache effectively).
Create a logical order through links, form controls and objects.
Note the target file's format unless you know the device supports it (S60 Browser URI scheme support).
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.
Some mechanisms that are commonly used for presentation of advertising material (such as pop-ups, pop-unders, and large banners) may not work well on small devices. If advertising exists, the user experience of the site as a whole, including advertising, should be as compact and effective as possible.
A quick list:
Do not cause pop-ups or other windows to appear. For information on multiple window support in the S60 Browser, see Introduction to the Web Browser for S60.
Do not change the current window without informing the user.
A quick list:
Do not use image maps, they are hard to navigate on a small screen or a touch device.
Do not use frames or IFrames (IFrames).
Do not use nested tables.
Do no use access keys, the S60 Browser does not support them.
Since mobile devices often have a very limited keypad, lengthy URIs are difficult to type correctly and forms are hard to fill in. The visual history feature in the S60 Browser eases navigation considerably (Introduction to the Web Browser for S60); however, it still may be difficult to recover from errors, broken links, and so on.
A quick list:
Keep the URIs of site entry points short.
Keep the number of keystrokes to a minimum.
Avoid free text entry where possible.
Provide pre-selected default values where possible.
Specify a default text entry mode, language and/or input format, if the target device is known to support it.
Label all form controls appropriately and explicitly associate labels with form controls.
Position labels so they lay out properly in relation to the form controls they refer to.
Proper use of styles and CSS can help the mobile browsing experience. For information about the default CSS for the S60 Browser, see S60 Browser default CSS.
A quick list:
Do not use pixel measures and do not use absolute units in markup language attribute values and style sheet property values (Font style recommendations for the S60 Browser, Using style sheets for dynamic content).
Use style sheets to control layout and presentation (Inline styles vs. external style sheets).
Use internal or external style sheets where appropriate (Inline styles vs. external style sheets).
Mobile networks can be slow compared to fixed data connections and often have a measurably higher latency, which can lead to long retrieval times. Also, the user may be paying separately for mobile data transfer. The browsing experience may not be satisfactory if web pages contain content that the user has not specifically requested. In the mobile world, this extra material contributes to poor usability and may add considerably to the cost of retrieval. For information on resource limitations, see Device resource considerations.
A quick list:
Do not rely on embedded objects or script.
Create documents that validate to published formal grammars.
Use features of the markup language to indicate logical document structure.
Use terse, efficient markup.
Send content in a format that is known to be supported by the device (Introduction to the Web Browser for S60, Creating web content).
Ensure that content is encoded using a character encoding that is known to be supported by the target device.
Indicate in the response the character encoding being used.
Do not use markup to redirect pages automatically. Instead, configure the server to perform redirects by means of HTTP 3xx codes.