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,355 views

Published on

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

Published in: Design, Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,355
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
13
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • \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
  • 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

    ×