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.

Responsive Web Design - but for real!

30,120 views

Published on

Responsive is the new buzzword!
The main idea here is to:
* kill the buzzword, and replace it with some accurate truth
* and talk about the very difficult industrialization of the wireframing process, and some ideas for solutions to it (experimental part!)

Published in: Technology, Business

Responsive Web Design - but for real!

  1. CSS3 Media Queries (and Responsive Web Design) but for real! The truth, the lies, and the legend! Rudy Rigot [email_address] @rudyrigot http://rudyonweb.net Clever Age
  2. Responsive Web Design
  3. Adaptive Web Design? Responsive Layouts? Mediaqueries? Fluid grid? Responsive Web Design That's my word!
  4. "Whatever is well conceived is clearly said" - Nicolas Boileau SOME TRUTH
  5. Responsive Web Design "i'm a webpage, and i care about your display!"
  6. ? Responsive Web Design "i'm a webpage, and i care about your display!"
  7. Responsive Web Design "i'm a webpage, and i care about your display!" Adaptive Web Design "i'm a webpage, and i care about whoever you are"
  8. See: Progressive Enhancement client 1 client 2 Responsive Web Design "i'm a webpage, and i care about your display!" Adaptive Web Design "i'm a webpage, and i care about whoever you are"
  9. http://www.londonandpartners.com Responsive Web Design "i'm a webpage, and i care about your display!" Adaptive Web Design "i'm a webpage, and i care about whoever you are"
  10. http://www.prevention-medicale.org Responsive Web Design "i'm a webpage, and i care about your display!" Adaptive Web Design "i'm a webpage, and i care about whoever you are"
  11. Responsive Web Design "i'm a webpage, and i care about your display!" Fluid Grid "how large may i be again? Wait here as i stretch my columns!" Adaptive Web Design "i'm a webpage, and i care about whoever you are"
  12. Responsive Web Design "i'm a webpage, and i care about your display!" Responsive Layouts "how large may i be again ? Wait here as i rearrange my blocks!" Fluid Grid "how large may i be again? Wait here as i stretch my columns!" Adaptive Web Design "i'm a webpage, and i care about whoever you are"
  13. Responsive Web Design "i'm a webpage, and i care about your display!" Responsive Layouts "how large may i be again ? Wait here as i rearrange my blocks!" Fluid Grid "how large may i be again? Wait here as i stretch my columns!" Adaptive Web Design "i'm a webpage, and i care about whoever you are"
  14. ? Responsive Web Design "i'm a webpage, and i care about your display!" Responsive Layouts "how large may i be again ? Wait here as i rearrange my blocks!" Fluid Grid "how large may i be again? Wait here as i stretch my columns!" Adaptive Web Design "i'm a webpage, and i care about whoever you are"
  15. http://w3qualite.net Responsive Web Design "i'm a webpage, and i care about your display!" Responsive Layouts "how large may i be again ? Wait here as i rearrange my blocks!" Fluid Grid "how large may i be again? Wait here as i stretch my columns!" Adaptive Web Design "i'm a webpage, and i care about whoever you are"
  16. Responsive Web Design "i'm a webpage, and i care about your display!" Responsive Layouts "how large may i be again ? Wait here as i rearrange my blocks!" Fluid Grid "how large may i be again? Wait here as i stretch my columns!" Adaptive Web Design "i'm a webpage, and i care about whoever you are" Wait! I read something, and i thought Responsive Web Design was this thing!
  17. Responsive Web Design "i'm a webpage, and i care about your display!" Responsive Layouts "how large may i be again ? Wait here as i rearrange my blocks!" Fluid Grid "how large may i be again? Wait here as i stretch my columns!" Yep, it used to be, and now it's blurry! Adaptive Web Design "i'm a webpage, and i care about whoever you are" Wait! I read something, and i thought Responsive Web Design was this thing!
  18. Used to be the one called Responsive Web Design between May 2010 and July 2011!! Responsive Web Design "i'm a webpage, and i care about your display!" Responsive Layouts "how large may i be again ? Wait here as i rearrange my blocks!" Fluid Grid "how large may i be again? Wait here as i stretch my columns!" Adaptive Web Design "i'm a webpage, and i care about whoever you are"
  19. From now on, let's speak about this! Responsive Web Design "i'm a webpage, and i care about your display!" Responsive Layouts "how large may i be again ? Wait here as i rearrange my blocks!" Fluid Grid "how large may i be again? Wait here as i stretch my columns!" Adaptive Web Design "i'm a webpage, and i care about whoever you are"
  20. Wait! How about the mediaqueries ?
  21. Mediaqueries = technical tool Responsive Web Design "i'm a webpage, and i care about your display!" Responsive Layouts "how large may i be again ? Wait here as i rearrange my blocks!" Fluid Grid "how large may i be again? Wait here as i stretch my columns!" Adaptive Web Design "i'm a webpage, and i care about whoever you are"
  22. Let's get some hands dirty a little SOME TECH
  23. Why mediaqueries?
  24. The problem Server Client Webpage (html, css, js, and all that stuff)
  25. The problem Server Client Webpage (html, css, js, and all that stuff) Monochrome, tiny e-book Same webpage (same css& js ?)
  26. Two solutions!
  27. Solution 1: the serves sends different files Server Client Monochrome, tiny e-book Wait! How the hell do i know who i'm talking to?
  28. Solution 1: the serves sends different files Server Client Monochrome, tiny e-book HTTP headers (User-Agent) HTTP headers (User-Agent)
  29. Solution 1: the serves sends different files Server Client Monochrome, tiny e-book HTTP headers (User-Agent) HTTP headers (User-Agent)
  30. Browser sniffing is NOT an ideal solution!
  31. 1- User Agent parsing is error-prone Opera 9 Opera/9.64 (Windows NT 6.0; U; en) Presto/2.1.1 Opera 10a Opera/10.00 (Windows NT 6.0; U; en) Presto/2.2.0 Broken! Browser sniffing is NOT an ideal solution!
  32. 1- User Agent parsing is error-prone Opera 9 Opera/9.64 (Windows NT 6.0; U; en) Presto/2.1.1 Opera 10a Opera/10.00 (Windows NT 6.0; U; en) Presto/2.2.0 Broken! Browser sniffing is NOT an ideal solution! http://www.allocine.fr
  33. 1- User Agent parsing is error-prone Opera 9 Opera/9.64 (Windows NT 6.0; U; en) Presto/2.1.1 Opera 10a Opera/10.00 (Windows NT 6.0; U; en) Presto/2.2.0 Yeay, fixed! Opera 10 Opera/9.8 (Windows NT 6.0; U; en) Presto/2.2.0 Browser sniffing is NOT an ideal solution!
  34. 1- User Agent parsing is error-prone Opera 9 Opera/9.64 (Windows NT 6.0; U; en) Presto/2.1.1 Opera 10a Opera/10.00 (Windows NT 6.0; U; en) Presto/2.2.0 Yeay, fixed! Opera 10 Opera/9.8 (Windows NT 6.0; U; en) Presto/2.2.0 Browser sniffing is NOT an ideal solution! But...
  35. 1- User Agent parsing is error-prone Opera 9 Opera/9.64 (Windows NT 6.0; U; en) Presto/2.1.1 Opera 10a Opera/10.00 (Windows NT 6.0; U; en) Presto/2.2.0 Oops? Opera 10 Opera/9.8 (Windows NT 6.0; U; en) Presto/2.2.0 Browser sniffing is NOT an ideal solution!
  36. 1- User Agent parsing is error-prone Opera 9 Opera/9.64 (Windows NT 6.0; U; en) Presto/2.1.1 Opera 10a Opera/10.00 (Windows NT 6.0; U; en) Presto/2.2.0 Oops? Opera 10 Opera/9.8 (Windows NT 6.0; U; en) Presto/2.2.0 Browser sniffing is NOT an ideal solution! http://www.state.gov
  37. 1- User Agent parsing is error-prone 2- Browsers are liars! IE8: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.0 (...) Wait, what?! Browser sniffing is NOT an ideal solution!
  38. 1- User Agent parsing is error-prone 2- Browsers are liars! 3- You're sure you know ALL the browsers? Browser sniffing is NOT an ideal solution!
  39. 1- User Agent parsing is error-prone 2- Browsers are liars! 3- You're sure you know ALL the browsers ? 4- And you're sure you know ALL the browsers... from the future?! Browser sniffing is NOT an ideal solution!
  40. Solution 2: the serves sends everything, the client decides what to use Server Client Monochrome, tiny e-book
  41. But how? some other usual css stuff... some usual css stuff... If you're a regular 1024x768 multi-color display, then... If you're a tiny and monochrome E-book, then...
  42. But how? CSS3 mediaqueries! @media screen { } @media handheld and (min-monochrome: 1) { } some other usual css stuff... some usual css stuff... If you're a regular 1024x768 multi-color display, then... If you're a tiny and monochrome E-book, then...
  43. So... mediaqueries are not only about mobile! monochrome grid scan resolution orientation color-index color device-aspect-ratio aspect-ratio device-height device-width height width
  44. So... mediaqueries are not only about mobile! particularly useful for e-books! particularly useful for TVs! particularly useful for resizable windows! particularly useful for mobiles! monochrome grid scan resolution orientation color-index color device-aspect-ratio aspect-ratio device-height device-width height width
  45. So... mediaqueries are not only about mobile! particularly useful for e-books! particularly useful for TVs! particularly useful for resizable windows! particularly useful for mobiles! CC BY – Yusuke Kawasaki monochrome grid scan resolution orientation color-index color device-aspect-ratio aspect-ratio device-height device-width height width
  46. So... mediaqueries are not only about mobile! particularly useful for e-books! particularly useful for TVs! particularly useful for resizable windows! particularly useful for mobiles! monochrome grid scan resolution orientation color-index color device-aspect-ratio aspect-ratio device-height device-width height width
  47. Truth and lies, you said? SOME MYTHS
  48. Every website should be responsive MYTH #1
  49. Every website should be responsive MYTH #1
  50. Could be one page Could be another page Could be another other page http://www.facebook.com
  51. Could be one page Could be another page Could be another other page http://www.facebook.com
  52. Browser sniffing...
  53. Browser sniffing...
  54. Responsive Web Design is awful for front-end performance MYTH #2
  55. Responsive Web Design is awful for front-end performance MYTH #2
  56. Truth because... USELESS ! some css for another device some css for one device
  57. Truth because... USELESS ! … but there may be solutions? <link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; media=&quot; min-width : 600px &quot; href=&quot;styles-600.css&quot; /> some css for another device some css for one device
  58. Truth because... USELESS ! … but there may be solutions? <link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; media=&quot; min-width : 600px &quot; href=&quot;styles-600.css&quot; /> Ouch, browsers download them all anyway ! (for now...) some css for another device some css for one device
  59. Truth because for some browsers... USELESS ! some css for another device some css for one device png jpg jpg png jpg png
  60. Truth because for some browsers... USELESS ! … but this is being fixed! some css for another device some css for one device png jpg jpg png jpg png
  61. Truth because for all browsers... <img class=&quot;hide_me&quot; src=&quot;image.png&quot; /> USELESS ! img.hide_me { display: none; } img.hide_me { display: inline; } png
  62. Truth because for all browsers... <img class=&quot;hide_me&quot; src=&quot;image.png&quot; /> USELESS ! … but there are solutions to come !! css rule &quot;content&quot; media query listener dedicated javascript img.hide_me { display: none; } img.hide_me { display: inline; } png Meh... Meh... Meh...
  63. Responsive Web Design is awful for front-end performance True, not great, but will get better! MYTH #2
  64. My Responsive Web Design is going to look like crap on IE6... MYTH #3
  65. My Responsive Web Design is going to look like crap on IE6... MYTH #3
  66. Falling back is easy some css for old browsers who don't get CSS3 Mobile first? respond.js! some css for another device some css for one device
  67. … but....
  68. Falling broken is very easy too! some css for old browsers who don't get CSS3 fixing and testing stuff here... … what am i breaking there? some css for one device some css for another device
  69. As a graphist, thinking Responsive will ruin my creativity MYTH #4
  70. As a graphist, thinking Responsive will ruin my creativity MYTH #4 Brandon Baunach CC BY
  71. A perfect Responsive Web Design makes you want never to leave your smartphone MYTH #5
  72. A perfect Responsive Web Design makes you want never to leave your smartphone MYTH #5
  73. A perfect Responsive Web Design responds perfectly to ALL devices
  74. So, why do we say &quot;Mobile first&quot;?
  75. So, why do we say &quot;Mobile first&quot;? Minimalist as a user experience design constraint is good Market share is already massive, will get even better!
  76. A good Responsive designer who doesn't know HTML flow is not that good MYTH #6
  77. A good fixed-width designer who doesn't know HTML flow is not that good...
  78. A good fixed-width designer who doesn't know HTML flow is not that good... … a Responsive designer who doesn't know HTML flow is USELESS!
  79. Methodology ideas, for projects supposedly too big for responsive SOME WAYS
  80. Specifications Storyboarding / Prototyping / Wireframing Graphism / Art direction Front-end development Back-end development
  81. Specifications Storyboarding / Prototyping / Wireframing Graphism / Art direction Front-end development Back-end development HUHG!!
  82. Specifications Storyboarding / Prototyping / Wireframing Graphism / Art direction Front-end development Back-end development And mostly here, because we don't have tools.
  83. What do we know? <ul><li>We're dealing with something that &quot;moves&quot; depending on a context
  84. We know how to prototype for one size
  85. There are only so many technical ways to &quot;extend&quot; or &quot;reduce&quot; elements
  86. Non-useless &quot;responsive&quot; designers can be hard to find </li></ul>
  87. Dealing with something that moves depending on context? It's all about the key-frames ! (and what's in between)
  88. Dealing with something that moves depending on context? It's all about the key-frames ! (and what's in between)
  89. Dealing with something that moves depending on context? For each template Prototype 1 Prototype 2 Prototype 3 Remember, we know how to prototype for one size!
  90. Extra question: when is the design supposed to break down? Prototype 1 Prototype 2 Prototype 3
  91. Two approaches
  92. You know your content : content-driven Prototype 1 Prototype 2 Prototype 3 Quite long title Right col Right col Right col Right col Right col Right col Right col Right col Right col Content content content content content content content content content content content content content content content content content content content content content content Quite long title Content content content content content content content content content content content content content content Right col Right col Right col Right col Right col Right col Right col Right col Right col Quite long title Only works if you know your content really well, and if it doesn't vary too much accross the site or in time... Content content content content content content content content content content content content content content content content
  93. You don't know your content well: market-driven Prototype 1 Prototype 2 Prototype 3 1024 screen iPad (portrait) iPhone (portrait)
  94. You don't know your content well: market-driven Prototype 1 Prototype 2 Prototype 3 1024 screen iPad (portrait) iPhone (portrait)
  95. What do we know? <ul><li>We're dealing with something that &quot;moves&quot; depending on a context
  96. We know how to prototype for one size
  97. There are only so many technical ways to &quot;extend&quot; or &quot;reduce&quot; elements
  98. Non-useless &quot;responsive&quot; designers can be hard to find </li></ul>
  99. Prototype 1 Prototype 2 Prototype 3 Quite long title Right col Right col Right col Right col Right col Right col Right col Right col Right col Content content content content content content content content content content content content content content content content content content content content content content Quite long title Content content content content content content content content content content content content content content Right col Right col Right col Right col Right col Right col Right col Right col Right col Quite long title How to symbolize content adjustment from a slide to its next slide? Stretching? Fixed size? Or even rotating? Cropping? Content content content content content content content content content content content content content content content content
  100. Prototype 1 Prototype 2 Prototype 3 Quite long title Right col Right col Right col Right col Right col Right col Right col Right col Right col Content content content content content content content content content content content content content content content content content content content content content content Quite long title Content content content content content content content content content content content content content content Right col Right col Right col Right col Right col Right col Right col Right col Right col Quite long title Content content content content content content content content content content content content content content content content How to symbolize content adjustment from a slide to its next slide? Cropping? Stretching? Fixed size? Or even rotating?
  101. What do we know? <ul><li>We're dealing with something that &quot;moves&quot; depending on a context
  102. We know how to prototype for one size
  103. There are only so many technical ways to &quot;extend&quot; or &quot;reduce&quot; elements
  104. Non-useless &quot;responsive&quot; designers can be hard to find </li></ul>
  105. Responsive Designer? = Fixed-width Designer + Front-end Developer
  106. Responsive Designer? = Fixed-width Designer + Front-end Developer
  107. Prototype 1 Prototype 2 Prototype 3 Quite long title Right col Right col Right col Right col Right col Right col Right col Right col Right col Content content content content content content content content content content content content content content content content content content content content content content Quite long title Content content content content content content content content content content content content content content Right col Right col Right col Right col Right col Right col Right col Right col Right col Quite long title Content content content content content content content content content content content content content content content content Responsive Designer? = Fixed-width Designer + Front-end Developer ?
  108. Specifications Storyboarding / Prototyping / Wireframing Graphism / Art direction Front-end development Back-end development Layout front-end testing (just to check!)
  109. Well now... what did we learn here today? SOME OUTCOME
  110. Technically chill Righto!
  111. But design process hard to industralize CC-BY Hayden &quot;H Dragon&quot;
  112. But we are getting there, little by little... CC BY-NC-ND Victor Roblas
  113. To be continued in your projects... Thanks for listening, folks! If you feel like there's something you should ask me, come talk to me, i'm a human being! (also, i'm still hanging in Krakow tomorrow, so tweet me, and we'll hang out and speak about it!)

×