Nokia Web Browser Design Guide - Article 3
Article 1 | Article 2 | Article 3 | Article 4 | Article 5 |
Basic Web development issues
This third article discusses some basic Web development issues from the Nokia Web Browser perspective, and works in tandem with an example Web site that illustrates and supplements the information presented here and provides code examples. Designers can view the Web site side by side with a normal desktop browser and the Nokia Web Browser on their mobile device. They are free to use any pieces of code to develop their own site.
Getting started: Building simple HTML structures
Due to the True Web layout rendering, the Nokia Web Browser displays complete Web pages and renders any normal HTML structure without difficulties. When starting development work, build the HTML structure in a logical order and make sure that the content is semantically marked. Use HTML to create the structure for the Web page and keep the code as simple as possible. Cascading Style Sheets (CSS) can be used to fine-tune the layout and visual appearance.
Because Web pages are transferred to a mobile device over a limited network connection, it is important to write efficient and condensed code. Make a habit of thinking economically - small adjustments and optimizations here and there result in lower total file sizes and faster download times for the mobile browser.
Remember to test Web pages with a mobile device early on in the development process. One testing method is to remove all style information and switch off the graphics; if the Web site is still readable and functional at a basic level, it will probably survive any browser. Use different validators (such as the World Wide Web Consortium [W3C] service at validator.w3.org) for ensuring compliance to markup standards.
Utilizing the “hot spot”: Designing effective navigation
When the Nokia Web Browser opens a Web page, the initial view is on the upper left corner of the page. This “hot-spot” area is very important, as it is the first thing the user sees and focuses on. The most important objects, such as navigation and basic site information, should be placed in or near this hot spot. The initial view should tell the mobile user where he or she has landed (company name or logo, site name, or short summary) and how to navigate further on the site.
On a mobile device, the hot-spot real estate is limited. For example, on the standard QVGA display, the hot spot covers an area of 240x320 pixels (or 320x240 pixels in landscape mode). It is not necessary to fit everything within the hot spot, but it is recommended to at least start the elements from the hot spot. For example, a horizontal or vertical site navigation element can continue and trail off-screen, as long as the user is able to quickly recognize the element and follow it. Make sure that the navigation element is visually consistent — a background color or a shape acts as a visual clue and helps the user follow the element.
On the example site, the initially displayed hot-spot area on the Nokia Web Browser includes a number of critical components:
- Company logo and site name
- Navigation
- Search field
- First heading text of the content
- Special mobile navigation tool (explained below)
Tip: To place focus on a specific link after the page loads, add a special “#start” fragment tag on the link element. This is an effective way to direct the user’s attention to a specific place on the page.
Supporting the mobile user with navigational aids
Using the hot spot for navigation placement is good for the mobile user, but not always possible in creative site design. The example site introduces a special navigational aid: a mobile navigation tool that can be placed in the hot spot. Clicking on the link opens a supportive navigation list from which the user can quickly navigate elsewhere within the site or within the page.
The tool is implemented with a script written in the JavaScript™ programming language. Currently, the script dynamically scans the document for elements marked with id=”navigation” and fetches the navigation content. The script also creates links for the Heading elements used within the current page. Because the script fetches the content dynamically from the page contents, there is no need for constant upkeep or maintenance of a separate navigation list: the navigation tool is automatically updated as long as the new elements follow the structure used by the script.
The script can be customized to include the necessary elements required by the site design and the designer. Simply examine the script source code and comments within the script for help. Note that the tool should only support normal navigation, not replace it completely. Some users may have switched off the script, in which case the presence of traditional navigation is essential.
The traditional navigation aids are very useful for mobile browsers as well. For example, the traditional “Back to top” text link proves very useful with mobile browsers. Remember to provide alternative text description for important graphic elements, as some users may have turned off images when browsing with a mobile connection.
Using CSS for presentation
The Nokia Web Browser supports CSS. Use CSS to separate the layout and visual appearance from the content and structure provided by HTML.
With the Nokia Web Browser, there are a couple of issues that should be taken into account: the decision where to place the style information and using the media type to tailor presentation format.
Embedded versus external CSS
CSS information can be attached to a Web page using several alternative methods (or a combination of methods):
- External CSS: Style sheet information is stored in an external file, allowing the possibility for several HTML pages to refer to the same style sheet.
- Embedded CSS: Blocks of style sheet information are included in the HTML document itself, in the <head> element before the actual content in the <body> element.
- Inline CSS: Style information is written to individual elements.
Tailoring presentation format
If deemed necessary, it is possible to tailor the presentation of content for the mobile screen. A different CSS can be used for a full-size, desktop display and another for the mobile display. (The next article in this series describes how this can be achieved by using a JavaScript “sniffer” that detects the screen size.)
CSS allows the use of different media types for formatting the content differently, for example, by using the “handheld” attribute. The Nokia Web Browser 3.0 does not support that media type distinction, but it may still be a good idea to label any alternative mobile CSS styles with the media type, because support may be added in later browser versions.
Font size recommendations
Different fonts and typefaces are re-rendered in the browser to use the sans-serif style device font.
For the standard QVGA-size display, the following font sizes are recommended:
- Heading 1: 18px, bold
- Heading 2: 16px, bold
- Heading 3: 14px, bold
- Heading 4: 12px, bold
- Body text: 12px, normal
The choice of font styling can often play an important part of a web design, and to have this control taken away by the browser might at first seem a drawback. However, the twin factors of coping with small screen size, coupled with the usability advantage offered by sans serif screen fonts makes the feature more understandable.
