When designing a Web browser for a handheld device, one of the most important problems to be solved is finding means to allow users to efficiently view and navigate Web pages, most of which have been authored for large, desktop-size, screens. Unlike the current “state of the art” approaches, which reformat the entire Web page into one long column, thereby eliminating the need for horizontal scrolling, our solution aims to preserve the original look and feel of the page. We have developed a method called Mini Map comprising a set of modifications to the browser’s visual formatting model as well as a set of user interface controls that let the user recognize the structure of the Web page and quickly navigate to the interesting content.

The paper briefly explains the general architecture of the browser, followed by an in-depth description of the Mini Map’s main features: the page miniature, the visual history, the visual formatting modifications and the text search. The “page miniature” is a scaled-down representation of the Web page and is rendered translucently over the top-right corner of the browser viewport. The page miniature is displayed automatically only when the user starts scrolling continuously (i.e. keeps the device joystick tilted) and uses a red rectangular frame to mark the current viewport position within the document. The “visual history” is a horizontal list of page miniatures that can be used to instantly navigate to any previously visited document. The modifications to the visual formatting model are twofold. Firstly, when the screen resolution is below a certain threshold, the page is formatted so that the text appears larger relative to the rest of the visual contents. Secondly, the width of the text runs is limited to the width of the viewport (effectively eliminating the need for horizontal scrolling when reading text paragraphs). Finally, we provide an advanced “text search” function that automatically scrolls the document to the occurrences of the provided keywords.

To test these usability improvements, we needed an HTML rendering engine that had very good Web site compatibility and low enough memory footprint for running in a constraint environment, such as a mobile phone. Our method is implemented in a new Web browser for Nokia S60 smartphones. This browser uses the WebCore and JavaScriptCore components of Apple’s Safari, which are based, in turn, on KDE’s KHTML and KJS libraries respectively.

WebCore is an Open Source, cross-platform library that contains the functionality required to parse, format and render HTML documents. JavaScriptCore is an Open Source, cross-platform JavaScript engine. These two components have been extensively tested and improved over time and, combined with their rather low memory requirements, made a very good choice for our needs. A separate library, called WebKit, contains S60 platform dependent functionality such as image decoding and resource loading over Symbian OS’s HTTP stack.

The user tests that we have conducted conclusively show that Mini Map is a much better visualization method for mobile phones than the current state of the art.