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

The good, the bad, and the squishy

Steve Barnett
September 19, 2014

The good, the bad, and the squishy

A talk about thinking and designing squishy, covering Progressive Enhancement, Responsive Web Design, and deliverables that can help.

Steve Barnett

September 19, 2014
Tweet

More Decks by Steve Barnett

Other Decks in Technology

Transcript

  1. The good, the bad, and
    the squishy
    Steve Barnett

    View full-size slide

  2. naga.co.za/squishy
    @maxbarners
    Front-end developer
    at Praekelt

    View full-size slide

  3. BED — FED — Des

    View full-size slide

  4. What we'll cover
    Progressive Enhancement
    Responsive Web Design
    Deliverables

    View full-size slide

  5. Progressive
    Enhancement

    View full-size slide

  6. Progressive
    Enhancement

    View full-size slide

  7. JS fails
    CSS
    HTML

    View full-size slide

  8. Levels of Optimisation
    Cutting the mustard

    View full-size slide

  9. Access regardless of
    Device, Connection, Disability

    View full-size slide

  10. Responsive
    Web Design

    View full-size slide

  11. Not about resizing your
    browser

    View full-size slide

  12. Mobile First

    View full-size slide

  13. * First
    (* = All The Things)

    View full-size slide

  14. Deliverables

    View full-size slide

  15. Front-end
    Style Guide

    View full-size slide

  16. Style-Guide Driven
    Development

    View full-size slide

  17. What we've covered
    Progressive Enhancement
    Responsive Web Design
    Deliverables

    View full-size slide

  18. Thanks!
    Questions?

    Steve Barnett
    naga.co.za/squishy
    @maxbarners

    View full-size slide

  19. It depends
    ¯\_()_/¯

    View full-size slide

  20. 4 flickr.com/photos/brad_frost/
    7387759388
    4 flickr.com/photos/p_valdivieso/
    11825680466
    4 flickr.com/photos/w4nd3rl0st/
    6676987847
    4 behance.net/gallery/Cinemagraphs-
    Escalators/12202611
    4 flickr.com/photos/psd/2731067095/
    4 flaticon.com

    View full-size slide