Exploring Solutions for a Mobile Web · 2011-05-03 · Exploring Solutions for a Mobile Web Henrik Stormer University of Fribourg Bd de Perolles 90 CH-1700 Fribourg [email protected]

Exploring Solutions for a Mobile Web

Henrik StormerUniversity of Fribourg

Bd de Perolles 90CH-1700 Fribourg

[email protected]

Abstract

With the rise of mobile devices like cell phones and per-sonal digital assistants (PDAs) in the last years, the demandfor specialized mobile solutions grows. One key applicationfor mobile devices is the Web service. Currently, almost allWeb sites are designed for stationary computers and cannotbe shown directly on mobile devices because of their limi-tations. These include a smaller display size, delicate datainput facilities and smaller bandwidth compared to station-ary devices. To overcome the problems and enable Web sitesalso for mobile devices, a number of different approachesexist. This paper compares different ways to adapt existingweb sites for mobile devices. The following three methodsare generally used today: Rewrite the page, use an auto-matic generator to create the page, or try to use the samepage for stationary and mobile devices. This paper illus-trates each method by adapting two pages of the electronicshop software eSarine. Afterwards, the methods are com-pared using different parameters like the complexity of theapproach or the ease of integration in existing systems.

1 Introduction

Mobile devices have become more and more popular in

the last years. The most popular device is the cell phone,

which, according to the Forrester statistic, more than 80%

of all Europeans owned at the end of 2004 [6]. Currently, a

cell phone is mostly used for making phone calls and send-

ing short messages. With the starting of faster network so-

lutions like UMTS new applications will become possible.

One application is the use of the Internet web service to ac-

cess web sites.

However, mobile devices have some disadvantages com-

pared to stationary computers. These are:

Small display size: The display size of mobile devices

vary from small cell phones 96 × 65 pixel or less

to 320 × 480 pixel on foldable smart phones. Even

these displays are small compared to typical stan-

dalone computer sizes with up to 1280 × 1024 pixel.

Delicate data input: On mobile devices, data input is done

mainly with a small keyboard or by using a touch

screen. Both ways are not as convenient as input on

standalone systems using a keyboard and mouse.

Small bandwidth: Todays mobile networks offer a small

bandwidth. Users find often no more than 9600 bits

per second where a 50 Kbytes website needs more than

40 seconds to load.

Lower memory size: Mobile devices have a RAM size of

16 to 64 MB whereas stationary computers come with

512 MB equipped. These disadvantages have a large

impact on mobile Internet usage. Therefore, it is prob-

lematic to use the same solutions, in this case web

sites, for stationary and mobile devices. The web sites

should be adapted in order to be usable on a mobile

device.

Because of these limitations, mobile devices cannot show

todays web pages directly. Instead, all pages have to be

adapted for the mobile device. Web site adaptation can be

done on the client or on the server. In the first case, the (non-

adapted) page is sent to the client and adapted there. Typical

solutions usually try to improve the navigation by adding

zoom capabilities [3] or reordering some parts of the site.

These solutions can also be found in most web browsers de-

signed for mobile devices today. However, these solutions

are somewhat limited because often not the correct adap-

tation is done. Additionally, the bandwidth problem can-

not be solved using this approach because the non-adapted

page is sent completely to the client. Therefore, this paper

concentrates on server site adaptations, typically done by

the web administrator who is also responsible for the cor-

rect presentation on stationary devices. The remainder has

the following structure: The next section gives some back-

ground information for adapting web pages. Afterwards,

Proceedings of the 8th IEEE International Conference on E-Commerce Technology and the 3rd IEEE International Conference on Enterprise Computing, E-Commerce, and E-Services (CEC/EEE’06) 0-7695-2511-3/06 $20.00 © 2006 IEEE

the adaptation scenario is presented which shows the web

shop eSarine and the test environment. The following sec-

tion shows the three adaptation solutions that were used for

this test. In the comparison part, all three solutions are com-

