Upgrade to Pro — share decks privately, control downloads, hide ads and more …

'Responsivable' Web Development

'Responsivable' Web Development

"Responsibly developing responsive sites."

This talk was delivered at the Responsive Web Design edition of Bristol Skillswap.

Keir Moffatt

May 13, 2013

More Decks by Keir Moffatt

Other Decks in Technology


  1. Thank you! A big thank you to all the Skillswappers

    who came to Going Beyond Code and participated in my Wild Wild Web talk.
  2. New Adventures New adventure, new challenges My first RWD was

    only last year (Aug 2012) Fluid + breakpoints Fluid is nothing new Breakpoints = evolution There is no spoon (device-agnostic) I love simple
  3. Go large Large sites & teams (cxpartners) SASS is invaluable

    (variables for breakpoints) Importance of modularity (build + test) Respond in any environment Grouped vs inline breakpoints Piece together jigsaw breakpoint-sass.com
  4. Gotchas It takes longer! <select> max-width buffoonery: http://codepen.io/iamkeir/pen/DnsAz Firefox vs

    The World: http://iamkeir.com/post/26647025450/firefox-media-query-breakpoints-wtf Zooming = resizing? http://blog.55minutes.com/2012/04/media-queries-and-browser-zoom/ Beware of BRD (Browser Resize Disorder)
  5. Theory Mobile-first vs desktop-first (real life) Responsive media (img, video,

    table) Responsive fonts (vw, vh, vmin, FitText.js) Grid systems, ems & calculators Is responsive always right? (FreeAgent, GoCardless) https://gocardless.com/blog/unresponsive-design/ Mobile vs responsive (web perf, Andy Davies)
  6. Be ‘responsivable’ Don’t go mad (but do be eager) Keep

    it simple Mobile-first (where possible) Flags in the sand (thanks Pete) Consider the context, remember the human Don’t reinvent wheel (tried & tested) Test, test, test, test, test, test, test, test, test, test, test, test, test, test, test...