Example.com - Article 3

Developing mobile-aware Web sites

The Nokia Web Browser is capable of rendering any normal Web page. However, there are some issues that should be considered to make the mobile browsing experience more enjoyable. This article discusses some basic Web development issues from the Nokia Web Browser perspective, but the same design principles can be applied to other platforms as well.

Using basic HTML structures

The Nokia Web Browser renders an HTML structure and elements normally, just as a desktop browser does. Elements containing a long text flow (such as this) are wrapped by the browser to fit the maximum width on the screen. This facilitates vertical scrolling and makes reading easier.

When building the site, keep the following guidelines in mind:

Use efficient markup

Use HTML for what it was created for; structuring information in a coherent way. Design with document order in mind and build your site so that it remains usable even without styles or images loaded.
Use styles extensively

Separate presentation from information by using stylesheets to build your site's graphical look.
Test your site

Test your site design at regular intervals on all necessary browsers and platforms. Testing the site on an actual mobile device gives a proper result on site performance.

Use different HTML elements just as you would on any other Web page: headings, div-elements and paragraphs for textual content, different list types for ordering information, and tables for presenting data.

Browser technology overview
Technology	Supported in 3rd Ed	Supported in 3rd Ed, FP1
HTML 4.01	Yes	Yes
XHTML 1.0	No	Yes
JavaScript	Yes	Yes
Flash Lite	No	Yes
SVG-Tiny	Yes	Yes
Ajax	Yes	Yes
WML	No	Yes

Graphics and colors

Optimizing graphics with regard to physical dimensions and file size is important to better facilitate mobile browsing. Big graphics use up valuable display space and large file sizes increase download times. In addition, dividing the graphics into several small files increases the network latency when the mobile device has to download a large number of individual files.

For user interface objects, such as navigation buttons, consider using CSS and text instead of graphics. This way, the user is able to see the important navigational links already at the first rendering phase, before the display is rendered again with all external objects included. Using CSS is also useful in cases where the mobile user may have opted not to display images in the browser.

Some tips for using graphics:

Remember to provide an alternative text description for all important graphics.
For banners, make sure that the height of the banner does not exceed the display height. The QVGA display size is 240 x 320 pixels, or 320 x 240 pixels in landscape mode.
In photo galleries, always provide a thumbnail image, do not attempt to display a large high-resolution image directly.
Background images: For background graphics, use CSS as much as possible to build the visual design. This way, browsers not capable of displaying images will skip them and HTML retains its purpose of providing structure and marking the elements semantically.
Rollover images: For optimum usability, the rollover effect should be instantaneous. To achieve this, use CSS instead of JavaScript. By incorporating both states (on/off) to the same image and then moving the background image correspondingly in the stylesheet, CSS removes the need to additionally load the on-state. Refer to the source code of this site for an example.

With colors, make sure that the contrast between objects and the background is sufficient. This is especially important with navigational elements and elements involving interaction: The user should easily see and distinguish the objects also on a small display.

For a demonstration on how colors are reproduced on the mobile device, compare the color gradient images below on a mobile and desktop display. Always remember to test color contrast and performance on the target device during development.

Image of color spectrum