The new Nokia Web Browser has a fundamental design philosophy — to deliver a full, desktop-like, Web experience with a mobile browser, without the need for creating and maintaining separate Web sites for desktop units and mobile devices. First introduced with the S60 3rd Edition release, updated versions of the Nokia Web Browser are arriving with each platform release. The new browser will be delivered with all future S60 3rd Edition devices, ensuring that the user base will grow rapidly in the near future.

With the new browser readily available on their devices, users can access the same Web content they would on their desktops, checking the latest news, accessing Web mail, reading their favorite blogs, and checking updates by using RSS feeds. However, the mobile use context must address a number of technical obstacles affecting the browsing experience. The most important considerations are the limited screen size on the mobile device and the latency in the network connection.

While focusing on delivering a desktop-like experience, the Nokia Web Browser includes features specifically designed to help the mobile browsing context. For example, the Page Overview (or MiniMap) feature allows the user to quickly see a complete overview of the entire page. Latency issues are addressed with caching algorithms specifically tailored for mobile use.

The Nokia Web Browser is based on the WebCore and JavaScriptCore open source components, which are also used by Apple's Safari Internet browser. The open source components, such as the KHTML Rendering Engine, are covered by the GNU Lesser General Public License (LGPL). The KHTML engine is developed by the KDE project and is considered faster than the Gecko engine used in the Mozilla and Mozilla Firefox browsers, for example. The browser also includes Symbian components and Nokia proprietary components, such as the Browser Control API, Browser UI, and HTTP filters.

Browser features and standards support

The Nokia Web Browser offers numerous innovations that take the user's experience of browsing the Web with a mobile device to the next level.

For developers designing Web sites, the most important features to consider are:

• True Web Layout: The browser displays Web pages in their original layout, as they would look on a desktop screen.
• Pointer navigation: An arrow pointer enables the user to navigate around a page intuitively, exactly as he or she would when browsing on a desktop computer using a mouse.
• Page Overview: The user is provided with a miniature thumbnail view of the entire Web page to quickly check his or her position on the page.
• Visual History: Navigation history is displayed as graphical thumbnails of all pages visited during the current browsing session. When the user selects a thumbnail image, the selected page is displayed immediately without reloading.
• Landscape mode: On supported devices, the landscape mode can be used to display Web pages, allowing the user to see more of the page horizontally without scrolling.
• Web Feeds: The user can subscribe to RSS feeds from Web sites, blogs, and news services. The feeds are accessible from the Bookmarks view.
• Multiple Windows with Pop-up Blocking: Links can be opened to a new window while browsing, and the navigation history of each window is separate and unique. The user can choose to allow or block pop-up windows while browsing. The total number of simultaneous windows is limited to 5.
• AJAX support: The browser supports Asynchronous JavaScript™ and XML (AJAX) applications, such as Google Maps.
• Customization: The browser can be customized by mobile operators or S60 licensees. Individual users can customize the browser with their own settings.

The Nokia Web Browser is highly compliant with industry standards. The support includes the following specifications:

• HTML 4.01, XHTML 1.0, including image maps, frames, background images, <meta> and <object> tags;
• CSS 1, 2, 3 (partially), including external style sheets;
• DOM 1, 2;
• SVG-Tiny;
• JavaScript 1.5.

The browser supports plug-ins for SVG-T, audio, and video. For more detailed information, refer to the comprehensive feature tables published on the Forum Nokia Web site.

Web developers can get architectural details about the browser, download the SDK, and get access to the S60 WebKit source code at opensource.nokia.com/projects/s60browser.

Page rendering with True Web layout

Unlike earlier mobile browsers, the Nokia Web Browser can render any Web page (HTML, XHTML, WML) and display it on the device, making all Web content accessible to mobile users. The browser displays Web pages in their original form, retaining the page structure and layout as intended by the page designer. The user can intuitively scroll the view and move within the content using the pointer with the navigation key. Users can use the Page Overview to get a high-level view of the entire page and quickly move across the page to the area of interest.

The browser eliminates the need to vertically scroll back and forth through long lines of text by modifying elements containing text. With any column or frame that contains a text flow, the browser wraps the text to fit the maximum screen width on the device. This feature, called Layout Scaling, facilitates intuitive vertical scrolling and makes reading text from the screen easier. Users can also enlarge or shrink image and font sizes according to their preferences.

Browser performance is enhanced by the ability to display page content incrementally as content is downloaded, allowing the user to quickly view page content even before the entire page has been loaded. Upon initial loading of the page content, the browser first renders the page layout immediately without external CSS or script files. The page is quickly scanned for all external objects.

After the initial rendering, the browser performs a second pass of rendering that includes the external CSS and script files. Remaining external objects are included to the displayed page. The browser stores the files to the cache.

The current industry approach is to produce tailored solutions for mobile users (such as Google Mobile or Opera Mini) but the True Web layout approach aims at delivering the familiar desktop-like browsing experience to the mobile context — just as the Web designer intended. The different approaches will be discussed in the next article published in this series.

Latency and caching

In mobile Internet browsing, latency and data transfer speeds are more significant considerations than in the desktop world, except when using WLAN to connect the mobile device. Using device cache in an efficient manner is very important to enhance the browsing experience by speeding up the page-rendering process and keeping latency and the need to transfer data between the network and the client device to a minimum.

The Nokia Web Browser uses two separate caches: the memory (or RAM) cache and a file system cache. Both support all the cache directives specified in the HTTP header. The file system cache size and location on the file system can be configured.

The caching algorithm is optimized to Web content. Items are removed from the cache based on the frequency of use as well as file size. For example, if items A (large file size) and B (small file size) are used equally often, item A will be removed before item B. The caching algorithm gives special weight and priority to CSS and JavaScript files, which in Web use are often reused and heavily impact the time needed to display the complete Web page.

Some guidelines for effective utilization of the browser cache:

• Specify the cache headers. Using E-Tag or Last-Modified will often result in calls to the network server for content updates. Unnecessary server connections can be avoided with a simple expiration header.
• Reuse CSS, images, and script files. Reference the same files in subsequent files to reuse the same downloaded file and keep the file in the cache.
• Remember that the device cache is limited and how the caching algorithms work. Do not solely rely on certain files from your site, such as large images, to be in the device cache for the entire duration of the browsing session — it is possible that the mobile browser will have to reload them after they have expired from the cache.

Article series on mobile browsing

During the next few months, Forum Nokia will publish a series of articles related to the Nokia Web Browser, mobile browsing in general, and Web development issues that take users using mobile browsers into consideration. The series will include guidelines and recommendations, as well as best practices, and will be supplemented with simple, practical design and code examples that can be used as templates.

The goal of the series is to help developers see what kinds of issues to consider as their audience begins to use more and more mobile clients to access Web content. Some modifications may be small and easy to implement on top of the existing site design, while others may require more extensive work. At the end of the day, the “one-site-for-all” approach, where there is no need for completely separate mobile and desktop sites, will prove to be very effective for developers and intuitive for users.

The series of articles will cover the following subjects:

• Discovering the Nokia Web Browser
• Basic layout example
• CSS techniques for mobile design
• Useful code snippets
• Embedded media