exploring solutions for a mobile web · 2011-05-03 · exploring solutions for a mobile web henrik...
TRANSCRIPT
Exploring Solutions for a Mobile Web
Henrik StormerUniversity of Fribourg
Bd de Perolles 90CH-1700 Fribourg
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].
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
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
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
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
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
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>
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
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
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
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.
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
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.
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