Designers face a proliferation of capabilities that make the early Mobile Web look like a playground. Mobile design is the art of communicating within an environment of mobility. The mobile device has the potential to act as a significant reporter of data rather than a mere consumer of data. Idealogy: A mobile web that is desirable, dependable, disciplined.
Trang 1Mobile Web Design
Trang 2© MMVI Cameron Moll This document is available under the W3C Document License.
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
Trang 3© 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
Trang 4Legacy
Trang 5© MMVI Cameron Moll This document is available under the W3C Document License.
1910
5
Trang 6© 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
Trang 7© MMVI Cameron Moll This document is available under the W3C Document License.
Staggering Numbers
2000 10 million i-mode users (Japan)
2002 1 billion mobile phone users worldwide
2009 3 billion mobile phone users worldwide
7
Trang 8© MMVI Cameron Moll This document is available under the W3C Document License.
UK More mobile phones than humans
8
Trang 9Quandary
Trang 10© MMVI Cameron Moll This document is available under the W3C Document License.
Reader Poll
Highly scientific, statistically significant
(not really!)
10
Trang 11© MMVI Cameron Moll This document is available under the W3C Document License.
~400 159 19 44
Participants
Unique handsets
(Motorola RAZR, Palm Treo 650, Sony Ericsson K750i / K700i / T610, Nokia 6230 )
Manufacturers Countries
11
Trang 12© 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
Trang 13© 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
Trang 14© MMVI Cameron Moll This document is available under the W3C Document License.
What is the Mobile Web?
14
Trang 15?
Trang 16© 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
Trang 17Context
Trang 18© MMVI Cameron Moll This document is available under the W3C Document License.
18
Trang 19© MMVI Cameron Moll This document is available under the W3C Document License.
Noooo!
19
Trang 20© MMVI Cameron Moll This document is available under the W3C Document License.
Instead What is contextually relevant?
20
Trang 21© MMVI Cameron Moll This document is available under the W3C Document License.
21
Trang 22© MMVI Cameron Moll This document is available under the W3C Document License.
Mobile = Mobility
22
Trang 23© MMVI Cameron Moll This document is available under the W3C Document License.
Design = Communication
23
Trang 24© MMVI Cameron Moll This document is available under the W3C Document License.
Therefore, mobile design is the art of
communicating within an
24
Trang 25Fundamentals
Trang 26© MMVI Cameron Moll This document is available under the W3C Document License.
Most devices sold today are WAP 2.0.
26
Trang 27© MMVI Cameron Moll This document is available under the W3C Document License.
XHTML, not WML.
27
Trang 28© MMVI Cameron Moll This document is available under the W3C Document License.
What that means
28
Trang 29english360.com
Trang 31english360.com/mobile (powered by MovableType)
Trang 32© MMVI Cameron Moll This document is available under the W3C Document License.
However,
32
Trang 33© MMVI Cameron Moll This document is available under the W3C Document License.
XHTML/CSS support is inconsistent.*
* highly
33
Trang 34© MMVI Cameron Moll This document is available under the W3C Document License.
Markup Test Pages
cameronmoll.com/mobile
34
Trang 35© MMVI Cameron Moll This document is available under the W3C Document License.
35
Trang 36© MMVI Cameron Moll This document is available under the W3C Document License.
36
Trang 37© MMVI Cameron Moll This document is available under the W3C Document License.
37
Trang 38© MMVI Cameron Moll This document is available under the W3C Document License.
38
Trang 39© MMVI Cameron Moll This document is available under the W3C Document License.
39
Trang 40© MMVI Cameron Moll This document is available under the W3C Document License.
Test on target devices, not emulators.
40
Trang 41Methodology
Trang 42© MMVI Cameron Moll This document is available under the W3C Document License.
Method
Do nothing.
42
Trang 4331 kb (markup only)
Trang 44© MMVI Cameron Moll This document is available under the W3C Document License.
Method
Do nothing.
Strip images and styling.
44
Trang 45© MMVI Cameron Moll This document is available under the W3C Document License.
Trang 46© MMVI Cameron Moll This document is available under the W3C Document License.
Trang 47© MMVI Cameron Moll This document is available under the W3C Document License.
47
Trang 48© MMVI Cameron Moll This document is available under the W3C Document License.
Miniaturize or Mobilize?
48
Trang 49© MMVI Cameron Moll This document is available under the W3C Document License.
Miniaturize
Repurpose existing content
49
Trang 50craigslist.org
Trang 51© MMVI Cameron Moll This document is available under the W3C Document License.
craigslist screen grab
51
Trang 52© MMVI Cameron Moll This document is available under the W3C Document License.
Primary Use Cases
Choose area (city)
Trang 53© MMVI Cameron Moll This document is available under the W3C Document License.
Use Case Hiearchy
By zip code or city name Assume San Francisco by default
53
Trang 56Opera Mini
Trang 57© MMVI Cameron Moll This document is available under the W3C Document License.
Mobilize
Content-, Context-, Component-specific
57
Trang 58© MMVI Cameron Moll This document is available under the W3C Document License.
58
Trang 59© MMVI Cameron Moll This document is available under the W3C Document License.
LBS
59
Trang 60Forces
Trang 61© MMVI Cameron Moll This document is available under the W3C Document License.
SMS J2ME AJAX SVG LBS
61
Texting; SMS search Java-based apps, interactivity Javascript, XML
SVG Tiny; scalable vector graphics Location-based services; GPS
Trang 62© 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
Trang 63© MMVI Cameron Moll This document is available under the W3C Document License.
63
Trang 64© MMVI Cameron Moll This document is available under the W3C Document License.
Device Detection
“Sniff out” user agent strings for individual devices
64
Trang 65© MMVI Cameron Moll This document is available under the W3C Document License.
User Agents
Proprietary vs Cross-platform?
Beyond mobile phones?
65
Trang 66© MMVI Cameron Moll This document is available under the W3C Document License.
http://www.tinyurl.com/l2lst
66
Trang 67© MMVI Cameron Moll This document is available under the W3C Document License.
Best Practices
and even “standards”?
67
Trang 68© 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
Trang 69© 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
Trang 70© MMVI Cameron Moll This document is available under the W3C Document License.
Trang 71Ideology
Trang 72© MMVI Cameron Moll This document is available under the W3C Document License.
A mobile web that is
desirable, dependable, disciplined.
72
Trang 73© MMVI Cameron Moll This document is available under the W3C Document License.
An array of thought leaders.
73
Trang 74© MMVI Cameron Moll This document is available under the W3C Document License.
User agent consistency.
74
Trang 75© MMVI Cameron Moll This document is available under the W3C Document License.
Mobile device wiki.
75
Trang 76© MMVI Cameron Moll This document is available under the W3C Document License.
and?
76
Trang 77Questions?
Trang 78email@cameronmoll.com
801.644.8793