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]
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
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,
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:
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-
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
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-
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.