Layout Samples for Mobile Web Templates for High-end Devices

Overview | Corporate Layout | News Layout | Online Store Layout

This article introduces a series of layouts created using components from the Nokia Mobile Web Template for High-end devices. The layouts illustrate common ways to combine components within the context of a corporate website, a news website, and an online store.

Overview

Three sets of layouts are included:

1. Layouts presenting common areas of a corporate website, including a product and contact page.
2. Layouts representing common areas of a news site, including individual news articles and a search results page.
3. Layouts illustrating common aspects of an online store, including product listings and a shopping cart.

All layouts are created using components from the Nokia Mobile Web Templates for High-end Devices and are suitable for the following device families:

• S60 5th Edition (touch)
• S60 3rd Edition (non-touch)
• Series 40 6th Edition ((WebKit™ devices only))
• Maemo™ devices

Note: The layouts are also compatible with Opera Mini 4 due to its improved JavaScript™ and Cascading Style Sheets (CSS) support.

Note: Differences in rendering of form and table elements may occur across devices.

Note: While specifically optimised for Nokia devices, these layouts are also compatible with many other similar devices.

What is included

Each layout folder follows the basic directory and file structure established in the high end Nokia Mobile Web Templates, along with the following additions:

CSS and assets

Each set of layouts includes new Cascading Style Sheets (CSS) styles, which adapt the original components to suit the site’s individual content needs. The new styles can be found in baseStyles.css and are labelled as follows:

• /* LAYOUT SPECIFIC */
  These adaptations of existing styles are located throughout the style sheet and can be found below each original style declaration.
• /* GENERAL LAYOUT SPECIFIC STYLES */
  These are new stand-alone styles, grouped at the bottom of the style sheet, and primarily provide additional structural definition to the layout.

Additional style revisions for non-touch devices can also be found in the tweaks folder. These styles further adapt components for use on devices with 240- by 320-pixel displays.

Important: Please see the Nokia Mobile Web Templates for High-end Devices documentation for in-depth component, style, script, and directory structure specifications.

HTML

The layouts are designed to illustrate common ways to combine components and are not meant to illustrate a complete website.

For this reason, the HTML markup contains only placeholder images and hyperlinks. The following links can, however, be used when browsing to return to each layout’s menu page:

• The ‘home’ hyperlink located within the breadcrumbs at the top of each page;
• The ‘home’ component located at the bottom of each page.

Optimisation for non-touch devices

The examples provided in this article primarily reflect touch-optimised layouts. Additional notes have been provided in cases where optimisation for non-touch devices has resulted in a content or layout modification.

Design approach

Common areas

All layouts share the following common structural layout areas.

1. Branding: Located at the top of each page, this area includes the site’s logo and an optional tagline. Clicking this area brings the user back to the site’s home page.
2. Breadcrumbs: These links provide way-finding navigation and are found on all pages except the home page.
3. Back to top: These lightweight components are used throughout longer pages and can also be useful at the bottom of each page.
4. Primary navigation: Found at the top and bottom of many pages within the corporate layout, these links are most useful when a navigation list is short.
5. Home: Located at the bottom of each view, this component allows users to return to the website’s home page.
6. Footer links: These links vary from site to site, but typically include help, contact, and other destinations of a more administrative nature.

Common layout elements

All layouts also share the following common layout elements.

Search: Provides a search field and optional search filter menu. The menu should default to ‘all’ to ensure that users who don’t require this functionality do not unknowingly filter their search.

Store locator: Enables users to search for a store within a given country. A prepopulated country menu is provided to reduce the amount of typing involved.

Send to mobile: Enables users to request a short message service (SMS) message, including a link to the article (or product) they are currently viewing. Note: Features such as this should always be implemented with care, due to the cost involved in sending (and in certain markets receiving) an SMS. Alternatively, allowing the user to send or receive the link by email could prove a good low-cost alternative.

Corporate Layout »

Overview | Corporate Layout | News Layout | Online Store Layout

Rate This