Article Forum.Nokia.com

Mobile Web Technologies Overview 1

Mobile Web Technologies Overview

Version 1.0; May 16, 2008

The Web has gone mobile. All of the dynamic and interactive services of the Web can now reach the mass markets of millions and millions mobile users. At first, all the different technologies and concepts related to mobile browsing may seem overwhelming. This article intends to clear that confusion and present the different technologies and factors behind the mobile Web revolution.

Rapid evolution of the mobile Web

In just a few years, the Web has gone mobile. Regular users – not just early adopters – want to access their favorite Web sites and content whenever they want, regardless of their physical location or computer access. Web services must be available when the user has the need to access them: checking the schedule for the next train, checking status updates on a social networking site, or finding certain piece of information. The Web is always there – right in the pocket.

The reason behind the mobile Web breakthrough is a combination of several factors: change in user behavior, availability, and promotion of mobile Web services, and the advancement of technology. The following takes a closer look at the different technologies and how they work together to build the entire mobile Web experience. For more information on the individual issues, refer to the Browsing section at Forum Nokia.

Faster connection speeds, better devices

Mobile networks are constantly evolving and providing faster data connection speeds between the device and the network. It is simple – the faster the connection, the less time it takes to transfer the contents of a Web page. 3G networks deliver the speed for browsing the Web smoothly, and the latest advancements (HSDPA, or High-Speed Downlink Packet Access) bring the bandwidth of a fixed Internet connection to the mobile. The data pricing models are also changing toward flat-rate data plans for unlimited data transfer.

Figure 1: Technology leaders Nokia N95 and Eseries devices are perfect for the mobile Web

Article Forum.Nokia.com

Mobile Web Technologies Overview 2

Mobile devices have also taken important steps. In addition to supporting the higher connection speeds, devices feature large displays that are tailored for multimedia use and presenting content, and more processing power and memory for handling the content faster. Additionally, more and more devices that utilize WLAN networks and public Wi-Fi hotspots are readily available. Together, the evolution of the network and the devices has overcome the traditional limitations of mobile browsing.

However, there is still a great variety of devices with different capabilities in the markets. For a complete look on Nokia devices, refer to the comparison tables1 at Forum Nokia. All manufacturers’ device features are compiled in the WURLF resource database2, available for free.

Supporting hardware with software – case Web Browser for S60

The software side has more than kept up with the development of the hardware. Support for standard Web technologies combined with a user interface that is tailored for the mobile device allows efficient use of Web resources. A prime example of software leading the mobile Web revolution is the Web Browser for S60 – a mobile browser that delivers the full desktop-like Web experience to the mobile device.

Figure 2: Web Browser for S60 in action: True Web Layout, Minimap, and Visual history

Introduced with the S60 3rd Edition, the Web Browser for S60 is based on the WebKit Open Source Project and supports all the main standard Web technologies, such as HTML, CSS, and JavaScript. Additionally, the Web Browser for S60 is tailored for the mobile screen with several features that enhance the usability, including:

Page overview or Minimap: a miniature thumbnail view of the entire site, for quickly scanning through the page and zooming in on the interesting sections.

Pointer navigation: navigating through the page intuitively, just as when browsing on a desktop computer with a mouse.

Visual history: navigation history is presented as graphical thumbnails.

Layout scaling: for any column or frame that contains a text flow, the browser wraps the text to fit the screen width on the device, allowing intuitive vertical scrolling and making reading text from the screen easier.

1 Nokia Device Specification table and Browser Feature Table are available at Forum Nokia. 2 WURFL, Wireless Universal Resource File, is available at http://wurfl.sourceforge.net/.

Article Forum.Nokia.com

Mobile Web Technologies Overview 3

The browser also packs powerful features under the hood, including advanced caching algorithms for decreasing the network latency. Full details are available in the Web Browser product description.

Full and Lite Web browsing

Mobile Web browsing can be roughly separated to two categories: Full and Lite Web browsing. This distinction can also be seen in the user segments: Full Web browsing requires a more advanced device, with the device base constantly growing, while Lite browsing is enabled for the existing mass user base.

Full Web browsing – the One Web experience

Full Web browsing means delivering a full, desktop-like browsing experience to the mobile device, with a compatible browser such as the Web Browser for S60. Pages are rendered like on desktop browsers, just as the original Web designer intended. There are clear advantages for both the site maintainer and the user: there is no need to maintain two separate versions of a Web site, one for mobile and one for desktop access. The user receives a similar experience as with a desktop browser, and is instantly familiar with the look and feel of the site.

However, while the browser can display full Web pages, the mobile user group should nevertheless be taken into account in the site design. There are several design issues – such as overall page sizes, effective navigation, and easy access to key information – that greatly improve the mobile browsing experience. The key considerations and design solutions are presented in the Web Browser Design Guide article series available at Forum Nokia.

