×
Namespaces

Variants
Actions

Mobilizing Website Using Nokia Mobile Web Templates

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


Contents

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.
52 page views in the last 30 days.
×