Responsive web design

Transcript

1. RESPONSIVE WEBDESIGN KAHO SINT-LIEVEN / APRIL 2012 These slides are

   the blueprint of a presentation I did at KaHo Sint-Lieven recently. I tried to make them understandable to people that didn’t attend the presentation by including these dull looking quick notes. The presentation is a slightly updated version of http://www.slideshare.net/bytte/responsive-web-design-10389263

2. THOMAS BYTTEBIER IS HOW MY MOM CALLED ME

3. my brother is the cute one

4. as a kid, I wanted to be Maradona

5. picture says it all

6. FREELANCE WEBDESIGNER NOW I WORK AS A FOCUS ON DESIGN

7. I realize that looks like quite a fail to the

   public, but I enjoy doing it

8. I tweet about all things design and web, follow me

   @bytte

9. my old-school website is at thomasbyttebier.com

10. RESPONSIVE WEBDESIGN WHY / PROBLEMS / SEMI-SOLUTIONS / OWN EXPERIENCES

    here’s what I talked about and what these slides are about

11. here’s a responsive website I made in 2010: sleepstreet.be

12. this one I did early 2011

13. I went to Build a few weeks ago

14. with a few Belgian freelancers photo by Jelle Desramaults

15. I was lucky to see Wilson Miner speak at Build

16. if you don’t know Wilson Miner: he designed this pretty

    famous website

17. he talked about how few products had such in impact

    in our lives as the car in the 20th century

18. it even drastically changed our environment

19. at the end of the 20th century the pc was

    another product that dramatically changed our lives

20. here’s an office anno 1962

21. that one is replaced by a hard drive

22. that one is in the cloud now

23. type writers are now called Microsoft Word

24. and sadly she’s replaced by a computer as well

25. leaving only this boring mofo

26. mobile is having a huge impact in our lives right

    now

27. everywhere

28. everyone

29. this dude even sleeps with his phone

30. there will be 7 billion connected phones in about 3

    months from now

31. SEVEN FUCKING BILLION

32. last year I went to Indonesia

33. poor but beautiful country

34. one of the Indonesian sulfur miners that risk their lives

    every day just to eek out a living

35. here’s the Ijen Crater full of poisonous smoke, see the

    sulfur down there?

36. this guy goes up and down the crater a few

    times a day carrying many kilos of sulfur on his shoulders

37. here’s a few more sulfur miners, they likely won’t live

    long as their lungs are poisened with sulfur

38. even these really poor people carry a phone, they get

    to know the internet through cheap mobile devices

39. the question is: how can we deliver a great experience

    to these 7 billion people?

40. first thought: we need an app! hipness!

41. oh and one for Android too!

42. and Windows phones

43. and let’s not discriminate the Blackberry people

44. hard + expensive to maintain, and frankly kind of silly

    to have an app mirroring your website

45. second thought: let’s make a mobile version of our website,

    it’ll work on all devices!

46. some good thinking there, but it’s still two versions...

47. “90% of all websites are too simple to justify the

    time and money it takes to develop a separate mobile version.” — COMMON SENSE THINKER it’s hard to argue with that

48. one guy sat down and thought really hard

49. he wrote this article on A List Apart about responsive

    webdesign (Ethan Marcotte)

50. awesome idea: one website that adapts, looks and works great

    on all devices!

51. HTML CSS STRUCTURE LAYOUT based on simple principles we all

    know and stand behind

52. simple, but end products are great simple, but great results

    emerged from it

53. meacuppa.be by chilli.be

54. antarcticstation.org by jérôme coupé

55. jobat.be, not sure who made this

56. lalemant.com by gorilla-webdesign.com

57. handelsbeurs.be by netlash.be

58. wolfslittlestore.be, freelance web designer

59. trentwalton.com

60. thisismadebyhand.com by Mandy Brown & Candi Ligutan

61. Ethan Marcotte, Scott Jehl ea. a new trend setter: bostonglobe.com

    by Ethan Marcotte, Scott Jehl and others

62. this is charles darwin

63. “It is not the strongest of the species that survives,

    nor the most intelligent, but the one most responsive to change.” — CHARLES DARWIN we all agree that the best design is to be found in nature and nature is full of responsive design

64. everyone knows this animal and how it responds to mood

    changes

65. this little spider turns yellow when it’s on yellow flowers...

66. ...and white when it’s on white flowers—invisible to predators and

    insects

