Jensimmons html5live-responsivedesign
4 likes•1,881 views
The document discusses the importance of mobile web design, presenting options for adapting websites for mobile devices, such as creating mobile themes, sites, or apps. It emphasizes the need for responsive web design and progressive enhancement to ensure compatibility across various devices. Additionally, it highlights the evolving design processes and tools for creating effective mobile websites.
Jensimmons html5live-responsivedesign
- 1. There’s Just One Web
- 2. Jen Simmons
- 4. Mobile Web
- 5. really hot
- 6. Horace Deidu Philip Elmer-Dewitt asymco.com/2011/11/01/the- tech.fortune.cnn.com/2011/11/01/net-applications- mobile-phone-landscape/ ios-web-share-hit-record-61-6-in-oct/
- 7. what to do?
- 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. “Desktop” “Mobile” • 1200 x ??? • 320 x 480 • 1.5mb/sec • 3g • keyboard & • touch mouse
- 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.
- 65. modernizr.com
- 66. Responsive Web Design
- 74. mediaqueri.es
- 75. So how?
- 76. CSS Media Query
- 86. img { max-width : 100%; }
- 89. fitvidsjs.com
- 90. But what about everything else?
- 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 Style Tiles @samanthatoy
- 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?
- 116. Wa la
- 121. Learn more
- 122. mediaqueri.es
- 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