There’s Just One Web
Jen Simmons
5by5.tv/webahead
Mobile Web
really hot
Horace Deidu                   Philip Elmer-Dewittasymco.com/2011/11/01/the-   tech.fortune.cnn.com/2011/11/01/net-applica...
what to do?
A) do nothing
B) add a mobile theme to your  current site
C) create a mobilesite, and redirect all mobile traffic     over there
D) create a mobile app,and redirect all mobile   traffic over there
what is “mobile”   anyway?
• 640 x 480• 14.4k modem• keyboard & mouse
• 800 x 600• 56.6k modem• keyboard & mouse
• 1024 x 768• 768 kb/sec on dsl• keyboard & mouse
• 1200 x ???• 1.5mb/sec+• keyboard & mouse
“Desktop”     “Mobile”• 1200 x ???   • 320 x 480• 1.5mb/sec    • 3g• keyboard &   • touch mouse
quirksmode.org/mobile/  mobilemarket.html
browser detection / device detection /   OS detection        is a     bad idea
•   screen widths: 320, 480, 600, 768, 800, 1024, 1200,    1330, 1440, 1900…•   speeds: edge, 3g, 3g in NYC/San Fran, 4g, ...
a) do nothingb) mobile theme c) mobile site d) mobile app     e) ???
make a website
How can one websitework for all devices?
Easy: Responsive Web Design     & ProgressiveEnhancement
Now sometimes a separate   site is a good idea.     But not just for   a different device.
ProgressiveEnhancement
modernizr.com
Responsive Web    Design
alistapart.com/articles/responsive-web-design
mediaqueri.es
So how?
CSS Media Query
stuffandnonsense.co.uk/projects/320andup
github.com/scottjehl/Respond
Responsive images
img {  max-width : 100%;}
filamentgroup.com/lab/responsive_images_experimenting_with_context_aware_image_sizing
fitvidsjs.com
But what abouteverything else?
flickr.com/photos/merlin/sets/72157622077100537/with/2731723031
How do you dothis for mobile?    Don’t.
Mobile First
Content First
Biggest change >    process
Old web design    process
Emerging New Process• Discovery• Paper sketches• Mood boards• Style tiles• Prototype bits of content in HTML & CSS• Build ...
sketches by Thibaut Sailly — bureau.tsailly.net/2010/09/champagne.html
webdesignerdepot.com/2008/12/why-mood-boards-         matter/
badassideas.com/style-tiles-as-a-web-design-process-tool   chicago2011.drupal.org/sessions/avoiding-frankenstein-website- ...
The style tile is not a literaltranslation of what the websiteis going to be, but a startingpoint for the designer and the...
5by5.tv/webahead/3-jeremy-keith
foundation.zurb.com/docs/layout.php
Wa la
upstatement.com/portfolio/boston-globe
flickr.com/photos/splorp/6141222275
Learn more
mediaqueri.es
netmagazine.com/features/ethan-marcottes-20-favourite-responsive-sites
by ETHAN MARCOTTEabookapart.com/products/responsive-web-design
by LUKE WROBLEWSKIabookapart.com/products/mobile-first
lukew.com/ff/entry.asp?1436
easy-readers.net
5by5.tv/webahead
aneventapart.com
futurefriend.ly
futurefriend.ly
adactio.com
Jen Simmons   @jensimmons jensimmons.com5by5.tv/webahead
Jensimmons html5live-responsivedesign
Jensimmons html5live-responsivedesign
Jensimmons html5live-responsivedesign
Jensimmons html5live-responsivedesign
Jensimmons html5live-responsivedesign
Jensimmons html5live-responsivedesign
Jensimmons html5live-responsivedesign
Jensimmons html5live-responsivedesign
Jensimmons html5live-responsivedesign
Jensimmons html5live-responsivedesign
Jensimmons html5live-responsivedesign
Jensimmons html5live-responsivedesign
Jensimmons html5live-responsivedesign
Jensimmons html5live-responsivedesign
Jensimmons html5live-responsivedesign
Jensimmons html5live-responsivedesign
Jensimmons html5live-responsivedesign
Jensimmons html5live-responsivedesign
Jensimmons html5live-responsivedesign
Jensimmons html5live-responsivedesign
Jensimmons html5live-responsivedesign
Jensimmons html5live-responsivedesign
Jensimmons html5live-responsivedesign
Jensimmons html5live-responsivedesign
Jensimmons html5live-responsivedesign
Jensimmons html5live-responsivedesign
Jensimmons html5live-responsivedesign
Jensimmons html5live-responsivedesign
Jensimmons html5live-responsivedesign
Jensimmons html5live-responsivedesign
Jensimmons html5live-responsivedesign
Jensimmons html5live-responsivedesign
Jensimmons html5live-responsivedesign
Jensimmons html5live-responsivedesign
Jensimmons html5live-responsivedesign
Jensimmons html5live-responsivedesign
Jensimmons html5live-responsivedesign
Jensimmons html5live-responsivedesign
Jensimmons html5live-responsivedesign
Jensimmons html5live-responsivedesign
Jensimmons html5live-responsivedesign
Jensimmons html5live-responsivedesign
Jensimmons html5live-responsivedesign
Jensimmons html5live-responsivedesign
Jensimmons html5live-responsivedesign
Jensimmons html5live-responsivedesign
Jensimmons html5live-responsivedesign
Jensimmons html5live-responsivedesign
Jensimmons html5live-responsivedesign
Jensimmons html5live-responsivedesign
Jensimmons html5live-responsivedesign
Jensimmons html5live-responsivedesign
Jensimmons html5live-responsivedesign
Jensimmons html5live-responsivedesign
Jensimmons html5live-responsivedesign
Jensimmons html5live-responsivedesign
Jensimmons html5live-responsivedesign
Jensimmons html5live-responsivedesign
Jensimmons html5live-responsivedesign
Jensimmons html5live-responsivedesign
Jensimmons html5live-responsivedesign
Jensimmons html5live-responsivedesign
Jensimmons html5live-responsivedesign
Jensimmons html5live-responsivedesign
Jensimmons html5live-responsivedesign
Jensimmons html5live-responsivedesign
Jensimmons html5live-responsivedesign
Jensimmons html5live-responsivedesign
Upcoming SlideShare
Loading in...5
×

