Forum Nokia
Nokia Connecting People

Login Register

 

Home: Resources: Technologies: Browsing: Web design checklist

Web design checklist



The Web Browser for S60 makes mobile browsing feel more like the desktop browsing experience than ever before. The question is no longer "What's possible?" but rather "How can it be even better?"

The browser engine does a great job of interpreting and adapting text content to fit the small screen, but the user experience can be greatly enhanced when Web designers remember a few basic points. The most important of all is to carefully control the overall page size. What's OK for broadband isn't good for mobile networks. Slimming down your code and embedded media will benefit all of your site visitors — and it usually makes for easier site maintenance, too.

Keep these tips in mind when designing content for mobile browsing

Always use simple, efficient markup. Remove white space from code. Close all tags.
Validate code. This is a very useful practice, not necessarily because of a need to check a hard-and-fast specification, but because it often can improve a page by eliminating general code issues.
Avoid frames. Inline frames (IFrames) might be all right, but pay attention to size and scrolling issues.
For images, always include the sizes in markup and descriptive alt tags. Do not use image maps. Control image sizes, and do not slice images. Multiple file requests are often more problematic than single files because of network latency issues.
Size images correctly in a photo editor.
Try not to rely on complex or dynamic effects, particularly for navigation elements.
Avoid using image rollovers for navigation.
Cache a single external Cascading Style Sheets (CSS) file that you might reuse for larger sites, but remember that "one-off" instances of inline styling are generally quicker.
Consider other options carefully before using dynamic effects based on CSS or JavaScript™ technology.
Test early on the target device and platform, but put an alternative strategy in place should you encounter rendering problems.
Do not change the default text-link colors unless there is a compelling reason to do so. Mobile interface design should place a priority on legibility. The default blue (link) and purple (visited link) colors help users quickly recognize page elements.
In terms of logo position and size, most sites now have a default top-left position for logos, as well as for the search function. When these elements are properly sized, the design will look good on both PCs and mobile devices, without requiring extra work.
Position login- and password-entry fields on the left side of the page.
Reuse logos and images where possible, and use the percentage style parameter to resize as needed.
Construct pop-up balloons and triggers that fit on the screen of the Web Browser for S60.

This list is not exhaustive, so please read the additional guidelines and articles on the Forum Nokia Web site. Remember: The quality of the mobile browsing experience depends on the quality and usability of the content.

Shortcut key function in the browser

0 Launches the Browser from the Idle Screen and displays the home page. If no home page is defined, the Bookmarks List is displayed.

1 Displays the Bookmarks List
S60 3rd Edition Feature Pack 1: Web Browser Product Description | 52 Version 1.0 | December 21, 2006

Shortcut key Function
2 Searches the text on the current page
3 Navigates to the previously viewed page
5 Shows all open windows
8 Toggles the Page Overview image on and off
9 Opens the Go to Address dialog box
* Zooms the page in, making text and images larger
# Zooms the page out, making text and images smaller
C Closes the current window if more than one window is open

Learn how to
download applications

java symbian_os s60 maemo c++

Community highlights

Blog entry of the week

Open Source FLV Player for Symbian!

Champion of the month

Mika Raento
Read more about
Mika on the
Champions web site.

Newsletter sign up

Privacy policy   Archives

Press

Events

Forum Nokia feed

  • Latest devices
  • Latest documents
  • Latest tools
  • Latest blog entries

Terms & Conditions | Privacy policy | Site map | Developer feedback | © Nokia 2008


RDF Facets:


qdcZcoverageQUxhttpE3AE2FE2FforumE2EnokiaE2EcomE2FX
qdcZtypeQUqfnZE45E78cludedFromGeneralE4CistingsQ
qdcZtypeQUqfnTypeZE52esourceQ
qdcZtypeQUqfnTypeZWebpageQ
qdcZtypeQUqmarsZManagedE52esourceQ
qdcZtypeQUqwebZInformationE52esourceQ
qdcZtypeQUqwebZPageQ
qdcZtypeQUqrdfsZE52esourceQ
qfnZdistributionQUxhttpE3AE2FE2FforumE2EnokiaE2EcomE2FX
qfnZtypeQUqfnTypeZE52esourceQ
qfnZtypeQUqfnTypeZWebpageQ
qfnZtypeQUqmarsZManagedE52esourceQ
qfnZtypeQUqwebZInformationE52esourceQ
qfnZtypeQUqwebZPageQ
qfnZtypeQUqrdfsZE52esourceQ
qmarsZlanguageQUxhttpE3AE2FE2FswE2EnokiaE2EcomE2FlanguageE2D1E2FenX
qrdfZtypeQUqfnZE45E78cludedFromGeneralE4CistingsQ
qrdfZtypeQUqfnTypeZE52esourceQ
qrdfZtypeQUqfnTypeZWebpageQ
qrdfZtypeQUqmarsZManagedE52esourceQ
qrdfZtypeQUqwebZInformationE52esourceQ
qrdfZtypeQUqwebZPageQ
qrdfZtypeQUqrdfsZE52esourceQ