Successfully reported this slideshow.
Your SlideShare is downloading. ×

RWD in the Wild

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Upcoming SlideShare
Topsy Turvy Design
Topsy Turvy Design
Loading in …3
×

Check these out next

1 of 202 Ad
Advertisement

More Related Content

Slideshows for you (20)

Similar to RWD in the Wild (20)

Advertisement

Recently uploaded (20)

RWD in the Wild

  1. 1. RWD in the wild Please use the hash tag #p80n @richquick http://www.svethardware.cz/sh/media.nsf/v/93DDE20E82C52910C12572C1007F7915/$file/Jungle_DX10.jpg
  2. 2. RWD in the wild Please use the hash tag #p80n @richquick http://www.svethardware.cz/sh/media.nsf/v/93DDE20E82C52910C12572C1007F7915/$file/Jungle_DX10.jpg
  3. 3. Who am I?
  4. 4. Rich Quick
  5. 5. Rich Quick (before you ask)
  6. 6. Yes (it is my real name)
  7. 7. Here’s my passport to prove it
  8. 8. Web Designer
  9. 9. Front end Developer
  10. 10. 12 Years
  11. 11. Work for these guys
  12. 12. Very traditional site
  13. 13. Very traditional site Designed for desktop
  14. 14. Very traditional site Designed for desktop Traditional design process
  15. 15. Very traditional site Designed for desktop Traditional design process Looks “so so”
  16. 16. The Traditional Design Process
  17. 17. The
  18. 18. The Traditional Design Process
  19. 19. The Traditional Design Process 1 Big Fat Cheque http://www.flickr.com/photos/nznationalparty/6078616366/sizes/z/in/photostream/
  20. 20. 2 Have a latte http://www.designfloat.com/blog/2010/07/21/latte-art-charming-coffee-designs-part-ii/
  21. 21. Do some wireframes 3
  22. 22. Do some wireframes 3 (maybe) http://www.flickr.com/photos/rohdesign/3307873748/sizes/m/in/photostream/
  23. 23. Do some wireframes 3
  24. 24. Do some wireframes 3
  25. 25. Do some wireframes 3
  26. 26. Do some wireframes 3
  27. 27. 4 Give to the (ultra cool) designer
  28. 28. Who does some Photoshop magic
  29. 29. 5 Then the client / your boss sees it
  30. 30. 5 Then the client / your boss sees it and loves it 1 st TIME
  31. 31. 5 Then the client / your boss sees it and loves it 91st TIME
  32. 32. 6 Next, the design gets handed over to this guy
  33. 33. 6 The geek* / techie* / HTML monkey* * delete as applicable
  34. 34. He* does a load of geekytechienerdy stuff * It a he, obviously.
  35. 35. 7 Big Fat Final Cheque
  36. 36. 1 Big fat deposit cheque 2 Have a latte 3 Do some wireframes 4 Photoshop comps 5 Sign off 6 HTML Monkey does voodoo 7 Big fat final cheque
  37. 37. 1 Big fat deposit cheque 2 Have a latte 3 Do some wireframes 4 Photoshop comps 5 Sign off 6 HTML Monkey does voodoo 7 Big fat final cheque
  38. 38. Traditional Print Process
  39. 39. Big fat deposit cheque 1 Have a latte cappuccino 2 Do some wireframes 3 Photoshop Indesign comps 4 Sign off 5 HTML Monkey Printer does voodoo 6 Big fat final cheque 7
  40. 40. 1 2 3 5 4 6 7
  41. 41. WHY?
  42. 42. CHAN GE
  43. 43. DON’T MAKE ME CHANGE
  44. 44. THE MORE YOU ASK PEOPLE TO CHANGE
  45. 45. THE LESS OF THEM WILL
  46. 46. A web developer (you guys)
  47. 47. Go to the gym twice a day, eat celery, run 60 miles a week
  48. 48. Yeah, Right!
  49. 49. Try a smaller burger, maybe?
  50. 50. var ageOfWebDesignProcess; // in years if (webDesignProcess == printDesignProcess) { echo(‘wtf!’); ageOfWebDesignProcess = 572; }
  51. 51. PEOPLE HATE CHANGE THAT MUCH }
  52. 52. Web Designers
  53. 53. Get asked to change more than most
  54. 54. First I learnt tables.. then that was wrong Then I learnt Flash.. then that wasn’t cool Then I learnt CSS.. Then it was accessibility.. Then it was XHTML.. Then it was HTML5.. Now what?!!
  55. 55. Responsive Web Design* * or adaptive, depending on what book you read
  56. 56. Aww crap!
  57. 57. can I be bothered?
  58. 58. some good news
  59. 59. some good news
  60. 60. it’s really easy
  61. 61. there’s just 1 thing you need to learn
  62. 62. Media Queries @media screen and (min-width:1025px) { ! /* your CSS here */ }
  63. 63. That’s it (pretty much)
  64. 64. At least from a technical point of view
  65. 65. From a technical point of view Learn 1 line of code and you know how to do responsive design
  66. 66. From a technical point of view Learn 1 line of code and you know how to do responsive design
  67. 67. From a design point of view It doesn’t need to be much harder
  68. 68. There’s no wrong or right way to do responsive design But here’s how I do it...
  69. 69. Remember the cutlery in Titanic?
  70. 70. No?
  71. 71. Just start from the outside, Jack, and work in
  72. 72. Just start from the outside, Jack, and work in
  73. 73. Start in the “traditional” way
  74. 74. Cheque, latte, wireframes, Photoshop
  75. 75. Then ask “what if”?
  76. 76. “What if it was a bit thinner?”
  77. 77. “What if it was thinner still?”
  78. 78. When you’re designing Start from the outside and work in
  79. 79. When you’re designing Start from the outside and work in
  80. 80. When coding Start from the inside and work out
  81. 81. It’s way easier and there’s a hidden IE gift
  82. 82. Code thinnest first
  83. 83. Then code outwards
  84. 84. Gracefully degrade your design Progressively enhance your code
  85. 85.  A word about IE
  86. 86. IE <8 doesn’t support @media Javascript Polyfills (modernizr.js, respond.js, css3-media-queries.js) http://code.google.com/p/css3-mediaqueries-js/ https://github.com/scottjehl/Respond
  87. 87. Learn to let go Safari, Chrome, Firefox, Opera, your fridge IE
  88. 88. The IE Gift
  89. 89. remember 1 If you thing
  90. 90. Remember This 1
  91. 91. Responsive Web Design is... 1
  92. 92. Really, really, simple 1
  93. 93. There’s just 1 thing to learn @media screen and (min-width:1025px) { ! /* your CSS here */ }
  94. 94. That’s it! @media screen and (min-width:1025px) { ! /* your CSS here */ }
  95. 95. 1 line @media screen and (min-width:1025px) { ! /* your CSS here */ }
  96. 96. A Challenge
  97. 97. A (really easy) Challenge
  98. 98. Make your next website responsive
  99. 99. Make your next / website responsive a bit
  100. 100. Why?
  101. 101. A little bit of CSS is better than NONE
  102. 102. A little bit of RESPONSIVENESS is better than NONE
  103. 103. Here’s how
  104. 104. Fixed-width Layout http://frontrowconf.com/speakers/
  105. 105. Horizontal Scrolling
  106. 106. and on mobile
  107. 107. <div class="columns"> <section id="content" class="main"> ... </section> <aside id="widgets"> ... </aside> </div> there’s some HTML
  108. 108. .columns{ } padding-top:70px; and some #content{ float:left; CSS width:595px; margin: 0 25px; } #widgets{ float:right; width:275px; margin-right:18px; }
  109. 109. to make your site responsive just add media queries
  110. 110. .container{ width:940px; } take the #content { float: left; width: 595px; CSS } that does #widgets{ float:right; width:275px; layout }
  111. 111. Pull it out plonk it at the end
  112. 112. @media screen and (min-width:970px) { and .container{ width:940px; } whack it #content { float: left; in a media width: 595px; } #widgets{ float:right; width:275px; } query }
  113. 113. ta da!
  114. 114. it really is
  115. 115. Scarily simple
  116. 116. It is just 1 line of code @media screen and (min-width:1025px) { ! /* your CSS here */ }
  117. 117. It’s really Simple
  118. 118. The problem with Simple Things is
  119. 119. They can be Dangerous
  120. 120. They can be Dangerous
  121. 121. They can be Dangerous
  122. 122. So, what are the Dangers?
  123. 123. Designing a layout
  124. 124. Designing a layout
  125. 125. Not a user experience
  126. 126. Not a user experience
  127. 127. Not a user experience
  128. 128. Not a user experience
  129. 129. Not a user experience
  130. 130. Not a user experience
  131. 131. Not a user experience
  132. 132. Not using it?
  133. 133. Dead Dull
  134. 134. Born Again yay!
  135. 135. Born Again yay!
  136. 136. The Boring Legacy pages
  137. 137. The Boring Legacy pages
  138. 138. Campaign landing pages
  139. 139. How much extra work?
  140. 140. jQuery
  141. 141. Back to  IE
  142. 142. IE Our experience
  143. 143. IF YOU’RE USING IE 6
  144. 144. YOU’RE USING
  145. 145. JAVASCRIPT POLYFILLS Kill Performance
  146. 146. Add a comment @media only screen and (max-height : 920px) and (min-width : 790px) { /*ends*/}
  147. 147. Some SED sed -r -e 's/^@media[^^M]+//' -e 's/^and[^^M]+//' -e 's|/*ends */}||' /var/www/html/assets/styles/default.css > /var/www/html/ assets/styles/default-no-media.css
  148. 148. Unresolved Questions
  149. 149. Mobile First Navigation
  150. 150. Mobile First Navigation
  151. 151. Mobile First Navigation
  152. 152. Mobile First Navigation
  153. 153. Mobile First Navigation
  154. 154. Mobile First Navigation
  155. 155. Advertising
  156. 156. Internal Ads
  157. 157. Paid Ads
  158. 158. Paid Ads
  159. 159. Paid Ads
  160. 160. Some Tips
  161. 161. Some stuff for iPhones (mainly) <meta name="viewport" content="width=500" />
  162. 162. Viewport <meta name="viewport" content="width=500" />
  163. 163. iPhones adjust text size
  164. 164. iPhones adjust text size body { -webkit-text-size-adjust: none; }
  165. 165. HTML5 form fields <input type="text" name="name" /> <input type="telephone" name="phone" /> <input type="email" name="email" /> <input type="search" name="search" /> <input type="url" name="website" />
  166. 166. Why bother? <input type="text" name="name" /> <input type="telephone" name="phone" /> <input type="email" name="email" /> <input type="search" name="search" /> <input type="url" name="website" />
  167. 167. Why bother? Because it’s there <input type="text" name="name" /> <input type="tel" name="phone" /> <input type="email" name="email" /> <input type="search" name="search" /> <input type="url" name="website" />
  168. 168. Why bother? Because it’s there
  169. 169. phones can change the keyboard <input type="email" name="email" />
  170. 170. support in “older browsers”* <input type="email" name="email" /> * cough - IE - cough
  171. 171. treated like type="text" <input type="text" name="email" />
  172. 172. Safari changes it -webkit-appearance: textfield;
  173. 173. responsive images
  174. 174. hardboil for an easier life
  175. 175. hardboil for an easier life
  176. 176. CSS3 for a lovlier life
  177. 177. TO
  178. 178. 1. It’s stupidly easy
  179. 179. 2. But there’s still a lot to learn
  180. 180. 3. Gracefully degrade your designs
  181. 181. 4. Progressively enhance your code
  182. 182. 5. It’s just 1 line of code!
  183. 183. 6. Have a latte
  184. 184. 1. It’s mind-numbingly easy 2. But there’s still a lot to learn 3. Gracefully degrade your designs 4. Progressively enhance your code 5. It’s just 1 line of code 6. Latte
  185. 185. Books Adaptive Web Design Aaron Gustafson Responsive Web Design Ethan Marcote
  186. 186. Thanks Rich Quick @richquick rich@richquick.tv http://www.richquick.tv/p80n

Editor's Notes

  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n

×