67. this octopus scares predators by mimicking the color and shape

    of its predators’ predators Source: webecoist.com

68. responsive design may be hip at the moment, it’s based

    on a proven design principle and it’s here to stay

69. HOW IT WORKS 2 COMPONENTS

70. % 1—fully based on fluid web design

71. which is logical: this way it kind of automatically fits

    all screens

72. “don’t get me started on fluid web design”

73. it’s so nineties and is ugly from a certain viewport

    size onwards

74. CSS MEDIA QUERIES 2—meet css media queries

75. <link rel="stylesheet" href="print.css" media="print" /> nothing new: we all have

    used this media query for ages

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. that’s awesomeness: load different styles as soon as the fluid

    layout becomes unreadable or just ugly

78. here’s a simple example: looking good at 1024x768

79. but as it’s designed fluidly, the text becomes unreadable at

    larger viewports

80. thanks to css media queries, we can change the layout

    at larger screen sizes: text is readable again

81. similar for smaller screens: default website scaling makes our initial

    design unreadable

82. all hail to media queries: this is a readable and

    usable layout

83. of course it works on other devices too

84. even this strange tablet

85. 320 480 768 1024 most responsive designers use media queries

    to change layout at common sizes, but that’s no necessity

86. GREATNESS! responsive web design is great, don’t you agree?

87. WORKS IN ALL BROWSERS? CSS MEDIA QUERIES... but does it

    work in all browsers?

88. no

89. not in older versions of internet explorer, but that’s ok,

    right?

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. but we need to dig deeper for better mobile browser

    stats

92. here’s a more detailed table representing media query support for

    all common mobile browsers

93. you know, not all of us browse the web using

    the latest and hippest mobile devices

94. there’s lots of older, popular and less capable devices around

    that don’t support media queries

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. friends who can’t afford a desktop computer or expensive mobile

    phones will have a bad mobile experience

97. and frankly: there’s lots of them—developing countries get to know

    the internet through mobile devices

98. Brian Rieger make sure to check out Brian Rieger’s presentation

    on that matter, it’s on Slideshare

99. DAMN

100. NOW WHAT?

101. here’s the solution!

102. dude even wrote a book about it

103. HUH? what’s mobile first?

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. meaning even devices that don’t support media queries will display

     the mobile version of your website!

106. YAY!

107. most desktop browsers understand media queries so they’ll serve the

     desktop layout

108. but what about older internet explorer versions?

109. NOT GREAT, YET NOT CRAZY BROKEN the layout will be

     broken but the content will still be readable

110. unless you use javascript solutions such as respond.js, forcing older

     ie versions to interpret media queries!

111. meaning as good as all desktop browsers will show your

     desktop layout! greatness!

112. “Mobile first forces you to focus.” — LUKE WROBLEWSKI the

     book dude there’s even more advantages to a mobile first approach

113. websites tend to get stuffed with mostly irrelevant information nowadays

114. thinking about mobile first forces you to focus: there’s less

     screen real estate to abuse, so relevance first

115. the design community picked this up earlier with great results

116. thinking mobile first is an excellent exercise in design, usability

     and information architecture

117. pretty obvious, right?

118. LESS & CLEANER CSS A MOBILE FIRST APPROACH LEADS TO

     another advantage of mobile first, at least in my experience

119. about a year ago I designed sleepstreet.be using a desktop

     first approach

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. a few months ago I worked on madebywolf.com, using a

     mobile first approach

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. RESPONSIVE IMAGES HOW CAN WE MAKE one problem solved, but

     here’s another one

124. Use desktop-sized images in your mobile first design & scale

     down using CSS. SPOILER: DON’T DO IT THIS WAY! the solution’s easy at first thought

125. img { width:100%; } here’s a 600px wide image scaled

     down using CSS to a more appropriate mobile size

126. They look great on the desktop version of your website

     too. that’s a plus!

127. But their filesize looks great on the mobile version of

     your website too. 200kb for a 300px wide photo! that’s a minus!

128. “If I hadn’t used media queries, the user would have

     seen the desktop website with desktop-sized images anyway.” — UNCARING WEB DESIGNER there’s truth in that

129. but bandwidth is expensive

130. and connections are slow

131. and if we don’t care, who will?

132. Use desktop-sized images in your mobile first design & scale

     down using CSS. have a heart: we just can’t do it this way

