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.
RWD in the wild         Please use the hash tag #p80n                                                             @richqui...
RWD in the wild         Please use the hash tag #p80n                                                             @richqui...
Who am I?
Rich Quick
Rich Quick(before you ask)
Yes(it is my real name)
Here’s my passport to prove it
WebDesigner
Front endDeveloper
12Years
Work for these guys
Very traditional site
Very traditional siteDesigned for desktop
Very traditional siteDesigned for desktopTraditional design process
Very traditional siteDesigned for desktopTraditional design processLooks “so so”
TheTraditionalDesignProcess
The
The Traditional Design Process
The Traditional Design Process       1   Big    FatCheque   http://www.flickr.com/photos/nznationalparty/6078616366/sizes/z...
2                                                                                       Have a lattehttp://www.designfloat....
Do some wireframes   3
Do some wireframes                                                          3   (maybe) http://www.flickr.com/photos/rohdes...
Do some wireframes   3
Do some wireframes   3
Do some wireframes   3
Do some wireframes   3
4Give to the(ultra cool)  designer
Who does some Photoshop magic
5Then the client / your boss sees it
5Then the client / your boss sees it                      and loves it    1 st                                      TIME
5Then the client / your boss sees it                      and loves it    91st                                      TIME
6Next, the design gets handed over to this guy
6The geek* / techie* / HTML monkey** delete as applicable
He* does a load of geekytechienerdy stuff       * It a he, obviously.
7   Big    Fat  FinalCheque
1     Big fat deposit cheque2       Have a latte    3     Do some wireframes4       Photoshop comps    5     Sign off6    ...
1     Big fat deposit cheque2       Have a latte    3     Do some wireframes4       Photoshop comps    5     Sign off6    ...
Traditional   Print Process
Big fat deposit cheque        1         Have a latte cappuccino      2              Do some wireframes          3      Pho...
1   2       3       5        4       6       7
WHY?
CHANGE
DON’T MAKE MECHANGE
THE MORE YOUASK PEOPLE TOCHANGE
THE LESS OF THEMWILL
A web developer (you guys)
Go to the gym twice a day,eat celery,run 60 miles a week
Yeah,Right!
Try a smaller burger, maybe?
var ageOfWebDesignProcess; // in yearsif (webDesignProcess == printDesignProcess) { echo(‘wtf!’); ageOfWebDesignProcess = ...
PEOPLE HATE CHANGETHAT MUCH    }
Web Designers
Get asked to changemore than most
First I learnt tables.. then that was wrongThen I learnt Flash.. then that wasn’t coolThen I learnt CSS..Then it was acces...
Responsive Web Design** or adaptive, depending on what book you read
Aww crap!
can I be  bothered?
some good  news
some good  news
it’s really   easy
there’s just       1       thing          you need to learn
Media Queries@media screen and (min-width:1025px) {! /* your CSS here */}
That’s it (pretty much)
At least from atechnical point of view
From atechnical point of view Learn 1 line of code and you know how to do responsive design
From atechnical point of view Learn 1 line of code and you know how to do responsive design
From adesign point of view It doesn’t need to be much harder
There’s no wrong or rightway to do responsive design But here’s how I do it...
Remember the cutleryin Titanic?
No?
Just start from the outside,    Jack, and work in
Just start from the outside,    Jack, and work in
Start inthe “traditional” way
Cheque,       latte,wireframes,Photoshop
Then ask “what if”?
“What if it wasa bit thinner?”
“What if it was thinner still?”
When you’re designingStart from the outside    and work in
When you’re designingStart from the outside    and work in
When codingStart from the inside     and work out
It’s way easierand there’s a hidden       IE gift
Codethinnestfirst
Then    codeoutwards
Gracefully degrade your designProgressively enhance your code
   A word about IE
