Customizing Mobile Web Templates for Multiple range of Devices

From Forum Nokia Wiki

Introduction

Mobile phones are available in a very wide range of screen display sizes. Developing for such a wide range of devices can be too complex and time consuming. The article discusses some effective design strategies to develop mobile web content for targeting a diverse range of mobile handsets.

Choosing Target Devices Group

Depending upon the requirement of the application/website, there can be a range of devices which has to be considered. If the content is specific to a particular device less customization is required. However if the target group is wide, more customization might be the need.

A good solution is to group the target devices into two or three groups depending upon their specifications such as screen sizes, support for JavaScript, etc.

Developing Default Reference Design

After grouping the target devices, we can choose a default design which will be the most suitable content for most of the devices without major modifications. This design will eventually serve as a reference design to create content for other groups. The reference design should be flexible enough to adapt for smaller screens and also provide good UI for wide screen devices.

The reference design can then be easily adapted to other groups. Following screen-shots show the example.

High End Layout as Reference Design

Reference design

Adapt content to Mid range and Low-End device Layout from Reference Design

Mid range device design layout

Low End device design layout

Designing Flexible Content

After developing the reference design, it can be now easily customized for other target groups. Some general mobile web design guidelines should be followed for this. Such as

Separate style sheets should be used for each target device group to adapt page elements to different device screen sizes.
Images should be resized for different target groups to ensure page layout is displayed properly according to device screen.
Webpage elements such as logo, headers, tables, etc should be flexible to be stretched to full page width.
Using CSS background colours and tiled images to style layout and content elements.
Specifying the size of layout elements using percentages so that they naturally expand and contract to fit page width.

Another aspect is to choose content for a webpage according to the device. For example a slideshow component should not be placed in a webpage intended for Low-End devices. The amount of text should also be considered according to target group.

Check Design

Finally, it's all about striking a balance between the creation of a well optimized, fast-loading site and the delivery of great, targeted content to end users. There are many on-line tools available to check for design problems in a mobile optimized website. These provided detailed problem analysis and solutions.

Reference Links

Community: Wiki