Upgrade to Pro — share decks privately, control downloads, hide ads and more …

There's Just One Web // HTML5 Live

D83926c323d4f9289f947b4b4e76b939?s=47 Jen Simmons
November 01, 2011

There's Just One Web // HTML5 Live

Mobile is all the rage these days — and it should be. Many website owners believe creating a separate mobile website is the solution, with browser sniffing to redirect all "mobile" traffic to a separate m.example.com domain. But it turns out that most of the time this is a terrible solution. Come hear Jen Simmons talk about how there's only one web — not a mobile web separate from the desktop web. And learn how you can use HTML5 and responsive web design to create one unified website or web app for your project and Just Have It Work™ on a wide range of devices.

Presented at the HTML5 Live Conference in New York CIty in November 2011.

D83926c323d4f9289f947b4b4e76b939?s=128

Jen Simmons

November 01, 2011
Tweet

More Decks by Jen Simmons

Other Decks in Technology

Transcript

  1. There’s Just One Web

  2. Jen Simmons

  3. 5by5.tv/webahead

  4. Mobile Web

  5. really hot

  6. asymco.com/2011/11/01/the- mobile-phone-landscape/ tech.fortune.cnn.com/2011/11/01/net-applications- ios-web-share-hit-record-61-6-in-oct/ Horace Deidu Philip Elmer-Dewitt

  7. what to do?

  8. A) do nothing

  9. None
  10. None
  11. B) add a mobile theme to your current site

  12. None
  13. None
  14. None
  15. None
  16. None
  17. None
  18. None
  19. C) create a mobile site, and redirect all mobile traffic

    over there
  20. None
  21. None
  22. None
  23. None
  24. D) create a mobile app, and redirect all mobile traffic

    over there
  25. None
  26. None
  27. None
  28. what is “mobile” anyway?

  29. None
  30. None
  31. None
  32. None
  33. None
  34. None
  35. None
  36. • 640 x 480 • 14.4k modem • keyboard &

    mouse
  37. • 800 x 600 • 56.6k modem • keyboard &

    mouse
  38. • 1024 x 768 • 768 kb/sec on dsl •

    keyboard & mouse
  39. • 1200 x ??? • 1.5mb/sec+ • keyboard & mouse

  40. • 1200 x ??? • 1.5mb/sec • keyboard & mouse

    • 320 x 480 • 3g • touch “Desktop” “Mobile”
  41. None
  42. None
  43. quirksmode.org/mobile/ mobilemarket.html

  44. browser detection / device detection / OS detection is a

    bad idea
  45. None
  46. None
  47. None
  48. • screen widths: 320, 480, 600, 768, 800, 1024, 1200,

    1330, 1440, 1900… • speeds: edge, 3g, 3g in NYC/San Fran, 4g, dialup, satellite, dsl, cable, fiber • walking, sitting, laying down, driving • keyboard, mouse, touch, siri / voice control, car controls, other devices • reading, looking, listening, voiceover, jaws, large print, whatever
  49. a) do nothing b) mobile theme c) mobile site d)

    mobile app e) ???
  50. make a website

  51. None
  52. None
  53. How can one website work for all devices?

  54. Easy: Responsive Web Design & Progressive Enhancement

  55. None
  56. None
  57. None
  58. None
  59. None
  60. None
  61. Now sometimes a separate site is a good idea. But

    not just for a different device.
  62. Progressive Enhancement

  63. None
  64. None
  65. modernizr.com

  66. Responsive Web Design

  67. alistapart.com/articles/responsive-web-design

  68. None
  69. None
  70. None
  71. None
  72. None
  73. None
  74. mediaqueri.es

  75. So how?

  76. CSS Media Query

  77. None
  78. None
  79. None
  80. None
  81. None
  82. None
  83. stuffandnonsense.co.uk/projects/320andup

  84. github.com/scottjehl/Respond

  85. Responsive images

  86. img { max-width : 100%; }

  87. filamentgroup.com/lab/responsive_images_experimenting_with_context_aware_image_sizing

  88. None
  89. fitvidsjs.com

  90. But what about everything else?

  91. flickr.com/photos/merlin/sets/72157622077100537/with/2731723031

  92. None
  93. How do you do this for mobile? Don’t.

  94. None
  95. None
  96. None
  97. Mobile First

  98. None
  99. Content First

  100. Biggest change > process

  101. Old web design process

  102. None
  103. None
  104. None
  105. Emerging New Process • Discovery • Paper sketches • Mood

    boards • Style tiles • Prototype bits of content in HTML & CSS • Build up to full prototypes of page layouts • Iterate
  106. None
  107. sketches by Thibaut Sailly — bureau.tsailly.net/2010/09/champagne.html

  108. webdesignerdepot.com/ 2008/12/why-mood-boards- matter/

  109. badassideas.com/style-tiles-as-a-web-design-process-tool chicago2011.drupal.org/sessions/avoiding-frankenstein-website- design-collaborating-clients Samantha Warren @samanthatoy Style Tiles

  110. The style tile is not a literal translation of what

    the website is going to be, but a starting point for the designer and the client to have a conversation and establish a common visual language. When a client says “clean,” does she mean Apple.com clean or NYTimes.com clean?
  111. None
  112. 5by5.tv/webahead/3-jeremy-keith

  113. foundation.zurb.com/docs/layout.php

  114. None
  115. None
  116. Wa la

  117. upstatement.com/portfolio/boston-globe

  118. None
  119. flickr.com/photos/splorp/6141222275

  120. None
  121. Learn more

  122. mediaqueri.es

  123. netmagazine.com/features/ ethan-marcottes-20-favourite-responsive-sites

  124. abookapart.com/products/responsive-web-design b y E T H A N M A

    R C O T T E
  125. abookapart.com/products/mobile-first b y L U K E W R O

    B L E W S K I
  126. lukew.com/ff/entry.asp?1436

  127. None
  128. easy-readers.net

  129. 5by5.tv/webahead

  130. aneventapart.com

  131. futurefriend.ly

  132. futurefriend.ly

  133. adactio.com

  134. None
  135. Jen Simmons @jensimmons jensimmons.com 5by5.tv/webahead

  136. None