Mobile Web Design

Mobile Web Design

This webinar is presented by W3C to the Web community as part of an EU IST project (3GWeb). The content of this webinar does not necessarily represent the official position of the W3C, or the position of any of the W3C members or W3C’s host institutions.

(Lawyer says ‘Hi’!)

2

© MMVI Cameron Moll. This document is available under the W3C Document License.

You are... Experienced with XHTML/CSS. Familiar with good markup techniques. Unsure about this “mobile web thing”.

3

© MMVI Cameron Moll. This document is available under the W3C Document License.

Legacy

1910

5

© MMVI Cameron Moll. This document is available under the W3C Document License.

“Pocket watches provide the closest historical parallel to the remarkable rise of the mobile phone.” —Jon Agar, Constant Touch

6

© MMVI Cameron Moll. This document is available under the W3C Document License.

Staggering Numbers

7

1996

GSM phones in 103 countries

2000

10 million i-mode users (Japan)

2002

1 billion mobile phone users worldwide

2009

3 billion mobile phone users worldwide

© MMVI Cameron Moll. This document is available under the W3C Document License.

UK

8

More mobile phones than humans...

© MMVI Cameron Moll. This document is available under the W3C Document License.

Quandary

Reader Poll Highly scientific, statistically significant (not really!)

10

© MMVI Cameron Moll. This document is available under the W3C Document License.

~400 159

11

Participants Unique handsets (Motorola RAZR, Palm Treo 650, Sony Ericsson K750i / K700i / T610, Nokia 6230...)

19

Manufacturers

44

Countries

© MMVI Cameron Moll. This document is available under the W3C Document License.

“Designers face a proliferation of capabilities that make the early [Mobile] Web look like a playground.” —Joe Shepter, “The Pulse of Modern Design”

12

© MMVI Cameron Moll. This document is available under the W3C Document License.

Mobile Web “Playground” WML, XHTML, -MP, -Basic... Plethora of user agents Varying coding practices, URIs, etc.

13

© MMVI Cameron Moll. This document is available under the W3C Document License.

What is the Mobile Web?

14

© MMVI Cameron Moll. This document is available under the W3C Document License.

?

Optimism More mobiles than PCs. More mobiles than landline phones. Web usage is continually increasing. You can utilize existing skills.

16

© MMVI Cameron Moll. This document is available under the W3C Document License.

Context

18

© MMVI Cameron Moll. This document is available under the W3C Document License.

Noooo!

19

© MMVI Cameron Moll. This document is available under the W3C Document License.

Instead...

20

What is contextually relevant?

© MMVI Cameron Moll. This document is available under the W3C Document License.

21

© MMVI Cameron Moll. This document is available under the W3C Document License.

Mobile = Mobility

22

© MMVI Cameron Moll. This document is available under the W3C Document License.

Design = Communication

23

© MMVI Cameron Moll. This document is available under the W3C Document License.

Therefore, mobile design is the art of communicating within an environment of mobility.

24

© MMVI Cameron Moll. This document is available under the W3C Document License.

Fundamentals

Most devices sold today are WAP 2.0.

26

© MMVI Cameron Moll. This document is available under the W3C Document License.

XHTML, not WML.

27

© MMVI Cameron Moll. This document is available under the W3C Document License.

What that means...

28

© MMVI Cameron Moll. This document is available under the W3C Document License.

english360.com

english360.com

english360.com/mobile (powered by MovableType)

However,

32

© MMVI Cameron Moll. This document is available under the W3C Document License.

XHTML/CSS support is inconsistent.* * highly

33

© MMVI Cameron Moll. This document is available under the W3C Document License.

Markup Test Pages cameronmoll.com/mobile

34

© MMVI Cameron Moll. This document is available under the W3C Document License.

35

© MMVI Cameron Moll. This document is available under the W3C Document License.

36

© MMVI Cameron Moll. This document is available under the W3C Document License.

37

© MMVI Cameron Moll. This document is available under the W3C Document License.

38

© MMVI Cameron Moll. This document is available under the W3C Document License.

39

© MMVI Cameron Moll. This document is available under the W3C Document License.

