Please note that as of October 24, 2014, the Nokia Developer Wiki will no longer be accepting user contributions, including new entries, edits and comments, as we begin transitioning to our new home, in the Windows Phone Development Wiki. We plan to move over the majority of the existing entries. Thanks for all your past and future contributions.

Cross-browser web site development guidelines

From Wiki
Jump to: navigation, search
Article Metadata
Tested with
Devices(s): Nokia N900, Apple iPhone 3G, HTC Android Dev Phone, Nokia N97, Nokia N97 Mini, Nokia X6, and Nokia 5800 XpressMusic touch devices, Nokia N79
Created: tasala (29 Apr 2010)
Last edited: hamishwillee (27 Sep 2012)
Cross-browser development doesn't have to be painful. When starting mobile web page development, it’s good to keep eyes open for possibilities and volumes and target at multiple platforms and devices. While optimizing the web pages with great user experience for Nokia devices based on Symbian OS, you can easily serve the same content for Maemo, iPhone and Android device too, for example.

Ten most important things to keep in mind in the cross-browser development:

  1. Provide usable content to be obtained easily and fast, pay attention to the mobile site topology.
  2. Pay attention to loading times. Compress, combine and cache data. Understand what should be cached and what should not. Use lazy loading and show the initial view by using only minimal amount of information, if the size of the page is large.
  3. Use one column layout. Do not limit elements having variable amount of content to any specific height.
  4. Change CSS dynamically for wider and narrower screens.
  5. URLs matter! Make important URLs short and use URI/URL Schemes to provide easy way to use information.
  6. Don't force users to input long text data. Make login less painful by not forcing users to use passwords with special characters.
  7. Be satisfied with the fonts which are available, don't count on having specific fonts available. If special fonts are wanted, they should be provided as images instead.
  8. Use CSS extensions with caution.
  9. Use fish-eye view design pattern when applicable to hide extra information.
  10. Use auto-completion to give hints and to help user to type the words which are needed for.

Pic1.JPG Pic2.JPG Pic3.JPG Pic4.JPG
Figure: It is easy to create impressive cross-compatible mobile web content without losing simplicity of implementation, by knowing the tricks. Nokia Mobile Web Templates will make the web site development and testing even easier and faster.

Nokia Developer offers Cross-browser guidelines document, which provides straightforward best practices to get started with web page development. In addition, the document points out great tips on website designing for mobile devices, such as network latency issues and progressive information download concepts (for example, breaking down pages into smaller pieces) that can greatly improve the user experience on mobile devices. The document provides an overview of how to design websites and optimize them for Maemo, iPhone, Android, and a variety of touch and non-touch devices based on Symbian OS.

The mobile devices used in developing these guidelines were:

  • Nokia N900
  • Apple iPhone 3G
  • HTC Android Dev Phone
  • Nokia N97, Nokia N97 Mini, Nokia X6, and Nokia 5800 XpressMusic touch devices
  • Nokia N79

The cross-browser guidelines document is accompanied by an example cross-browser website, where each page demonstrates one aspect of mobile web design. The example site was created using the Nokia Mobile Web Templates. Specifically, the following is demonstrated on the example site: navigation and the first page of the site, changing Cascading Style Sheets (CSS), CSS extensions having cross-browser counterparts, text and fonts, fish-eye view, auto-complete, and URL/URI schemes.

After reading the document, you should have the basic knowledge to start developing mobile web pages that provide cross-browser-compatible content in a user-friendly manner. Furthermore, with the provided tips and advice, you can avoid making design choices that could eventually lead to a dead end or poor design, thus saving time in implementing and debugging unusable features.

Useful links

Mobile Web Templates

This page was last modified on 27 September 2012, at 04:52.
47 page views in the last 30 days.