Responsive Webdesign - UXtour Microsoft

  • 4,500 views
Uploaded on

I presentation I did for the Microsoft UXtour together with 2 colleagues (Bram Vanderhaeghe and Simon Coudeville)

I presentation I did for the Microsoft UXtour together with 2 colleagues (Bram Vanderhaeghe and Simon Coudeville)

More in: Technology , Business
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
4,500
On Slideshare
0
From Embeds
0
Number of Embeds
3

Actions

Shares
Downloads
24
Comments
0
Likes
2

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. RESPONSIVEWEB DESIGNNovember 3, 2011 – Microsoft Web & Phone UX Tour Belgium
  • 2. Bram Simon Thomas @bram_ @scoudeville @decthomasInformation architect Web designer Front-end developer
  • 3. You may remember us from such clients as:
  • 4. netlash.com/blog
  • 5. 1. Why you should use responsive design2. Design responsive design3. Technical challenges
  • 6. Why responsive design?1. How not to approach mobile web2. Why responsive design is key3. Think mobile first4. It starts with IA
  • 7. No stats and numbers.You’re here so you knowmobile is big.
  • 8. HOW NOT TOAPPROACHMOBILE 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 usedyour 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 phoneto use mobile internet?”
  • 16. m.proximus.be
  • 17. m.mobistar.be
  • 18. m.base.be
  • 19. m.mobilevikings.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
  • 25. FA I L
  • 26. 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
  • 27. Native apps (2)‣ Which platforms will you support? (iOS, Android, WindowsPhone)‣ Each update: - cost per platform - might take time (approval)
  • 28. Native apps (3)‣ Store owners take a cut on in-app purchases
  • 29. Native apps (4)‣ What about search engines?‣ Your content won’t be indexed by them
  • 30. 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
  • 31. 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
  • 32. Please.Let’s not go there again.
  • 33. (of course native apps canbe the best answer)‣ If you need hardware functions that browsers don’t yet support (camera, compass, gyroscope, gpu power, ...).
  • 34. 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
  • 35. In a lot of cases, neither separatemobile websites nor native appsprovide an effective answer ontodays needs.
  • 36. RESPONSIVEIS KEY
  • 37. Responsive web design:‣ One website (content!)‣ No issues with sharing or search engines‣ One design‣ Layout adapts to any screen size
  • 38. handelsbeurs.be
  • 39. HOW TO START?(This is how we do it)
  • 40. Our proces1. Online strategy2. Information architecture3. Design4. Front-end design5. Development
  • 41. THINK MOBILEFIRST
  • 42. What mobile first does not mean
  • 43. What mobile first does notmean:‣ We should only focus on mobile from now on‣ Mobile is more important than desktop
  • 44. Creating a website: 2 options‣ Mobile first‣ Desktop first
  • 45. Why mobile first (1)Mobile is harder to use‣ Smaller screen‣ Touch instead of keyboard and mouse(pad)‣ Slower internet connection
  • 46. Why mobile first (2)Mobile users have typically lesspatience‣ Because it’s harder to use‣ Might be on the move‣ Need that info to use it right now
  • 47. Why mobile first (3)Forces you to focus:‣ No space for complexity‣ No space for extra’s‣ Focus on core features and simplicity
  • 48. It’s easier to make a simple thingmore complex than to make acomplex thing more simple.
  • 49. If you can support the mobileweb, you can support anything.
  • 50. Our proces1. Online strategy2. Information architecture3. Design4. Front-end design5. Development
  • 51. IA FOR MOBILE(actually it counts as much for desktop)
  • 52. Know the online strategy3 basics:‣ Target audience‣ Goal of the client‣ USP of the client
  • 53. KISS: Keep it simple andstraightforward‣ 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
  • 54. “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
  • 55. “Don’t make me think” (2)‣ 2 types of page: choice page and action page‣ Homepage is a choice page
  • 56. CONCLUSIONSO FAR
  • 57. Conclusion so far‣ For content-driven websites, responsive web design is the future‣ Think mobile first‣ KISS, focus on core tasks (starts with IA)
  • 58. twitter.com/bram_bram@netlash.comwww.netlash.com
  • 59. designingresponsive websites
  • 60. Our proces1. Online strategy2. Information architecture3. Design4. Front-end design5. Development
  • 61. 1. Web design trends2. Where to start & how to start3. Fluid grid vs fixed grid4. Design decisions beyond photoshop
  • 62. 1. Web design trends2. Where to start & how to start3. Fluid grid vs fixed grid4. Design decisions beyond photoshop
  • 63. 1. Web design trends2. Where to start & how to start3. Fluid grid vs fixed grid4. Design decisions beyond photoshop
  • 64. 1. Web design trends2. Where to start & how to start3. Fluid grid vs fixed grid4. Design decisions beyond photoshop
  • 65. Responsive webdesign consists of threecomponents: a fluid grid, fluid media andmedia queries Ethan Marcotte alistapart.com
  • 66. informationarchitects.jp
  • 67. simplebits.com
  • 68. bostonglobe.com
  • 69. mediaqueri.es
  • 70. Web design trends
  • 71. 1. Content & organisation of content first2. Typography3. No unnecessary visual design elements
  • 72. 1. Content & organisation of content first2. Typography3. No unnecessary visual design elements
  • 73. 1. Content & organisation of2. Typography3. No unnecessary visual design elements
  • 74. Designingin the browser
  • 75. 1. The browser is our canvas2. A static image doesn’t feel like a real page3. Content organisation before design4. Accessibility & appropriate hierarchy
  • 76. 1. The browser is our canvas2. A static image doesn’t feel like a real page3. Content organisation before design4. Accessibility & appropriate hierarchy
  • 77. 1. The browser is our canvas2. A static image doesn’t feel like a real page3. Content organisation before design4. Accessibility & appropriate
  • 78. 1. The browser is our canvas2. A static image doesn’t feel like a real page3. Content organisation before design4. Accessibility & appropriate hierarchy
  • 79. Designingin photoshop
  • 80. 1. Photoshop as creative outlet2. No limitations3. Try things not possible with only
  • 81. 1. Photoshop as creative outlet2. No limitations3. Try things not possible with only
  • 82. 1. Photoshop as creative outlet2. No limitations3. Try things not possible with only css3
  • 83. Establish theglobal visual design direction
  • 84. 1. Starting point2. Something to fall back on3. The designer ≠ front-end dev
  • 85. 1. Starting point2. Something to fall back on3. The designer ≠ front-end dev
  • 86. 1. Starting point2. Something to fall back on3. The designer ≠ front-end dev
  • 87. Before you start:solid IA for hierarchy of info
  • 88. Designingproportions.
  • 89. 1. Forget pixels!2. Think proportions, ratios, percentages3. Modular!
  • 90. 1. Forget pixels!2. Think proportions, ratios, percentages3. Modular!
  • 91. 1. Forget pixels!2. Think proportions, ratios, percentages3. Modular!
  • 92. Width?
  • 93. 1. Decide on a maximum width2. Dependent of the amount of content3. Dependent of number of modules4. old principles of webdesign still stand
  • 94. 1. Decide on a maximum width2. Dependent of the amount of content3. Dependent of number of modules4. old principles of webdesign still stand
  • 95. 1. Decide on a maximum width2. Dependent of the amount of content3. Dependent of number of modules4. old principles of webdesign still stand
  • 96. 1. Decide on a maximum width2. Dependent of the amount of content3. Dependent of number of modules4. old principles of webdesign still stand
  • 97. Grid!
  • 98. 1. Solid grid helps establish proportions2. Forget 960 grid system3. Make your own grid
  • 99. 1. Solid grid helps establish proportion2. Forget 960 grid system3. Make your own grid
  • 100. 1. Solid grid helps establish2. Forget 960 grid system3. Make your own grid
  • 101. Modular grid extension modulargrid.org
  • 102. Design decisionsbeyond photoshop
  • 103. Fluid grid vs fixed grid
  • 104. Fluid grid
  • 105. 1. Page adapts to every possible resolution2. Maximum width defined once3. Takes up all the available space4. Harder to achieve (fluid media)
  • 106. 1. Page adapts to every possible2. Maximum width defined once3. Takes up all the available space4. Harder to achieve (fluid media)
  • 107. 1. Page adapts to every possible2. Maximum width defined once3. Takes up all the available space4. Harder to achieve (fluid media)
  • 108. 1. Page adapts to every possible2. Maximum width defined once3. Takes up all the available space4. Harder to achieve (fluid media)
  • 109. fixed grid
  • 110. 1. Different layouts defined in fixed widths2. Easier to achieve.3. Not optimizied for future screen sizes?
  • 111. 1. Different layouts defined in fixed widths2. Easier to achieve.3. Not optimizied for future screen sizes?
  • 112. 1. Different layouts defined in fixed widths2. Easier to achieve.3. Not optimizied for future screen sizes
  • 113. flexible modules
  • 114. In close association withinformation architect
  • 115. best practices
  • 116. 1. Define a maximum width2. Start with a solid grid3. Design flexible modules4. Use a fluid layout when possible
  • 117. 1. Define a maximum width2. Start with a solid grid3. Design flexible modules4. Use a fluid layout when possible
  • 118. 1. Define a maximum width2. Start with a solid grid3. Design flexible modules4. Use a fluid layout when possible
  • 119. 1. Define a maximum width2. Start with a solid grid3. Design flexible modules4. Use a fluid layout when
  • 120. twitter.com/scoudevillesimon@netlash.comwww.netlash.com
  • 121. Front-end
  • 122. Our proces1. Online strategy2. Information architecture3. Design4. Front-end design5. Development
  • 123. 1. Media queries2. Adaptive images3. Flexbox4. Multi-column
  • 124. 1. Media queries2. Adaptive images3. Flexbox4. Multi-column
  • 125. 1. Media queries2. Adaptive images3. Flexbox4. Multi-column
  • 126. 1. Media queries2. Adaptive images3. Flexbox4. Multi-column
  • 127. Media queries
  • 128. Media queries 1. Not new
  • 129. Media queries @media print { /* print styles here */ }
  • 130. Media queries 1. Not new 2. Screen sizes (basics)
  • 131. Media queries ‣ max-width 479px (smartphones portrait)
  • 132. Media queries ‣ max-width 479px (smartphones portrait) ‣ max-width 767px (smartphones landscape)
  • 133. Media queries ‣ max-width 479px (smartphones portrait) ‣ max-width 767px (smartphones landscape) ‣ max-width 1023px (tablets portrait)
  • 134. Media queries ‣ max-width 479px (smartphones portrait) ‣ max-width 767px (smartphones landscape) ‣ max-width 1023px (tablets portrait) ‣ min-width 1024px (tablets landscape & others)
  • 135. Media queries ‣ max-width 479px (smartphones portrait) ‣ max-width 767px (smartphones landscape) ‣ max-width 1023px (tablets portrait) ‣ min-width 1024px (tablets landscape & others) ‣ inheritance!
  • 136. Media queries 1. Not new 2. Screen sizes (basics) 3. Screen sizes (advanced)
  • 137. Media queries ‣ max-width 479px (smartphones portrait)
  • 138. Media queries ‣ max-width 479px (smartphones portrait) ‣ min-width 480px and max-width 769px (smartphones landscape)
  • 139. 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)
  • 140. 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)
  • 141. 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)
  • 142. 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)
  • 143. 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
  • 144. Media queries 1. Not new 2. Screen sizes (basics) 3. Screen sizes (advanced) 4. Polyfills
  • 145. Media queries ‣ Check for native browser support
  • 146. Modernizr
  • 147. Respond.js
  • 148. Media queries 1. Not new 2. Screen sizes (basics) 3. Screen sizes (advanced) 4. Polyfills 5. Frameworks
  • 149. Less Framework
  • 150. Golden Grid System
  • 151. Skeleton
  • 152. CSS Grid
  • 153. HTML5 Boilerplate
  • 154. 1. Media queries2. Adaptive images3. Flexbox4. Multi-column
  • 155. Adaptive images
  • 156. Adaptive images 1. Lots of screen sizes
  • 157. Adaptive images 1. Lots of screen sizes 2. Devices: download speed
  • 158. Adaptive images ‣ image optimization
  • 159. Adaptive images ‣ image optimization ‣ http://imageoptim.pornel.net/
  • 160. Adaptive images ‣ image optimization ‣ http://imageoptim.pornel.net/ ‣ http://smushit.com
  • 161. Adaptive images ‣ serve different images
  • 162. Adaptive images ‣ serve different images ‣ write own JS
  • 163. Adaptive images ‣ serve different images ‣ write own JS ‣ existing solution
  • 164. Adaptive images
  • 165. 1. Media queries2. Adaptive images3. Flexbox4. Multi-column
  • 166. Flexbox
  • 167. Flexbox 1. Working draft
  • 168. Flexbox 1. Working draft 2. Positioning elements
  • 169. Flexbox 1. Working draft 2. Positioning elements 3. display: flexbox;
  • 170. Flexbox 1. Working draft 2. Positioning elements 3. display: flexbox; 4. For now - display: box;
  • 171. 1. Media queries2. Adaptive images3. Flexbox4. Multi-column
  • 172. Multi-column
  • 173. Multi-column 1. Candidate recommendation
  • 174. Multi-column 1. Candidate recommendation 2. Divide content into columns
  • 175. Multi-column 1. Candidate recommendation 2. Divide content into columns 3. column-count: 3;
  • 176. Multi-column ‣ columns
  • 177. Multi-column ‣ columns ‣ column-width
  • 178. Multi-column ‣ columns ‣ column-width ‣ column-count
  • 179. Multi-column ‣ columns ‣ column-width ‣ column-count ‣ column-gap
  • 180. Multi-column ‣ columns ‣ column-width ‣ column-count ‣ column-gap ‣ column-rule
  • 181. Multi-column ‣ columns ‣ column-width ‣ column-count ‣ column-gap ‣ column-rule ‣ column-span
  • 182. 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
  • 183. twitter.com/decthomasthomas@fork-cms.comwww.netlash.com
  • 184. QUESTIONS?