Customizing Mobile Web Templates for Low-End devices

From Forum Nokia Wiki

This article shows guidelines and some examples of customization for Mobile Web Templates for Low-End Devices.

Introduction

The Mobile Web Templates for Low-End devices are a set of HTML, CSS and image resources that can be used to create or adapt a web-site in order to display in an appropriate manner on low-end mobile devices' browsers.

They are composed of 2 main CSS files, and some HTML pages that show the look-and-feel of various HTML elements. The CSS files are:

reset-low.css: this stylesheet contains some basic CSS rules, that "reset" and prepare the HTML documents to be appropriately styled. This should be not modified when customizing the template.
baseStyles-low.css: this stylesheet contains the actual CSS rules that perform the styling and customization of the HTML pages. In order to modify and customize the template, it is then necessary to act on this stylesheet.

Customization

The following sections list the template elements and their customization options showing, for some of them, a customization example. The style used for the customization examples is based on a black/white-based palette.

The baseStyles-low.css stylesheet is divided into sections, with comments that separate and clarify the purpose of each CSS element, and allow to easily identify the elements to be customized. The section names will be used in the following sections to quickly refer to CSS portions. As an example, the following snippet shown the CSS section related to links:

/*
 * LINK STATES
 * 
 */
a:link {
	color:#ccccff;
}
 
a:visited {
	color:#9999ff;
}
...

Each section starts listing the CSS selectors related to the styling of that specific part.

Guidelines

These templates are especially suited for low-end devices, that are not guaranteed to support advanced CSS styling. So, when customizing these specific templates, some basic rules should be followed. Applicable styling actions include:

background colors
text color
borders
padding and margin

Other CSS customizations should be carefully avoided, or appropriately tested on all devices intended to be supported, including:

background images
custom list bullets
floating elements
overflow (e.g.: hidden, auto)

Also, due to the different capabilities and display resolutions, absolute positioning should be always avoided, to prevent undesirable effects or bad-looking layouts.

Basic CSS rules

body
body div#wrap (should not be modified)
body p
strong
em

Some basic styling can be performed by acting on the DEFAULT STYLES CSS section. Possible customizations can be performed on:

page's background color
text color
font weight

What should/can not be customized include:

the font family: S60 browser, and more generally mobile browsers, support only a limited set of font families. For S60 browser, the only supported font family is S60 Sans, designed by Monotype. More information is available on Form Nokia Wiki: S60 Browser Font Support.
the width: html and body width should always be equal to 100%, in order to keep all the available space for displaying content

Header

body div#header

The HEADER CSS section contains the rules for the top-most part of every web page. The following example shows a simple header customization, that modifies borders, spacing and colors.

Footer

body div#footer
body div#footer ul
body div#footer ul li
body div#footer p

The FOOTER CSS sections contains all the rules for the bottom part of the template, including:

background color
text color
borders
margins and paddings

Footer usually contains information about the website, its creator, credits and possible links to related websites.

Links

a:link
a:visited
a:hover
a:active

Link colors and styling are defined in the LINK STATES CSS section. When it comes to links, color and style are important points, for the following reasons:

users must be able to quickly identify links, without loosing time searching for them
both color and style of links should be different than the ones used for plain text, also because of users that could be able to identify only 1 kind of difference (e.g.: daltonic users)
users should be able to quickly identify the different kind of links, especially the already visited ones (e.g.: by using a different color)

Headers

body h1
body h2
body h3
body h4
body h5
body h6

Header tags (e.g.: h1, h2, h3, ...) are defined by CSS rules contained in the HEADERS section. Headers have an important semantic meaning, since they define the topic/subject of the related page portion. So, their style should reflect this importance, with appropriate style, color and spacing (margin and padding).

Forms

body fieldset
body form
body form label
body input[type='text']
body textarea
body form input[type='radio'], body form input[type='checkbox']
body select
body input[type='button']

Forms should allow for easy user inputs, and it is so important to reserve an appropriate space for users to input and read information contained within form fields. The following example shows a customization of the form CSS rules, reserving more horizontal space and using bigger fonts for text fields and labels.

Lists

ol, ul
ol ol, ul ul
dd
body ul

The CSS rules defined for lists, both ordered and unordered ones, are contained in the CSS LISTS section. Styling for lists and list-elements is rather simplified, since no custom list bullets can and should be used for low-end devices. So, possible customizations include margin, padding and colors.

A possible customization is visible below.

Tables

body table
body td
body td.table-header
body tr
body table td
body table td.odd
body caption

Tables are HTML elements commonly found in mobile websites, for different reasons. Apart from displaying tabular data (that is the correct way to use them), tables are often used to create layouts, where advanced styling (like floating elements) are not fully supported. Anyway, this greatly impacts on usability and accessibility of mobile web pages, and this kind of usage should be always avoided.

Tables are typically composed by a header's row, and by rows of tabular data. The template for low-end devices provides alternate CSS styling for table rows, so creating a nice visual effect. The following picture shown a possible customization, with a few more margins and different colors, of the table CSS rules.

BreadCrumbs

body ul.breadcrumbs
body ul.breadcrumbs li

BreadCrumbs are represented by links providing way-finding navigation, and usually appear on the top part of every page. They're usually represented by a list with in-line elements, and with no item bullet.

Conclusions

This article shows some customization examples applied to the Mobile Web Templates for Low-End devices. More advanced customization can be performed, always keeping in mind the limited capabilities of low-end devices.

The proposed customization is visible here: Mobile Web Templates customization example.

Community: Wiki