0
RESPONSIVEWEB DESIGNNovember 3, 2011 – Microsoft Web & Phone UX Tour Belgium
Bram               Simon            Thomas      @bram_            @scoudeville      @decthomasInformation architect   Web ...
You may remember us from such clients as:
netlash.com/blog
1. Why you should use responsive design2. Design responsive design3. Technical challenges
Why responsive design?1. How not to approach mobile web2. Why responsive design is key3. Think mobile first4. It starts wit...
No stats and numbers.You’re here so you knowmobile is big.
HOW NOT TOAPPROACHMOBILE WEB
Imagine:a mobile operator in 2006
We need a mobile website!                         Mark Obistar             CEO at random mobile operator
m.*mobile.*“Go to full website”
A separate mobile website (1)‣   What about tablet pc’s?‣   What about new devices with unknown    display sizes?
Raise your hand if you never usedyour smartphone laying in bed.
A separate mobile website (2)‣   Mobile users ≠ users on the road‣   You probably need all your content
“How should I configure my phoneto use mobile internet?”
m.proximus.be
m.mobistar.be
m.base.be
m.mobilevikings.be
A separate mobile website (3)‣   You’ll have to manage all your    content twice
A separate mobile website (4)‣   Users share links.‣   Different users use different devices.
A separate mobile website(conclusion)‣   Only optimized for small screens‣   Need to provide all content‣   content has to...
Imagine:a newspaper company in 2010
We need an app!              P. Vandermeersch           CEO at a random newspaper                             company
FA I L
Native apps (1)Cfr. separate mobile website:‣   What about tablet pc’s?‣   Mobile users ≠ users on the road‣   You’ll have...
Native apps (2)‣   Which platforms will you support?    (iOS, Android, WindowsPhone)‣   Each update:    - cost per platfor...
Native apps (3)‣   Store owners take a cut on in-app    purchases
Native apps (4)‣   What about search engines?‣   Your content won’t be indexed by them
Native apps (5)‣   links to websites open in a new app (!)‣   no native browser functions    (bookmarking!)‣   non selecta...
Remind you to something?‣   issues with links to other websites‣   no native browser functions like bookmarking‣   non sel...
Please.Let’s not go there again.
(of course native apps canbe the best answer)‣   If you need hardware functions that    browsers don’t yet support (camera...
Native apps (conclusion)‣   Different platforms to support‣   Cut on in-app-purchases‣   Content has to be managed twice a...
In a lot of cases, neither separatemobile websites nor native appsprovide an effective answer ontodays needs.
RESPONSIVEIS KEY
Responsive web design:‣   One website (content!)‣   No issues with sharing or search engines‣   One design‣   Layout adapt...
handelsbeurs.be
HOW TO START?(This is how we do it)
Our proces1. Online strategy2. Information architecture3. Design4. Front-end design5. Development
THINK MOBILEFIRST
What mobile first does not mean
What mobile first does notmean:‣   We should only focus on mobile from    now on‣   Mobile is more important than    desktop
Creating a website: 2 options‣   Mobile first‣   Desktop first
Why mobile first (1)Mobile is harder to use‣   Smaller screen‣   Touch instead of keyboard and    mouse(pad)‣   Slower inte...
Why mobile first (2)Mobile users have typically lesspatience‣   Because it’s harder to use‣   Might be on the move‣   Need ...
Why mobile first (3)Forces you to focus:‣   No space for complexity‣   No space for extra’s‣   Focus on core features and s...
It’s easier to make a simple thingmore complex than to make acomplex thing more simple.
If you can support the mobileweb, you can support anything.
Our proces1. Online strategy2. Information architecture3. Design4. Front-end design5. Development
IA FOR MOBILE(actually it counts as much for desktop)
Know the online strategy3 basics:‣   Target audience‣   Goal of the client‣   USP of the client
KISS: Keep it simple andstraightforward‣   Top tasks (key services) in main menu‣   Short and simple copy‣   Throw away an...
“Don’t make me think” (1)‣   At any point it should be clear how to    get closer to the wanted answer‣   Extra click is w...
“Don’t make me think” (2)‣   2 types of page: choice page and    action page‣   Homepage is a choice page
CONCLUSIONSO FAR
Conclusion so far‣   For content-driven websites, responsive    web design is the future‣   Think mobile first‣   KISS, foc...
twitter.com/bram_bram@netlash.comwww.netlash.com
designingresponsive websites
Our proces1. Online strategy2. Information architecture3. Design4. Front-end design5. Development
1. Web design trends2. Where to start & how to start3. Fluid grid vs fixed grid4. Design decisions beyond photoshop
1. Web design trends2. Where to start & how to start3. Fluid grid vs fixed grid4. Design decisions beyond photoshop
1. Web design trends2. Where to start & how to start3. Fluid grid vs fixed grid4. Design decisions beyond photoshop
1. Web design trends2. Where to start & how to start3. Fluid grid vs fixed grid4. Design decisions beyond photoshop
Responsive webdesign consists of threecomponents: a fluid grid, fluid media andmedia queries                            Etha...
informationarchitects.jp
simplebits.com
bostonglobe.com
mediaqueri.es
Web design trends
1. Content & organisation of content first2. Typography3. No unnecessary visual design elements
1. Content & organisation of content first2. Typography3. No unnecessary visual design elements
1. Content & organisation of2. Typography3. No unnecessary visual design elements
Designingin the browser
1. The browser is our canvas2. A static image doesn’t feel like a real page3. Content organisation before design4. Accessi...
1. The browser is our canvas2. A static image doesn’t feel like a real page3. Content organisation before design4. Accessi...
1. The browser is our canvas2. A static image doesn’t feel like a real page3. Content organisation before design4. Accessi...
1. The browser is our canvas2. A static image doesn’t feel like a real page3. Content organisation before design4. Accessi...
Designingin photoshop
1. Photoshop as creative outlet2. No limitations3. Try things not possible with only
1. Photoshop as creative outlet2. No limitations3. Try things not possible with only
1. Photoshop as creative outlet2. No limitations3. Try things not possible with only css3
Establish theglobal visual design direction
1. Starting point2. Something to fall back on3. The designer ≠ front-end dev
1. Starting point2. Something to fall back on3. The designer ≠ front-end dev
1. Starting point2. Something to fall back on3. The designer ≠ front-end dev
Before you start:solid IA for hierarchy of info
Designingproportions.
1. Forget pixels!2. Think proportions, ratios, percentages3. Modular!
1. Forget pixels!2. Think proportions, ratios, percentages3. Modular!
1. Forget pixels!2. Think proportions, ratios, percentages3. Modular!
Width?
1. Decide on a maximum width2. Dependent of the amount of content3. Dependent of number of modules4. old principles of web...
1. Decide on a maximum width2. Dependent of the amount of content3. Dependent of number of modules4. old principles of web...
1. Decide on a maximum width2. Dependent of the amount of content3. Dependent of number of modules4. old principles of web...
1. Decide on a maximum width2. Dependent of the amount of content3. Dependent of number of modules4. old principles of web...
Grid!
1. Solid grid helps establish proportions2. Forget 960 grid system3. Make your own grid
1. Solid grid helps establish proportion2. Forget 960 grid system3. Make your own grid
1. Solid grid helps establish2. Forget 960 grid system3. Make your own grid
Modular grid extension             modulargrid.org
Design decisionsbeyond photoshop
Fluid grid vs fixed grid
Fluid grid
1. Page adapts to every possible resolution2. Maximum width defined once3. Takes up all the available space4. Harder to ach...
1. Page adapts to every possible2. Maximum width defined once3. Takes up all the available space4. Harder to achieve (fluid ...
1. Page adapts to every possible2. Maximum width defined once3. Takes up all the available space4. Harder to achieve (fluid ...
1. Page adapts to every possible2. Maximum width defined once3. Takes up all the available space4. Harder to achieve (fluid ...
fixed grid
1. Different layouts defined in fixed widths2. Easier to achieve.3. Not optimizied for future screen sizes?
1. Different layouts defined in fixed widths2. Easier to achieve.3. Not optimizied for future screen sizes?
1. Different layouts defined in fixed widths2. Easier to achieve.3. Not optimizied for future screen sizes
flexible modules
In close association withinformation architect
best practices
1. Define a maximum width2. Start with a solid grid3. Design flexible modules4. Use a fluid layout when possible
1. Define a maximum width2. Start with a solid grid3. Design flexible modules4. Use a fluid layout when possible
1. Define a maximum width2. Start with a solid grid3. Design flexible modules4. Use a fluid layout when possible
1. Define a maximum width2. Start with a solid grid3. Design flexible modules4. Use a fluid layout when
twitter.com/scoudevillesimon@netlash.comwww.netlash.com
Front-end
Our proces1. Online strategy2. Information architecture3. Design4. Front-end design5. Development
1. Media queries2. Adaptive images3. Flexbox4. Multi-column
1. Media queries2. Adaptive images3. Flexbox4. Multi-column
1. Media queries2. Adaptive images3. Flexbox4. Multi-column
1. Media queries2. Adaptive images3. Flexbox4. Multi-column
Media queries
Media queries 1. Not new
Media queries  @media print { /* print styles here */ }
Media queries 1. Not new 2. Screen sizes (basics)
Media queries ‣   max-width 479px (smartphones portrait)
Media queries ‣   max-width 479px (smartphones portrait) ‣   max-width 767px (smartphones landscape)
Media queries ‣   max-width 479px (smartphones portrait) ‣   max-width 767px (smartphones landscape) ‣   max-width 1023px ...
Media queries ‣   max-width 479px (smartphones portrait) ‣   max-width 767px (smartphones landscape) ‣   max-width 1023px ...
Media queries ‣   max-width 479px (smartphones portrait) ‣   max-width 767px (smartphones landscape) ‣   max-width 1023px ...
Media queries 1. Not new 2. Screen sizes (basics) 3. Screen sizes (advanced)
Media queries ‣   max-width 479px (smartphones portrait)
Media queries ‣   max-width 479px (smartphones portrait) ‣   min-width 480px and max-width 769px (smartphones landscape)
Media queries ‣   max-width 479px (smartphones portrait) ‣   min-width 480px and max-width 769px (smartphones landscape) ‣...
Media queries ‣   max-width 479px (smartphones portrait) ‣   min-width 480px and max-width 769px (smartphones landscape) ‣...
Media queries ‣   max-width 479px (smartphones portrait) ‣   min-width 480px and max-width 769px (smartphones landscape) ‣...
Media queries ‣   max-width 479px (smartphones portrait) ‣   min-width 480px and max-width 769px (smartphones landscape) ‣...
Media queries ‣   max-width 479px (smartphones portrait) ‣   min-width 480px and max-width 769px (smartphones landscape) ‣...
Media queries 1. Not new 2. Screen sizes (basics) 3. Screen sizes (advanced) 4. Polyfills
Media queries ‣   Check for native browser support
Modernizr
Respond.js
Media queries 1. Not new 2. Screen sizes (basics) 3. Screen sizes (advanced) 4. Polyfills 5. Frameworks
Less Framework
Golden Grid System
Skeleton
CSS Grid
HTML5 Boilerplate
1. Media queries2. Adaptive images3. Flexbox4. Multi-column
Adaptive images
Adaptive images 1. Lots of screen sizes
Adaptive images 1. Lots of screen sizes 2. Devices: download speed
Adaptive images ‣   image optimization
Adaptive images ‣   image optimization ‣   http://imageoptim.pornel.net/
Adaptive images ‣   image optimization ‣   http://imageoptim.pornel.net/ ‣   http://smushit.com
Adaptive images ‣   serve different images
Adaptive images ‣   serve different images ‣   write own JS
Adaptive images ‣   serve different images ‣   write own JS ‣   existing solution
Adaptive images
1. Media queries2. Adaptive images3. Flexbox4. Multi-column
Flexbox
Flexbox 1. Working draft
Flexbox 1. Working draft 2. Positioning elements
Flexbox 1. Working draft 2. Positioning elements 3. display: flexbox;
Flexbox 1. Working draft 2. Positioning elements 3. display: flexbox; 4. For now - display: box;
1. Media queries2. Adaptive images3. Flexbox4. Multi-column
Multi-column
Multi-column 1. Candidate recommendation
Multi-column 1. Candidate recommendation 2. Divide content into columns
Multi-column 1. Candidate recommendation 2. Divide content into columns 3. column-count: 3;
Multi-column ‣   columns
Multi-column ‣   columns ‣   column-width
Multi-column ‣   columns ‣   column-width ‣   column-count
Multi-column ‣   columns ‣   column-width ‣   column-count ‣   column-gap
Multi-column ‣   columns ‣   column-width ‣   column-count ‣   column-gap ‣   column-rule
Multi-column ‣   columns ‣   column-width ‣   column-count ‣   column-gap ‣   column-rule ‣   column-span
Useful links ‣   http://www.w3.org/TR/css3-mediaqueries/ ‣   http://www.w3.org/TR/css3-flexbox/ ‣   https://developer.mozil...
twitter.com/decthomasthomas@fork-cms.comwww.netlash.com
QUESTIONS?
Responsive webdesign
Responsive webdesign
Responsive webdesign
Responsive webdesign
Responsive webdesign
Responsive webdesign
Responsive webdesign
Responsive webdesign
Responsive webdesign
Responsive webdesign
Responsive webdesign
Responsive webdesign
Responsive webdesign
Responsive webdesign
Responsive webdesign
Responsive webdesign
Responsive webdesign
Responsive webdesign
Responsive webdesign
Upcoming SlideShare
Loading in...5
×

Responsive webdesign

7,620

Published on

Presentation about Responsive Webdesign for the Microsoft UX Tour.

Published in: Business, Technology
0 Comments
23 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
7,620
On Slideshare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
371
Comments
0
Likes
23
Embeds 0
No embeds

No notes for slide

Transcript of "Responsive webdesign"

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

    Clipping is a handy way to collect important slides you want to go back to later.

×