Responsive webdesign
27 likes4,714 views
This document discusses responsive web design. It begins by outlining the failures of separate mobile websites and native apps. Responsive design is identified as the key approach because it allows for one website with a layout that adapts to any screen size. The document then covers various aspects of responsive design such as thinking mobile first, information architecture considerations, designing in the browser versus Photoshop, using a fluid or fixed grid, and making design decisions beyond just visual design.
More Related Content
Responsive webdesign
- 1. RESPONSIVE WEB DESIGN November 3, 2011 – Microsoft Web & Phone UX Tour Belgium
- 2. Bram Simon Thomas @bram_ @scoudeville @decthomas Information architect Web designer Front-end developer
- 3. You may remember us from such clients as:
- 5. 1. Why you should use responsive design 2. Design responsive design 3. Technical challenges
- 6. Why responsive design? 1. How not to approach mobile web 2. Why responsive design is key 3. Think mobile first 4. It starts with IA
- 7. No stats and numbers. You’re here so you know mobile is big.
- 8. HOW NOT TO APPROACH MOBILE WEB
- 9. Imagine: a mobile operator in 2006
- 10. We need a mobile website! Mark Obistar CEO at random mobile operator
- 11. m.* mobile.* “Go to full website”
- 12. A separate mobile website (1) ‣ What about tablet pc’s? ‣ What about new devices with unknown display sizes?
- 13. Raise your hand if you never used your smartphone laying in bed.
- 14. A separate mobile website (2) ‣ Mobile users ≠ users on the road ‣ You probably need all your content
- 15. “How should I configure my phone to use mobile internet?”
- 16. m.proximus.be
- 17. m.mobistar.be
- 18. m.base.be
- 20. A separate mobile website (3) ‣ You’ll have to manage all your content twice
- 21. A separate mobile website (4) ‣ Users share links. ‣ Different users use different devices.
- 22. A separate mobile website (conclusion) ‣ Only optimized for small screens ‣ Need to provide all content ‣ content has to be managed twice ‣ Issues when sharing content ‣ Pretty expensive for an unsatisfying result
- 23. Imagine: a newspaper company in 2010
- 24. We need an app! P. Vandermeersch CEO at a random newspaper company
- 26. FA I L
- 27. Native apps (1) Cfr. separate mobile website: ‣ What about tablet pc’s? ‣ Mobile users ≠ users on the road ‣ You’ll have to manage all your content twice
- 28. Native apps (2) ‣ Which platforms will you support? (iOS, Android, WindowsPhone) ‣ Each update: - cost per platform - might take time (approval)
- 29. Native apps (3) ‣ Store owners take a cut on in-app purchases
- 30. Native apps (4) ‣ What about search engines? ‣ Your content won’t be indexed by them
- 31. Native apps (5) ‣ links to websites open in a new app (!) ‣ no native browser functions (bookmarking!) ‣ non selectable text (no copy-paste) ‣ App’s often have their own interface language
- 32. Remind you to something? ‣ issues with links to other websites ‣ no native browser functions like bookmarking ‣ non selectable text (no copy-paste) ‣ each interface is different
- 34. Please. Let’s not go there again.
- 35. (of course native apps can be the best answer) ‣ If you need hardware functions that browsers don’t yet support (camera, compass, gyroscope, gpu power, ...).
- 36. Native apps (conclusion) ‣ Different platforms to support ‣ Cut on in-app-purchases ‣ Content has to be managed twice and won’t be indexed by search engines ‣ Risk on usability issues ‣ Only if you need specific hardware functions
- 37. In a lot of cases, neither separate mobile websites nor native apps provide an effective answer on todays needs.
- 39. Responsive web design: ‣ One website (content!) ‣ No issues with sharing or search engines ‣ One design ‣ Layout adapts to any screen size
- 40. handelsbeurs.be
- 41. HOW TO START? (This is how we do it)
- 42. Our proces 1. Online strategy 2. Information architecture 3. Design 4. Front-end design 5. Development
- 44. What mobile first does not mean
- 45. What mobile first does not mean: ‣ We should only focus on mobile from now on ‣ Mobile is more important than desktop
- 46. Creating a website: 2 options ‣ Mobile first ‣ Desktop first
- 47. Why mobile first (1) Mobile is harder to use ‣ Smaller screen ‣ Touch instead of keyboard and mouse(pad) ‣ Slower internet connection
- 48. Why mobile first (2) Mobile users have typically less patience ‣ Because it’s harder to use ‣ Might be on the move ‣ Need that info to use it right now
- 49. Why mobile first (3) Forces you to focus: ‣ No space for complexity ‣ No space for extra’s ‣ Focus on core features and simplicity
- 50. It’s easier to make a simple thing more complex than to make a complex thing more simple.
- 51. If you can support the mobile web, you can support anything.
- 52. Our proces 1. Online strategy 2. Information architecture 3. Design 4. Front-end design 5. Development
- 53. IA FOR MOBILE (actually it counts as much for desktop)
- 54. Know the online strategy 3 basics: ‣ Target audience ‣ Goal of the client ‣ USP of the client
- 55. KISS: Keep it simple and straightforward ‣ Top tasks (key services) in main menu ‣ Short and simple copy ‣ Throw away anything that isn’t needed ‣ White space is allowed ‣ Conclusion first, details later
- 56. “Don’t make me think” (1) ‣ At any point it should be clear how to get closer to the wanted answer ‣ Extra click is way better than complex navigation
- 57. “Don’t make me think” (2) ‣ 2 types of page: choice page and action page ‣ Homepage is a choice page
- 60. Conclusion so far ‣ For content-driven websites, responsive web design is the future ‣ Think mobile first ‣ KISS, focus on core tasks (starts with IA)
- 63. Our proces 1. Online strategy 2. Information architecture 3. Design 4. Front-end design 5. Development
- 64. 1. Web design trends 2. Where to start & how to start 3. Fluid grid vs fixed grid 4. Design decisions beyond photoshop
- 65. 1. Web design trends 2. Where to start & how to start 3. Fluid grid vs fixed grid 4. Design decisions beyond photoshop
- 66. 1. Web design trends 2. Where to start & how to start 3. Fluid grid vs fixed grid 4. Design decisions beyond photoshop
- 67. 1. Web design trends 2. Where to start & how to start 3. Fluid grid vs fixed grid 4. Design decisions beyond photoshop
- 68. Responsive webdesign consists of three components: a fluid grid, fluid media and media queries Ethan Marcotte alistapart.com
- 73. simplebits.com
- 78. bostonglobe.com
- 83. mediaqueri.es
- 85. 1. Content & organisation of content first 2. Typography 3. No unnecessary visual design elements
- 86. 1. Content & organisation of content first 2. Typography 3. No unnecessary visual design elements
- 87. 1. Content & organisation of 2. Typography 3. No unnecessary visual design elements
- 90. 1. The browser is our canvas 2. A static image doesn’t feel like a real page 3. Content organisation before design 4. Accessibility & appropriate hierarchy
- 91. 1. The browser is our canvas 2. A static image doesn’t feel like a real page 3. Content organisation before design 4. Accessibility & appropriate hierarchy
- 92. 1. The browser is our canvas 2. A static image doesn’t feel like a real page 3. Content organisation before design 4. Accessibility & appropriate
- 93. 1. The browser is our canvas 2. A static image doesn’t feel like a real page 3. Content organisation before design 4. Accessibility & appropriate hierarchy
- 95. 1. Photoshop as creative outlet 2. No limitations 3. Try things not possible with only
- 96. 1. Photoshop as creative outlet 2. No limitations 3. Try things not possible with only
- 97. 1. Photoshop as creative outlet 2. No limitations 3. Try things not possible with only css3
- 98. Establish the global visual design direction
- 99. 1. Starting point 2. Something to fall back on 3. The designer ≠ front-end dev
- 100. 1. Starting point 2. Something to fall back on 3. The designer ≠ front-end dev
- 101. 1. Starting point 2. Something to fall back on 3. The designer ≠ front-end dev
- 102. Before you start: solid IA for hierarchy of info
- 104. 1. Forget pixels! 2. Think proportions, ratios, percentages 3. Modular!
- 105. 1. Forget pixels! 2. Think proportions, ratios, percentages 3. Modular!
- 106. 1. Forget pixels! 2. Think proportions, ratios, percentages 3. Modular!
- 107. Width?
- 108. 1. Decide on a maximum width 2. Dependent of the amount of content 3. Dependent of number of modules 4. old principles of webdesign still stand
- 109. 1. Decide on a maximum width 2. Dependent of the amount of content 3. Dependent of number of modules 4. old principles of webdesign still stand
- 110. 1. Decide on a maximum width 2. Dependent of the amount of content 3. Dependent of number of modules 4. old principles of webdesign still stand
- 111. 1. Decide on a maximum width 2. Dependent of the amount of content 3. Dependent of number of modules 4. old principles of webdesign still stand
- 112. Grid!
- 113. 1. Solid grid helps establish proportions 2. Forget 960 grid system 3. Make your own grid
- 114. 1. Solid grid helps establish proportion 2. Forget 960 grid system 3. Make your own grid
- 115. 1. Solid grid helps establish 2. Forget 960 grid system 3. Make your own grid
- 116. Modular grid extension modulargrid.org
- 122. Fluid grid vs fixed grid
- 123. Fluid grid
- 124. 1. Page adapts to every possible resolution 2. Maximum width defined once 3. Takes up all the available space 4. Harder to achieve (fluid media)
- 125. 1. Page adapts to every possible 2. Maximum width defined once 3. Takes up all the available space 4. Harder to achieve (fluid media)
- 126. 1. Page adapts to every possible 2. Maximum width defined once 3. Takes up all the available space 4. Harder to achieve (fluid media)
- 127. 1. Page adapts to every possible 2. Maximum width defined once 3. Takes up all the available space 4. Harder to achieve (fluid media)
- 128. fixed grid
- 129. 1. Different layouts defined in fixed widths 2. Easier to achieve. 3. Not optimizied for future screen sizes?
- 130. 1. Different layouts defined in fixed widths 2. Easier to achieve. 3. Not optimizied for future screen sizes?
- 131. 1. Different layouts defined in fixed widths 2. Easier to achieve. 3. Not optimizied for future screen sizes
- 132. flexible modules
- 133. In close association with information architect
- 134. best practices
- 135. 1. Define a maximum width 2. Start with a solid grid 3. Design flexible modules 4. Use a fluid layout when possible
- 136. 1. Define a maximum width 2. Start with a solid grid 3. Design flexible modules 4. Use a fluid layout when possible
- 137. 1. Define a maximum width 2. Start with a solid grid 3. Design flexible modules 4. Use a fluid layout when possible
- 138. 1. Define a maximum width 2. Start with a solid grid 3. Design flexible modules 4. Use a fluid layout when
- 140. Front-end
- 141. Our proces 1. Online strategy 2. Information architecture 3. Design 4. Front-end design 5. Development
- 142. 1. Media queries 2. Adaptive images 3. Flexbox 4. Multi-column
- 143. 1. Media queries 2. Adaptive images 3. Flexbox 4. Multi-column
- 144. 1. Media queries 2. Adaptive images 3. Flexbox 4. Multi-column
- 145. 1. Media queries 2. Adaptive images 3. Flexbox 4. Multi-column
- 146. Media queries
- 147. Media queries 1. Not new
- 148. Media queries @media print { /* print styles here */ }
- 149. Media queries 1. Not new 2. Screen sizes (basics)
- 150. Media queries ‣ max-width 479px (smartphones portrait)
- 151. Media queries ‣ max-width 479px (smartphones portrait) ‣ max-width 767px (smartphones landscape)
- 152. Media queries ‣ max-width 479px (smartphones portrait) ‣ max-width 767px (smartphones landscape) ‣ max-width 1023px (tablets portrait)
- 153. Media queries ‣ max-width 479px (smartphones portrait) ‣ max-width 767px (smartphones landscape) ‣ max-width 1023px (tablets portrait) ‣ min-width 1024px (tablets landscape & others)
- 154. Media queries ‣ max-width 479px (smartphones portrait) ‣ max-width 767px (smartphones landscape) ‣ max-width 1023px (tablets portrait) ‣ min-width 1024px (tablets landscape & others) ‣ inheritance!
- 155. Media queries 1. Not new 2. Screen sizes (basics) 3. Screen sizes (advanced)
- 156. Media queries ‣ max-width 479px (smartphones portrait)
- 157. Media queries ‣ max-width 479px (smartphones portrait) ‣ min-width 480px and max-width 769px (smartphones landscape)
- 158. Media queries ‣ max-width 479px (smartphones portrait) ‣ min-width 480px and max-width 769px (smartphones landscape) ‣ min-width 780px and max-width 1023px (tablets portrait)
- 159. Media queries ‣ max-width 479px (smartphones portrait) ‣ min-width 480px and max-width 769px (smartphones landscape) ‣ min-width 780px and max-width 1023px (tablets portrait) ‣ min-width 1024px and max-width 1439px (tablets landscape & others)
- 160. Media queries ‣ max-width 479px (smartphones portrait) ‣ min-width 480px and max-width 769px (smartphones landscape) ‣ min-width 780px and max-width 1023px (tablets portrait) ‣ min-width 1024px and max-width 1439px (tablets landscape & others) ‣ min-width 1440px and max-width 1919px (laptops & others)
- 161. Media queries ‣ max-width 479px (smartphones portrait) ‣ min-width 480px and max-width 769px (smartphones landscape) ‣ min-width 780px and max-width 1023px (tablets portrait) ‣ min-width 1024px and max-width 1439px (tablets landscape & others) ‣ min-width 1440px and max-width 1919px (laptops & others) ‣ min-width 1920px (larger screens)
- 162. Media queries ‣ max-width 479px (smartphones portrait) ‣ min-width 480px and max-width 769px (smartphones landscape) ‣ min-width 780px and max-width 1023px (tablets portrait) ‣ min-width 1024px and max-width 1439px (tablets landscape & others) ‣ min-width 1440px and max-width 1919px (laptops & others) ‣ min-width 1920px (larger screens) ‣ no inheritance
- 163. Media queries 1. Not new 2. Screen sizes (basics) 3. Screen sizes (advanced) 4. Polyfills
- 164. Media queries ‣ Check for native browser support
- 165. Modernizr
- 166. Respond.js
- 167. Media queries 1. Not new 2. Screen sizes (basics) 3. Screen sizes (advanced) 4. Polyfills 5. Frameworks
- 168. Less Framework
- 169. Golden Grid System
- 170. Skeleton
- 171. CSS Grid
- 172. HTML5 Boilerplate
- 173. 1. Media queries 2. Adaptive images 3. Flexbox 4. Multi-column
- 174. Adaptive images
- 175. Adaptive images 1. Lots of screen sizes
- 176. Adaptive images 1. Lots of screen sizes 2. Devices: download speed
- 177. Adaptive images ‣ image optimization
- 178. Adaptive images ‣ image optimization ‣ http://imageoptim.pornel.net/
- 179. Adaptive images ‣ image optimization ‣ http://imageoptim.pornel.net/ ‣ http://smushit.com
- 180. Adaptive images ‣ serve different images
- 181. Adaptive images ‣ serve different images ‣ write own JS
- 182. Adaptive images ‣ serve different images ‣ write own JS ‣ existing solution
- 183. Adaptive images
- 184. 1. Media queries 2. Adaptive images 3. Flexbox 4. Multi-column
- 185. Flexbox
- 186. Flexbox 1. Working draft
- 187. Flexbox 1. Working draft 2. Positioning elements
- 188. Flexbox 1. Working draft 2. Positioning elements 3. display: flexbox;
- 189. Flexbox 1. Working draft 2. Positioning elements 3. display: flexbox; 4. For now - display: box;
- 190. 1. Media queries 2. Adaptive images 3. Flexbox 4. Multi-column
- 191. Multi-column
- 192. Multi-column 1. Candidate recommendation
- 193. Multi-column 1. Candidate recommendation 2. Divide content into columns
- 194. Multi-column 1. Candidate recommendation 2. Divide content into columns 3. column-count: 3;
- 195. Multi-column ‣ columns
- 196. Multi-column ‣ columns ‣ column-width
- 197. Multi-column ‣ columns ‣ column-width ‣ column-count
- 198. Multi-column ‣ columns ‣ column-width ‣ column-count ‣ column-gap
- 199. Multi-column ‣ columns ‣ column-width ‣ column-count ‣ column-gap ‣ column-rule
- 200. Multi-column ‣ columns ‣ column-width ‣ column-count ‣ column-gap ‣ column-rule ‣ column-span
- 201. Useful links ‣ http://www.w3.org/TR/css3-mediaqueries/ ‣ http://www.w3.org/TR/css3-flexbox/ ‣ https://developer.mozilla.org/en/CSS/-moz-box-flex ‣ http://www.w3.org/TR/css3-multicol/ ‣ https://developer.mozilla.org/en/CSS3_Columns ‣ http://www.slideshare.net/stephenhay/realworld- responsive-design
- 203. QUESTIONS?