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
How to Troubleshoot Apps for the Modern Connected Worker
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
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).
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
108. • http://wickynilliams.github.com/enquire.js/
• Media queries in javascript.
• Simplifies using matchMedia.
• Respond to match and unmatch of queries.