Nokia Web Browser Design Guide - Article 4
Article 1 | Article 2 | Article 3 | Article 4 | Article 5 |
Site layout design
This article is the fourth issue in a series of articles related to the Nokia Web Browser and Web development that takes mobile browsing into account in site design. This article examines issues regarding site layout design and some effective tips that reduce effort from the mobile user.
This article is accompanied with an example Web site to illustrate and supplement the information presented in the article and to provide code examples. View the Web site side by side with a normal desktop browser and the Nokia Web Browser on your mobile device. You are free to use any pieces of code to develop your own site.
Detecting the mobile browser
The Nokia Web Browser renders Web pages in their full layout and utilizes a MiniMap feature for efficient use of a large Web page. However, sometimes it may necessary or feasible to recognize that the user is using a mobile browser. This information can be used for various purposes, for example:
- Providing an alternative CSS stylesheet (for an alternative layout or text sizes, for example)
- Omitting elements or objects from the page shown on the mobile browser
- Providing an alternative navigation
- Offering lighter versions of graphics to reduce download speeds
On the example site (section Article 4), the layout of the page has been optimized to support simple vertical scrolling when accessing with a mobile browser. The user is notified of the alternative layout and a control to switch to the full layout is provided. On the example site, the functionality is implemented with JavaScript objects (screen.width, screen.height) that detect if the user is using a QVGA-sized browser. After the detection, the browser is instructed to use an alternative CSS stylesheet.
Upon initial page loading, the page uses the getScreenSize function to check the display size on the mobile device:
if(getScreenSize(240, 320)) {
generateMobinav();
setActiveStyleSheet('Mobile');
}
If the mobile display size corresponds to the setting (in this case, QVGA), the page generates the additional navigational tool (function generateMobinav) and automatically switches the page to use the Mobile stylesheet. The function below loads the alternative stylesheet (note that the name of the stylesheet is used as an argument and originates from the function call).
/* =v==== STYLESHEET SWITCHER =====v= */
function setActiveStyleSheet(title) {
if(document.getElementsByTagName) {
var i, a, main;
for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
if(a.getAttribute("rel").indexOf("style") != -1 &&
a.getAttribute("title")) {
a.disabled = true;
if(a.getAttribute("title") == title) a.disabled = false;
}
}
}
return false;
}
After this, the alternative stylesheet declared in the HTML page is used:
<link rel="alternate stylesheet" href="styles/mobile.css" type="text/css" media="all" title="Mobile">
Note that if you decide to use an alternative layout for the mobile browser, let the user know it and provide them with the possibility to switch to the full version.
Two-column layouts
Many Web sites utilize a two- or three-column layout for presenting the contents. When using several columns, remember that on the Nokia Web Browser wraps text elements for the maximum available screen width, in order to better facilitate vertical scrolling.
An example of a two-column layout is presented on the example site for this article. An example featuring a three-column layout is presented in the following article. Note that using a multi-column layout on a small display can be challenging. Consider what kind of content you want to place on the left-side column: remember that the mobile user first sees the upper left corner of the page, and the initial view should include both a visual clue of the navigation as well as a first glimpse of the most relevant content.
Tips for making mobile browsing efficient
When considering the mobile user and the use context, viewing and using Web pages should be as efficient as possible. In an optimal case, only the absolutely necessary information is presented and the need for user input is minimized.
Some useful tips for efficient design are presented below. For practical examples, refer to the example site and the source code.
- Expanding content areas: allow the user to browse through the content and read what he or she is really interested in.
- Efficient forms: dynamic drop-down menus with pre-selected alternatives reduce the need for user input.
- Cookies: re-use inforrmation that is already entered by the user; do not make the user enter the same information over and over again.
- Shortcuts: Provide shortcuts, such as a Back to top –link, for the user.
