Layout Samples for the Mobile Web Templates for Mid-Range Devices

Overview | Corporate Layout | News Layout | Online Store Layout

This article introduces a series of layouts created using styles and components from the Nokia Mobile Web Templates for Mid-Range 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 products and contacts 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 Mid-Range Devices and are suitable for the following device families:

• Series 40 3rd Edition, initial release
• Series 40 3rd Edition, Feature Pack 1 (for example, Nokia 6131 and Nokia 6233 devices)
• Series 40 3rd Edition, FP2 (for example, Nokia 5300 and Nokia 7373 devices)
• Series 40 5th Edition Lite
• Series 40 5th Edition, FP1 (for example, Nokia 5310 XpressMusic, Nokia 6500 classic, Nokia 6600 fold, and Nokia 7900 Prism devices)
• Series 40 5th Edition, FP1 Lite (for example, Nokia 5000 device)
• Series 40 6th Edition, non-WebKit devices

Note: The devices outlined above span a wide range of screen sizes and specifications. Differences in the rendering of forms, tables, list elements, and fonts can be expected among these devices.

What is included

Each layout folder follows the basic directory and file structure established in the Nokia Mobile Web Templates for Mid-Range Devices, along with the following additions:

New Cascading Style Sheets (CSS) and assets

Each layout folder follows the basic directory and file structure established in the Nokia Mobile Web Templates for Mid-Range Devices, along with the following additions:

New Cascading Style Sheets (CSS) and assets
Each set of layouts includes new CSS styles that adapt the original components to suit the site’s individual content needs. These new styles can be found in baseStyles-mid.css and are labelled in the following way:

• /* 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 new stand-alone styles are grouped at the bottom of the style sheet and primarily provide additional structural definition to the layout.

New graphics specific to the layout are located in the resources/images/layout folders.

Important: Please see the documentation accompanying the Nokia Mobile Web Templates for Mid-Range Devices for in-depth component, style, markup, 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 each layout’s menu page:

• The Home hyperlink located within the breadcrumbs at the top of most pages;
• The Home component located at the bottom of each page.

Design approach

Common areas

All layouts share the following common structural layout areas.

1. Branding: Found at the top of each page, this area includes the site’s logo.
2. Breadcrumbs: These links provide way-finding navigation and occur 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: Found at the bottom of each view, this component enables 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: This element 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.

Quick navigation: These elements replace the (horizontal or vertical) primary navigation menus commonly found on websites formatted for the desktop.

Drill-down links: These links enable users to drill down further into the site to reveal key content or functionality.

Corporate Layout »

Overview | Corporate Layout | News Layout | Online Store Layout

Rate This