Responsive Web Design and the state of the Web

Responsive Web Design and the state of the Web

Transcript

  1. Responsive Web Design & the state of the Web porcupine.gr

    @yiannis_k
  2. “Responsive Web design is the approach that suggests that design

    and development should respond to the user’s behavior and environment based on screen size, platform and orientation. “ - Kayla Knight on Smashing Magazine
  3. “The practice consists of a mix of flexible grids and

    layouts, images and an intelligent use of CSS media queries.“ - Kayla Knight on Smashing Magazine
  4. As the user switches from their laptop to iPad, the

    website should automatically switch to accommodate for resolution, image size and scripting abilities. In other words, the website should have the technology to automatically respond to the user’s preferences. - Kayla Knight on Smashing Magazine
  5. None
  6. None
  7. None
  8. None
  9. None
  10. None
  11. None
  12. None
  13. None
  14. None
  15. Why?

  16. Because this world is changing. Rapidly. http://www.flickr.com/photos/nasamarshall/5404263213/

  17. http://www.flickr.com/photos/thomashawk/76170826/

  18. http://www.flickr.com/photos/thomashawk/76170826/

  19. http://www.flickr.com/photos/nasamarshall/5404263213/

  20. http://www.flickr.com/photos/nasamarshall/5404263213/

  21. http://www.flickr.com/photos/emeryjl/520109861/

  22. http://www.flickr.com/photos/emeryjl/520109861/

  23. http://www.flickr.com/photos/jonathanharford/5217423633/

  24. http://www.flickr.com/photos/jonathanharford/5217423633/

  25. (Not so) boring numbers

  26. August 2011 72.2 million Americans accessed social networking sites or

    blogs on their mobile device (+37% since 2010) Luke Wroblewski http://www.flickr.com/photos/pamhule/5709324762/
  27. May 2012 79% of US smartphone and tablet owners have

    used their mobile devices for shopping- related activities. Luke Wroblewski http://www.flickr.com/photos/polvero/3422530445/
  28. May 2011 iPad users spend 30% of their time on

    the device in front of television. Smartphone users spend 20% of their time on the device in front of the television. Luke Wroblewski
  29. What are you gonna do about it? *

  30. What are you gonna do about it? * * Romeo

    & Juliet - Dire Straits
  31. Create the best experience for your audience no matter the

    device
  32. WTF. RWD, FTW!

  33. WTF. RWD, FTW! What the Frak. Responsive Web Design, For

    The Win!
  34. Hicksdesign

  35. Andersson-Wise Architects

  36. Forefathers Group

  37. Food Sense

  38. Food Sense

  39. Food Sense

  40. None
  41. HTML

  42. HTML Quick ’n’ dirty

  43. HTML <link rel="stylesheet" type="text/css" media="screen and (max-width: 480px)" href="mobile.css" />

    Quick ’n’ dirty
  44. HTML

  45. HTML Let’s tide things up

  46. HTML <link rel="stylesheet" type="text/css" href="media.css" /> <link rel="stylesheet" type="text/css" href="global.css"

    /> <meta name="viewport" content="width=device-width; initial-scale=1.0"> Let’s tide things up
  47. CSS /*320px =iPhone portrait */ @media only screen and (max-width:

    320px){ ... } /*480px =iPhone landscape */ @media only screen and (min-width: 320px) and (max-width: 480px) { ... } /*768px =iPad portrait */ @media only screen and (min-width: 768px) { ... } /*1024px =iPad landscape */ @media only screen and (min-width: 768px) and (max-width: 1024px) { ... } /*1280px =Medium screens */ @media only screen and (min-width: 1025px) and (max-width: 1280px) { }
  48. Flexible Multimedia

  49. Flexible Multimedia img, object { max-width: 100%; }

  50. Flexible Multimedia img, object { max-width: 100%; } FitVid.js

  51. Flexible Grid

  52. Flexible Grid Golden Grid System

  53. Browser Support

  54. Browser Support

  55. (Far from) Browser Support

  56. 7 8 (Far from) Browser Support

  57. 7 8 (Far from) Browser Support Kill these agents

  58. Approaches & Techniques

  59. None
  60. None
  61. Responsive vs. Adaptive vs. Mobile vs. whatevah

  62. None
  63. None
  64. Mobile first!

  65. None
  66. None
  67. The art of hiding

  68. None
  69. None
  70. The designer and the front end developer must be one

    person: you
  71. “Good mobile user experience requires a different design than what’s

    needed to satisfy desktop users. Two designs, two sites, and cross-linking to make it all work.” - Jacob Nielsen
  72. “Good mobile user experience requires a different design than what’s

    needed to satisfy desktop users. Two designs, two sites, and cross-linking to make it all work.” - Jacob Nielsen “You never know better than your users what content they want.” - Bruce Lawson
  73. “Good mobile user experience requires a different design than what’s

    needed to satisfy desktop users. Two designs, two sites, and cross-linking to make it all work.” - Jacob Nielsen “You never know better than your users what content they want.” - Bruce Lawson Separate mobile websites?
  74. Kiran Prasad Director of Engineering Mobile at LinkedIn “Responsive design

    might work for uncomplicated, one-off websites, he said, but for applications or networks, responsive design is actually bad.”
  75. Kiran Prasad Director of Engineering Mobile at LinkedIn “Responsive design

    might work for uncomplicated, one-off websites, he said, but for applications or networks, responsive design is actually bad.”
  76. Kiran Prasad Director of Engineering Mobile at LinkedIn “Responsive design

    might work for uncomplicated, one-off websites, he said, but for applications or networks, responsive design is actually bad.” When is-no-good?
  77. Evaluation

  78. None
  79. All you need is your good old CSS

  80. http://blog.digidave.org/2009/10/lessons-in-web-development-good-fast-and-cheap-pick-two

  81. One step closer to Utopia* * When the project is

    fairly simple and when compared with a separate mobile website http://blog.digidave.org/2009/10/lessons-in-web-development-good-fast-and-cheap-pick-two
  82. http://www.flickr.com/photos/lenscrack/5165225746/

  83. One place to focus and update http://www.flickr.com/photos/lenscrack/5165225746/

  84. None
  85. No separate websites, no duplicate content

  86. http://www.flickr.com/photos/jfisher/3769846083/

  87. Still fresh. Things are a changin* Could be a Bob

    Dylan’s song http://www.flickr.com/photos/jfisher/3769846083/
  88. http://www.flickr.com/photos/lwr/5044331262/

  89. Think twice! http://www.flickr.com/photos/lwr/5044331262/

  90. Tools & Resources

  91. Testing

  92. Testing Aptus

  93. Testing Screenqueri.es Responsive.is Gallery Media Queries

  94. Grids & Boilerplates Golden Grid System Responsive Grid System 320

    and Up JavaScript & Multimedia Adapt.js Responsive Images Adaptive Images Fitvid.js FitText
  95. What’s next Responsive Images and Web Standards at the Turning

    Point Content Choreography HTML5 adaptive images: end of round one Articles Tips and best practices to develop responsive websites Preserving vertical rhythm with CSS and jQuery Responsive CSS that scales Build a responsive site in a week: designing responsively (part 1) Build a responsive site in a week: typography and grids (part 2)
  96. Wait, there’s more!

  97. Thank you! Wait, there’s more!