Your SlideShare is downloading. ×
0
Mobile Web Design
This webinar is presented by W3C to the Web community as part of an EU
                    IST project (3GWeb). The conten...
You are...

    Experienced with XHTML/CSS.
    Familiar with good markup techniques.
    Unsure about this “mobile web th...
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 Aga...
Staggering Numbers

    1996                            GSM phones in 103 countries

    2000                            1...
UK                           More mobile phones than humans...




8   © MMVI Cameron Moll. This document is available und...
Quandary
Reader Poll
                                  Highly scientific, statistically significant


                             ...
~400                                 Participants

                  159                            Unique handsets
      ...
“Designers face a proliferation of
     capabilities that make the early
     [Mobile] Web look like a playground.”

     ...
Mobile Web “Playground”

     WML, XHTML, -MP, -Basic...
     Plethora of user agents
     Varying coding practices, URIs,...
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.
  ...
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...                                                          What is contextually relevant?




20   © MMVI Cameron...
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 ...
Fundamentals
Most devices sold today are WAP 2.0.




26   © MMVI Cameron Moll. This document is available under the W3C Document Licen...
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.*


                                                                                   *...
Markup Test Pages
                                                    cameronmoll.com/mobile




34   © MMVI Cameron Moll....
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 Lic...
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...
Method

     Do nothing.
     Strip images and styling.
     Handheld stylesheets.




45   © MMVI Cameron Moll. This docu...
Method

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


46   ©...
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...
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
     F...
Use Case Hiearchy

     1. Search                                                   Top element

     2. Categories       ...
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 ...
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
SMS                               Texting; SMS search

                 J2ME                                Java-based app...
“ The mobile device has the potential to
     act as a significant reporter of data
     rather than a mere consumer of da...
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 ...
User Agents
                                            Proprietary vs. Cross-platform?
                                  ...
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...
Mobile Web Initiative

     W3C chartered
     Input by mobile developers, companies
     Best Practices




68   © MMVI C...
Sample Guidelines

     Use valid markup.
     Use tables only if supported by target device.
     Use text equivalents fo...
Also...

     mobileOK                                      ...remember these?


     http://tinyurl.com/gzdrb

     Best ...
Ideology
A mobile web that is
                      desirable, dependable, disciplined.




72   © MMVI Cameron Moll. This document...
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@cameronmoll.com
    801.644.8793
Mobile Web Design
Upcoming SlideShare
Loading in...5
×

Mobile Web Design

853

Published on

Published in: Design, Technology, Business
0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
853
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
81
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide

