Customizing Mobile Web Templates for Low-End devices
This article shows guidelines and some examples of customization for Mobile Web Templates for Low-End Devices.
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.
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
Each section starts listing the CSS selectors related to the styling of that specific part.
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
- 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
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.
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
- margins and paddings
Footer usually contains information about the website, its creator, credits and possible links to related websites.
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)
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).
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.
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.
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.
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.
Other content elements
Apart from the main elements seen above, a set of other content elements (classes and ids) are defined in order to display and separate content in a meaningful and good-looking manner.
body img.captioned-image body p.caption-image
This element is useful to display images with an associated caption. In the customization, a container element is added in order to separate the image from the rest of content.
body div.box p.box-text body div.header-box p body div.header-box h3
Some container boxes are defined in order to separate some portions of content from the rest of the page. It is so useful to display small amounts of data, with a particular relevance (e.g.: a quote, a snippet).
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.