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 over the next few weeks. Thanks for all your past and future contributions.
Cross-browser web site development guidelines
Ten most important things to keep in mind in the cross-browser development:
- Provide usable content to be obtained easily and fast, pay attention to the mobile site topology.
- 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.
- Use one column layout. Do not limit elements having variable amount of content to any specific height.
- Change CSS dynamically for wider and narrower screens.
- URLs matter! Make important URLs short and use URI/URL Schemes to provide easy way to use information.
- Don't force users to input long text data. Make login less painful by not forcing users to use passwords with special characters.
- 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.
- Use CSS extensions with caution.
- Use fish-eye view design pattern when applicable to hide extra information.
- Use auto-completion to give hints and to help user to type the words which are needed for.
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.
- Cross-browser guidelines (document and the example site)
- Interview with a cross-browser web site developer
- Nokia Mobile Web Templates