Transcript of "Mobile Web Design"

  1. 1. Mobile Web Design
  2. 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. 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. 4. Legacy
  5. 5. 1910 5 © MMVI Cameron Moll. This document is available under the W3C Document License.
  6. 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. 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. 8. UK More mobile phones than humans... 8 © MMVI Cameron Moll. This document is available under the W3C Document License.
  9. 9. Quandary
  10. 10. Reader Poll Highly scientific, statistically significant (not really!) 10 © MMVI Cameron Moll. This document is available under the W3C Document License.
  11. 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. 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. 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. 14. What is the Mobile Web? 14 © MMVI Cameron Moll. This document is available under the W3C Document License.
  15. 15. ?
  16. 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. 17. Context
  18. 18. 18 © MMVI Cameron Moll. This document is available under the W3C Document License.
  19. 19. Noooo! 19 © MMVI Cameron Moll. This document is available under the W3C Document License.
  20. 20. Instead... What is contextually relevant? 20 © MMVI Cameron Moll. This document is available under the W3C Document License.
  21. 21. 21 © MMVI Cameron Moll. This document is available under the W3C Document License.
  22. 22. Mobile = Mobility 22 © MMVI Cameron Moll. This document is available under the W3C Document License.
  23. 23. Design = Communication 23 © MMVI Cameron Moll. This document is available under the W3C Document License.
  24. 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. 25. Fundamentals
  26. 26. Most devices sold today are WAP 2.0. 26 © MMVI Cameron Moll. This document is available under the W3C Document License.
  27. 27. XHTML, not WML. 27 © MMVI Cameron Moll. This document is available under the W3C Document License.
  28. 28. What that means... 28 © MMVI Cameron Moll. This document is available under the W3C Document License.
  29. 29. english360.com
  30. 30. english360.com
  31. 31. english360.com/mobile (powered by MovableType)
  32. 32. However, 32 © MMVI Cameron Moll. This document is available under the W3C Document License.
  33. 33. XHTML/CSS support is inconsistent.* * highly 33 © MMVI Cameron Moll. This document is available under the W3C Document License.
  34. 34. Markup Test Pages cameronmoll.com/mobile 34 © MMVI Cameron Moll. This document is available under the W3C Document License.
  35. 35. 35 © MMVI Cameron Moll. This document is available under the W3C Document License.
  36. 36. 36 © MMVI Cameron Moll. This document is available under the W3C Document License.
  37. 37. 37 © MMVI Cameron Moll. This document is available under the W3C Document License.
  38. 38. 38 © MMVI Cameron Moll. This document is available under the W3C Document License.
  39. 39. 39 © MMVI Cameron Moll. This document is available under the W3C Document License.
  40. 40. Test on target devices, not emulators. 40 © MMVI Cameron Moll. This document is available under the W3C Document License.
  41. 41. Methodology
  42. 42. Method Do nothing. 42 © MMVI Cameron Moll. This document is available under the W3C Document License.
  43. 43. 31 kb (markup only)
  44. 44. Method Do nothing. Strip images and styling. 44 © MMVI Cameron Moll. This document is available under the W3C Document License.
  45. 45. Method Do nothing. Strip images and styling. Handheld stylesheets. 45 © MMVI Cameron Moll. This document is available under the W3C Document License.
  46. 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. 47 © MMVI Cameron Moll. This document is available under the W3C Document License.
  48. 48. Miniaturize or Mobilize? 48 © MMVI Cameron Moll. This document is available under the W3C Document License.
  49. 49. Miniaturize Repurpose existing content 49 © MMVI Cameron Moll. This document is available under the W3C Document License.
  50. 50. craigslist.org
  51. 51. craigslist screen grab 51 © MMVI Cameron Moll. This document is available under the W3C Document License.
  52. 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. 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.
  54. 54. Search Text or numeric Categories Most frequented City Zip or name; would offer suggestions if not found
  55. 55. Opera Mini
  56. 56. Mobilize Content-, Context-, Component-specific 57 © MMVI Cameron Moll. This document is available under the W3C Document License.
  57. 57. 58 © MMVI Cameron Moll. This document is available under the W3C Document License.
  58. 58. LBS 59 © MMVI Cameron Moll. This document is available under the W3C Document License.
  59. 59. Forces
  60. 60. 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.
  61. 61. “ 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.
  62. 62. 63 © MMVI Cameron Moll. This document is available under the W3C Document License.
  63. 63. Device Detection “Sniff out” user agent strings for individual devices 64 © MMVI Cameron Moll. This document is available under the W3C Document License.
  64. 64. User Agents Proprietary vs. Cross-platform? Beyond mobile phones? 65 © MMVI Cameron Moll. This document is available under the W3C Document License.
  65. 65. http://www.tinyurl.com/l2lst 66 © MMVI Cameron Moll. This document is available under the W3C Document License.
  66. 66. Best Practices ...and even “standards”? 67 © MMVI Cameron Moll. This document is available under the W3C Document License.
  67. 67. 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.
  68. 68. 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.
  69. 69. 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.
  70. 70. Ideology
  71. 71. A mobile web that is desirable, dependable, disciplined. 72 © MMVI Cameron Moll. This document is available under the W3C Document License.
  72. 72. An array of thought leaders. 73 © MMVI Cameron Moll. This document is available under the W3C Document License.
  73. 73. User agent consistency. 74 © MMVI Cameron Moll. This document is available under the W3C Document License.
  74. 74. Mobile device wiki. 75 © MMVI Cameron Moll. This document is available under the W3C Document License.
  75. 75. ...and? 76 © MMVI Cameron Moll. This document is available under the W3C Document License.
  76. 76. Questions?
  77. 77. cameronmoll.com email@cameronmoll.com 801.644.8793
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×