'Responsivable' Web Development

"Responsibly developing responsive sites."

This talk was delivered at the Responsive Web Design edition of Bristol Skillswap.
http://bristolskillswap.org/responsive/

Transcript

1. ‘Responsivable’
   Web Development
   @iamkeir
   

   View Slide

2. Thank you!
   A big thank you to all the
   Skillswappers who came to
   Going Beyond Code
   and participated in my
   Wild Wild Web talk.
   

   View Slide

3. 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
   

   View Slide

4. Start small
   blendedcreative.co.uk
   lightwellresearch.com
   thecompliancepartnership.com
   barneswilliams.co.uk
   monkeycalls.com
   blakelondon.co.uk
   

   View Slide

5. 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
   

   View Slide

6. Gotchas
   It takes longer!
   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)
   

   View Slide

7. 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)
   

   View Slide

8. 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...
   

   View Slide

9. Thanks!
   Further reading...
   http://blog.cloudfour.com/the-ems-have-it-proportional-media-queries-ftw/
   http://adaptive-images.com/
   http://cxpartners.co.uk/cxblog/user-experience-problems-with-responsive-photos/
   http://responsivedesignweekly.com/rwd-summit/javascript-in-responsive-web-
   design-by-dave-rupert/
   https://gocardless.com/blog/unresponsive-design/
   http://www.slideshare.net/AndyDavies/making-mobile-sites-faster
   

   View Slide

10. ‘Responsivable’
    Web Development
    @iamkeir
    

    View Slide