A Responsive Design Case Study - What We Did Wrong Building ResponsiveDesign.ca (and how we fixed it)
•
5 j'aime•2,309 vues
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
Recommandé
Recommandé
Contenu connexe
En vedette
En vedette (10)
Similaire à A Responsive Design Case Study - What We Did Wrong Building ResponsiveDesign.ca (and how we fixed it)
Similaire à A Responsive Design Case Study - What We Did Wrong Building ResponsiveDesign.ca (and how we fixed it) (20)
Plus de Aidan Foster
Plus de Aidan Foster (7)
Dernier
Dernier (20)
A Responsive Design Case Study - What We Did Wrong Building ResponsiveDesign.ca (and how we fixed it)
- 1. What we did wrong making RESPONSIVEDESIGN.CA and how we fixed it @finteractive (Aidan Foster) FOSTER INTERACTIVE @responsivDesign (RWD Tips) Web Development + Design
- 4. Fluid Images Ethan Marcotte’s Lab - (Artist’s impression)
- 5. Fluid Flexible Images Grids Ethan Marcotte’s Lab - (Artist’s impression)
- 6. Fluid Flexible Images Grids CSS3 Media Queries Ethan Marcotte’s Lab - (Artist’s impression)
- 10. ?
- 11. 2012 (FEBRUARY)
- 13. 1024768
- 14. 1024768
- 15. BASE THEMES
- 16. BASE THEME 1024768
- 17. BASE THEME 1024768
- 18. MINIMAL 1024768 http://drupal.org/project/boron
- 20. RDF + HTML5 Valid • Use the “new” validator http://validator.w3.org/nu • http://www.agileapproach.com/blog-entry/w3c- validation-drupal-7-html5-rdfa
- 21. Mobile First DEFAULT (phone) STYLES
- 22. @media (min-width: 48em) DEFAULT Tablet(ish) STYLES STYLES
- 23. @media (min-width: 64em) Desktop(ish) STYLES
- 24. i Acknowledge and embrace unpredictability
- 25. DESIGN
- 26. Conventional “Waterfall” Workflow Discovery Visual Design Coding Launch
- 28. Desktop
- 29. Tablets
- 30. Phones
- 31. Home
- 32. Home Case Study
- 34. Home Case Study Blog List Blog Post
- 35. Home Case Study Blog List Blog Post Resources
- 37. Let’s Make that shade of blue a bit darker
- 38. Let’s Make that shade of blue a bit darker $!@&$@#!
- 39. 1024768
- 40. 1024768
- 44. Prototype HTML Code Mobile First
- 46. (Go Back a bit) Breakpoint!
- 47. Repeat until you’re at your largest size
- 48. Conventional “Waterfall” Workflow Discovery Visual Design Coding Launch
- 49. Responsive Workflow Discovery Visual Design Coding Launch
- 50. STRUCTURE
- 51. responsive.info 1024768
- 52. 6 responsive.info 1024768 REQUESTS
- 53. Content Content Aside Aside
- 54. phone.css phone-landscape.css 1024768 tablet-landscape.css tablet.css 1024768 desktop.css
- 55. phone.css phone-landscape.css 1024768 tablet-landscape.css tablet.css 1024768 desktop.css
- 56. (Generally) Put Media Queries in CSS not the HTML Header
- 58. DON’T USE PIXELS
- 59. USE EMs Media Queries Padding / Margin
- 60. USE EMs Media Queries Padding / Margin They Scale with zooming :)
- 61. USE EMs Media Queries Padding / Margin They Scale with zooming :) The math is tedious :(
- 63. Crazy responsive Math Vendor Prefixes Great Extensions Saves Time
- 64. Crazy responsive Math Vendor Prefixes Great Extensions Saves Time
- 65. Crazy responsive Math Vendor Prefixes Great Extensions Saves Time
- 66. Crazy responsive Math Vendor Prefixes Great Extensions Saves Time
- 67. Crazy responsive Math Vendor Prefixes Great Extensions Saves Time
- 68. FireBug + FireSass
- 69. Source trace Trace the SASS file source for rendered output
- 70. phone.scss phone-landscape.scss styles.css tablet-landscape.scss tablet.scss desktop.scss
- 71. GRIDS
- 73. Messy Grids use HTML markup http://foundation.zurb.com/docs/grid.php
- 74. Messy Grids use HTML markup 5 Classes! What’s Up with That?
- 75. Messy Grids use HTML markup
- 76. Good Grids put style in the CSS http://susy.oddbird.net/
- 78. Breakpoint Mixin For Compass https://github.com/canarymason/breakpoint
- 80. * {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).
- 81. * {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).
- 82. CROSS PLATFORM
- 85. !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.
- 86. PERFORMANCE 1024768 http://mobitest.akamai.com www.webpagetest.org
- 87. 1024768
- 88. 1024768 981kb 44 request
- 89. 8KB 95KB 16KB JS CSS 865KB Images
- 93. 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
- 94. Image Modules Double Retina views wysiwyg CDN Buggy Image Load Display compatible Compatible Safe Client-Side X X Adaptive Image Responsive X X X X Images & Styles Adaptive Image X X Styles Adaptive Image X X X X Borealis X X X X X
- 96. Image Style Quality Module • http://drupal.org/project/image_style_quality
- 97. Upload your retina now compress them mucho! http://blog.netvlies.nl/design-interactie/retina-revolution/
- 98. Upload your retina now compress them mucho! http://blog.netvlies.nl/design-interactie/retina-revolution/
- 99. Sprites w/ Compass 1024768
- 100. 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.
- 101. Benchmarking Requests Kilobytes 981 44 50 1,000 31 38 750 25 377 500 13 250 Before 0 Before 0 AFter After html js css image html js css image
- 102. TIPS
- 105. Progressive Enhancement Big Screen Small Screen
- 106. Progressive Enhancement Big Screen Small Screen
- 108. • http://wickynilliams.github.com/enquire.js/ • Media queries in javascript. • Simplifies using matchMedia. • Respond to match and unmatch of queries.
- 109. enquire.js
- 110. Adobe Edge Inspect (formerly Adobe Shadow)
- 111. I Wrote a book review on responsivedesign.ca http://www.implementingresponsivedesign.com/
- 112. FREE CHAPTER ON RESPONSIVE MEDIA http://www.implementingresponsivedesign.com/ sample_chapter.pdf
- 114. THANK YOU http://linkedin.responsivedesign.ca @finteractive (Drupal / Personal) @responsivDesign (RWD Tips)