mobile design - world wide web consortium · pdf file2 0 0 0 1 0 m illio n i-m o d e users...
TRANSCRIPT
![Page 1: Mobile Design - World Wide Web Consortium · PDF file2 0 0 0 1 0 m illio n i-m o d e users (Jap an) 2 0 0 2 1 b illio n m o b ile p ho ne users w o rld w id e 2 0 0 9 3 b illio n m](https://reader036.vdocuments.site/reader036/viewer/2022070607/5aa999617f8b9a72188d1c2f/html5/thumbnails/1.jpg)
Mobile Web Design
![Page 2: Mobile Design - World Wide Web Consortium · PDF file2 0 0 0 1 0 m illio n i-m o d e users (Jap an) 2 0 0 2 1 b illio n m o b ile p ho ne users w o rld w id e 2 0 0 9 3 b illio n m](https://reader036.vdocuments.site/reader036/viewer/2022070607/5aa999617f8b9a72188d1c2f/html5/thumbnails/2.jpg)
© 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
![Page 3: Mobile Design - World Wide Web Consortium · PDF file2 0 0 0 1 0 m illio n i-m o d e users (Jap an) 2 0 0 2 1 b illio n m o b ile p ho ne users w o rld w id e 2 0 0 9 3 b illio n m](https://reader036.vdocuments.site/reader036/viewer/2022070607/5aa999617f8b9a72188d1c2f/html5/thumbnails/3.jpg)
© 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
![Page 4: Mobile Design - World Wide Web Consortium · PDF file2 0 0 0 1 0 m illio n i-m o d e users (Jap an) 2 0 0 2 1 b illio n m o b ile p ho ne users w o rld w id e 2 0 0 9 3 b illio n m](https://reader036.vdocuments.site/reader036/viewer/2022070607/5aa999617f8b9a72188d1c2f/html5/thumbnails/4.jpg)
Legacy
![Page 5: Mobile Design - World Wide Web Consortium · PDF file2 0 0 0 1 0 m illio n i-m o d e users (Jap an) 2 0 0 2 1 b illio n m o b ile p ho ne users w o rld w id e 2 0 0 9 3 b illio n m](https://reader036.vdocuments.site/reader036/viewer/2022070607/5aa999617f8b9a72188d1c2f/html5/thumbnails/5.jpg)
© MMVI Cameron Moll. This document is available under the W3C Document License.
1910
5
![Page 6: Mobile Design - World Wide Web Consortium · PDF file2 0 0 0 1 0 m illio n i-m o d e users (Jap an) 2 0 0 2 1 b illio n m o b ile p ho ne users w o rld w id e 2 0 0 9 3 b illio n m](https://reader036.vdocuments.site/reader036/viewer/2022070607/5aa999617f8b9a72188d1c2f/html5/thumbnails/6.jpg)
© 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
![Page 7: Mobile Design - World Wide Web Consortium · PDF file2 0 0 0 1 0 m illio n i-m o d e users (Jap an) 2 0 0 2 1 b illio n m o b ile p ho ne users w o rld w id e 2 0 0 9 3 b illio n m](https://reader036.vdocuments.site/reader036/viewer/2022070607/5aa999617f8b9a72188d1c2f/html5/thumbnails/7.jpg)
© MMVI Cameron Moll. This document is available under the W3C Document License.
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
![Page 8: Mobile Design - World Wide Web Consortium · PDF file2 0 0 0 1 0 m illio n i-m o d e users (Jap an) 2 0 0 2 1 b illio n m o b ile p ho ne users w o rld w id e 2 0 0 9 3 b illio n m](https://reader036.vdocuments.site/reader036/viewer/2022070607/5aa999617f8b9a72188d1c2f/html5/thumbnails/8.jpg)
© MMVI Cameron Moll. This document is available under the W3C Document License.
UK More mobile phones than humans...
8
![Page 9: Mobile Design - World Wide Web Consortium · PDF file2 0 0 0 1 0 m illio n i-m o d e users (Jap an) 2 0 0 2 1 b illio n m o b ile p ho ne users w o rld w id e 2 0 0 9 3 b illio n m](https://reader036.vdocuments.site/reader036/viewer/2022070607/5aa999617f8b9a72188d1c2f/html5/thumbnails/9.jpg)
Quandary
![Page 10: Mobile Design - World Wide Web Consortium · PDF file2 0 0 0 1 0 m illio n i-m o d e users (Jap an) 2 0 0 2 1 b illio n m o b ile p ho ne users w o rld w id e 2 0 0 9 3 b illio n m](https://reader036.vdocuments.site/reader036/viewer/2022070607/5aa999617f8b9a72188d1c2f/html5/thumbnails/10.jpg)
© MMVI Cameron Moll. This document is available under the W3C Document License.
Reader Poll
Highly scientific, statistically significant
(not really!)
10
![Page 11: Mobile Design - World Wide Web Consortium · PDF file2 0 0 0 1 0 m illio n i-m o d e users (Jap an) 2 0 0 2 1 b illio n m o b ile p ho ne users w o rld w id e 2 0 0 9 3 b illio n m](https://reader036.vdocuments.site/reader036/viewer/2022070607/5aa999617f8b9a72188d1c2f/html5/thumbnails/11.jpg)
© 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
![Page 12: Mobile Design - World Wide Web Consortium · PDF file2 0 0 0 1 0 m illio n i-m o d e users (Jap an) 2 0 0 2 1 b illio n m o b ile p ho ne users w o rld w id e 2 0 0 9 3 b illio n m](https://reader036.vdocuments.site/reader036/viewer/2022070607/5aa999617f8b9a72188d1c2f/html5/thumbnails/12.jpg)
© 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
![Page 13: Mobile Design - World Wide Web Consortium · PDF file2 0 0 0 1 0 m illio n i-m o d e users (Jap an) 2 0 0 2 1 b illio n m o b ile p ho ne users w o rld w id e 2 0 0 9 3 b illio n m](https://reader036.vdocuments.site/reader036/viewer/2022070607/5aa999617f8b9a72188d1c2f/html5/thumbnails/13.jpg)
© 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
![Page 14: Mobile Design - World Wide Web Consortium · PDF file2 0 0 0 1 0 m illio n i-m o d e users (Jap an) 2 0 0 2 1 b illio n m o b ile p ho ne users w o rld w id e 2 0 0 9 3 b illio n m](https://reader036.vdocuments.site/reader036/viewer/2022070607/5aa999617f8b9a72188d1c2f/html5/thumbnails/14.jpg)
© MMVI Cameron Moll. This document is available under the W3C Document License.
What is the Mobile Web?
14
![Page 15: Mobile Design - World Wide Web Consortium · PDF file2 0 0 0 1 0 m illio n i-m o d e users (Jap an) 2 0 0 2 1 b illio n m o b ile p ho ne users w o rld w id e 2 0 0 9 3 b illio n m](https://reader036.vdocuments.site/reader036/viewer/2022070607/5aa999617f8b9a72188d1c2f/html5/thumbnails/15.jpg)
?
![Page 16: Mobile Design - World Wide Web Consortium · PDF file2 0 0 0 1 0 m illio n i-m o d e users (Jap an) 2 0 0 2 1 b illio n m o b ile p ho ne users w o rld w id e 2 0 0 9 3 b illio n m](https://reader036.vdocuments.site/reader036/viewer/2022070607/5aa999617f8b9a72188d1c2f/html5/thumbnails/16.jpg)
© 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
![Page 17: Mobile Design - World Wide Web Consortium · PDF file2 0 0 0 1 0 m illio n i-m o d e users (Jap an) 2 0 0 2 1 b illio n m o b ile p ho ne users w o rld w id e 2 0 0 9 3 b illio n m](https://reader036.vdocuments.site/reader036/viewer/2022070607/5aa999617f8b9a72188d1c2f/html5/thumbnails/17.jpg)
Context
![Page 18: Mobile Design - World Wide Web Consortium · PDF file2 0 0 0 1 0 m illio n i-m o d e users (Jap an) 2 0 0 2 1 b illio n m o b ile p ho ne users w o rld w id e 2 0 0 9 3 b illio n m](https://reader036.vdocuments.site/reader036/viewer/2022070607/5aa999617f8b9a72188d1c2f/html5/thumbnails/18.jpg)
© MMVI Cameron Moll. This document is available under the W3C Document License.18
![Page 19: Mobile Design - World Wide Web Consortium · PDF file2 0 0 0 1 0 m illio n i-m o d e users (Jap an) 2 0 0 2 1 b illio n m o b ile p ho ne users w o rld w id e 2 0 0 9 3 b illio n m](https://reader036.vdocuments.site/reader036/viewer/2022070607/5aa999617f8b9a72188d1c2f/html5/thumbnails/19.jpg)
© MMVI Cameron Moll. This document is available under the W3C Document License.
Noooo!
19
![Page 20: Mobile Design - World Wide Web Consortium · PDF file2 0 0 0 1 0 m illio n i-m o d e users (Jap an) 2 0 0 2 1 b illio n m o b ile p ho ne users w o rld w id e 2 0 0 9 3 b illio n m](https://reader036.vdocuments.site/reader036/viewer/2022070607/5aa999617f8b9a72188d1c2f/html5/thumbnails/20.jpg)
© MMVI Cameron Moll. This document is available under the W3C Document License.
Instead... What is contextually relevant?
20
![Page 21: Mobile Design - World Wide Web Consortium · PDF file2 0 0 0 1 0 m illio n i-m o d e users (Jap an) 2 0 0 2 1 b illio n m o b ile p ho ne users w o rld w id e 2 0 0 9 3 b illio n m](https://reader036.vdocuments.site/reader036/viewer/2022070607/5aa999617f8b9a72188d1c2f/html5/thumbnails/21.jpg)
© MMVI Cameron Moll. This document is available under the W3C Document License.21
![Page 22: Mobile Design - World Wide Web Consortium · PDF file2 0 0 0 1 0 m illio n i-m o d e users (Jap an) 2 0 0 2 1 b illio n m o b ile p ho ne users w o rld w id e 2 0 0 9 3 b illio n m](https://reader036.vdocuments.site/reader036/viewer/2022070607/5aa999617f8b9a72188d1c2f/html5/thumbnails/22.jpg)
© MMVI Cameron Moll. This document is available under the W3C Document License.
Mobile = Mobility
22
![Page 23: Mobile Design - World Wide Web Consortium · PDF file2 0 0 0 1 0 m illio n i-m o d e users (Jap an) 2 0 0 2 1 b illio n m o b ile p ho ne users w o rld w id e 2 0 0 9 3 b illio n m](https://reader036.vdocuments.site/reader036/viewer/2022070607/5aa999617f8b9a72188d1c2f/html5/thumbnails/23.jpg)
© MMVI Cameron Moll. This document is available under the W3C Document License.
Design = Communication
23
![Page 24: Mobile Design - World Wide Web Consortium · PDF file2 0 0 0 1 0 m illio n i-m o d e users (Jap an) 2 0 0 2 1 b illio n m o b ile p ho ne users w o rld w id e 2 0 0 9 3 b illio n m](https://reader036.vdocuments.site/reader036/viewer/2022070607/5aa999617f8b9a72188d1c2f/html5/thumbnails/24.jpg)
© 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
![Page 25: Mobile Design - World Wide Web Consortium · PDF file2 0 0 0 1 0 m illio n i-m o d e users (Jap an) 2 0 0 2 1 b illio n m o b ile p ho ne users w o rld w id e 2 0 0 9 3 b illio n m](https://reader036.vdocuments.site/reader036/viewer/2022070607/5aa999617f8b9a72188d1c2f/html5/thumbnails/25.jpg)
Fundamentals
![Page 26: Mobile Design - World Wide Web Consortium · PDF file2 0 0 0 1 0 m illio n i-m o d e users (Jap an) 2 0 0 2 1 b illio n m o b ile p ho ne users w o rld w id e 2 0 0 9 3 b illio n m](https://reader036.vdocuments.site/reader036/viewer/2022070607/5aa999617f8b9a72188d1c2f/html5/thumbnails/26.jpg)
© MMVI Cameron Moll. This document is available under the W3C Document License.
Most devices sold today are WAP 2.0.
26
![Page 27: Mobile Design - World Wide Web Consortium · PDF file2 0 0 0 1 0 m illio n i-m o d e users (Jap an) 2 0 0 2 1 b illio n m o b ile p ho ne users w o rld w id e 2 0 0 9 3 b illio n m](https://reader036.vdocuments.site/reader036/viewer/2022070607/5aa999617f8b9a72188d1c2f/html5/thumbnails/27.jpg)
© MMVI Cameron Moll. This document is available under the W3C Document License.
XHTML, not WML.
27
![Page 28: Mobile Design - World Wide Web Consortium · PDF file2 0 0 0 1 0 m illio n i-m o d e users (Jap an) 2 0 0 2 1 b illio n m o b ile p ho ne users w o rld w id e 2 0 0 9 3 b illio n m](https://reader036.vdocuments.site/reader036/viewer/2022070607/5aa999617f8b9a72188d1c2f/html5/thumbnails/28.jpg)
© MMVI Cameron Moll. This document is available under the W3C Document License.
What that means...
28
![Page 29: Mobile Design - World Wide Web Consortium · PDF file2 0 0 0 1 0 m illio n i-m o d e users (Jap an) 2 0 0 2 1 b illio n m o b ile p ho ne users w o rld w id e 2 0 0 9 3 b illio n m](https://reader036.vdocuments.site/reader036/viewer/2022070607/5aa999617f8b9a72188d1c2f/html5/thumbnails/29.jpg)
english360.com
![Page 30: Mobile Design - World Wide Web Consortium · PDF file2 0 0 0 1 0 m illio n i-m o d e users (Jap an) 2 0 0 2 1 b illio n m o b ile p ho ne users w o rld w id e 2 0 0 9 3 b illio n m](https://reader036.vdocuments.site/reader036/viewer/2022070607/5aa999617f8b9a72188d1c2f/html5/thumbnails/30.jpg)
english360.com
![Page 31: Mobile Design - World Wide Web Consortium · PDF file2 0 0 0 1 0 m illio n i-m o d e users (Jap an) 2 0 0 2 1 b illio n m o b ile p ho ne users w o rld w id e 2 0 0 9 3 b illio n m](https://reader036.vdocuments.site/reader036/viewer/2022070607/5aa999617f8b9a72188d1c2f/html5/thumbnails/31.jpg)
english360.com/mobile (powered by MovableType)
![Page 32: Mobile Design - World Wide Web Consortium · PDF file2 0 0 0 1 0 m illio n i-m o d e users (Jap an) 2 0 0 2 1 b illio n m o b ile p ho ne users w o rld w id e 2 0 0 9 3 b illio n m](https://reader036.vdocuments.site/reader036/viewer/2022070607/5aa999617f8b9a72188d1c2f/html5/thumbnails/32.jpg)
© MMVI Cameron Moll. This document is available under the W3C Document License.
However,
32
![Page 33: Mobile Design - World Wide Web Consortium · PDF file2 0 0 0 1 0 m illio n i-m o d e users (Jap an) 2 0 0 2 1 b illio n m o b ile p ho ne users w o rld w id e 2 0 0 9 3 b illio n m](https://reader036.vdocuments.site/reader036/viewer/2022070607/5aa999617f8b9a72188d1c2f/html5/thumbnails/33.jpg)
© MMVI Cameron Moll. This document is available under the W3C Document License.
XHTML/CSS support is inconsistent.*
* highly
33
![Page 34: Mobile Design - World Wide Web Consortium · PDF file2 0 0 0 1 0 m illio n i-m o d e users (Jap an) 2 0 0 2 1 b illio n m o b ile p ho ne users w o rld w id e 2 0 0 9 3 b illio n m](https://reader036.vdocuments.site/reader036/viewer/2022070607/5aa999617f8b9a72188d1c2f/html5/thumbnails/34.jpg)
© MMVI Cameron Moll. This document is available under the W3C Document License.
Markup Test Pages
cameronmoll.com/mobile
34
![Page 35: Mobile Design - World Wide Web Consortium · PDF file2 0 0 0 1 0 m illio n i-m o d e users (Jap an) 2 0 0 2 1 b illio n m o b ile p ho ne users w o rld w id e 2 0 0 9 3 b illio n m](https://reader036.vdocuments.site/reader036/viewer/2022070607/5aa999617f8b9a72188d1c2f/html5/thumbnails/35.jpg)
© MMVI Cameron Moll. This document is available under the W3C Document License.35
![Page 36: Mobile Design - World Wide Web Consortium · PDF file2 0 0 0 1 0 m illio n i-m o d e users (Jap an) 2 0 0 2 1 b illio n m o b ile p ho ne users w o rld w id e 2 0 0 9 3 b illio n m](https://reader036.vdocuments.site/reader036/viewer/2022070607/5aa999617f8b9a72188d1c2f/html5/thumbnails/36.jpg)
© MMVI Cameron Moll. This document is available under the W3C Document License.36
![Page 37: Mobile Design - World Wide Web Consortium · PDF file2 0 0 0 1 0 m illio n i-m o d e users (Jap an) 2 0 0 2 1 b illio n m o b ile p ho ne users w o rld w id e 2 0 0 9 3 b illio n m](https://reader036.vdocuments.site/reader036/viewer/2022070607/5aa999617f8b9a72188d1c2f/html5/thumbnails/37.jpg)
© MMVI Cameron Moll. This document is available under the W3C Document License.37
![Page 38: Mobile Design - World Wide Web Consortium · PDF file2 0 0 0 1 0 m illio n i-m o d e users (Jap an) 2 0 0 2 1 b illio n m o b ile p ho ne users w o rld w id e 2 0 0 9 3 b illio n m](https://reader036.vdocuments.site/reader036/viewer/2022070607/5aa999617f8b9a72188d1c2f/html5/thumbnails/38.jpg)
© MMVI Cameron Moll. This document is available under the W3C Document License.38
![Page 39: Mobile Design - World Wide Web Consortium · PDF file2 0 0 0 1 0 m illio n i-m o d e users (Jap an) 2 0 0 2 1 b illio n m o b ile p ho ne users w o rld w id e 2 0 0 9 3 b illio n m](https://reader036.vdocuments.site/reader036/viewer/2022070607/5aa999617f8b9a72188d1c2f/html5/thumbnails/39.jpg)
© MMVI Cameron Moll. This document is available under the W3C Document License.39
![Page 40: Mobile Design - World Wide Web Consortium · PDF file2 0 0 0 1 0 m illio n i-m o d e users (Jap an) 2 0 0 2 1 b illio n m o b ile p ho ne users w o rld w id e 2 0 0 9 3 b illio n m](https://reader036.vdocuments.site/reader036/viewer/2022070607/5aa999617f8b9a72188d1c2f/html5/thumbnails/40.jpg)
© MMVI Cameron Moll. This document is available under the W3C Document License.
Test on target devices, not emulators.
40
![Page 41: Mobile Design - World Wide Web Consortium · PDF file2 0 0 0 1 0 m illio n i-m o d e users (Jap an) 2 0 0 2 1 b illio n m o b ile p ho ne users w o rld w id e 2 0 0 9 3 b illio n m](https://reader036.vdocuments.site/reader036/viewer/2022070607/5aa999617f8b9a72188d1c2f/html5/thumbnails/41.jpg)
Methodology
![Page 42: Mobile Design - World Wide Web Consortium · PDF file2 0 0 0 1 0 m illio n i-m o d e users (Jap an) 2 0 0 2 1 b illio n m o b ile p ho ne users w o rld w id e 2 0 0 9 3 b illio n m](https://reader036.vdocuments.site/reader036/viewer/2022070607/5aa999617f8b9a72188d1c2f/html5/thumbnails/42.jpg)
© MMVI Cameron Moll. This document is available under the W3C Document License.
Method
Do nothing.
42
![Page 43: Mobile Design - World Wide Web Consortium · PDF file2 0 0 0 1 0 m illio n i-m o d e users (Jap an) 2 0 0 2 1 b illio n m o b ile p ho ne users w o rld w id e 2 0 0 9 3 b illio n m](https://reader036.vdocuments.site/reader036/viewer/2022070607/5aa999617f8b9a72188d1c2f/html5/thumbnails/43.jpg)
31 kb (markup only)
![Page 44: Mobile Design - World Wide Web Consortium · PDF file2 0 0 0 1 0 m illio n i-m o d e users (Jap an) 2 0 0 2 1 b illio n m o b ile p ho ne users w o rld w id e 2 0 0 9 3 b illio n m](https://reader036.vdocuments.site/reader036/viewer/2022070607/5aa999617f8b9a72188d1c2f/html5/thumbnails/44.jpg)
© MMVI Cameron Moll. This document is available under the W3C Document License.
Method
Do nothing.
Strip images and styling.
44
![Page 45: Mobile Design - World Wide Web Consortium · PDF file2 0 0 0 1 0 m illio n i-m o d e users (Jap an) 2 0 0 2 1 b illio n m o b ile p ho ne users w o rld w id e 2 0 0 9 3 b illio n m](https://reader036.vdocuments.site/reader036/viewer/2022070607/5aa999617f8b9a72188d1c2f/html5/thumbnails/45.jpg)
© MMVI Cameron Moll. This document is available under the W3C Document License.
Method
Do nothing.
Strip images and styling.
Handheld stylesheets.
45
![Page 46: Mobile Design - World Wide Web Consortium · PDF file2 0 0 0 1 0 m illio n i-m o d e users (Jap an) 2 0 0 2 1 b illio n m o b ile p ho ne users w o rld w id e 2 0 0 9 3 b illio n m](https://reader036.vdocuments.site/reader036/viewer/2022070607/5aa999617f8b9a72188d1c2f/html5/thumbnails/46.jpg)
© 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
![Page 47: Mobile Design - World Wide Web Consortium · PDF file2 0 0 0 1 0 m illio n i-m o d e users (Jap an) 2 0 0 2 1 b illio n m o b ile p ho ne users w o rld w id e 2 0 0 9 3 b illio n m](https://reader036.vdocuments.site/reader036/viewer/2022070607/5aa999617f8b9a72188d1c2f/html5/thumbnails/47.jpg)
© MMVI Cameron Moll. This document is available under the W3C Document License.47
![Page 48: Mobile Design - World Wide Web Consortium · PDF file2 0 0 0 1 0 m illio n i-m o d e users (Jap an) 2 0 0 2 1 b illio n m o b ile p ho ne users w o rld w id e 2 0 0 9 3 b illio n m](https://reader036.vdocuments.site/reader036/viewer/2022070607/5aa999617f8b9a72188d1c2f/html5/thumbnails/48.jpg)
© MMVI Cameron Moll. This document is available under the W3C Document License.
Miniaturize or Mobilize?
48
![Page 49: Mobile Design - World Wide Web Consortium · PDF file2 0 0 0 1 0 m illio n i-m o d e users (Jap an) 2 0 0 2 1 b illio n m o b ile p ho ne users w o rld w id e 2 0 0 9 3 b illio n m](https://reader036.vdocuments.site/reader036/viewer/2022070607/5aa999617f8b9a72188d1c2f/html5/thumbnails/49.jpg)
© MMVI Cameron Moll. This document is available under the W3C Document License.
Miniaturize
Repurpose existing content
49
![Page 50: Mobile Design - World Wide Web Consortium · PDF file2 0 0 0 1 0 m illio n i-m o d e users (Jap an) 2 0 0 2 1 b illio n m o b ile p ho ne users w o rld w id e 2 0 0 9 3 b illio n m](https://reader036.vdocuments.site/reader036/viewer/2022070607/5aa999617f8b9a72188d1c2f/html5/thumbnails/50.jpg)
craigslist.org
![Page 51: Mobile Design - World Wide Web Consortium · PDF file2 0 0 0 1 0 m illio n i-m o d e users (Jap an) 2 0 0 2 1 b illio n m o b ile p ho ne users w o rld w id e 2 0 0 9 3 b illio n m](https://reader036.vdocuments.site/reader036/viewer/2022070607/5aa999617f8b9a72188d1c2f/html5/thumbnails/51.jpg)
© MMVI Cameron Moll. This document is available under the W3C Document License.
craigslist screen grab
51
![Page 52: Mobile Design - World Wide Web Consortium · PDF file2 0 0 0 1 0 m illio n i-m o d e users (Jap an) 2 0 0 2 1 b illio n m o b ile p ho ne users w o rld w id e 2 0 0 9 3 b illio n m](https://reader036.vdocuments.site/reader036/viewer/2022070607/5aa999617f8b9a72188d1c2f/html5/thumbnails/52.jpg)
© 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
![Page 53: Mobile Design - World Wide Web Consortium · PDF file2 0 0 0 1 0 m illio n i-m o d e users (Jap an) 2 0 0 2 1 b illio n m o b ile p ho ne users w o rld w id e 2 0 0 9 3 b illio n m](https://reader036.vdocuments.site/reader036/viewer/2022070607/5aa999617f8b9a72188d1c2f/html5/thumbnails/53.jpg)
© MMVI Cameron Moll. This document is available under the W3C Document License.
Use Case Hiearchy
1. Search
2. Categories
3. Event calendar
4. Choose area
Top element
Most frequented
Access to today, tomorrow
By zip code or city nameAssume San Francisco by default
53
![Page 54: Mobile Design - World Wide Web Consortium · PDF file2 0 0 0 1 0 m illio n i-m o d e users (Jap an) 2 0 0 2 1 b illio n m o b ile p ho ne users w o rld w id e 2 0 0 9 3 b illio n m](https://reader036.vdocuments.site/reader036/viewer/2022070607/5aa999617f8b9a72188d1c2f/html5/thumbnails/54.jpg)
![Page 55: Mobile Design - World Wide Web Consortium · PDF file2 0 0 0 1 0 m illio n i-m o d e users (Jap an) 2 0 0 2 1 b illio n m o b ile p ho ne users w o rld w id e 2 0 0 9 3 b illio n m](https://reader036.vdocuments.site/reader036/viewer/2022070607/5aa999617f8b9a72188d1c2f/html5/thumbnails/55.jpg)
Text or numericSearch
Most frequentedCategories
Zip or name; would offer suggestions if not found
City
![Page 56: Mobile Design - World Wide Web Consortium · PDF file2 0 0 0 1 0 m illio n i-m o d e users (Jap an) 2 0 0 2 1 b illio n m o b ile p ho ne users w o rld w id e 2 0 0 9 3 b illio n m](https://reader036.vdocuments.site/reader036/viewer/2022070607/5aa999617f8b9a72188d1c2f/html5/thumbnails/56.jpg)
Opera Mini
![Page 57: Mobile Design - World Wide Web Consortium · PDF file2 0 0 0 1 0 m illio n i-m o d e users (Jap an) 2 0 0 2 1 b illio n m o b ile p ho ne users w o rld w id e 2 0 0 9 3 b illio n m](https://reader036.vdocuments.site/reader036/viewer/2022070607/5aa999617f8b9a72188d1c2f/html5/thumbnails/57.jpg)
© MMVI Cameron Moll. This document is available under the W3C Document License.
Mobilize
Content-, Context-, Component-specific
57
![Page 58: Mobile Design - World Wide Web Consortium · PDF file2 0 0 0 1 0 m illio n i-m o d e users (Jap an) 2 0 0 2 1 b illio n m o b ile p ho ne users w o rld w id e 2 0 0 9 3 b illio n m](https://reader036.vdocuments.site/reader036/viewer/2022070607/5aa999617f8b9a72188d1c2f/html5/thumbnails/58.jpg)
© MMVI Cameron Moll. This document is available under the W3C Document License.58
![Page 59: Mobile Design - World Wide Web Consortium · PDF file2 0 0 0 1 0 m illio n i-m o d e users (Jap an) 2 0 0 2 1 b illio n m o b ile p ho ne users w o rld w id e 2 0 0 9 3 b illio n m](https://reader036.vdocuments.site/reader036/viewer/2022070607/5aa999617f8b9a72188d1c2f/html5/thumbnails/59.jpg)
© MMVI Cameron Moll. This document is available under the W3C Document License.
LBS
59
![Page 60: Mobile Design - World Wide Web Consortium · PDF file2 0 0 0 1 0 m illio n i-m o d e users (Jap an) 2 0 0 2 1 b illio n m o b ile p ho ne users w o rld w id e 2 0 0 9 3 b illio n m](https://reader036.vdocuments.site/reader036/viewer/2022070607/5aa999617f8b9a72188d1c2f/html5/thumbnails/60.jpg)
Forces
![Page 61: Mobile Design - World Wide Web Consortium · PDF file2 0 0 0 1 0 m illio n i-m o d e users (Jap an) 2 0 0 2 1 b illio n m o b ile p ho ne users w o rld w id e 2 0 0 9 3 b illio n m](https://reader036.vdocuments.site/reader036/viewer/2022070607/5aa999617f8b9a72188d1c2f/html5/thumbnails/61.jpg)
© 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
![Page 62: Mobile Design - World Wide Web Consortium · PDF file2 0 0 0 1 0 m illio n i-m o d e users (Jap an) 2 0 0 2 1 b illio n m o b ile p ho ne users w o rld w id e 2 0 0 9 3 b illio n m](https://reader036.vdocuments.site/reader036/viewer/2022070607/5aa999617f8b9a72188d1c2f/html5/thumbnails/62.jpg)
© 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
![Page 63: Mobile Design - World Wide Web Consortium · PDF file2 0 0 0 1 0 m illio n i-m o d e users (Jap an) 2 0 0 2 1 b illio n m o b ile p ho ne users w o rld w id e 2 0 0 9 3 b illio n m](https://reader036.vdocuments.site/reader036/viewer/2022070607/5aa999617f8b9a72188d1c2f/html5/thumbnails/63.jpg)
© MMVI Cameron Moll. This document is available under the W3C Document License.63
![Page 64: Mobile Design - World Wide Web Consortium · PDF file2 0 0 0 1 0 m illio n i-m o d e users (Jap an) 2 0 0 2 1 b illio n m o b ile p ho ne users w o rld w id e 2 0 0 9 3 b illio n m](https://reader036.vdocuments.site/reader036/viewer/2022070607/5aa999617f8b9a72188d1c2f/html5/thumbnails/64.jpg)
© MMVI Cameron Moll. This document is available under the W3C Document License.
Device Detection
“Sniff out” user agent strings for individual devices
64
![Page 65: Mobile Design - World Wide Web Consortium · PDF file2 0 0 0 1 0 m illio n i-m o d e users (Jap an) 2 0 0 2 1 b illio n m o b ile p ho ne users w o rld w id e 2 0 0 9 3 b illio n m](https://reader036.vdocuments.site/reader036/viewer/2022070607/5aa999617f8b9a72188d1c2f/html5/thumbnails/65.jpg)
© MMVI Cameron Moll. This document is available under the W3C Document License.
User Agents
Proprietary vs. Cross-platform?
Beyond mobile phones?
65
![Page 66: Mobile Design - World Wide Web Consortium · PDF file2 0 0 0 1 0 m illio n i-m o d e users (Jap an) 2 0 0 2 1 b illio n m o b ile p ho ne users w o rld w id e 2 0 0 9 3 b illio n m](https://reader036.vdocuments.site/reader036/viewer/2022070607/5aa999617f8b9a72188d1c2f/html5/thumbnails/66.jpg)
© MMVI Cameron Moll. This document is available under the W3C Document License.
http://www.tinyurl.com/l2lst
66
![Page 67: Mobile Design - World Wide Web Consortium · PDF file2 0 0 0 1 0 m illio n i-m o d e users (Jap an) 2 0 0 2 1 b illio n m o b ile p ho ne users w o rld w id e 2 0 0 9 3 b illio n m](https://reader036.vdocuments.site/reader036/viewer/2022070607/5aa999617f8b9a72188d1c2f/html5/thumbnails/67.jpg)
© MMVI Cameron Moll. This document is available under the W3C Document License.
Best Practices
...and even “standards”?
67
![Page 68: Mobile Design - World Wide Web Consortium · PDF file2 0 0 0 1 0 m illio n i-m o d e users (Jap an) 2 0 0 2 1 b illio n m o b ile p ho ne users w o rld w id e 2 0 0 9 3 b illio n m](https://reader036.vdocuments.site/reader036/viewer/2022070607/5aa999617f8b9a72188d1c2f/html5/thumbnails/68.jpg)
© 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
![Page 69: Mobile Design - World Wide Web Consortium · PDF file2 0 0 0 1 0 m illio n i-m o d e users (Jap an) 2 0 0 2 1 b illio n m o b ile p ho ne users w o rld w id e 2 0 0 9 3 b illio n m](https://reader036.vdocuments.site/reader036/viewer/2022070607/5aa999617f8b9a72188d1c2f/html5/thumbnails/69.jpg)
© 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
![Page 70: Mobile Design - World Wide Web Consortium · PDF file2 0 0 0 1 0 m illio n i-m o d e users (Jap an) 2 0 0 2 1 b illio n m o b ile p ho ne users w o rld w id e 2 0 0 9 3 b illio n m](https://reader036.vdocuments.site/reader036/viewer/2022070607/5aa999617f8b9a72188d1c2f/html5/thumbnails/70.jpg)
© MMVI Cameron Moll. This document is available under the W3C Document License.
Also...
mobileOKhttp://tinyurl.com/gzdrb
Best Practices Checkerhttp://tinyurl.com/jsrkn
...remember these?
70
![Page 71: Mobile Design - World Wide Web Consortium · PDF file2 0 0 0 1 0 m illio n i-m o d e users (Jap an) 2 0 0 2 1 b illio n m o b ile p ho ne users w o rld w id e 2 0 0 9 3 b illio n m](https://reader036.vdocuments.site/reader036/viewer/2022070607/5aa999617f8b9a72188d1c2f/html5/thumbnails/71.jpg)
Ideology
![Page 72: Mobile Design - World Wide Web Consortium · PDF file2 0 0 0 1 0 m illio n i-m o d e users (Jap an) 2 0 0 2 1 b illio n m o b ile p ho ne users w o rld w id e 2 0 0 9 3 b illio n m](https://reader036.vdocuments.site/reader036/viewer/2022070607/5aa999617f8b9a72188d1c2f/html5/thumbnails/72.jpg)
© MMVI Cameron Moll. This document is available under the W3C Document License.
A mobile web that is
desirable, dependable, disciplined.
72
![Page 73: Mobile Design - World Wide Web Consortium · PDF file2 0 0 0 1 0 m illio n i-m o d e users (Jap an) 2 0 0 2 1 b illio n m o b ile p ho ne users w o rld w id e 2 0 0 9 3 b illio n m](https://reader036.vdocuments.site/reader036/viewer/2022070607/5aa999617f8b9a72188d1c2f/html5/thumbnails/73.jpg)
© MMVI Cameron Moll. This document is available under the W3C Document License.
An array of thought leaders.
73
![Page 74: Mobile Design - World Wide Web Consortium · PDF file2 0 0 0 1 0 m illio n i-m o d e users (Jap an) 2 0 0 2 1 b illio n m o b ile p ho ne users w o rld w id e 2 0 0 9 3 b illio n m](https://reader036.vdocuments.site/reader036/viewer/2022070607/5aa999617f8b9a72188d1c2f/html5/thumbnails/74.jpg)
© MMVI Cameron Moll. This document is available under the W3C Document License.
User agent consistency.
74
![Page 75: Mobile Design - World Wide Web Consortium · PDF file2 0 0 0 1 0 m illio n i-m o d e users (Jap an) 2 0 0 2 1 b illio n m o b ile p ho ne users w o rld w id e 2 0 0 9 3 b illio n m](https://reader036.vdocuments.site/reader036/viewer/2022070607/5aa999617f8b9a72188d1c2f/html5/thumbnails/75.jpg)
© MMVI Cameron Moll. This document is available under the W3C Document License.
Mobile device wiki.
75
![Page 76: Mobile Design - World Wide Web Consortium · PDF file2 0 0 0 1 0 m illio n i-m o d e users (Jap an) 2 0 0 2 1 b illio n m o b ile p ho ne users w o rld w id e 2 0 0 9 3 b illio n m](https://reader036.vdocuments.site/reader036/viewer/2022070607/5aa999617f8b9a72188d1c2f/html5/thumbnails/76.jpg)
© MMVI Cameron Moll. This document is available under the W3C Document License.
...and?
76
![Page 77: Mobile Design - World Wide Web Consortium · PDF file2 0 0 0 1 0 m illio n i-m o d e users (Jap an) 2 0 0 2 1 b illio n m o b ile p ho ne users w o rld w id e 2 0 0 9 3 b illio n m](https://reader036.vdocuments.site/reader036/viewer/2022070607/5aa999617f8b9a72188d1c2f/html5/thumbnails/77.jpg)
Questions?