While web pages can be designed to perform quite well on a wide range of devices, additional device- or browser-specific optimisation may be required to fine-tune the design or functionality. This is typically accomplished via server-side or client-side device detection.
Common approaches to device detection include:
- Detecting known device properties using a device information database. Popular device information databases include WURFL and DeviceAtlas.
- Detecting the browser, device platform, or other properties via the user agent (UA) string. An example of this type of optimisation can be found in these templates.
- CSS media queries can also be implemented to detect device properties such as screen size and adapt the CSS accordingly. An example of this type of optimisation can be found in these templates.
For more information regarding device detection and optimisation, see Device Detection in the Nokia Web Developer's Library and Lightweight Device Detection using PHP on mobiForge.
The Nokia Mobile Web Templates include several forms of client-side device detection and a series of alternate style sheets. Here's how they work:
User agent string detection
As each page loads, portions of the device UA string are detected and used to specify an alternate style sheet. The templates currently include style sheets for the Series 40 WebKit and Maemo browsers.
These are located in 'resources/styles/tweaks' and already include minor adaptations for each device grouping.
- The font size has been decreased in the Series 40 WebKit style sheet.
- The Maemo style sheet uses the -moz-border-radius property to add rounded corners on navigation bars, boxes, and toggle switches. Note that the user of vendor-specific properties such as –moz-border-radius will cause W3C CSS validation to fail.
These style sheets can also be used to experiment with design changes on particular devices without the need for a full server-side solution. Additional style sheets can be added as needed, and implemented by adding small amounts of JavaScript to each template page. See Default scripts for more information.
Tip: Be sure not to load empty or unnecessary style sheets, because each file request will result in an HTTP request. This not only consumes data, but can also affect battery life.
Media queries
An example of media query adaptation can be found within the Grid component, in the main style sheet. In this example, the media query detects the device screen size, and adjusts the padding and margins of the component to better suit larger devices. See Grid component for details.
