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

Responsive Design

Jeremy Keith
August 07, 2014

Responsive Design

Jeremy Keith

August 07, 2014
Tweet

More Decks by Jeremy Keith

Other Decks in Design

Transcript

  1. The primary design principle underlying the Web’s
    usefulness and growth is universality.
    The Web should be usable by people with disabilities.
    It must work with any form of information, be it a
    document or a point of data, and information of any
    quality—from a silly tweet to a scholarly paper.
    And it should be accessible from any kind of
    hardware that can connect to the Internet:
    stationary or mobile, small screen or large.
    —Tim Berners-Lee
    Long Live the Web


    View Slide

  2. View Slide

  3. print

    View Slide

  4. print

    View Slide

  5. print

    View Slide

  6. Grid
    System
    + The
    Page
    order constraint
    control

    View Slide

  7. web

    View Slide

  8. control
    web

    View Slide

  9. Table
    Layout
    The
    Browser
    order constraint
    control
    +

    View Slide

  10. CSS The
    Browser
    order constraint
    control
    +

    View Slide

  11. The
    Browser
    unknown

    View Slide

  12. View Slide

  13. speed
    unknown
    capability
    size

    View Slide

  14. size
    640 x 480
    800 x 600
    1024 x 768
    fixed

    View Slide

  15. flexible
    %

    View Slide

  16. The control which designers know in the print
    medium, and often desire in the web medium, is
    simply a function of the limitation of the printed page.
    We should embrace the fact that the web
    doesn’t have the same constraints, and
    design for this flexibility.”
    —John Allsopp
    A Dao of Web Design

    View Slide

  17. WYSIWTF

    View Slide

  18. View Slide

  19. View Slide

  20. speed
    capability
    size
    unknown

    View Slide

  21. mobile web
    desktop
    tablet

    View Slide

  22. one web
    flexible

    View Slide

  23. Rather than tailoring disconnected designs to each of
    an ever-increasing number of web devices, we can
    treat them as facets of the same experience. We can
    design for an optimal viewing experience, but embed
    standards-based technologies into our designs to
    make them not only more flexible, but more
    adaptive to the media that renders them.”
    —Ethan Marcotte
    Responsive Web Design

    View Slide

  24. It’s my belief that in order to embrace designing
    native layouts for the web – whatever the device –
    we need to shed the notion that we create layouts
    from a canvas in. We need to flip it on its head, and
    create layouts from the content out.”
    —Mark Boulton
    A Richer Canvas

    View Slide

  25. My love for responsive centers around the idea that
    my website will meet you wherever you are
    —from mobile to full-blown desktop and anywhere
    in between.”
    —Trent Walton
    Fit To Scale

    View Slide

  26. View Slide

  27. ...squishing down a
    desktop site.”

    responsive design is...

    View Slide

  28. ...all about mobile.”

    responsive design is...

    View Slide

  29. ...a front-end
    development technique.”

    responsive design is...

    View Slide

  30. ...fine for documents, but
    not for web apps.”

    responsive design is...

    View Slide

  31. ...ignoring context.”

    responsive design is...

    View Slide

  32. Mind reading is no way to base
    fundamental content decisions.”
    —Mark Kirby
    The Mobile context

    View Slide

  33. View Slide

  34. View Slide

  35. View Slide

  36. View Slide

  37. ...the only viable
    approach.”

    responsive design is...

    View Slide