W3C Mobile Web Initiative

Short Overview of the Mobile Web

François Daoust <fd@w3.org>
W3C Mobile Web Initiative

http://www.w3.org/2010/Talks/02-icsti/

ICSTI 2010 Winter Meeting
ICSU Headquarters, Paris, France

Outline

Table of Contents
Photo by Elaine Vallet

  1. What's so special about mobile?
  2. W3C standards around mobile
  3. Thinking Mobile: short look at the OTSI bridge Web Site

First part:
What's so special about mobile?

User eXperience

A bad User eXperience scares people away on mobile.

Fragmentation

Sooo many different mobile devices on the market

Second part:
W3C Standards Around Mobile

The W3C

Leading the Web to its full potential...

Portrait of Tim Berners-Lee

Key words heard this morning that match W3C's preoccupations:

The Mobile Web Initiative

Sponsors of the W3C Mobile Web Initiative

Making Web access from a mobile device as simple as Web access from a desktop device.
Tim Berners-Lee, W3C Director and inventor of the Web

W3C Standards Around Mobile

The Mobile Web Best Practices and the mobileOK Standards are aimed at Web content authors. The Device Description Repository Simple API allows servers to identify the capabilities of a device that sends a request. The Guidelines for Web Content Transformation Proxies advises on rules proxies should obey. On the client side, The Web Compatibility Test checks support for basic functionalities within Web browsers. Ongoing works on Device APIs and Widgets are to be followed.

Mobile Web Best Practices - Overview

Mobile Web Best Practices in handy flipcards

Mobile Web Best Practices 1.0:

Mobile Web Best Practices - Example

BEFORE
- desktop (good) -
Beethoven - bad - desktop
- phone (bad) -
Beethoven - bad - phone 
AFTER
- desktop (still good!) -
Beethoven - good - desktop
- phone (good) -
Beethoven - good - phone 

The mobileOK mark

Le logo mobileOK

The W3C mobileOK Checker

http://validator.w3.org/mobile

The online W3C mobileOK Checker

Training courses on MWBP

Training courses on the Mobile Web Best Practices

The DDR Simple API

The DDR Simple API provides a simple API for access to Device Description Repositories

Common API for access to Device Description Repositories

Other works around mobile

Third part:
Thinking Mobile: short look at the OTSI bridge Web Site

OSTI Bridge - Desktop

Screenshot of the home page of the OSTI bridge on a desktop

OSTI Bridge - Mobile

Screenshot of the home page of the OSTI bridge on a high-end mobile device

OSTI Bridge - Mobile - Commented (1/3)

Looking at the home page of the OSTI bridge on a mobile device reveals that: some text overlap when viewed on a narrow screen, it's a good thing to display the input field before the explanation text, the CSS should not impose large sizes such as min-width: 720px in this page.

OSTI Bridge - Mobile - Commented (2/3)

Looking at a results page of the OSTI bridge on a mobile device reveals that: the detailed field takes too much space on the screen and tables must never be used for layout.

OSTI Bridge - Mobile - Commented (3/3)

Looking at a results page of the OSTI bridge on a mobile device also reveal: it's a good thing to advertise the type of document a link targets (e.g. PDF), and the size of the resulting document if it's big (e.g. 6MB), there is no mouse so no onmouseover event or :hover CSS property that can be used, tables should be used with care as they quickly become too large for the screen, definition lists can be considered alghough there is no simple answer.

The End

Data may not be consumed as planned

Contact

François Daoust <fd@w3.org>

W3C Mobile Web Initiative
http://www.w3.org/2010/Talks/02-icsti/