RESPONSIVE WEBDESIGN   FRONTEERS / MECHELEN / NOV 2011   These slides are the blueprint of a presentation I did at Frontee...
THOMAS MOM CALLED ME             BYTTEBIER   IS HOW MY
my brother is the cute one
as a kid, I wanted to be Maradona
picture says it all
NOW I WORK AS A FREELANCEWEBDESIGNER  FOCUS ON DESIGN
I realize that looks like quite a fail to the public, but I enjoy doing it
I tweet about all things design and web, follow me @bytte
my old-school website is at thomasbyttebier.com
RESPONSIVE WEBDESIGNPROBLEMS / SEMI-SOLUTIONS / OWN EXPERIENCES      here’s what I talked about and what these slides are ...
here’s a responsive website I made in 2010: sleepstreet.be
this one I did early 2011
I went to Build a few weeks ago
with a few Belgian freelancers   photo by Jelle Desramaults
I was lucky to see Wilson Miner speak at Build
if you don’t know Wilson Miner: he designed this pretty famous website
he talked about how few products had such in impact in our lives as the car in the 20th century
it even drastically changed our environment
at the end of the 20th century the pc was another product that dramatically changed our lives
here’s an office anno 1962
that one is replaced by a hard drive
that one is in the cloud now
type writers are now called Microsoft Word
and sadly she’s replaced by a computer as well
leaving only this boring mofo
mobile is having a huge impact in our lives right now
everywhere
everyone
this dude even sleeps with his phone
there will be 7 billion connected phones in about 3 months from now
SEVENBILLION  FUCKING
last year I went to Indonesia
poor but beautiful country
one of the Indonesian sulfur miners that risk their lives every day just to eek out a living
here’s the Ijen Crater full of poisonous smoke, see the sulfur down there?
this guy goes up and down the crater a few times a day carrying many kilos of sulfur on his shoulders
here’s a few more sulfur miners, they likely won’t live long as their lungs are poisened with sulfur
even these really poor people carry a phone, they get to know the internet through cheap mobile devices
the question is: how can we deliver a great experience to these 7 billion people?
first thought: we need an app! hipness!
oh and one for Android too!
and Windows phones
and let’s not discriminate the Blackberry people
hard + expensive to maintain, and frankly kind of silly to have an app mirroring your website
second thought: let’s make a mobile version of our website, it’ll work on all devices!
some good thinking there, but it’s still two versions...
“90% of all websites are too simpleto justify the time and money ittakes to develop a separate mobileversion.”            ...
one guy sat down and thought really hard
he wrote this article on A List Apart about responsive webdesign (Ethan Marcotte)
awesome idea: one website that adapts, looks and works great on all devices!
HTMLSTRUCTURE                                              CSSLAYOUT       based on simple principles we all know and stan...
simple, but great results emerged from it   simple, but end products are great
meacuppa.be by chilli.be
antarcticstation.org by jérôme coupé
jobat.be, not sure who made this
lalemant.com by gorilla-webdesign.com
handelsbeurs.be by netlash.be
wolfslittlestore.be, freelance web designer
trentwalton.com
thisismadebyhand.com by Mandy Brown & Candi Ligutan
Ethan Marcotte, Scott Jehl ea.          a new trend setter: bostonglobe.com by Ethan Marcotte, Scott Jehl and others
this is charles darwin
“It is not the strongest of the species that survives, nor the most intelligent, but the one most responsive to change.”  ...
everyone knows this animal and how it responds to mood changes
this little spider turns yellow when it’s on yellow flowers...
...and white when it’s on white flowers—invisible to predators and insects
Source: webecoist.comthis octopus scares predators by mimicking the color and shape of its predators’ predators
responsive design may be hip at the moment, it’s based on a proven design principle and it’s here to stay
HOWCOMPONENTS    IT WORKS  2
%1—fully based on fluid web design
which is logical: this way it kind of automatically fits all screens
“don’t get me started on fluid web design”
it’s so nineties and is ugly from a certain viewport size onwards
CSS MEDIA QUERIES     2—meet css media queries
<link rel="stylesheet"href="print.css"media="print" />       nothing new: we all have used this media query for ages
<link rel="stylesheet"href="layout.css"media="screen and (min-width:400px)" />@media (min-width:400px) {                  ...
that’s awesomeness: load different styles as soon as the fluid layout becomes unreadable or just ugly
here’s a simple example: looking good at 1024x768
but as it’s designed fluidly, the text becomes unreadable at larger viewports
thanks to css media queries, we can change the layout at larger screen sizes: text is readable again
similar for smaller screens: default website scaling makes our initial design unreadable
all hail to media queries: this is a readable and usable layout
of course it works on other devices too
even this strange tablet
320                                          480                                          768                             ...
GREATNESS!  responsive web design is great, don’t you agree?
CSS MEDIA QUERIES...WORKS IN ALL BROWSERS?       but does it work in all browsers?
no
not in older versions of internet explorer, but that’s ok, right?
1. Write CSS for desktop browsers—             the way you always did.    2. Use media queries to optimize for            ...
but we need to dig deeper for better mobile browser stats
here’s a more detailed table representing media query support for all common mobile browsers
you know, not all of us browse the web using the latest and hippest mobile devices
there’s lots of older, popular and less capable devices around that don’t support media queries
1. Write CSS for desktop browsers—   the way you always did.2. Use media queries to optimize for   smaller mobile screens....
friends who can’t afford a desktop computer or expensive mobile phones will have a bad mobile experience
and frankly: there’s lots of them—developing countries get to know the internet through mobile devices
Brian Riegermake sure to check out Brian Rieger’s presentation on that matter, it’s on Slideshare
DAMN
NOW WHAT?
here’s the solution!
dude even wrote a book about it
HUH? what’s mobile first?
1. Start with a fluid mobile layout.2. Use media queries to optimize for   bigger screens.    this is a mobile first approac...
meaning even devices that don’t support media queries will display the mobile version of your website!
YAY!
most desktop browsers understand media queries so they’ll serve the desktop layout
but what about older internet explorer versions?
NOT GREAT, YET NOT CRAZY BROKENthe layout will be broken but the content will still be readable
unless you use javascript solutions such as respond.js, forcing older ie versions to interpret media queries!
meaning as good as all desktop browsers will show your desktop layout! greatness!
“Mobile first forces you to focus.”                                              — LUKE WROBLEWSKI                         ...
websites tend to get stuffed with mostly irrelevant information nowadays
thinking about mobile first forces you to focus: there’s less screen real estate to abuse, so relevance first
the design community picked this up earlier with great results
thinking mobile first is an excellent exercise in design, usability and information architecture
pretty obvious, right?
A MOBILE FIRST APPROACH LEADS TOLESS & CLEANER CSS another advantage of mobile first, at least in my experience
about a year ago I designed sleepstreet.be using a desktop first approach
/* CSS for desktop version */@media(min-width:320px) and(max-width:380px) {                /* make it white & 1 column */ ...
a few months ago I worked on madebywolf.com, using a mobile first approach
/* CSS for mobile version */@media(min-width:400px) {            /* from now on white & 2 columns */                      ...
HOW CAN WE MAKERESPONSIVE IMAGES   one problem solved, but here’s another one
Use desktop-sized images in yourmobile first design & scale down usingCSS.SPOILER: DON’T DO IT THIS WAY!                   ...
img { width:100%; }here’s a 600px wide image scaled down using CSS to a more appropriate mobile size
They look great on the desktop version of your website too.            that’s a plus!
But their filesize looks great on themobile version of your website too.                                    200kb for a    ...
“If I hadn’t used media queries, theuser would have seen the desktopwebsite with desktop-sized imagesanyway.”             ...
but bandwidth is expensive
and connections are slow
and if we don’t care, who will?
Use desktop-sized images in yourmobile first design & scale down usingCSS.           have a heart: we just can’t do it this...
there’s many possible solutions yet not one is ideal
2if I were you, designing a responsive website, I’d have a look at at least two of them
first one is the one Jason Grigsby is going to write about in his upcoming book on responsive web design
Jason looked at all solutions & made a choice based on a number of factors, most noteably future friendliness
he chooses the sencha.io technique and it’s based on device detection. hmmmm....
“How strange it is to think of devicedetection as the most futurefriendly technique for responsiveimages? I find it hard to...
“At least that’s how I see it for thebook. For your project and usecase, it depends.”                                     ...
here’s another interesting technique
I’ve used it on sleepstreet.be, it works and I’m more than ok with it
it’s also used—in a modified way as I understand—on bostonglobe.com
<img src=”small.jpg?full=large.jpg” />           here’s how it works, pretty easy huh?
small.jpg                                                 large.jpgusing javascript and url rewrites the appropriate image...
small.jpg                                                 large.jpgan advantage: as the technique requires 2 images, you c...
small.jpg                                                  large.jpgit’s written mobile first and browsers that don’t suppo...
older ie’s (6 & 7) will download both images, but I can live with that
SCALABLE VECTOR GRAPHICS          let’s talk svg
No pixels.Always crisp at all sizes.Extremely small file sizes.Scalable in every fucking way.Pretty epic.               the...
I’ve used svg for the sleepstreet logo
here’s the logo, designed by Ward Heirwegh
it’s used proportionally on small screen devices
but scaling it up proportionally on larger screens would render the logo quite big
and it would result in a huge logo on desktop computers (clients would have loved it :)
then again I could’ve used it proportionally but I didn’t like the extra whitespace
as it’s svg I could use javascript to reposition anchor points based on screen width (thanks @christaanvdp)
resulting in the side banners expanding/contracting as the browser window scales
an improvement if you ask me
So why is not everyone using svg?       if svg is so great, why is not everyone using it all the time?
frankly: it’s a pain in the ass to implement in a cross-browser fashion
there’s a solution: raphaël is a cross-browser solution I used to implement the svg logo
but it required me to redraw the logo using javascript. and that’s not how you want to spend your day.
but the future is bright! @joggink is working on a solution called willistrator (no joke!)
VIDEOresponsive video will kill the video star
I’ve used responsive video on madebywolf.com
.video {  width: 100%;}                        OK                                                                 NOT OK! ...
but smart people have written good articles about the matter, such as Thierry Koblentz on a list apart
another great article about responsive video, by Chris Coyier of css-tricks.com
video {  width: 100%;  height: auto;}basically this is all you have to do if you want responsive video using the html5 vid...
but if you depend on external video hosting services you may need to support different embedding solutions
fitvids.js takes care of that: it makes video scale responsively with embed, object, iframe tags...
DATA TABLESwe’re almost done... let’s look at data tables
spoiler: not easy, if you have a site that depends heavily on data tables, better close your browser window
“Data tables don’t do so well withresponsive design. Just sayin’.”                                                     — G...
Chris Coyier of css-tricks.com came up with a possible solution
Chris takes this table...
...and turns it to this on mobile: it’s ok, but not ideal for many reasons...
eg. there’s no way to easily compare rows
Scott Jehl took this data table...
...and made a pie chart of it on mobile! great but works only with numerical data of course
DESIGNI wrapped up my presentation sharing some thoughts about designing responsively
basically it came down to this: less than ever we have a fixed canvas to design in
there’s no right tools for the job
I can’t design in the browser, it’s no design tool whatsoever—still need to find a better workflow
fact is: fluid grids grow more and more important
web design & typography is moving away from print design more than ever (great poster by Wim Crouwel)
THANKS FOR LISTENINGTALK TO ME ON TWITTER: @BYTTE
Thanks to these people for sharing their photos with a creative commons license:                         http://www.flickr....
Upcoming SlideShare
Loading in...5
×

Responsive web design

91,626

Published on

Here's the slides for a presentation I gave on responsive web design in November 2011.

Responsive web design is a very powerful idea: it makes your website look great and usable on desktop computers and all mobile devices. In this presentation I talk about why responsive web design is here to stay. But I also highlight problems that come with it, along with possible solutions.

Published in: Design, Technology, Business
32 Comments
210 Likes
Statistics
Notes
No Downloads
Views
Total Views
91,626
On Slideshare
0
From Embeds
0
Number of Embeds
39
Actions
Shares
0
Downloads
2,182
Comments
32
Likes
210
Embeds 0
No embeds

No notes for slide

Responsive web design

  1. 1. RESPONSIVE WEBDESIGN FRONTEERS / MECHELEN / NOV 2011 These slides are the blueprint of a presentation I did at Fronteers recently.I tried to make them understandable to people that didn’t attend the presentation by including these dull looking quick notes.
  2. 2. THOMAS MOM CALLED ME BYTTEBIER IS HOW MY
  3. 3. my brother is the cute one
  4. 4. as a kid, I wanted to be Maradona
  5. 5. picture says it all
  6. 6. NOW I WORK AS A FREELANCEWEBDESIGNER FOCUS ON DESIGN
  7. 7. I realize that looks like quite a fail to the public, but I enjoy doing it
  8. 8. I tweet about all things design and web, follow me @bytte
  9. 9. my old-school website is at thomasbyttebier.com
  10. 10. RESPONSIVE WEBDESIGNPROBLEMS / SEMI-SOLUTIONS / OWN EXPERIENCES here’s what I talked about and what these slides are about
  11. 11. here’s a responsive website I made in 2010: sleepstreet.be
  12. 12. this one I did early 2011
  13. 13. I went to Build a few weeks ago
  14. 14. with a few Belgian freelancers photo by Jelle Desramaults
  15. 15. I was lucky to see Wilson Miner speak at Build
  16. 16. if you don’t know Wilson Miner: he designed this pretty famous website
  17. 17. he talked about how few products had such in impact in our lives as the car in the 20th century
  18. 18. it even drastically changed our environment
  19. 19. at the end of the 20th century the pc was another product that dramatically changed our lives
  20. 20. here’s an office anno 1962
  21. 21. that one is replaced by a hard drive
  22. 22. that one is in the cloud now
  23. 23. type writers are now called Microsoft Word
  24. 24. and sadly she’s replaced by a computer as well
  25. 25. leaving only this boring mofo
  26. 26. mobile is having a huge impact in our lives right now
  27. 27. everywhere
  28. 28. everyone
  29. 29. this dude even sleeps with his phone
  30. 30. there will be 7 billion connected phones in about 3 months from now
  31. 31. SEVENBILLION FUCKING
  32. 32. last year I went to Indonesia
  33. 33. poor but beautiful country
  34. 34. one of the Indonesian sulfur miners that risk their lives every day just to eek out a living
  35. 35. here’s the Ijen Crater full of poisonous smoke, see the sulfur down there?
  36. 36. this guy goes up and down the crater a few times a day carrying many kilos of sulfur on his shoulders
  37. 37. here’s a few more sulfur miners, they likely won’t live long as their lungs are poisened with sulfur
  38. 38. even these really poor people carry a phone, they get to know the internet through cheap mobile devices
  39. 39. the question is: how can we deliver a great experience to these 7 billion people?
  40. 40. first thought: we need an app! hipness!
  41. 41. oh and one for Android too!
  42. 42. and Windows phones
  43. 43. and let’s not discriminate the Blackberry people
  44. 44. hard + expensive to maintain, and frankly kind of silly to have an app mirroring your website
  45. 45. second thought: let’s make a mobile version of our website, it’ll work on all devices!
  46. 46. some good thinking there, but it’s still two versions...
  47. 47. “90% of all websites are too simpleto justify the time and money ittakes to develop a separate mobileversion.” — COMMON SENSE THINKER it’s hard to argue with that
  48. 48. one guy sat down and thought really hard
  49. 49. he wrote this article on A List Apart about responsive webdesign (Ethan Marcotte)
  50. 50. awesome idea: one website that adapts, looks and works great on all devices!
  51. 51. HTMLSTRUCTURE CSSLAYOUT based on simple principles we all know and stand behind
  52. 52. simple, but great results emerged from it simple, but end products are great
  53. 53. meacuppa.be by chilli.be
  54. 54. antarcticstation.org by jérôme coupé
  55. 55. jobat.be, not sure who made this
  56. 56. lalemant.com by gorilla-webdesign.com
  57. 57. handelsbeurs.be by netlash.be
  58. 58. wolfslittlestore.be, freelance web designer
  59. 59. trentwalton.com
  60. 60. thisismadebyhand.com by Mandy Brown & Candi Ligutan
  61. 61. Ethan Marcotte, Scott Jehl ea. a new trend setter: bostonglobe.com by Ethan Marcotte, Scott Jehl and others
  62. 62. this is charles darwin
  63. 63. “It is not the strongest of the species that survives, nor the most intelligent, but the one most responsive to change.” — CHARLES DARWINwe all agree that the best design is to be found in nature and nature is full of responsive design
  64. 64. everyone knows this animal and how it responds to mood changes
  65. 65. this little spider turns yellow when it’s on yellow flowers...
  66. 66. ...and white when it’s on white flowers—invisible to predators and insects
  67. 67. Source: webecoist.comthis octopus scares predators by mimicking the color and shape of its predators’ predators
  68. 68. responsive design may be hip at the moment, it’s based on a proven design principle and it’s here to stay
  69. 69. HOWCOMPONENTS IT WORKS 2
  70. 70. %1—fully based on fluid web design
  71. 71. which is logical: this way it kind of automatically fits all screens
  72. 72. “don’t get me started on fluid web design”
  73. 73. it’s so nineties and is ugly from a certain viewport size onwards
  74. 74. CSS MEDIA QUERIES 2—meet css media queries
  75. 75. <link rel="stylesheet"href="print.css"media="print" /> nothing new: we all have used this media query for ages
  76. 76. <link rel="stylesheet"href="layout.css"media="screen and (min-width:400px)" />@media (min-width:400px) { } this one’s different: as soon as the browser viewport reaches 400 px, use this stylesheet
  77. 77. that’s awesomeness: load different styles as soon as the fluid layout becomes unreadable or just ugly
  78. 78. here’s a simple example: looking good at 1024x768
  79. 79. but as it’s designed fluidly, the text becomes unreadable at larger viewports
  80. 80. thanks to css media queries, we can change the layout at larger screen sizes: text is readable again
  81. 81. similar for smaller screens: default website scaling makes our initial design unreadable
  82. 82. all hail to media queries: this is a readable and usable layout
  83. 83. of course it works on other devices too
  84. 84. even this strange tablet
  85. 85. 320 480 768 1024most responsive designers use media queries to change layout at common sizes, but that’s no necessity
  86. 86. GREATNESS! responsive web design is great, don’t you agree?
  87. 87. CSS MEDIA QUERIES...WORKS IN ALL BROWSERS? but does it work in all browsers?
  88. 88. no
  89. 89. not in older versions of internet explorer, but that’s ok, right?
  90. 90. 1. Write CSS for desktop browsers— the way you always did. 2. Use media queries to optimize for smaller mobile screens. SPOILER: DON’T DO IT THIS WAY!using this workflow, older IE’s will always show the desktop version, which is ok as they’re used on desktops
  91. 91. but we need to dig deeper for better mobile browser stats
  92. 92. here’s a more detailed table representing media query support for all common mobile browsers
  93. 93. you know, not all of us browse the web using the latest and hippest mobile devices
  94. 94. there’s lots of older, popular and less capable devices around that don’t support media queries
  95. 95. 1. Write CSS for desktop browsers— the way you always did.2. Use media queries to optimize for smaller mobile screens. using this workflow means these devices won’t show our mobile layout. argh.
  96. 96. friends who can’t afford a desktop computer or expensive mobile phones will have a bad mobile experience
  97. 97. and frankly: there’s lots of them—developing countries get to know the internet through mobile devices
  98. 98. Brian Riegermake sure to check out Brian Rieger’s presentation on that matter, it’s on Slideshare
  99. 99. DAMN
  100. 100. NOW WHAT?
  101. 101. here’s the solution!
  102. 102. dude even wrote a book about it
  103. 103. HUH? what’s mobile first?
  104. 104. 1. Start with a fluid mobile layout.2. Use media queries to optimize for bigger screens. this is a mobile first approach: all devices are served a mobile layout at first
  105. 105. meaning even devices that don’t support media queries will display the mobile version of your website!
  106. 106. YAY!
  107. 107. most desktop browsers understand media queries so they’ll serve the desktop layout
  108. 108. but what about older internet explorer versions?
  109. 109. NOT GREAT, YET NOT CRAZY BROKENthe layout will be broken but the content will still be readable
  110. 110. unless you use javascript solutions such as respond.js, forcing older ie versions to interpret media queries!
  111. 111. meaning as good as all desktop browsers will show your desktop layout! greatness!
  112. 112. “Mobile first forces you to focus.” — LUKE WROBLEWSKI the book dude there’s even more advantages to a mobile first approach
  113. 113. websites tend to get stuffed with mostly irrelevant information nowadays
  114. 114. thinking about mobile first forces you to focus: there’s less screen real estate to abuse, so relevance first
  115. 115. the design community picked this up earlier with great results
  116. 116. thinking mobile first is an excellent exercise in design, usability and information architecture
  117. 117. pretty obvious, right?
  118. 118. A MOBILE FIRST APPROACH LEADS TOLESS & CLEANER CSS another advantage of mobile first, at least in my experience
  119. 119. about a year ago I designed sleepstreet.be using a desktop first approach
  120. 120. /* CSS for desktop version */@media(min-width:320px) and(max-width:380px) { /* make it white & 1 column */ }@media(min-width:381px) and(max-width:480px) { /* make it white & 2 columns */ }@media(min-width:481px) and(max-width:800px) { /* make it black & 2 columns */ }/* all the way up... */DON’T DO IT THIS WAY! it led to cluttered, repeated, less-readable and hard-to-maintain CSS code
  121. 121. a few months ago I worked on madebywolf.com, using a mobile first approach
  122. 122. /* CSS for mobile version */@media(min-width:400px) { /* from now on white & 2 columns */ }@media(min-width:800px) { /* from now on 3 columns */ }@media(max-width:1100px) { /* from now on black & 4 columns */ }/* all the way up... */ the CSS is much cleaner, easier to read, easier to maintain and there’s just less code
  123. 123. HOW CAN WE MAKERESPONSIVE IMAGES one problem solved, but here’s another one
  124. 124. Use desktop-sized images in yourmobile first design & scale down usingCSS.SPOILER: DON’T DO IT THIS WAY! the solution’s easy at first thought
  125. 125. img { width:100%; }here’s a 600px wide image scaled down using CSS to a more appropriate mobile size
  126. 126. They look great on the desktop version of your website too. that’s a plus!
  127. 127. But their filesize looks great on themobile version of your website too. 200kb for a 300px wide photo! that’s a minus!
  128. 128. “If I hadn’t used media queries, theuser would have seen the desktopwebsite with desktop-sized imagesanyway.” — UNCARING WEB DESIGNER there’s truth in that
  129. 129. but bandwidth is expensive
  130. 130. and connections are slow
  131. 131. and if we don’t care, who will?
  132. 132. Use desktop-sized images in yourmobile first design & scale down usingCSS. have a heart: we just can’t do it this way
  133. 133. there’s many possible solutions yet not one is ideal
  134. 134. 2if I were you, designing a responsive website, I’d have a look at at least two of them
  135. 135. first one is the one Jason Grigsby is going to write about in his upcoming book on responsive web design
  136. 136. Jason looked at all solutions & made a choice based on a number of factors, most noteably future friendliness
  137. 137. he chooses the sencha.io technique and it’s based on device detection. hmmmm....
  138. 138. “How strange it is to think of devicedetection as the most futurefriendly technique for responsiveimages? I find it hard to argue withthe logic.” — JASON GRIGSBY make sure to read Jason’s blog posts on the topic at cloudfour.com
  139. 139. “At least that’s how I see it for thebook. For your project and usecase, it depends.” — JASON GRIGSBY as always: make a deliberate choice, because, well, it depends on all kinds of factors
  140. 140. here’s another interesting technique
  141. 141. I’ve used it on sleepstreet.be, it works and I’m more than ok with it
  142. 142. it’s also used—in a modified way as I understand—on bostonglobe.com
  143. 143. <img src=”small.jpg?full=large.jpg” /> here’s how it works, pretty easy huh?
  144. 144. small.jpg large.jpgusing javascript and url rewrites the appropriate image is served to the appropriate device
  145. 145. small.jpg large.jpgan advantage: as the technique requires 2 images, you can create more detailed images for smaller devices
  146. 146. small.jpg large.jpgit’s written mobile first and browsers that don’t support javascript will only download the small image
  147. 147. older ie’s (6 & 7) will download both images, but I can live with that
  148. 148. SCALABLE VECTOR GRAPHICS let’s talk svg
  149. 149. No pixels.Always crisp at all sizes.Extremely small file sizes.Scalable in every fucking way.Pretty epic. the best invention since sliced bread
  150. 150. I’ve used svg for the sleepstreet logo
  151. 151. here’s the logo, designed by Ward Heirwegh
  152. 152. it’s used proportionally on small screen devices
  153. 153. but scaling it up proportionally on larger screens would render the logo quite big
  154. 154. and it would result in a huge logo on desktop computers (clients would have loved it :)
  155. 155. then again I could’ve used it proportionally but I didn’t like the extra whitespace
  156. 156. as it’s svg I could use javascript to reposition anchor points based on screen width (thanks @christaanvdp)
  157. 157. resulting in the side banners expanding/contracting as the browser window scales
  158. 158. an improvement if you ask me
  159. 159. So why is not everyone using svg? if svg is so great, why is not everyone using it all the time?
  160. 160. frankly: it’s a pain in the ass to implement in a cross-browser fashion
  161. 161. there’s a solution: raphaël is a cross-browser solution I used to implement the svg logo
  162. 162. but it required me to redraw the logo using javascript. and that’s not how you want to spend your day.
  163. 163. but the future is bright! @joggink is working on a solution called willistrator (no joke!)
  164. 164. VIDEOresponsive video will kill the video star
  165. 165. I’ve used responsive video on madebywolf.com
  166. 166. .video { width: 100%;} OK NOT OK! you can’t use the same css you’d use for scaling images
  167. 167. but smart people have written good articles about the matter, such as Thierry Koblentz on a list apart
  168. 168. another great article about responsive video, by Chris Coyier of css-tricks.com
  169. 169. video { width: 100%; height: auto;}basically this is all you have to do if you want responsive video using the html5 video tag
  170. 170. but if you depend on external video hosting services you may need to support different embedding solutions
  171. 171. fitvids.js takes care of that: it makes video scale responsively with embed, object, iframe tags...
  172. 172. DATA TABLESwe’re almost done... let’s look at data tables
  173. 173. spoiler: not easy, if you have a site that depends heavily on data tables, better close your browser window
  174. 174. “Data tables don’t do so well withresponsive design. Just sayin’.” — GARRETT DIMON excellent tweet, couldn’t have said it any better
  175. 175. Chris Coyier of css-tricks.com came up with a possible solution
  176. 176. Chris takes this table...
  177. 177. ...and turns it to this on mobile: it’s ok, but not ideal for many reasons...
  178. 178. eg. there’s no way to easily compare rows
  179. 179. Scott Jehl took this data table...
  180. 180. ...and made a pie chart of it on mobile! great but works only with numerical data of course
  181. 181. DESIGNI wrapped up my presentation sharing some thoughts about designing responsively
  182. 182. basically it came down to this: less than ever we have a fixed canvas to design in
  183. 183. there’s no right tools for the job
  184. 184. I can’t design in the browser, it’s no design tool whatsoever—still need to find a better workflow
  185. 185. fact is: fluid grids grow more and more important
  186. 186. web design & typography is moving away from print design more than ever (great poster by Wim Crouwel)
  187. 187. THANKS FOR LISTENINGTALK TO ME ON TWITTER: @BYTTE
  188. 188. Thanks to these people for sharing their photos with a creative commons license: http://www.flickr.com/photos/sashakimel/6189771935/ http://www.flickr.com/photos/strebkr/3151902438/sizes/l/in/photostream/ http://www.flickr.com/photos/julietbanana/4733245476/sizes/z/in/photostream/ http://www.flickr.com/photos/canadianveggie/167924582/sizes/l/in/photostream/ http://www.flickr.com/photos/yourdon/3568718036/sizes/l/in/photostream/ http://www.flickr.com/photos/missningyou/2679843655/sizes/l/in/photostream/ http://www.flickr.com/photos/kiwanja/3169449999/sizes/o/in/photostream/ http://www.flickr.com/photos/crfullmoon/22195292/sizes/l/in/photostream/ http://www.flickr.com/photos/42244964@N03/4325982802/sizes/l/in/photostream/ http://www.flickr.com/photos/frak_tal/2455855855/sizes/l/in/photostream/ http://www.flickr.com/photos/dinoowww/4557829098/sizes/z/in/photostream/ http://www.flickr.com/photos/kentclark/4720549350/sizes/l/in/photostream/ http://www.flickr.com/photos/hanneorla/1439963888/sizes/l/in/photostream/ http://www.flickr.com/photos/ter-burg/1405605889/sizes/o/in/photostream/ http://www.flickr.com/photos/spyker3292/3721376470/sizes/l/in/photostream/ http://www.flickr.com/photos/soylentgreen23/491093601/sizes/l/in/photostream/ http://www.flickr.com/photos/danielygo/6209676842/sizes/l/in/photostream/ http://www.flickr.com/photos/extraketchup/459020985 http://www.flickr.com/photos/torek/2266105751 http://www.flickr.com/photos/smokingpermitted/2052869864/
  1. Gostou de algum slide específico?

    Recortar slides é uma maneira fácil de colecionar informações para acessar mais tarde.

×