IE <8 doesn’t support @mediaJavascript Polyfills (modernizr.js, respond.js, css3-media-queries.js)                   http:/...
Learn to let go      Safari, Chrome, Firefox,      Opera, your fridge      IE
The IEGift
remember         1    If you   thing
Remember    This           1
ResponsiveWeb Design       is...               1
Really, really,simple           1
There’s just 1 thing to learn     @media screen and (min-width:1025px) {     ! /* your CSS here */     }
That’s it!@media screen and (min-width:1025px) {! /* your CSS here */}
1 line@media screen and (min-width:1025px) {! /* your CSS here */}
AChallenge
A (really easy)Challenge
Make your nextwebsite responsive
Make your next       /website responsive      a bit
Why?
A little bit ofCSSis better thanNONE
A little bit ofRESPONSIVENESSis better thanNONE
Here’s how
Fixed-width                                        Layouthttp://frontrowconf.com/speakers/
HorizontalScrolling
and onmobile
<div class="columns">  <section id="content" class="main">    ...  </section>  <aside id="widgets">    ...  </aside></div>...
.columns{}  padding-top:70px;    and some#content{  float:left;                        CSS  width:595px;  margin: 0 25px;}...
to make your site responsivejust add media queries
.container{width:940px;}                take the#content {float: left;width: 595px;                 CSS}               tha...
Pull it outplonk it at the end
@media screen and (min-width:970px) {        and.container{width:940px;}                                       whack it#co...
ta da!
it really is
Scarilysimple
It is just 1 line of code  @media screen and (min-width:1025px) {  ! /* your CSS here */  }
It’s reallySimple
The problem withSimpleThings is
They can beDangerous
They can beDangerous
They can beDangerous
So, what are theDangers?
Designing a layout
Designing a layout
Not a user experience
Not a user experience
Not a user experience
Not a user experience
Not a user experience
Not a user experience
Not a user experience
Not using it?
Dead Dull
Born Again   yay!
Born Again   yay!
The Boring Legacy   pages
The Boring Legacy   pages
Campaign landing pages
How much extra work?
jQuery
Back to    IE
IE Our experience
IF YOU’RE USING IE 6
YOU’RE USING
JAVASCRIPT POLYFILLS         Kill      Performance
Add a comment@media only screenand (max-height : 920px)and (min-width : 790px) {/*ends*/}
Some SEDsed -r -e s/^@media[^^M]+// -e s/^and[^^M]+// -e s|/*ends  */}|| /var/www/html/assets/styles/default.css > /var/ww...
Unresolved Questions
Mobile First Navigation
Mobile First Navigation
Mobile First Navigation
Mobile First Navigation
Mobile First Navigation
Mobile First Navigation
Advertising
Internal Ads
Paid Ads
Paid Ads
Paid Ads
Some Tips
Some stuff for iPhones (mainly)      <meta name="viewport" content="width=500" />
Viewport<meta name="viewport" content="width=500" />
iPhones adjust text size
iPhones adjust text sizebody {  -webkit-text-size-adjust: none;}
HTML5 form fields<input   type="text" name="name" /><input   type="telephone" name="phone" /><input   type="email" name="em...
Why bother?<input   type="text" name="name" /><input   type="telephone" name="phone" /><input   type="email" name="email" ...
Why bother?   Because it’s there<input   type="text" name="name" /><input   type="tel" name="phone" /><input   type="email...
Why bother?Because it’s there
phones can change the keyboard<input type="email" name="email" />
support in “older browsers”*     <input type="email" name="email" />                                      * cough - IE - c...
treated like type="text"  <input type="text" name="email" />
Safari changes it-webkit-appearance: textfield;
responsive images
hardboil for an easier life
hardboil for an easier life
CSS3 for a lovlier life
TO
1.     It’sstupidly   easy
2.        But there’sstill a lot to learn
3. Gracefullydegrade your      designs
4. Progressivelyenhance yourcode
5. It’s just 1 line          of code!
6. Have a latte
1. It’s mind-numbingly easy2. But there’s still a lot to learn3. Gracefully degrade your designs4. Progressively enhance y...
Books  Adaptive Web Design  Aaron Gustafson  Responsive Web Design  Ethan Marcote
Thanks                Rich Quick                 @richquick           rich@richquick.tvhttp://www.richquick.tv/p80n
RWD in the Wild
RWD in the Wild
RWD in the Wild
RWD in the Wild
RWD in the Wild
RWD in the Wild
RWD in the Wild
RWD in the Wild
RWD in the Wild
RWD in the Wild
RWD in the Wild
RWD in the Wild
RWD in the Wild
RWD in the Wild
RWD in the Wild
RWD in the Wild
Upcoming SlideShare
Loading in …5
×

RWD in the Wild

1,422 views

Published on

Talk about Responsive Web Design and how it works in the wild.

Published in: Design, Technology
  • Be the first to comment

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. WebDesigner
  9. 9. Front endDeveloper
  10. 10. 12Years
  11. 11. Work for these guys
  12. 12. Very traditional site
  13. 13. Very traditional siteDesigned for desktop
  14. 14. Very traditional siteDesigned for desktopTraditional design process
  15. 15. Very traditional siteDesigned for desktopTraditional design processLooks “so so”
  16. 16. TheTraditionalDesignProcess
  17. 17. The
  18. 18. The Traditional Design Process
  19. 19. The Traditional Design Process 1 Big FatCheque http://www.flickr.com/photos/nznationalparty/6078616366/sizes/z/in/photostream/
  20. 20. 2 Have a lattehttp://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. 4Give to the(ultra cool) designer
  28. 28. Who does some Photoshop magic
  29. 29. 5Then the client / your boss sees it
  30. 30. 5Then the client / your boss sees it and loves it 1 st TIME
  31. 31. 5Then the client / your boss sees it and loves it 91st TIME
  32. 32. 6Next, the design gets handed over to this guy
  33. 33. 6The 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 FinalCheque
  36. 36. 1 Big fat deposit cheque2 Have a latte 3 Do some wireframes4 Photoshop comps 5 Sign off6 HTML Monkey does voodoo 7 Big fat final cheque
  37. 37. 1 Big fat deposit cheque2 Have a latte 3 Do some wireframes4 Photoshop comps 5 Sign off6 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 5HTML Monkey Printer does voodoo 6 Big fat final cheque 7
  40. 40. 1 2 3 5 4 6 7
  41. 41. WHY?
  42. 42. CHANGE
  43. 43. DON’T MAKE MECHANGE
  44. 44. THE MORE YOUASK PEOPLE TOCHANGE
  45. 45. THE LESS OF THEMWILL
  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 yearsif (webDesignProcess == printDesignProcess) { echo(‘wtf!’); ageOfWebDesignProcess = 572;}
  51. 51. PEOPLE HATE CHANGETHAT MUCH }
  52. 52. Web Designers
  53. 53. Get asked to changemore than most
  54. 54. First I learnt tables.. then that was wrongThen I learnt Flash.. then that wasn’t coolThen 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 atechnical point of view
  65. 65. From atechnical point of view Learn 1 line of code and you know how to do responsive design
  66. 66. From atechnical point of view Learn 1 line of code and you know how to do responsive design
  67. 67. From adesign point of view It doesn’t need to be much harder
  68. 68. There’s no wrong or rightway to do responsive design But here’s how I do it...
  69. 69. Remember the cutleryin 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 inthe “traditional” way
  74. 74. Cheque, latte,wireframes,Photoshop
  75. 75. Then ask “what if”?
  76. 76. “What if it wasa bit thinner?”
  77. 77. “What if it was thinner still?”
  78. 78. When you’re designingStart from the outside and work in
  79. 79. When you’re designingStart from the outside and work in
  80. 80. When codingStart from the inside and work out
  81. 81. It’s way easierand there’s a hidden IE gift
  82. 82. Codethinnestfirst
  83. 83. Then codeoutwards
  84. 84. Gracefully degrade your designProgressively enhance your code
  85. 85.  A word about IE
  86. 86. IE <8 doesn’t support @mediaJavascript 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 IEGift
  89. 89. remember 1 If you thing
  90. 90. Remember This 1
  91. 91. ResponsiveWeb 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. AChallenge
  97. 97. A (really easy)Challenge
  98. 98. Make your nextwebsite responsive
  99. 99. Make your next /website responsive a bit
  100. 100. Why?
  101. 101. A little bit ofCSSis better thanNONE
  102. 102. A little bit ofRESPONSIVENESSis better thanNONE
  103. 103. Here’s how
  104. 104. Fixed-width Layouthttp://frontrowconf.com/speakers/
  105. 105. HorizontalScrolling
  106. 106. and onmobile
  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 responsivejust 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 outplonk it at the end
  112. 112. @media screen and (min-width:970px) { and.container{width:940px;} whack it#content {float: left; in a mediawidth: 595px;}#widgets{float:right;width:275px;} query}
  113. 113. ta da!
  114. 114. it really is
  115. 115. Scarilysimple
  116. 116. It is just 1 line of code @media screen and (min-width:1025px) { ! /* your CSS here */ }
  117. 117. It’s reallySimple
  118. 118. The problem withSimpleThings is
  119. 119. They can beDangerous
  120. 120. They can beDangerous
  121. 121. They can beDangerous
  122. 122. So, what are theDangers?
  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 screenand (max-height : 920px)and (min-width : 790px) {/*ends*/}
  147. 147. Some SEDsed -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 sizebody { -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’sstupidly easy
  179. 179. 2. But there’sstill a lot to learn
  180. 180. 3. Gracefullydegrade your designs
  181. 181. 4. Progressivelyenhance yourcode
  182. 182. 5. It’s just 1 line of code!
  183. 183. 6. Have a latte
  184. 184. 1. It’s mind-numbingly easy2. But there’s still a lot to learn3. Gracefully degrade your designs4. Progressively enhance your code5. It’s just 1 line of code6. Latte
  185. 185. Books Adaptive Web Design Aaron Gustafson Responsive Web Design Ethan Marcote
  186. 186. Thanks Rich Quick @richquick rich@richquick.tvhttp://www.richquick.tv/p80n

×