Jensimmons html5live-responsivedesign

3,043 views

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
3,043
On SlideShare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
26
Comments
4
Likes
4
Embeds 0
No embeds

No notes for slide

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

×