• Save
A Responsive Design Case Study - What We Did Wrong Building ResponsiveDesign.ca (and how we fixed it)
Upcoming SlideShare
Loading in...5
×
 

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

on

  • 2,368 views

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

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

Statistics

Views

Total Views
2,368
Views on SlideShare
1,958
Embed Views
410

Actions

Likes
4
Downloads
0
Comments
0

9 Embeds 410

http://fosterinteractive.com 248
http://v3.fosterinteractive.local 151
http://designercasemoments.mirildatili.com 3
http://dev.fosterinteractive.gotpantheon.com 2
http://fairdesignercase.mirildatili.com 2
http://live.fosterinteractive.gotpantheon.com 1
http://designercaseart.mirildatili.com 1
http://classofdesignercase.mirildatili.com 1
http://centraldesignercase.mirildatili.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

  • What we did wrong makingRESPONSIVEDESIGN.CA and how we fixed it@finteractive (Aidan Foster) FOSTER INTERACTIVE@responsivDesign (RWD Tips) Web Development + Design
  • ofRESPONSIVEDESIGN.CA
  • 2010 (SPRING)
  • FluidImagesEthan Marcotte’s Lab - (Artist’s impression)
  • Fluid FlexibleImages GridsEthan Marcotte’s Lab - (Artist’s impression)
  • Fluid FlexibleImages Grids CSS3 Media QueriesEthan Marcotte’s Lab - (Artist’s impression)
  • http://www.alistapart.com/articles/responsive-web-design/
  • 2011 (SEPTEMBER)
  • 1024768bostonglobe.com
  • ?
  • 2012 (FEBRUARY)
  • 1024768
  • 1024768
  • BASE THEMES
  • BASE THEME 1024768
  • BASE THEME 1024768
  • MINIMAL 1024768http://drupal.org/project/boron
  • html5boilerplate.com
  • RDF + HTML5 Valid• Use the “new” validator http://validator.w3.org/nu• http://www.agileapproach.com/blog-entry/w3c- validation-drupal-7-html5-rdfa
  • Mobile First DEFAULT (phone) STYLES
  • @media (min-width: 48em)DEFAULT Tablet(ish) STYLES STYLES
  • @media (min-width: 64em) Desktop(ish) STYLES
  • i Acknowledge and embrace unpredictability
  • DESIGN
  • Conventional “Waterfall” Workflow Discovery Visual Design Coding Launch
  • Device Breakpoints
  • Desktop
  • Tablets
  • Phones
  • Home
  • HomeCase Study
  • HomeCase StudyBlog List
  • HomeCase StudyBlog ListBlog Post
  • HomeCase StudyBlog ListBlog PostResources
  • Let’s Make that shade of blue a bit darker
  • Let’s Make that shade of blue a bit darker $!@&$@#!
  • 1024768
  • 1024768
  • Natural Breakpoints
  • Natural Breakpoints
  • Design the Extremes
  • Prototype HTML Code Mobile First
  • Stretch Until Ugly
  • (Go Back a bit) Breakpoint!
  • Repeat until you’re at your largest size
  • Conventional “Waterfall” Workflow Discovery Visual Design Coding Launch
  • Responsive Workflow DiscoveryVisual Design Coding Launch
  • STRUCTURE
  • responsive.info 1024768
  • 6responsive.info 1024768 REQUESTS
  • Content Content Aside Aside
  • phone.css phone-landscape.css 1024768tablet-landscape.css tablet.css 1024768desktop.css
  • phone.css phone-landscape.css 1024768tablet-landscape.css tablet.css 1024768desktop.css
  • (Generally) Put Media Queries in CSS not the HTML Header
  • DON’T USE PIXELS
  • USE EMs Media QueriesPadding / Margin
  • USE EMs Media Queries Padding / MarginThey Scale with zooming :)
  • USE EMs Media Queries Padding / MarginThey Scale with zooming :) The math is tedious :(
  • http://sass-lang.com/
  • Crazy responsive Math Vendor Prefixes Great Extensions Saves Time
  • Crazy responsive Math Vendor Prefixes Great Extensions Saves Time
  • Crazy responsive Math Vendor Prefixes Great Extensions Saves Time
  • Crazy responsive Math Vendor Prefixes Great Extensions Saves Time
  • Crazy responsive Math Vendor Prefixes Great Extensions Saves Time
  • FireBug +FireSass
  • Source traceTrace the SASS file source for rendered output
  • phone.scss phone-landscape.scssstyles.css tablet-landscape.scss tablet.scss desktop.scss
  • GRIDS
  • Messy Grids use HTML markuphttp://foundation.zurb.com/docs/grid.php
  • Messy Grids use HTML markup5 Classes! What’s Up with That?
  • Messy Grids use HTML markup
  • Good Grids put style in the CSS http://susy.oddbird.net/
  • Breakpoint Mixin For Compasshttps://github.com/canarymason/breakpoint
  • http://zengrids.com
  • * {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).
  • * {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).
  • CROSSPLATFORM
  • !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.
  • PERFORMANCE 1024768http://mobitest.akamai.com www.webpagetest.org
  • 1024768
  • 1024768 981kb 44 request
  • 8KB 95KB 16KB JS CSS 865KBImages
  • 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
  • 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
  • Client-Side Adaptive Image
  • Image Style Quality Module• http://drupal.org/project/image_style_quality
  • Upload your retina now compress them mucho!http://blog.netvlies.nl/design-interactie/retina-revolution/
  • Upload your retina now compress them mucho!http://blog.netvlies.nl/design-interactie/retina-revolution/
  • Sprites w/ Compass 1024768
  • 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.
  • 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
  • TIPS
  • http://modernizr.com/
  • LOGOS(with image fallback)
  • Progressive Enhancement Big Screen Small Screen
  • Progressive Enhancement Big Screen Small Screen
  • http://filamentgroup.com/dwpe/
  • • http://wickynilliams.github.com/enquire.js/• Media queries in javascript.• Simplifies using matchMedia.• Respond to match and unmatch of queries.
  • enquire.js
  • Adobe Edge Inspect (formerly Adobe Shadow)
  • I Wrote a book review on responsivedesign.cahttp://www.implementingresponsivedesign.com/
  • FREE CHAPTER ON RESPONSIVE MEDIAhttp://www.implementingresponsivedesign.com/sample_chapter.pdf
  • archive.responsivedesign.ca
  • THANK YOU http://linkedin.responsivedesign.ca@finteractive (Drupal / Personal) @responsivDesign (RWD Tips)