Browse the Web

Browse the Web

Mobile browsers allow users to interact with WML and HTML web sites from their phones. In this hack, I'll cover the basics of the mobile Web and look at several popular browsers available on Nokia phones.

The web browser is one of the first applications that became available on smart mobile phones. Today, almost all Nokia mobile phones on the market have integrated web browsers.

However, after years of development, browsing the Web on a smartphone is still difficult for many users. The small screen size, slow and unreliable networks, limited content, and expensive data plans resulted in poor customer experiences and hindered the adoption of the mobile Web. In the past several years, much progress has been made on mobile browsers to improve users' experiences. In this hack, I'll discuss the landscape of the mobile Web, and how to leverage new browser technologies on your Nokia phone to browse the Web like a pro!

Why So Many Mobile Browsers?

On the desktop, the web browser is, at least at its core, a relatively simple application. It parses and renders Internet pages written in Hyper Text Markup Language (HTML). On a mobile phone, however, web browsers need to handle web pages written in a variety of markup languages. Web browsers on Nokia devices support three types of markup languages: HTML, WML (Wireless Markup Language), and XHTML MP (XML HTML Mobile Profile). A more detailed description of these languages is available in "Create a Mobile Web Site" [Hack #53]. In this hack, I'll introduce them from the phone user's perspective.

HTML

HTML is the Internet standard for authoring web pages. HTML browsers have access to the widest range of online content. However, HTML is also considered too heavyweight for mobile phones. Most HTML pages are not designed for small screens and require special browser rendering tricks to make them fit into the phone screen.

WML

WML is a simple web pageauthoring language specially designed for phones. It supports a limited set of presentation elements suitable for most mobile phones. Hence, WML pages are small in size and quick to render. However, WML's presentation capability is inadequate for high-end devices, such as Nokia Series 60 devices. A large number of WML web sites exist for mobile phones.

XHTML MP

XHTML MP is a subset of XHTML, which is the well-formed XML version of HTML. The benefits of well-formed XML documents are that they are easy to parse and are less error prone. The presentation capability of XHTML MP is between that of HTML and WML. As XHTML is being adopted to replace HTML, XHTML MP browsers could access content authored for both phones and desktop computers.

Read on to find out how popular web browsers on Nokia phones support these content types.

The Nokia Browser

Nokia phones ship with a default web browser, called Services. It is available from the Main menu on both Series 40 and Series 60 devices. This is a WML and XHTML MP browser. For older Series 40 devices, the Services browser might support only WML. Refer to the product specification and manual on the Nokia web site to find out exactly which markup languages your browser supports. The key benefit of using the built-in Services browser is that it is tightly integrated with the phone. For example, you can download and upload files from the phone's local storage [Hack #53], install Java applications Over The Air (OTA) [Hack #16], and make phone calls directly from a web page via special links [Hack #54].

On a Series 60 device, the browser displays the Bookmarks page when you launch it. It is loaded with default bookmarks from Nokia and your wireless operator. You can delete any of them, or add your own, via the Options menu. You also can organize the bookmarks into folders.

You have to click a bookmark to be connected to the data network. Once you are connected, the Options menu offers several more choices, such as manually loading from arbitrary URLs or disconnecting from the network. Figure shows how to use the Services browser to connect to Yahoo!'s mobile home page.

You can enter a new URL in the Series 60 Services browser in two ways. You can add a new bookmark and then click it. Or you can load any existing bookmark to connect to the network, and then use the Options Go to menu to load a new URL.

On a Series 40 device, the Services browser displays a set of menus upon startup. From there, you can manage the bookmarks, adjust the settings, or load arbitrary URLs. Figure shows Yahoo!'s WML page loaded in the Series 40 Services browser.

Yahoo!'s mobile home page displayed on a Series 60 device's Services browser

Yahoo!'s mobile home page displayed on a Series 40 device's Services browser

Besides WML and XHTML MP pages, the Services browser in newer models (e.g., the Nokia 6600, Nokia 6230, and later devices) can also display HTML pages. Figure shows how the O'Reilly home page looks in a Nokia 6600 device's Services browser. Notice that the images on the page are automatically resized to fit the screen so that the user does not have to scroll horizontally to view the content. However, the toolbars and the table-based layout of the page do not render well in the small screen. It is also very slow to load, especially on a Series 40 device where the CPU power is inadequate to parse the complex HTML document. In the rest of this hack, I'll discuss better ways to browse HTML pages.

The Services browser on Series 40 devices seems to render HTML content, especially tables, better than the Services browser on Series 60 devices, despite the larger screen size available with the latter.

The Opera Browser

The Opera browser is the leading HTML browser for Nokia Series 60 devices. Besides basic HTML markup content, Opera also supports Java-Script embedded in the pages. In many markets, Nokia 6600 phones are sold with Opera preinstalled. If your handset does not include Opera, you can purchase a copy from http://www.opera.com/ and install it yourself [Hack #17]. The Opera browser requires a relatively large amount of free memory to run. On an older device, such as the Nokia 3650, you must exit most background programs before you can start Opera. You can press and hold the menu key to see a list of background programs and use the c key to exit them one by one.

The O'Reilly home page (an HTML web page) displayed in a Nokia 6600's Services browser

If the Opera web browser's memory footprint is too large for your phone, you can try Dorisanother HTML browser for Nokia Series 60 phones. Doris is much lighter than Opera, and it runs on the early Nokia 7650 phones. However, compared with Opera, Doris has a limited set of features. You can download and purchase Doris from http://www.anygraaf.fi/browser/indexe.htm.

Opera develops its web browser for many operating systems, including Windows, Mac OS X, Linux, Solaris, FreeBSD, OS/2, QNX, Symbian, and Windows Mobile. Since the Opera browser for Nokia Series 60 devices is based on the same core code as the award-winning Opera browser for PC and Mac computers, it can parse and render a great majority of HTML pages on the Internet, including sloppily formatted ones. Opera supports common browser features such as HTTP cookies, a cache for pages and images, Java-Script, HTTP proxy, HTTPS, and HTTP Basic authentication. It also supports full-screen browsing to make better use of the extremely limited screen real estate on a mobile phone (see Figure). In full-screen mode, the soft-key labels at the bottom of the page are also hidden. But the left soft key is still mapped to the Options menu and the right soft key is mapped to Back or Stop, depending on whether the browser is currently loading a page.

The Opera browser in regular and full-screen modes

Opera defines a set of hotkeys to allow quick access to features without going through the menu. For example, pressing 1 pops up a box for entering a new URL to load; 2 opens the bookmark page; 8 brings up the browser settings page; 9 pops up a box for entering a search phrase for a Google search; and * toggles full-screen mode on and off.

A key innovation in mobile versions of the Opera browser is its content layout management. When you turn on Small Screen Rendering (SSR) mode in the Options Display menu (or use the # hotkey to toggle it on and off), Opera will try to resize images and rearrange elements in the HTML page to make it fit into the width of the screen. You can still use the vertical scroll key to scroll the page. The pages in SSR mode will not necessarily follow the original visual design of the web site. But they are more useable and more effective on a small mobile phone screen. Figure shows the layout of the O'Reilly home page on a desktop browser, and Figure shows its SSR mode layout on the Opera browser on a Nokia Series 60 phone. Notice that the toolbar is rendered in a compact format that is effective for small screens.

If you're a web developer, you might want to check how your page will look in Opera's SSR mode. Simply select the View Small screen menu option on a PC or Mac version of the Opera browser.

If you want to browse the page as its designers intended, you can turn off the small screen mode. In that case, the page is probably much wider than the screen. So, you need to scroll both horizontally and vertically to see the entire page. Figure shows the O'Reilly home page in this mode. The figure is a 5 x 4 grid of screens that simulate scrolling in both the horizontal and vertical directions.

The O'Reilly home page displayed in a desktop browser for comparison purposes

The O'Reilly home page displayed in the mobile Opera browser in SSR mode

The O'Reilly home page displayed in the Opera browser with SSR turned off

The Opera Browser with Proxy

The standalone Opera browser is powerful and feature rich. But it does not solve the fundamental issue with wireless networks that hinders the adoption of the mobile Web: the mobile data network is slow and often expensive. For graphics-intensive web pages, the Opera browser needs to first open multiple HTTP connections to download all the images, and then resize them to fit the device screen if SSR is used. That is a slow and bandwidth-intensive process. The multiple round trips needed to fetch images occur very slowly in high-latency wireless networks. This process also quickly drains the battery, due to heavy CPU usage.

If you do not care much about images, you can turn them off from Opera's Settings menu, which will speed things up considerably. Alternatively, Opera displays the page before it downloads all the images. So, you can press the Stop command to stop loading images if the text page is good enough.

The Opera Mobile Accelerator is a subscription-based service that can drastically improve Opera browser performance. The idea is to delegate much of the bandwidth-and CPU-intensive work from the mobile device to a proxy server. When you request a URL from the Opera browser, the request is forwarded to the proxy server, a server running on the Opera network that downloads web pages and images on your behalf. The proxy server fetches the web page and all the images in it, resizes the images, compresses all of them into a more compact format, and then returns the compressed package to the mobile browser. The mobile browser receives the optimized and compressed page and displays it.

It is easy to configure the accelerator proxy for your device. Just load the URL http://www.opera.com/proxy in Opera and the browser automatically configures itself. Behind the scenes, the browser is configured to talk to an HTTP proxy hosted by Opera (see Figure). Once the Opera browser is configured for the proxy, you get a 14-day trial period to try the service for free. Beyond that, you have to pay a monthly subscription to continue using the proxy service. The proxy server identifies your browser via the phone's International Mobile Equipment Identity (IMEI) number and verifies its subscription status. If you decide not to use the service at any time, just go to the Settings Advanced menu and disable the proxy.

Configuring the Opera Mobile Accelerator proxy for the mobile browser

WebViewer: A Java-Powered Browser

The Opera browser is great, but it does not run on Nokia Series 40 devices. Even with accelerator proxy support, it still makes heavy use of the Series 60 device's network and CPU resources, since it still needs to parse and render the HTML code. If you want to browse HTML pages from a Nokia Series 40 device or use a browser that runs faster on a Nokia Series 60 device, you can choose Reqwireless's Java-based web client, called WebViewer.

The idea behind WebViewer is to push the browser proxy to the limit. The WebViewer client is only 48 KB, and you can install it on even first-generation Series 40 devices, such as the Nokia 7210. Without the proxy, the browser cannot render any web pages. In fact, the browser is configured to connect to the proxy only. The proxy not only fetches and resizes web content on behalf of the browser, but also parses the HTML and decides how to render the page. These rendering instructions, together with any embedded images and other media objects, are returned to the WebViewer browser in a highly compressed, proprietary binary format. This way, the device browser does not need to parse the HTML and manage the layout. It simply follows the well-formed instructions from the proxy to place text and images at specified places on the screen. The proxy renders the page to fit the device's screen size so that you will never need to scroll horizontally (similar to the SSR mode in the Opera browser). Figure shows the O'Reilly home page rendered on the WebViewer browser on a Nokia Series 40 device.

The O'Reilly home page displayed on a Series 40 device's WebViewer browser

By default, the WebViewer browser does not display images in web pages. You can enable images via the Settings menu.

In addition to HTML and common image formats (i.e., GIF and JPEG images), the proxy also can parse media formats that are not supported by most other browsers and can figure out how to render them on the devices. Those additional media formats include TIFF and BMP images, Microsoft Word and Excel documents, and PDF documents.

Of course, the proxy-based approach has its drawbacks. Unlike Opera, the WebViewer browser cannot function if you do not subscribe to the proxy service. If the proxy server is temporarily down, you will lose access to the Web. That said, I used both the WebViewer and Opera proxies regularly for a year or so, and never experienced any proxy downtime. Also, since WebViewer runs inside the Java sandbox, it is less integrated into the device-native software than the Services and Opera browsers. For example, although you can download and view full-size web images inside WebViewer, you cannot save them into the phone's memory.