Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Jensimmons html5live-responsivedesign


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 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
  • 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.
    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!
    Are you sure you want to  Yes  No
    Your message goes here
  • Ah, thanks Dawn! I'm glad you found it helpful.
    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 ( 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!
    Are you sure you want to  Yes  No
    Your message goes here

Jensimmons html5live-responsivedesign

  1. 1. There’s Just One Web
  2. 2. Jen Simmons
  3. 3.
  4. 4. Mobile Web
  5. 5. really hot
  6. 6. Horace Deidu Philip 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. 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.
  28. 28. Responsive Web Design
  29. 29.
  30. 30.
  31. 31. So how?
  32. 32. CSS Media Query
  33. 33.
  34. 34.
  35. 35. Responsive images
  36. 36. img { max-width : 100%;}
  37. 37.
  38. 38.
  39. 39. But what abouteverything else?
  40. 40.
  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 —
  48. 48. matter/
  49. 49. 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 clean clean?
  51. 51.
  52. 52.
  53. 53. Wa la
  54. 54.
  55. 55.
  56. 56. Learn more
  57. 57.
  58. 58.
  59. 59. by ETHAN
  60. 60. by LUKE
  61. 61.
  62. 62.
  63. 63.
  64. 64.
  65. 65.
  66. 66.
  67. 67.
  68. 68. Jen Simmons @jensimmons