1. Mobile Web Design

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

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

4. Legacy

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

6. “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.

7. Staggering Numbers
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
7 © MMVI Cameron Moll. This document is available under the W3C Document License.

8. UK More mobile phones than humans...
8 © MMVI Cameron Moll. This document is available under the W3C Document License.

9. Quandary

10. Reader Poll
Highly scientific, statistically significant
(not really!)
10 © MMVI Cameron Moll. This document is available under the W3C Document License.

11. ~400 Participants
159 Unique handsets
(Motorola RAZR, Palm Treo 650, Sony Ericsson K750i / K700i / T610, Nokia 6230...)
19 Manufacturers
44 Countries
11 © MMVI Cameron Moll. This document is available under the W3C Document License.

12. “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.

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

14. What is the Mobile Web?
14 © MMVI Cameron Moll. This document is available under the W3C Document License.

15. ?

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

17. Context

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

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

20. Instead... What is contextually relevant?
20 © MMVI Cameron Moll. This document is available under the W3C Document License.

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

22. Mobile = Mobility
22 © MMVI Cameron Moll. This document is available under the W3C Document License.

23. Design = Communication
23 © MMVI Cameron Moll. This document is available under the W3C Document License.

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

25. Fundamentals

26. Most devices sold today are WAP 2.0.
26 © MMVI Cameron Moll. This document is available under the W3C Document License.

27. XHTML, not WML.
27 © MMVI Cameron Moll. This document is available under the W3C Document License.

28. What that means...
28 © MMVI Cameron Moll. This document is available under the W3C Document License.

29. english360.com

30. english360.com

31. english360.com/mobile (powered by MovableType)

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

33. XHTML/CSS support is inconsistent.*
* highly
33 © MMVI Cameron Moll. This document is available under the W3C Document License.

34. Markup Test Pages
cameronmoll.com/mobile
34 © MMVI Cameron Moll. This document is available under the W3C Document License.

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

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

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

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

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

40. Test on target devices, not emulators.
40 © MMVI Cameron Moll. This document is available under the W3C Document License.

41. Methodology

42. Method
Do nothing.
42 © MMVI Cameron Moll. This document is available under the W3C Document License.

43. 31 kb (markup only)

44. Method
Do nothing.
Strip images and styling.
44 © MMVI Cameron Moll. This document is available under the W3C Document License.

45. Method
Do nothing.
Strip images and styling.
Handheld stylesheets.
45 © MMVI Cameron Moll. This document is available under the W3C Document License.

46. 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. 47 © MMVI Cameron Moll. This document is available under the W3C Document License.

48. Miniaturize or Mobilize?
48 © MMVI Cameron Moll. This document is available under the W3C Document License.

49. Miniaturize
Repurpose existing content
49 © MMVI Cameron Moll. This document is available under the W3C Document License.

50. craigslist.org

51. craigslist screen grab
51 © MMVI Cameron Moll. This document is available under the W3C Document License.

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

53. Use Case Hiearchy
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
53 © MMVI Cameron Moll. This document is available under the W3C Document License.

55. Search
Text or numeric
Categories
Most frequented
City
Zip or name; would offer
suggestions if not found

56. Opera Mini

57. Mobilize
Content-, Context-, Component-specific
57 © MMVI Cameron Moll. This document is available under the W3C Document License.

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

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

60. 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
61 © MMVI Cameron Moll. This document is available under the W3C Document License.

62. “ 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. 63 © MMVI Cameron Moll. This document is available under the W3C Document License.

64. Device Detection
“Sniff out” user agent strings for individual devices
64 © MMVI Cameron Moll. This document is available under the W3C Document License.

65. User Agents
Proprietary vs. Cross-platform?
Beyond mobile phones?
65 © MMVI Cameron Moll. This document is available under the W3C Document License.

66. http://www.tinyurl.com/l2lst
66 © MMVI Cameron Moll. This document is available under the W3C Document License.

67. Best Practices
...and even “standards”?
67 © MMVI Cameron Moll. This document is available under the W3C Document License.

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

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

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

71. Ideology

72. A mobile web that is
desirable, dependable, disciplined.
72 © MMVI Cameron Moll. This document is available under the W3C Document License.

73. An array of thought leaders.
73 © MMVI Cameron Moll. This document is available under the W3C Document License.

74. User agent consistency.
74 © MMVI Cameron Moll. This document is available under the W3C Document License.

75. Mobile device wiki.
75 © MMVI Cameron Moll. This document is available under the W3C Document License.

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

77. Questions?

78. cameronmoll.com
email@cameronmoll.com
801.644.8793