Figure 3: Full Web sites with mobile-friendly design

Lite Web design and .mobi

Currently, the majority of users have mobile devices with more limited Web browsing capabilities. To reach this largest mobile Web user base, the services must be adapted to work with a wide variety of different devices. The main technology behind Lite Web browsing is XHTML MP (mobile profile), defined by the W3C standardization body.

When dealing with Lite Web design, developers are bound to come across the term “.mobi”, or dotMobi. This refers to the top-level Internet domain dedicated to Web sites specially intended to be viewed with

Article Forum.Nokia.com

Mobile Web Technologies Overview 4

mobile devices. The domain is governed by the mTLD Top Level Domain, Ltd organization that manages the distribution of domain names and provides practical development resources3 and design guidelines.

Lite mobile Web services require that the service is optimized to the small screen of the mobile device. This limits the design options a Web designer has, but emphasizes identifying the most important use cases for mobile users. Optimized Web design should concentrate on the most important features, and consider leaving out the secondary functions. When the optimized site is properly fine-tuned, the mobile user can access the needed information and content with ease and simplicity.

Promoting the mobile Web site

When a mobile site is available, the users should be driven to use it. There are different options available – they can be used independently or together, supporting each other.

Pushing the mobile browser to the mobile-optimized site can be done automatically on the server side. When a browser accesses a Web site, it provides the Web server with certain parameters, such as the user agent information that can be used to identify the browser. With this information, the Web server can automatically re-direct the browser to a compatible mobile site.

The preferred method is to clearly indicate the mobile site in the domain address or URL, of the site. The recommended way is to use the .mobi extension4, for example, http://nokia.mobi. Another popular convention is m.company.com (for example, see m.youtube.com and m.facebook.com). The benefit of defining the mobile site directly in the URL address is that the user knows that the site has been optimized for mobile use – lowering the bar to enter the address on the mobile browser.

Mobile Web enabler technologies

The solid foundation of the mobile Web is the utilization of standard Web technologies. Standard technologies both support interoperability across different platforms and allow Web developers to apply their existing skills. This chapter lists and explains the major Web technologies.

HTML and XHTML MP for structure

The World Wide Web is based on the HTML markup language. HTML describes and builds the structure of a Web page, and the mobile browser renders this structure on the mobile device. The Web Browser for S60 supports the full HTML standards, allowing even the more complex pages to be displayed on the mobile device.

For Lite Web browsing, XHTML MP is a subset of the XHTML 1.1 specification, specially designed for presenting content in mobile devices. Devices supporting XHTML MP are assured of having a set of certain browser capabilities, ensuring that the device is able to render compliant content correctly. There are also some mobile-specific functions, such as marking telephone numbers as quick links for making a call:

<a href="wtai://wp/mc;+123456789">Call 123456 789</a>

CSS for separating the content and layout

While HTML and XHTML MP provide the structure of a page, CSS is used to define how the page looks and feels. In Web design, it is very important to make this distinction between the structure and presentation: the same structure can be used in different contexts and re-formatted with alternative CSS for different purposes, such as smaller screen sizes and different media types.

3 dotMobi developer guidelines are available at http://dev.mobi. 4 Note that .mobi sites should comply with the rules defined in the Switch On Web Developer Guide to ensure a good mobile browsing experience.

Article Forum.Nokia.com

Mobile Web Technologies Overview 5

CSS also makes the developers’ life easier by reducing upkeep effort. By re-using the same CSS resource rules for multiple pages, it is a low effort to make the changes to the entire site with one update. For Lite Web browsing, the Wireless CSS, or WCSS5, is a style sheet language that is used together with the XHTML MP content.

Ajax – a Web 2.0 marriage of XML and JavaScript

Ajax6 is one of the leading Web technologies of the Web 2.0 boom. Actually a combination of existing technologies, JavaScript and XML, Ajax provides many features that enhance the Web browsing experience. As the Web Browser for S60 supports Ajax, these benefits are also available for mobile users as well.

With Ajax, Web pages are no longer limited static pages but become rich Internet applications of their own, making the browser an impressive platform for running advanced applications. In practice, efficient use of Ajax improves the browsing experience in many ways:

Screen can be better divided into logical and dynamic areas

Navigation enhancement with dynamic elements

Page reloads can be avoided

Data can be loaded faster as only a portion of the page is transferred, also resulting in lower transfer data amounts over the wireless network

To get into Ajax through practical examples, see Getting Started with Ajax – Overview and Examples available at Forum Nokia.

Flash Lite brings fascinating interactive media to the mobile browser

Flash is the de facto standard for rich interactive media on the Web, and Flash Lite is its mobile counterpart. The Series 40 and S60 platforms developed by Nokia have supported Flash Lite for a long while, but now Flash Lite has taken a huge step forward: Flash Lite is now supported on the Web Browser for S607. Users can view Flash-based streaming video right in their browser, as well as other Flash applications.