Test on target devices, not emulators.

40

© MMVI Cameron Moll. This document is available under the W3C Document License.

Methodology

Method Do nothing.

42

© MMVI Cameron Moll. This document is available under the W3C Document License.

31 kb

(markup only)

Method Do nothing. Strip images and styling.

44

© MMVI Cameron Moll. This document is available under the W3C Document License.

Method Do nothing. Strip images and styling. Handheld stylesheets.

45

© MMVI Cameron Moll. This document is available under the W3C Document License.

Method Do nothing. Strip images and styling. Handheld stylesheets. Mobile-specific site/app.

46

© MMVI Cameron Moll. This document is available under the W3C Document License.

47

© MMVI Cameron Moll. This document is available under the W3C Document License.

Miniaturize or Mobilize?

48

© MMVI Cameron Moll. This document is available under the W3C Document License.

Miniaturize Repurpose existing content

49

© MMVI Cameron Moll. This document is available under the W3C Document License.

craigslist.org

craigslist screen grab

51

© MMVI Cameron Moll. This document is available under the W3C Document License.

Primary Use Cases Choose area (city) Browse category Post a listing Search Event Calendar Forums

52

© MMVI Cameron Moll. This document is available under the W3C Document License.

Use Case Hiearchy

53

1. Search

Top element

2. Categories

Most frequented

3. Event calendar

Access to today, tomorrow

4. Choose area

By zip code or city name Assume San Francisco by default

© MMVI Cameron Moll. This document is available under the W3C Document License.

Search Text or numeric

Categories Most frequented

City Zip or name; would offer suggestions if not found

Opera Mini

Mobilize Content-, Context-, Component-specific

57

© MMVI Cameron Moll. This document is available under the W3C Document License.

58

© MMVI Cameron Moll. This document is available under the W3C Document License.

LBS

59

© MMVI Cameron Moll. This document is available under the W3C Document License.

Forces

61

SMS

Texting; SMS search

J2ME

Java-based apps, interactivity

AJAX

Javascript, XML

SVG

SVG Tiny; scalable vector graphics

LBS

Location-based services; GPS

© MMVI Cameron Moll. This document is available under the W3C Document License.

“ The mobile device has the potential to act as a significant reporter of data rather than a mere consumer of data.” —Joe Shepter, “The Pulse of Modern Design”

62

© MMVI Cameron Moll. This document is available under the W3C Document License.

63

© MMVI Cameron Moll. This document is available under the W3C Document License.

Device Detection “Sniff out” user agent strings for individual devices

64

© MMVI Cameron Moll. This document is available under the W3C Document License.

User Agents Proprietary vs. Cross-platform? Beyond mobile phones?

65

© MMVI Cameron Moll. This document is available under the W3C Document License.

http://www.tinyurl.com/l2lst

66

© MMVI Cameron Moll. This document is available under the W3C Document License.

Best Practices ...and even “standards”?

67

© MMVI Cameron Moll. This document is available under the W3C Document License.

Mobile Web Initiative W3C chartered Input by mobile developers, companies Best Practices

68

© MMVI Cameron Moll. This document is available under the W3C Document License.

Sample Guidelines Use valid markup. Use tables only if supported by target device. Use text equivalents for non-text elements. http://www.w3.org/TR/mobile-bp/

69

© MMVI Cameron Moll. This document is available under the W3C Document License.

Also... mobileOK

...remember these?

http://tinyurl.com/gzdrb

Best Practices Checker http://tinyurl.com/jsrkn

70

© MMVI Cameron Moll. This document is available under the W3C Document License.

Ideology

A mobile web that is desirable, dependable, disciplined.

72

© MMVI Cameron Moll. This document is available under the W3C Document License.

An array of thought leaders.

73

© MMVI Cameron Moll. This document is available under the W3C Document License.

User agent consistency.

74

© MMVI Cameron Moll. This document is available under the W3C Document License.

Mobile device wiki.

75

© MMVI Cameron Moll. This document is available under the W3C Document License.

...and?

76

© MMVI Cameron Moll. This document is available under the W3C Document License.

Questions?

cameronmoll.com [email protected] 801.644.8793