“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 WorkshopMobile Web 2.0 Week in Seoul, Korea3th - 7th March 2008

Presented By:

Oluwasegun Adedokun Adedugbe

A Presentation based on the statement:

OverviewFrom 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

Web StandardsIt 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

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.

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;} }”

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.

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

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

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

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

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

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 innature.

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.

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/en-us/magazine/hh882445.aspx [Accessed: 04 November 2012]

Marcotte, E. (2011). A Book Apart: Responsive Web Design. New York: Jeffrey Zeldman.

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