Jensimmons html5live-responsivedesign

2,392

Published on

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.

Published in: Technology, Business
4 Comments
4 Likes
Statistics
Notes
  • Let's forget about resolution for a moment. Phone screens will always be around 4' max. There is a reason for that. Users want their phone to fit in their pocket. Additionally the average finger is at least 100 times less accurate than a mouse.
    So it's very naive to think that you can develop something in a certain way and expect to handle everything. And no technology is going to be able to provide the user experience you expect. Do you drive a Go Kart on the freeway? Or an SUV on a Go Kart track? Whether we like it or not a company that desires to provide a decent user experience will have to provide a version adopted for phones. Additionally special consideration should be given for devices that allow a user to interact either by touch or by using a mouse. The conclusion is that there is no silver bullet. HTML5,CSS3 and Javascript are just another option.
    P.S. Flash inside a browser makes no sense on smartphones. It goes along the lines of what I mentioned above; developing a different website to address the limitations and specific needs of those devices. If you have to provide a different version of your website with a simpler and more goal oriented website then the advantages of using flash are diminished and you are left with extra processes consuming cpu cycles and memory. On the other hand it's an excellent option as part of the AIR runtime since it provides a developer who wants to deploy their app on a variety of smartphones with the ability to do so without having to rewrite the whole application from scratch.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Hey, Adobe downgrades Flash today! What a great move towards 'There's Just One Web' and it's Open Sources and HTML5/CSS3/Javascript!
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Ah, thanks Dawn! I'm glad you found it helpful.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • For me, this was the best presentation at the 'HTML5 Live' conference in NYC 11/1/2011 (http://html5live.org/html5-nyc-2011/). Why?

    (1) The overall focus of the presentation clarified my thinking and saved me hundreds of hours of reading tutorials to come to the same conclusion. The idea being: their is just one web. Again: 'There is just ONE web.' So don't deal with mobile by making a separate mobile site (or worse, one for phones and one for tablets, or worse yet a mobile app) and redirect all mobile traffic there. Instead, focus on one desktop website set up properly so it looks good on the thousands of different phones/tablets/monitors out there. [And, yes, this is not advice for huge Enterprise orgs or smaller orgs focusing on a specific device; yes, this makes sure @ 80%? of audience sees website perfectly, and the other 20% with older browsers & weird old Nokio phones see a gracefully degraded website that is perfectly functional, just not AS beautiful or useable).

    (2) Wow, this is perfect advice for me, especially as I have no desire to learn non-standard, hackish code to make performance better for some huge Enterprise site, or want to work on a narrow niche of the web, creating experiences for a very targeted minority. Now I can focus on learning HTML5, CSS3 and JavaScript (or jQuery or etc.) well. Stop wasting time learning the infinite amount of hacks, device-specific solutions, and just focus on the enduring core tech (HMTL5, CSS3, JavaScript). Use wrappers to turn them into Native-like Apps to sell on an App Store. Use 'Responsive Web Design' and 'Progressive Enhancement' to deal with the issue of different viewport (not device resolution) widths.

    Thank you, Jen, you have a new fan!
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
2,392
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
25
Comments
4
Likes
4
Embeds 0
No embeds

