Downloaded 26 times
Uploaded byJen Simmons
Jensimmons html5live-responsivedesign
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.
More Related Content
Similar to Jensimmons html5live-responsivedesign
Jensimmons html5live-responsivedesign
- 1.
- 2.
- 3.
- 4.
- 5.
- 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.
- 8.
- 11. B) add amobile theme to your current site
- 19. C) create amobile site, and redirect all mobile traffic over there
- 24. D) create amobile app, and redirect all mobile traffic over there
- 28. what is “mobile” anyway?
- 36. • 640 x480 • 14.4k modem • keyboard & mouse
- 37. • 800 x600 • 56.6k modem • keyboard & mouse
- 38. • 1024 x768 • 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
- 43.
- 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.
- 53. How can onewebsite work for all devices?
- 54. Easy: Responsive WebDesign & Progressive Enhancement
- 61. Now sometimes aseparate site is a good idea. But not just for a different device.
- 62.
- 65.
- 66. Responsive Web Design
- 67.
- 74.
- 75.
- 76.
- 83.
- 84.
- 85.
- 86. img { max-width : 100%; }
- 87.
- 89.
- 90.
- 91.
- 93. How do youdo this for mobile? Don’t.
- 97.
- 99.
- 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 ThibautSailly — bureau.tsailly.net/2010/09/champagne.html
- 108.
- 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 tileis 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.
- 113.
- 116.
- 117.
- 119.
- 121.
- 122.
- 123.
- 124.
- 125.
- 126.
- 128.
- 129.
- 130.
- 131.
- 132.
- 133.
- 135. Jen Simmons @jensimmons jensimmons.com 5by5.tv/webahead