Flash is not limited to video and animation: it is a full impressive application runtime supported by a huge developer base. Flash supports rich interaction as well as using the technology as the front for connecting to online data services. To know more, refer to the Flash Lite Developer’s Library and Flash Lite: Live XML Data Integration Example.

Web Runtime – Web technologies extended outside the browser

The Web Runtime extends the Web technologies support in S60 outside the browser application. Web Runtime uses the core of the browser engine and provides a tight integration to the S60 device, allowing access to more advanced device functions such as the softkeys and menu options. The integration is done through specific Web Runtime APIs while keeping in mind the necessary security requirements.

The leading application of the Web Runtime technology is Web widgets – read on for more information. Running in a secure sandbox, widget applications do not require certification or signing like native Symbian applications do.

5 A WCSS tutorial is available at http://www.developershome.com/wap/wcss/. 6 Asynchroneus JavaScript and XML, see http://en.wikipedia.org/wiki/AJAX. 7 Flash Lite 3 is supported from the S60 3rd Edition, Feature Pack 2 onwards, and through firmware updates in devices such as the N95.

Article Forum.Nokia.com

Mobile Web Technologies Overview 6

Widgets and WidSets: changing the way information is accessed

Today, the user does not go to the Web content – the content comes to the user. Pushing content to the user through technologies such as XML-based RSS feeds allow the user to stay constantly up-to-date with the information he or she is interested in.

Widgets – the best of both worlds

Powered by Web Runtime, widgets are lightweight Web applications that run independently in the S60 device, just as any other application. Widgets offer the best of both worlds by combining the possibilities of Web technologies with the easy and simple user experience of a mobile application.

After simple installation from a ZIP file, a widget can be launched from its own application icon. The user can have several widgets running at the same time and multitask between them. Widgets can even run offline, with no live Internet connection. The ability to utilize both softkeys and menu commands increases the intuitive use of the widget.

Widgets are quick to develop and distribute: if you can create a Web page, you can create a widget. All standard Web technologies, such as XHTML, CSS, Ajax and Flash, are supported and developers can utilize their existing development tools and content. This results in lower application development threshold, as the financial commitment is lower and the time-to-market is shorter.

Figure 4: Example widget

In many cases a widget acts as a front end to a Web 2.0 service. By reading the content from the Web, a widget can present up-to-date information to the user without the need to visit the full Web site. Widgets are optimized to a certain use case: they are not intended to be overloaded with content and functionality.

WidSets for delivering content for millions of users

WidSets – not to be confused with their lightweight cousin – is a popular Internet service where users can create, publish, subscribe, and share their favourite content on the mobile device. WidSets are available for any Java MIDP 2.0 compliant device, currently over 300 device models from various manufacturers, making it a perfect content delivery channel for millions of users.

At the WidSets Web site, users can create their WidSets content, based on a great number of popular feeds from content providers. Then, the users download a small MIDP 2.0 client application to their device, and use the application to access the personalized content defined on the Web portal. A free Software Development Kit allows developers to build their own WidSets service.

Article Forum.Nokia.com

Mobile Web Technologies Overview 7

A look to the future: the Web server goes mobile

The technologies and services discussed in this article are focused in delivering the Web experience to the mobile device. Support for standard Web technologies, and versatile multimedia such as Flash Lite, provide the future-proof development framework for the mobile Web.

However, Web is a two-way street. With more and more user-generated content, one possible evolutionary path is making the mobile device an active part of the Web. The Mobile Web Server technology makes the device a central hub for creating, publishing, and sharing personal content. The user can host his or her own home page right on the phone, allowing others to access the device and have direct contact with the user.

The technology is still maturing and evolving to find its uses, but is a good example of how technology is no longer limiting the creativity of the community – everything is becoming possible.

Article Forum.Nokia.com

Mobile Web Technologies Overview 8

Copyright © 2008 Nokia Corporation. All rights reserved.

Nokia and Nokia Connecting People are registered trademarks of Nokia Corporation. Java and all Java-based marks are trademarks or registered trademarks of Sun Microsystems, Inc. Other product and company names mentioned herein may be trademarks or trade names of their respective owners.

Disclaimer

The information in this document is provided “as is,” with no warranties whatsoever, including any warranty of merchantability, fitness for any particular purpose, or any warranty otherwise arising out of any proposal, specification, or sample. Furthermore, information provided in this document is preliminary, and may be changed substantially prior to final release. This document is provided for informational purposes only.

Nokia Corporation disclaims all liability, including liability for infringement of any proprietary rights, relating to implementation of information presented in this document. Nokia Corporation does not warrant or represent that such use will not infringe such rights.

Nokia Corporation retains the right to make changes to this specification at any time, without notice.

License

A license is hereby granted to download and print a copy of this specification for personal use only. No other license to any other intellectual property rights is granted herein.