No notes for slide

Transcript of "Jensimmons html5live-responsivedesign"

  1. 1. There’s Just One Web
  2. 2. Jen Simmons
  3. 3. 5by5.tv/webahead
  4. 4. Mobile Web
  5. 5. really hot
  6. 6. Horace Deidu Philip Elmer-Dewittasymco.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. 7. what to do?
  8. 8. A) do nothing
  9. 9. B) add a mobile theme to your current site
  10. 10. C) create a mobilesite, and redirect all mobile traffic over there
  11. 11. D) create a mobile app,and redirect all mobile traffic over there
  12. 12. what is “mobile” anyway?
  13. 13. • 640 x 480• 14.4k modem• keyboard & mouse
  14. 14. • 800 x 600• 56.6k modem• keyboard & mouse
  15. 15. • 1024 x 768• 768 kb/sec on dsl• keyboard & mouse
  16. 16. • 1200 x ???• 1.5mb/sec+• keyboard & mouse
  17. 17. “Desktop” “Mobile”• 1200 x ??? • 320 x 480• 1.5mb/sec • 3g• keyboard & • touch mouse
  18. 18. quirksmode.org/mobile/ mobilemarket.html
  19. 19. browser detection / device detection / OS detection is a bad idea
  20. 20. • 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
  21. 21. a) do nothingb) mobile theme c) mobile site d) mobile app e) ???
  22. 22. make a website
  23. 23. How can one websitework for all devices?
  24. 24. Easy: Responsive Web Design & ProgressiveEnhancement
  25. 25. Now sometimes a separate site is a good idea. But not just for a different device.
  26. 26. ProgressiveEnhancement
  27. 27. modernizr.com
  28. 28. Responsive Web Design
  29. 29. alistapart.com/articles/responsive-web-design
  30. 30. mediaqueri.es
  31. 31. So how?
  32. 32. CSS Media Query
  33. 33. stuffandnonsense.co.uk/projects/320andup
  34. 34. github.com/scottjehl/Respond
  35. 35. Responsive images
  36. 36. img { max-width : 100%;}
  37. 37. filamentgroup.com/lab/responsive_images_experimenting_with_context_aware_image_sizing
  38. 38. fitvidsjs.com
  39. 39. But what abouteverything else?
  40. 40. flickr.com/photos/merlin/sets/72157622077100537/with/2731723031
  41. 41. How do you dothis for mobile? Don’t.
  42. 42. Mobile First
  43. 43. Content First
  44. 44. Biggest change > process
  45. 45. Old web design process
  46. 46. 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
  47. 47. sketches by Thibaut Sailly — bureau.tsailly.net/2010/09/champagne.html
  48. 48. webdesignerdepot.com/2008/12/why-mood-boards- matter/
  49. 49. badassideas.com/style-tiles-as-a-web-design-process-tool chicago2011.drupal.org/sessions/avoiding-frankenstein-website- design-collaborating-clients Samantha WarrenStyle Tiles @samanthatoy
  50. 50. The style tile is not a literaltranslation of what the websiteis going to be, but a startingpoint for the designer and theclient to have a conversationand establish a common visuallanguage. When a client says“clean,” does she meanApple.com clean orNYTimes.com clean?
  51. 51. 5by5.tv/webahead/3-jeremy-keith
  52. 52. foundation.zurb.com/docs/layout.php
  53. 53. Wa la
  54. 54. upstatement.com/portfolio/boston-globe
  55. 55. flickr.com/photos/splorp/6141222275
  56. 56. Learn more
  57. 57. mediaqueri.es
  58. 58. netmagazine.com/features/ethan-marcottes-20-favourite-responsive-sites
  59. 59. by ETHAN MARCOTTEabookapart.com/products/responsive-web-design
  60. 60. by LUKE WROBLEWSKIabookapart.com/products/mobile-first
  61. 61. lukew.com/ff/entry.asp?1436
  62. 62. easy-readers.net
  63. 63. 5by5.tv/webahead
  64. 64. aneventapart.com
  65. 65. futurefriend.ly
  66. 66. futurefriend.ly
  67. 67. adactio.com
  68. 68. Jen Simmons @jensimmons jensimmons.com5by5.tv/webahead
  1. A particular slide catching your eye?

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

×