A Responsive Design Case Study - What We Did Wrong Building ResponsiveDesign.ca (and how we fixed it)

2,342
-1

Published on

This presentation was originally presented at Drupal Camp Toronto, 2012.

To view the video cast of this presentation visit http://fosterinteractive.com/blog/responsive-design-case-study


-----DESCRIPTION-----
responsivedesign.ca was launched in February of 2012, and it was well received. It was our first mobile-first responsive site. We built it quickly and knew it wasn’t perfect, but the game plan was to launch early and incrementally improve the site over time.

It’s not even a year later we use whole new workflows, creative design methods, modules, and development tools in our responsive websites. This talk will highlight how we created the original project and what we’ve since learned regarding workflow and development including:

Responsive Images Modules
Creative Concept Development
Device vs. Natural Breakpoints
SASS / Compass + Mixins we use
Dealing with IE
Benchmarking


----- Originally Presented at Drupal Camp Toronto 2012 -----

http://2012.drupalcamptoronto.org/sessions/a-responsive-design-case-study-what-we-did-wrong-building-responsivedesignca-and-how-we-fix

Published in: Technology
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,342
On Slideshare
0
From Embeds
0
Number of Embeds
10
Actions
Shares
0
Downloads
0
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

A Responsive Design Case Study - What We Did Wrong Building ResponsiveDesign.ca (and how we fixed it)

  1. 1. What we did wrong makingRESPONSIVEDESIGN.CA and how we fixed it@finteractive (Aidan Foster) FOSTER INTERACTIVE@responsivDesign (RWD Tips) Web Development + Design
  2. 2. ofRESPONSIVEDESIGN.CA
  3. 3. 2010 (SPRING)
  4. 4. FluidImagesEthan Marcotte’s Lab - (Artist’s impression)
  5. 5. Fluid FlexibleImages GridsEthan Marcotte’s Lab - (Artist’s impression)
  6. 6. Fluid FlexibleImages Grids CSS3 Media QueriesEthan Marcotte’s Lab - (Artist’s impression)
  7. 7. http://www.alistapart.com/articles/responsive-web-design/
  8. 8. 2011 (SEPTEMBER)
  9. 9. 1024768bostonglobe.com
  10. 10. ?
  11. 11. 2012 (FEBRUARY)
  12. 12. 1024768
  13. 13. 1024768
  14. 14. BASE THEMES
  15. 15. BASE THEME 1024768
  16. 16. BASE THEME 1024768
  17. 17. MINIMAL 1024768http://drupal.org/project/boron
  18. 18. html5boilerplate.com
  19. 19. RDF + HTML5 Valid• Use the “new” validator http://validator.w3.org/nu• http://www.agileapproach.com/blog-entry/w3c- validation-drupal-7-html5-rdfa
  20. 20. Mobile First DEFAULT (phone) STYLES
  21. 21. @media (min-width: 48em)DEFAULT Tablet(ish) STYLES STYLES
  22. 22. @media (min-width: 64em) Desktop(ish) STYLES
  23. 23. i Acknowledge and embrace unpredictability
  24. 24. DESIGN
  25. 25. Conventional “Waterfall” Workflow Discovery Visual Design Coding Launch
  26. 26. Device Breakpoints
  27. 27. Desktop
  28. 28. Tablets
  29. 29. Phones
  30. 30. Home
  31. 31. HomeCase Study
  32. 32. HomeCase StudyBlog List
  33. 33. HomeCase StudyBlog ListBlog Post
  34. 34. HomeCase StudyBlog ListBlog PostResources
  35. 35. Let’s Make that shade of blue a bit darker
  36. 36. Let’s Make that shade of blue a bit darker $!@&$@#!
  37. 37. 1024768
  38. 38. 1024768
  39. 39. Natural Breakpoints
  40. 40. Natural Breakpoints
  41. 41. Design the Extremes
  42. 42. Prototype HTML Code Mobile First
  43. 43. Stretch Until Ugly
  44. 44. (Go Back a bit) Breakpoint!
  45. 45. Repeat until you’re at your largest size
  46. 46. Conventional “Waterfall” Workflow Discovery Visual Design Coding Launch
  47. 47. Responsive Workflow DiscoveryVisual Design Coding Launch
  48. 48. STRUCTURE
  49. 49. responsive.info 1024768
  50. 50. 6responsive.info 1024768 REQUESTS
  51. 51. Content Content Aside Aside
  52. 52. phone.css phone-landscape.css 1024768tablet-landscape.css tablet.css 1024768desktop.css
  53. 53. phone.css phone-landscape.css 1024768tablet-landscape.css tablet.css 1024768desktop.css
  54. 54. (Generally) Put Media Queries in CSS not the HTML Header
  55. 55. DON’T USE PIXELS
  56. 56. USE EMs Media QueriesPadding / Margin
  57. 57. USE EMs Media Queries Padding / MarginThey Scale with zooming :)
  58. 58. USE EMs Media Queries Padding / MarginThey Scale with zooming :) The math is tedious :(
  59. 59. http://sass-lang.com/
  60. 60. Crazy responsive Math Vendor Prefixes Great Extensions Saves Time
  61. 61. Crazy responsive Math Vendor Prefixes Great Extensions Saves Time
  62. 62. Crazy responsive Math Vendor Prefixes Great Extensions Saves Time
  63. 63. Crazy responsive Math Vendor Prefixes Great Extensions Saves Time
  64. 64. Crazy responsive Math Vendor Prefixes Great Extensions Saves Time
  65. 65. FireBug +FireSass
  66. 66. Source traceTrace the SASS file source for rendered output
  67. 67. phone.scss phone-landscape.scssstyles.css tablet-landscape.scss tablet.scss desktop.scss
  68. 68. GRIDS
  69. 69. Messy Grids use HTML markuphttp://foundation.zurb.com/docs/grid.php
  70. 70. Messy Grids use HTML markup5 Classes! What’s Up with That?
  71. 71. Messy Grids use HTML markup
  72. 72. Good Grids put style in the CSS http://susy.oddbird.net/
  73. 73. Breakpoint Mixin For Compasshttps://github.com/canarymason/breakpoint
  74. 74. http://zengrids.com
  75. 75. * {box-sizing: border-box}• Simplifies the math (calculating % widths is work).• Bugs when using min- max- width & height• Not supported in ie7, ie6. So calculate those widths.• Pollyfill isn’t perfect (Buggy).
  76. 76. * {box-sizing: border-box}• Simplifies the math (calculating % widths is work).• Bugs when using min- max- width & height• Not supported in ie7, ie6. So calculate those widths.• Pollyfill isn’t perfect (Buggy).
  77. 77. CROSSPLATFORM
  78. 78. !respond.js• Don’t bloat, let IE be IE• Buggy Slow Responsive Is Worse then fixed width• Use IE specific stylesheets to change back to desktop.
  79. 79. PERFORMANCE 1024768http://mobitest.akamai.com www.webpagetest.org
  80. 80. 1024768
  81. 81. 1024768 981kb 44 request
  82. 82. 8KB 95KB 16KB JS CSS 865KBImages
  83. 83. Image Modules• Client-Side Adaptive Image (noscript) http://drupal.org/project/cs_adaptive_image• Responsive Images & Styles (cookie, 2x load on 1st) http://drupal.org/project/resp_img• Adaptive Image Styles (.htaccess) http://drupal.org/project/ais• Adaptive Image (uses display size) http://drupal.org/project/adaptive_image• Borealis (Container Size, but appears to x2 load) http://drupal.org/project/borealis
  84. 84. Image Modules Double Retina views wysiwyg CDN Buggy Image Load Display compatible Compatible SafeClient-Side X XAdaptive ImageResponsive X X X XImages & StylesAdaptive Image X XStylesAdaptive Image X X X XBorealis X X X X X
  85. 85. Client-Side Adaptive Image
  86. 86. Image Style Quality Module• http://drupal.org/project/image_style_quality
  87. 87. Upload your retina now compress them mucho!http://blog.netvlies.nl/design-interactie/retina-revolution/
  88. 88. Upload your retina now compress them mucho!http://blog.netvlies.nl/design-interactie/retina-revolution/
  89. 89. Sprites w/ Compass 1024768
  90. 90. base64 encoded css images• For Background images• Converted repeating backgrounds into base64 added using data:uri• Increase file size 25%-33% but saves a request.
  91. 91. Benchmarking Requests Kilobytes 98144 50 1,000 31 38 750 25 377 500 13 250Before 0 Before 0 AFter Afterhtml js css image html js css image
  92. 92. TIPS
  93. 93. http://modernizr.com/
  94. 94. LOGOS(with image fallback)
  95. 95. Progressive Enhancement Big Screen Small Screen
  96. 96. Progressive Enhancement Big Screen Small Screen
  97. 97. http://filamentgroup.com/dwpe/
  98. 98. • http://wickynilliams.github.com/enquire.js/• Media queries in javascript.• Simplifies using matchMedia.• Respond to match and unmatch of queries.
  99. 99. enquire.js
  100. 100. Adobe Edge Inspect (formerly Adobe Shadow)
  101. 101. I Wrote a book review on responsivedesign.cahttp://www.implementingresponsivedesign.com/
  102. 102. FREE CHAPTER ON RESPONSIVE MEDIAhttp://www.implementingresponsivedesign.com/sample_chapter.pdf
  103. 103. archive.responsivedesign.ca
  104. 104. THANK YOU http://linkedin.responsivedesign.ca@finteractive (Drupal / Personal) @responsivDesign (RWD Tips)

×