Mobile web technologies_overview_v1_0_en

Article Forum.Nokia.com

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

Mobile Web Technologies Overview 1


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 tables 1 at Forum Nokia. All manufacturers’ device features
are compiled in the WURLF resource database 2, 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/.



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



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 resources 3 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 extension 4, 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.

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



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 WCSS 5, is a style sheet language that is used together with the XHTML MP
content.

Ajax – a Web 2.0 marriage of XML and JavaScript

Ajax 6 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 S60 7. 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.



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.



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.



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.


Mobile web technologies_overview_v1_0_en

More Related Content

What's hot (20)

Viewers also liked (6)

Similar to Mobile web technologies_overview_v1_0_en (20)

Mobile web technologies_overview_v1_0_en