The document presents a discussion on the importance of developing web applications that cater specifically to mobile users and devices, highlighting key components like HTML5 and CSS media queries that enhance usability. It explores various options for mobile site implementation, including mobile sites, templates, and responsive designs, each with its own advantages and disadvantages. The conclusion emphasizes the necessity of utilizing modern web standards to ensure a seamless user experience across diverse devices.

1. A Presentation based on the statement:
“Web applications that are suited for the needs of mobile devices
and mobile users, based on existing Web standards, will play an
important role in how the Web ecosystem evolves to encompass
the mobile platform”
Daniel Appelquist (Vodafone) W3C Mobile Wednesday Workshop
Mobile Web 2.0 Week in Seoul, Korea
3th - 7th March 2008
Presented By:
Oluwasegun Adedokun Adedugbe

2. Overview
From the statement:
“Web applications that are suited for the needs of mobile
devices and mobile users, based on existing Web standards,
will play an important role in how the Web ecosystem evolves
to encompass the mobile platform”
We have the following as keywords:






Web Applications: web-based applications on the Internet
Mobile Devices: handheld devices with computing capabilities
Mobile Users: users of mobile devices
Web Standards: sets of standards for the web ecosystem
Web Ecosystem: the world wide web
Mobile Platform: mobile operating systems, devices and users

3. Web Standards
It defines generally accepted standards in relation to
the technologies used on the World Wide Web to
build web applications and how they are
implemented.
These include:






HTML5
CSS Media Queries
Mobile Browsers
Media Listeners
Mobile Page Validation
Mobile Platforms

4. HTML5





Newest version of HTML (HyperText Markup Language)
Introduces new elements that enhances consistency and
uniformity in HTML documents
Also, it has made certain types of browser plugins redundant
and/or unnecessary by replacing them with some newly added
HTML elements
These also enhance having consistent rendition for HTML
documents across different web browsers
Examples are ‘<video>’, ‘<audio>’, ‘<section>’, etc.

5. CSS Media Queries



A module introduced into the newest version of CSS
(CSS3)
Used to declare different sets of CSS rules for different
computing devices, based on their screen sizes
The essence is to ensure that web applications have a
fluid layout which responds to the rendering device by
adapting itself to render in a manner that will be suitable
for the mobile user.

An example declaration is:

“@media screen and max-width: 480px { p.search{float: left;} }”

6. Other Standards

Mobile Web Browsers – Examples are Opera Mini, NetFront,
Firefox for Mobile, etc

Media Listeners

Mobile Page Validation (via http://validator.w3.org/mobile/)

Mobile Platforms, such as iOS, Windows 7, Android,
Blackberry, Symbian, etc.

7. Options

There are several options available for the encompassing
of the mobile platform by the Web ecosystem. The major
ones are as follows:

Building a mobile site

Building a mobile template

Building a responsive site

8. Mobile Site








Developing another version of a web application specifically
for mobile devices.
Advantages:
The cost implication is low
The turn-around time is quick
Disadvantages
Oftentimes, it will be deficient in features
Different URLs for main and mobile site
Rigid design – inconsistent user experience

9. Mobile Template







Having two templates for a web application and serving
them to the requesting device as appropriate.
Advantages:
Single site, single URL
Disadvantages
Oftentimes, it will be deficient in features
Uses browser sniffing which is inconsistent
Rigid design, not fluid

10. Responsive Site







Developing that a web application that will be fluid in
nature and render properly on all types of devices, either
fixed or mobile.
Advantages:
Single site, single URL
Fluid design that renders well on all devices
Portability and Consistency
Disadvantages
Might be difficult to build into an existing site

11. Others






Mobile Application:
A native application built for a specific mobile platform.
Features:
Runs on the local device
Requires updates sometimes
Data repository could be outdated
Could be expensive to build, challenging to develop and
tedious to publicise

12. Others (continued)




Hybrids:
A combination of at least two of options together into one
or the implementation of a non-standard option
Examples are:
- Facebook (m.facebook.com)
- BBC (m.bbc.co.uk)
They both have mobile sites that are also responsive in
nature.

13. Conclusion and Recommendation


The use of HTML5 and CSS Media Queries to create
responsive web designs is highly recommended as an
ideal way to ensure that mobile users can make
judicious use of web applications on mobile devices
without missing out on having a great user experience.
Having a single web application that displays/renders
perfectly well on any form of device, either fixed or
mobile, irrespective of the screen size will go a long way
in fully integrating the mobile platform into the web
ecosystem.

14. References




Curran, K., Bond, A. & Fisher, G., (2012). HTML 5 and the
Mobile Web. International Journal of Innovation in the
Digital Economy. 3 (2) p. 40-56
Power, M. (2012). Delivering Web to Mobile. JISC
Observatory Techwatch Report. 1.0 (May) p. 1-20
MSDN Magazine (2012) Building HTML5 Applications
[Online]. Available from: http://msdn.microsoft.com/enus/magazine/hh882445.aspx [Accessed: 04 November
2012]
Marcotte, E. (2011). A Book Apart: Responsive Web
Design. New York: Jeffrey Zeldman.

15. References




Middleton, B. (2012). Responsive Design Vs. Mobile Site:
The Benefits and Drawbacks. Planet Argon (May) p. 1-6
Gardner, B.S. (2011). Responsive Web Design: Enriching
the User Experience. Inside the Digital Ecosystem. 11.
(October) p. 15-22
Jacobs, D. (2011). CSS3: Ripe and Ready to Respond.
Web 2.0 Expo. New York, October 11, 2011 New York. pp.
170-212.
Lewis, J.R. (2012). Design Responsively: Flexible
Scalable Web Layouts using HTML5 and CSS3. Sandia
National Laboratories. (May) p. 1-42