MWI picto
W3C Mobile Web Initiative MWI - EU MobiWeb 2.0 FP7 Project

Mobile Web:
Trust starts with a few Best Practices

François Daoust <fd@w3.org>
W3C Mobile Web Initiative,
W3C Mobile Web Best Practices Working Group

http://www.w3.org/2008/Talks/09-mwbp-smart/

Smart Mobility 2008
Sophia-Antipolis, France, 17 September 2008

This talk is part of the MobiWeb 2.0 project supported by the European Union's 7th Research Framework Programme (FP7)

About the World Wide Web Consortium (W3C)

Lead the World Wide Web to its full potential by developing protocols and guidelines that ensure long-term growth for the Web.

W3C is a table around which people gather to talk and agree on standards W3C is a process to create stable and interoperable Web standards W3C is a team that ensures that the various working groups create interoperable standards

About the Mobile Web Initiative

Picture of Tim Berners-Lee The Mobile Web Initiative's goal is to make browsing the Web from mobile devices a reality
Tim Berners-Lee, W3C Director and inventor of the Web

Sponsors of the W3C Mobile Web Initiative

Working groups:

About the Mobile Web Best Practices Working Group

Best practices to improve the User eXperience on mobile devices.

Best Practices flipcards

Trust or User eXperience?

A bad User eXperience scares people away

  • Almost no transaction on mobile devices (EU and US)
  • Users on the go are impatient users. No second try.

→ Trust starts with a good User eXperience

Why Best Practices?

Many many different mobile devices available

  • Fragmented world
  • Too expensive to conduct tests

→ Best Practices to ensure a correct User eXperience on many devices

Mobile Web Best Practices (1/2)

Best Practices flipcards

About the Mobile Web Best Practices 1.0 specification:

Mobile Web Best Practices (2/2)

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

One theme - One Best Practice (1/10)

Design for One Web

Content designed with diverse devices in mind reduces cost, increases flexibility, and reaches the needs of more people.

[CAPABILITIES] Exploit device capabilities to provide an enhanced user experience.

One theme - One Best Practice (2/10)

Rely on Web standards

In the highly fragmented market of devices and browsers, standards are the best guarantee for interoperability.

[STYLE_SHEETS_USE] Use style sheets to control layout and presentation, unless the device is known not to support them.

One theme - One Best Practice (3/10)

Stay away from known hazards

Thoughtful design can help reduce usability problems due to small screens and keyboards, and other features of mobile devices.

[POP_UPS] Do not cause pop ups or other windows to appear and do not change the current window without informing the user.

One theme - One Best Practice (4/10)

Be cautious of device limitations

When choosing to use a particular Web technology, consider that mobile devices vary greatly in capability.

[COOKIES] Do not rely on cookies being available.

One theme - One Best Practice (5/10)

Optimize navigation

Simple navigation and typing become critical when using a small screen and keyboard, and limited bandwidth.

[NAVBAR] Provide only minimal navigation at the top of the page.

One theme - One Best Practice (6/10)

Checks graphics & colors

Images, colors, and style brighten content, but require care: devices may have low-contrast screens or may not support some formats.

[COLOR_CONTRAST] Ensure that foreground and background color combinations provide sufficient contrast.

One theme - One Best Practice (7/10)

Keep it small

Smaller sites make users happier by costing less in time and money.

[SCROLLING] Limit scrolling to one direction, unless secondary scrolling cannot be avoided.

One theme - One Best Practice (8/10)

Use the network sparingly

Web protocol features can help improve the user experience by reducing the impact of network bottlenecks and latencies.

[CACHING] Provide caching information in HTTP responses.

One theme - One Best Practice (9/10)

Help & guide user input

Keyboards and other input methods on mobile devices can be tedious to use, so effective designs minimize the need for them.

[PROVIDE_DEFAULTS] Provide pre-selected default values where possible.

One theme - One Best Practice (10/10)

Think of users on the go

Web users on the go want compact information when time is short and distractions many.

[CENTRAL_MEANING] Ensure that material that is central to the meaning of the page precedes material that is not.

Checking Best Practices: mobileOK

mobileOK logo

The W3C mobileOK Checker

W3C mobileOK Basic checker

http://validator.w3.org/mobile

Going further: Mobile Web Applications Best Practices

Related works within W3C (1/3)

Related works within W3C (2/3)

The Test Suites Working Group is working on several test suites.

Web Compatibility Test results on an iPhone Web Compatibility Test results on a Blazer

Two examples from the Web Compatibility Test for Mobile Browsers

Related works within W3C (3/3)

The Device Description Working Group is working on:

DDR Simple API

Upcoming W3C workshops

Conclusion

Best Practices flipcards

MWI - EU MobiWeb 2.0 FP7 Project This talk is part of the MobiWeb 2.0 project supported by the European Union's 7th Research Framework Programme (FP7)

Copyrights

Pictures