pared and some guidance is given. The Conclusion finishes

the paper and takes a look at future work.

2 Background

When adapting pages both for mobile and stationary de-

vices, the solution must fulfil the following two steps:

1. Identify if the client is a mobile or stationary device.

2. Eventually generate the adapted sites, afterwards send

the page to the device.

For both problems, different approaches (or combina-

tions) already exist. In step one, the web server has to deter-

mine if the client is a mobile device and needs the adapted

page or not. For this problem, a number of approaches exist:

Use a different domain name/URL: This is a simple so-

lution that returns the problem to the user of the page.

The non adapted pages are returned when a default

URL is requested (i.e. http://www.google.com), the adapted pages are sent when a different

URL is requested (i.e. http://www.google.com/pda). The major problem of this approach is

that the user has to know that there are specialized

pages. This can be achieved by adding a special en-

try page where the user can choose the URL.

Use a client cookie: The solution of cookie setting is usu-

ally implemented together with the customization ap-

proach (see following description of adaptation solu-

tions). The user can choose which web elements he

wants to retrieve on the client. Afterwards, his choice

is stored on the client by putting this information in

a cookie and sending it to a client device. Using this

approach, the user can have a different look on a sta-

tionary and mobile device. This solution works only if

the client accepts cookies.

Parse the HTTP string: Whenever a web browser is re-

questing a web site from a web server, it sends some

client information to the web server. This typically in-

cludes the operating system and the web browser. Us-

ing this information, the web server can try to deter-

mine the client. This approach has two disadvantages:

The user can edit this information and some browsers

do not send enough information for a correct determi-

nation.

Use CSS media types: This approach will be presented in

more detail in 4.2. In fact, the automatic determination

is one of the advantages of solution 2.

Retrieve client profiles: The Mobile Web Initiative from

the W3C aims to define a standard to support the

web service for mobile devices. For the detection

of the client, they proposed the Composite Capabil-

ity/Preference Profiles (CC/PP) [8]. These profiles

are sent from the mobile device to the web server

and can be used to identify the client device and to

specify the user preferences. Based on CC/PP is

the User Agent Profile (UAProf) [1], which was de-

veloped by the WAP-Forum. UAProf defines some

common attributes, for example the number of pix-

els of the display or the ability to show colours (at-

tribute: ColorCapable), the type of the keyboard (at-

tribute: keyboard) or the bluetooth version (attribute:

SupportedBluetooth-Version).

Besides the presented three solutions in this paper, the

adaptation of web pages can be done using the following

approaches:

Try to create a page that works well on all devices:The W3C has released the Authoring Challenges for

Device Independence (ACDI) document that deals

with web site adaptation for different devices [10]. It

provides information on how authors of web pages

should define adaptable web pages.

Use a proxy: Some researchers propose to use a special

web server, a so called proxy, that acts as an intermedi-

ary for mobile devices. The proxy retrieves a complete

web site but delivers only a predefined part of it to the

mobile client. Note that this approach does not solve

the question on how the predefined part should be ex-

tracted.

Let the user configure the page: Customization [9] is an-

other approach that can be used to solve the small dis-

play problem and to a further extend also the band-

width problem when web pages are adapted for mobile

devices [12]. This approach lets the user define a per-

sonalized page by providing an online editor compa-

rable to a Graphical User Interface (GUI). Some web

sites already offer a way for a user to configure a web

site and to apply a special design to it. When the

user enters the site, it is presented using the predefined

style. One example is the Excite search engine that

offers a ’My Excite Start Page’.

Try to reorder the page: Another approach deals with the

reordering of a large web page by defining elements on

the page and letting them display in a special look. An

element could be a search bar containing a search in-

put object and a button or navigation bar. An element

could be displayed in another way, for example by us-

ing special features if the client supports these features,

or by displaying the objects in a tab row [11].


Use Personalization: Personalization [14] usually goes in

combination with other presented approaches [2]. Per-

sonalization helps to find out which web elements on

a page are needed by the user and which not. This in-

formation is used by all approaches that try to generate

the pages dynamically. Two examples are customiza-

tion [5] or the CSS approach (solution 2) [13].

3 Adapting Pages for eSarine

3.1 eSarine

The eSarine online shop is designed to offer goods of any

kind on the Internet [15]. It is developed in Java using the

Model-2 based Struts framework [7]. Like most webshops,

eSarine is divided into a storefront and a storeback. In the

storeback, the whole webshop can be managed, including

products, users and payment. In the storefront, the products

and services are offered to the customers. The Struts frame-

work parts the business logic from the view part. Therefore,

eSarine is a good solution to efficiently compare different

approaches, as only the view part has to be adapted.

3.2 Adaptation Scenario

The aim of this paper is to describe how two eSarine

pages were adapted to mobile devices using three different

approaches.

Figure 1 shows both pages on a stationary device. As you

can see, the product list site (top) itemizes different products

among and beneath each other. This can be the result of a

product search or a navigation using categories. For each

product, a small picture as well as a short description is pre-

sented. The ’more’ link at the end of the description can be

used to navigate to the detailed product view site (bottom).

This page presents much more information of one product.

Both pages are typical and can be found in almost all online

shops.

The test was done using two different mobile de-

vices. The first device is a Siemens S65 cell phone

running a siemens self-developed operating system, the

second one a QTec 8080 running Windows smart phone

2003. The Siemens S65 is equipped with an Openwave

(www.openwave.com) Mobile Browser Version 7.001,

the QTec runs the popular Opera (www.opera.com) Mo-

bile Browser Version 7.60 beta 3.

Figure 2 shows the non-adapted pages on the Siemens

(left) and QTec (right). The red rectangle shows the display

size of the mobile devices. Both devices try to format the

page by ordering the elements among each other to avoid

horizontal scrolling (client-based approach). This leads to

the strange menu presentation of the Siemens. Addition-

ally, not all style sheet commands are interpreted by the

browsers, for example the list bullets are not hidden (list-

style:none). For the adaptation of the pages, three different

solutions are presented that will be shown in detail in the

next section.

4 Three different Solutions for adapting WebPages

4.1 Solution 1: Rewrite the Page

Rewriting the page is the simplest form of adapting the

page to a mobile device. The first pages available where

rewritten using special languages like the Wireless Markup

Language (WML) or compact HTML (cHTML). However,

these languages did not have a large success. Because of the

growing ability of mobile devices to display HTML pages,

this paper concentrates on HTML. However, HTML pages

must have a special design to be displayed well on a mo-

bile device. The previous section showed the non-adapted

pages, using HTML tables for layouting. This is quite com-

mon today, but not very elegant. In a first step, the original

pages where copied and the table layout was replaced by

using block elements. This works well on stationary and

mobile devices. Additionally, the Top-Seller and Cart menu

was deleted to save space and bandwidth. Further, all prod-

uct images on the product list where removed and on the

detailed product view, the picture was resized. The result-

ing pages are shown in figure 3.

4.2 Solution 2: Adapt the Page

The World Wide Web Consortium (W3C) has developed

a standard called Cascading Style Sheets (CSS) [16, 4].

This technology can be used to adapt a web site for mobile

devices. The first version (CSS level 1) [16] was developed

in 1996 and is supported by a large number of current web

browsers. The main idea behind CSS is to part the con-

tent from the representation of a web site. Older web sites

included the content and the representation information in

one file. CSS can be used to move the representation to a

new file, the CSS file. Typically, CSS files are included in

the headers HTML file using the command:

<link rel="stylesheet"type="text/css" href="layout.css" >

With this directive, the HTML file stores the representation

information in the layout.css file. The web browser typi-

cally loads the HTML file first. Afterwards, the style in-

formation is received by loading the CSS file. In Febru-

ary 2004, the W3C has introduced a new version of CSS

(CSS level 2.1) (Bos et al. (2004)). This version supports so

called media types to present a solution for adapting HTML


Figure 1. The (non-adapted) pages on a stationary device

pages to mobile devices. The idea is to create multiple CSS

files, one for each device class. Then, the browser chooses

the correct CSS file depending on the current device where

it is executed. In the HTML file, all different CSS files are

included. If this command

<link rel="stylesheet"type="text/css" href="stationary.css"media="screen">

<link rel="stylesheet"type="text/css" href="mobile.css"media="handheld">

is inserted in the header of a HTML file, two different CSS

files are included. If the browser is running on a stationary

device, the stationary.css file is loaded. If it is executed on

a mobile device, the mobile.css file is loaded. This solution

was included in CSS to support the adaptation of web pages

to different devices. Right now, not only mobile devices are

supported, there exist a list of more then 12 different me-

dia types for different devices. To use eSarine with CSS

adaptation, the table layout of the two pages has first to be

removed (the same step as in solution 1). Afterwards, a

new mobile.css file was created and added to the header of

the HTML files. Then, the pages were adapted by hiding

the left and right panel. This can be done by adding a dis-

play:none entry in the CSS file. Additionally, the width of

the search bar is reduced and the topmenu is reformatted (all

by adapting the mobile.css). The result is shown in figure 4.

There is still a problem with the large image that is

loaded and displayed. To overcome this problem, the fol-

lowing approaches can be used today:

1. The client browser resizes the image. This can be

achieved by adding a width:10%; height:10%; entry in

the CSS file. This approach has some weaknesses: The

image is still loaded completely by the client. Further-

more, the calculation for resizing the image takes time

on a mobile device. Also, in our tests, not all browsers

on mobile devices used today were able to resize the

image properly.

2. The image is not displayed by using a display:none en-

try. This approach has also some weaknesses: Typi-

cally, an online shop should display a product image.

Furthermore, the image is still loaded completely by

the client machine which is annoying because the CSS

standard level 2.1 defines in paragraph 9.2.4 clearly


Figure 2. The non-adapted pages on the Siemens (left) and QTec (right) mobile devices. Both mobilebrowser have problems displaying the pages correctly.

that there is no need to load the image when it is not

displayed:

This value causes an element to generate no

boxes in the formatting structure.

CSS can be used to display background images. If the width

and height of the image is known, this approach can be used

to move the inclusion of the image to the CSS file. Then, a

smaller image can be included for the mobile device. In the

example, the HTML <img src=...> entry is replaced

by a <div class="product-img". Then, in the CSS

file, the class is defined for the stationary device:

.product-img{background: url(12-1.jpg);width:92px; height:130px;}

For the stationary device, the large product picture is in-

cluded:

.product-img{background: url(12-2.jpg);width:200px; height:282px;}

The solution works fine on stationary and mobile devices.

However, the inclusion of images in the HTML has to be

changed and images with a different size require that new

entries with the correct width and height values have to be

inserted. For eSarine, approach (3) was used, which can be

seen by comparing the picture sizes of figures 2 and 4. This

approach can be extended by choosing the elements to show

or hide using personalization techniques [13].

4.3 Solution 3: Use XML to transform thepage

If the originating HTML page is written using the

XHTML standard or directly created from XML sources,

a further conversion is possible by using the Extensible

Stylesheet Language (XSL) ([17]). This language provides

mechanisms to parse an XML file. The following small

XML document

<?xml version="1.0"encoding="ISO-8859-1"?><products><product><id>12</id><name>Collateral SE</name><short-description>Vincent (Tom Cruise) is a cool,calculating contract killer atthe top of his game.</short-description></product></products></xml>


Figure 3. The adapted pages look very nicely on both devices. The category is presented vertical,the search bar is correctly formatted and also the picture has a better size to improve the bandwidth.

can be transformed by an XSL transformator. As an input,

the transformator needs an XSL document that provide the

rules on how to do the formatting. An example XSL docu-

ment would be

<?xml version="1.0"?><xsl:stylesheetxmlns:xsl=http://www.w3.org/1999/XSL/Transform version="1.0">

<xsl:template match="/"><html><head><style>body {font-size: 0.8em;}</style></head><body><xsl:apply-templatesselect="products" />

</body></html></xsl:template><xsl:templatematch="products"><p><xsl:apply-templatesselect="product" />

</p></xsl:template><xsl:template match="product"><h1><xsl:value-ofselect="name" /></h1>

<xsl:value-ofselect="short-description" /></xsl:template></xsl:stylesheet>

The resulting file is nearly HTML compliant (to save space,

some obligatory HTML elements like the DOCTYPE are

not presented) and has the following structure:

<html><head><style>body {font-size: 0.8em;}</style></head><body><p><h1>Collateral SE</h1>Vincent (Tom Cruise) is a cool,calculating contract killer atthe top of his game.</p></body></html>

eSarine does not create XML documents by default. In-

stead, it uses Java Server Pages (JSP) to generate the re-

sulting HTML pages. Therefore, the first step was to re-

place the JSP part with an XSL transformator. It is also

possible to rewrite the JSP pages for the creation of another

view. However, the usage of XML was decided to show the

power of XSL which is used in more and more web appli-

cations. To combine Struts with XML, stxx was used. Stxx


Figure 4. Although not everything can be done with CSS the result is much better then the non-adapted page.

(stxx.sourceforge.net) is a Struts extension to sup-

port XML transformation using XSL without changing the

functionality of Struts. Additionally, the Struts action files

had to be changed, because with stxx, XML files are gener-

ated instead of JavaBeans. Stxx can be used on top of the

already existing classes. For the tests, only the two sites

where changed. Fortunately, XML documents are already

created to export product information in product catalogues.

The generation of XML documents was realized using these

methods. Then, for both pages, XSL documents were writ-

ten that transformed the XML documents to HTML (like the

example above). Basically, XSL is powerful and in combi-

nation with the XML generating action part, it is possible

to do everything. It was possible to generate exactly the

stationary and mobile pages of solution 1 (cf figure 3), but

this time only one base and two XSL processors have to be

managed. However, if the XML document and the result-

ing HTML file differ strongly, the XSL document becomes

quite large.

5 Solutions Comparison

All three solutions where implemented using eSarine.

Table 1 shows the differences between the solutions.

The less complex method is to use solution 1 and rewrite

the page. However, this is only preferred if either the pages

are static or the application does not have the preconditions

for solutions 2 or 3.

Solution 2 fits well if the application is not Model-2

based or does not have an XML output. Typical examples

are (older) PHP scripts or simple Content Management Sys-

tems. The integration of Solution 2 is quite easy, however

the result is somewhat limited.

Solution 3 promises the most flexible way to adapt pages,

but on the other hand requires some preconditions. If an

XML output is already provided by the web application, this

solution is best. Because of this advantages, new applica-

tion developers should think about a Model-2 architecture

that uses XML output. The tested Struts environment using

the stxx module is a good choice.

6 Conclusions

Adapting web sites for mobile devices will become more

and more important in the future. This paper should help to

decide which solution to use when an adaptation is to be

done. The customization approach, which was described

in the related work part, was not included in the compar-

ison. This is because of the large effort needed to enable

customization in a web application today. However, it is

planned to add this feature to eSarine in the future. The

tests have also shown that mobile devices and their ability to

show pages differ. Therefore, another interesting addition,

especially when solution 3 is used, is the creation of more

than one mobile device page. This could be done by col-

lecting parameters from the user or by parsing profiles like

CC/PP (cf Background) when available. To gain parame-

ters of the users device, a small web site could be presented

where the user can enter more information.

References

[1] O. M. A. (2003). User agent profile — version 20-may-

2003. Technical report, Open Mobile Alliance, 2003.


Solution 1 Solution 2 Solution 3Rewrite CSS XML

automaticallydetermine if client or

stationary device

not directly possible integrated in solution not directly possible

complexity of solution no complexity little complexity high complexity

preconditions for thestationary web pages

none special layout,

eventually custom

build picture inclusion

must use XML

generation, best with

Model-2 architecture

maintenance costs high low middle

integration of otherlanguages like

cHTML or WML

possible not possible possible

potency for adaption boundless limited boundless

bandwidth reduction full limited full

Table 1. Differences between the presented solutions.

[2] C. Anderson, P. Domingos, and D. Weld. Personalizing web

sites for mobile users. In Proceedings of the 10th Interna-tional WWW Conference, 2001.

[3] B. B. Bederson and J. D. Hollan. Pad++: A Zooming Graph-

ical Interface for Exploring Alternate Interface Physics. Pro-ceedings of ACM User Interface Software and TechnologyConference (UIST), pages 17–26, 1994.

[4] B. Bos, T. Celik, I. Hickson, and H. Wium Lie. Cas-

cading style sheets, level 2, revision 1. Technical report,

World Wide Web Consortium (W3C), 2004. available at

http://www.w3.org/TR/CSS21, last visited Feb. 10.,

2006.

[5] A. Coener. Personalization and customization in financial

portals. The Journal of American Academy of Business, 2(2),

2003.

[6] Forrester. Consumer-Technographics-Study Europe Bench-

mark, 2004. http://www.forrester.com.

[7] T. Husted, C. Dumoulin, G. Franciscus, and D. Winterfeldt.

Struts in Action. Manning Publications Co., 2003.

[8] G. Klyne, F. Reynolds, C. Woodrow, H. Ohto, J. Hjelm,

M. H. Butler, and L. Tran. Composite capability/preference

profiles (cc/pp): Structure and vocabularies. Technical re-

port, World Wide Web Consortium (W3C), 2005.

[9] Y. Lei, E. Motta, and J. Domingue. Design of customized

web applications with ontoweaver. In Proceedings of theSecond International Conference on Knowledge Capture(K-CAP), 2003.

[10] R. Lewis’. ’authoring challenges for device independence

(acdi)’. Technical report, ’W3C Working Group’, 2003.

[11] M. Magnusson and D. Stenmark. Mobile Access to the In-

ternet: Web Content Management for PDAs. In Proceedingsof the Ninth Americas Conference on Information Systems(AMCIS), 2003.

[12] J. Steinberg and J. Pasquale. A web middleware architecture

for dynamic customization of content for wireless clients. In

Proceedings of the WWW 2002 conference, 2002.[13] H. Stormer. Personalized websites for mobile devices using

dynamic cascading style sheets. In Proceedings of the 2ndinternational Conference on Advances in Mobile Multime-dia (MoMM), 2004.

[14] C. Vassiliou, D. Stamoulis, A. Spiliotopoulos, and D. Mar-

takos. Creating adaptive web sites using personalizationtechniques: a unified, integrated approach and the role ofevaluation, pages 261–285. Idea Group Publishing, 2003.

[15] N. Werro, H. Stormer, D. Frauchiger, and A. Meier. eSarine

— A Struts-based Webshop for Small and Medium-sized

Enterprises. In Proceedings of the Workshop InformationSystems in E-Business and E-Government (EMISA), 2004.

[16] H. Wium Lie and B. Bos. Cascading style sheets, level

1. Technical report, World Wide Web Consortium (W3C),

1999. available at http://www.w3.org/TR/CSS1,

last visited Feb. 10., 2006.[17] H. Wium Lie and B. Bos. Extensible stylesheet language

(xsl) version 1.1. Technical report, World Wide Web Con-

sortium (W3C), 2004. available at http://www.w3.org/TR/xsl11/, last visited Feb. 10., 2006.


Documents

Exploring Solutions for a Mobile Web · 2011-05-03 · Exploring Solutions for a Mobile Web Henrik Stormer University of Fribourg Bd de Perolles 90 CH-1700 Fribourg [email protected]