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.

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
11. B) add a mobile theme to your current site
19. C) create a mobile site, and redirect all mobile traffic over there
24. D) create a mobile app, and redirect all mobile traffic over there
28. what is “mobile” anyway?
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”
43. quirksmode.org/mobile/ mobilemarket.html
44. browser detection / device detection / OS detection is a bad idea
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
53. How can one website work for all devices?
54. Easy: Responsive Web Design & Progressive Enhancement
61. Now sometimes a separate site is a good idea. But not just for a different device.
62. Progressive Enhancement
65. modernizr.com
66. Responsive Web Design
67. alistapart.com/articles/responsive-web-design
74. mediaqueri.es
75. So how?
76. CSS Media Query
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
89. fitvidsjs.com
90. But what about everything else?
91. flickr.com/photos/merlin/sets/72157622077100537/with/2731723031
93. How do you do this for mobile? Don’t.
97. Mobile First
99. Content First
100. Biggest change > process
101. Old web design process
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
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?
112. 5by5.tv/webahead/3-jeremy-keith
113. foundation.zurb.com/docs/layout.php
116. Wa la
117. upstatement.com/portfolio/boston-globe
119. flickr.com/photos/splorp/6141222275
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
128. easy-readers.net
129. 5by5.tv/webahead
130. aneventapart.com
131. futurefriend.ly
132. futurefriend.ly
133. adactio.com
135. Jen Simmons @jensimmons jensimmons.com 5by5.tv/webahead