Mobilizing Website Using Nokia Mobile Web Templates

From Nokia Developer Wiki
Jump to: navigation, search
Article Metadata
Created: ck.umraliya (22 Oct 2009)
Last edited: hamishwillee (20 Aug 2013)


Introduction To Templates

The article shows how Nokia Mobile Web Templates can be easily customized to create high quality mobile website. The Nokia Mobile Web Templates provide a wide range of mobile web components which can be fully customized to create a mobile website or a WRT widget application.

Detailed information about the templates is available at...

Detecting Client Device

Although web pages can be designed to perform well on a wide range of devices, some device specific customization is many times required to provide high quality user experience. Detecting the client device provides facility for developers that best suited content for that device is made available.

Some of the methods available to implement this task are:

  • User Agent string: Detecting the browser, device type or other device properties using the user agent (UA) string.
  • User Agent Profile (UAProf): Detecting screen size, multimedia capabilities and character sets using the user agent profile(UAProf).
  • Device Information Database: Detect from a large number of cataloged device properties. Popular device-information databases include WURFL and DeviceAtlas.

Implementation of these methods are described in detail at Detecting Mobile Devices on Web Services

Customizing Nokia Mobile Web Templates

The Nokia Mobile Web Templates offers a range of Web Components to create various types of web pages.

  • Branding and marketing
  • Lists
  • Navigation Bars
  • Buttons
  • Forms
  • Tables
  • Containers Box
  • Rating Utility Component
  • Toggle-Switch
  • Slideshow
  • Breadcrumbs
  • Grid
  • Definition List
  • Advertisement, etc.

A detailed description of all components along with usage guidelines are available at Nokia Mobile Web Templates - Components guide

Example Site

The following example shows the use of Nokia Mobile Web Templates in developing a mobile site for an Science Park for High-End Devices. Various components of Nokia Mobile Web Templates have been used here to implement various tasks for the purpose of the website.

The use of various components of templates is described below.

Home Page

The homepage is designed using Touch Version of Corporate Layout Samples of Nokia Mobile Web Templates for High-end Devices. Following image shows the components customized in the page.

Home Page

Visitor Information Page

Visitor Information Page

Places Page

Places Page

Photo Gallery

Image Slideshow

Image Grid

Contact Page

Contact Page

Download Links

Reference Links

This page was last modified on 20 August 2013, at 09:18.
40 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.


Thank you!

We appreciate your feedback.