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.
http://bristolskillswap.org/responsive/

Keir Moffatt

May 13, 2013
Tweet

More Decks by Keir Moffatt

Other Decks in Technology

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