133. RESPONSIVE IMAGES THERE IS NO ELEGANT WAY TO CREATE sad

     but true

134. W3C IS SLOWLY WORKING TOWARDS A SOLUTION <picture alt="A beautiful

     day in Gent"> <source src="small.jpg"> <source src="medium.jpg" media="(min-width:400px)"> <source src="large.jpg" media="(min-width:800px)"> </picture> slowly as in really slow, might take months/years until we can use something like this

135. there’s many possible solutions yet not one is ideal

136. here’s an interesting technique

137. I’ve used it on sleepstreet.be, it works and I’m more

     than ok with it

138. it’s also used—in a modified way as I understand—on bostonglobe.com

139. however it broke on this website about one month after

     launch

140. <img src=”small.jpg?full=large.jpg” /> here’s how it works, pretty easy huh?

141. small.jpg large.jpg using javascript and url rewrites the appropriate image

     is served to the appropriate device

142. small.jpg large.jpg an advantage: as the technique requires 2 images,

     you can create more detailed images for smaller devices

143. small.jpg large.jpg it’s written mobile first and browsers that don’t

     support javascript will only download the small image

144. older ie’s (6 & 7) will download both images, but

     I can live with that

145. Jeremy Keith has interesting thoughts on the matter of responsive

     images. Check it out.

146. This technique is interesting as well yet kinda similar to

     Filament Group’s ‘Responsive Images’ technique

147. SCALABLE VECTOR GRAPHICS let’s talk svg

148. No pixels. Always crisp at all sizes. Extremely small file

     sizes. Scalable in every fucking way. Pretty epic. the best invention since sliced bread

149. I’ve used svg for the sleepstreet logo

150. here’s the logo, designed by Ward Heirwegh

151. it’s used proportionally on small screen devices

152. but scaling it up proportionally on larger screens would render

     the logo quite big

153. and it would result in a huge logo on desktop

     computers (clients would have loved it :)

154. then again I could’ve used it proportionally but I didn’t

     like the extra whitespace

155. as it’s svg I could use javascript to reposition anchor

     points based on screen width (thanks @christaanvdp)

156. resulting in the side banners expanding/contracting as the browser window

     scales

157. an improvement if you ask me

158. So why is not everyone using svg? if svg is

     so great, why is not everyone using it all the time?

159. frankly: it’s a pain in the ass to implement in

     a cross-browser fashion

160. there’s a solution: raphaël is a cross-browser solution I used

     to implement the svg logo

161. but it required me to redraw the logo using javascript.

     and that’s not how you want to spend your day.

162. but the future is bright! @joggink is working on a

     solution called willistrator (no joke!)

163. VIDEO responsive video will kill the video star

164. I’ve used responsive video on madebywolf.com

165. OK NOT OK! .video { width: 100%; } you can’t

     use the same css you’d use for scaling images

166. but smart people have written good articles about the matter,

     such as Thierry Koblentz on a list apart

167. another great article about responsive video, by Chris Coyier of

     css-tricks.com

168. video { width: 100%; height: auto; } basically this is

     all you have to do if you want responsive video using the html5 video tag

169. but if you depend on external video hosting services you

     may need to support different embedding solutions

170. fitvids.js takes care of that: it makes video scale responsively

     with embed, object, iframe tags...

171. DATA TABLES we’re almost done... let’s look at data tables

172. spoiler: not easy, if you have a site that depends

     heavily on data tables, better close your browser window

173. “Data tables don’t do so well with responsive design. Just

     sayin’.” — GARRETT DIMON excellent tweet, couldn’t have said it any better

174. Chris Coyier of css-tricks.com came up with a possible solution

175. Chris takes this table...

176. ...and turns it to this on mobile: it’s ok, but

     not ideal for many reasons...

177. eg. there’s no way to easily compare rows

178. Scott Jehl took this data table...

179. ...and made a pie chart of it on mobile! great

     but works only with numerical data of course

180. DESIGN I wrapped up my presentation sharing some thoughts about

     designing responsively

181. basically it came down to this: less than ever we

     have a fixed canvas to design in

182. there’s no right tools for the job

183. I can’t design in the browser, it’s no design tool

     whatsoever—still need to find a better workflow

184. fact is: fluid grids grow more and more important

185. web design & typography is moving away from print design

     more than ever (great poster by Wim Crouwel)

186. THANKS FOR LISTENING TALK TO ME ON TWITTER: @BYTTE

187. 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/