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

Proactive Responsive Design

Nathan Smith
October 24, 2012

Proactive Responsive Design

Presentation that I gave, along with coworkers Mark Sims and Mike Townson, at the Dallas Society of Visual Communications.

http://www.dsvc.org/events/working-lunch/10/2012

Nathan Smith

October 24, 2012
Tweet

More Decks by Nathan Smith

Other Decks in Design

Transcript

  1. Proactive
    Responsive
    Design
    http://flickr.com/photos/63631877@N00/3937964101
    Dallas Society of Visual Communications
    Wednesday — October 24, 2012

    View full-size slide

  2. Nathan Smith
    Principal UI Architect
    Mike Townson
    UX Designer
    We work as designers/devs at
    Mark Sims
    UI Developer
    http://www.projekt202.com

    View full-size slide

  3. Relax, don’t stress out
    taking notes. You can
    get the slides here…
    http://j.mp/pro-rwd

    View full-size slide

  4. Front-end development is like playing midfield. It’s the
    “glue” that connects visual design with the server-side.

    View full-size slide

  5. The term “Responsive Web Design”
    was coined by Ethan Marcotte, in an
    an article published by A List Apart.
    Loosely defined, it means adapting
    to various screen sizes, using a fluid
    grid and @media queries in CSS.

    View full-size slide

  6. Ethan also wrote a book…
    http://www.abookapart.com/products/responsive-web-design

    View full-size slide

  7. When should you use RWD™?
    Responsive web design using @media queries (with one
    codebase for all devices) typically works best for web
    “sites” (not apps). Apps work best when tailored to one
    particular interaction paradigm. For instance, mobile
    Gmail is a different experience than on the desktop.
    As a general rule of thumb, if your content can be read
    via RSS (such as Google Reader) and still make sense, it
    might be worth considering a responsive approach.

    View full-size slide

  8. http://flickr.com/photos/djwudi/382030798
    State of mobile in 2007 — The year the iPhone was introduced

    View full-size slide

  9. The state of mobile in 2012 — Touch screens reign supreme

    View full-size slide

  10. The one thing all these phones have
    in common (besides Angry Birds) is
    they all have decent web browsers.
    http://paulirish.com/2010/high-res-browser-icons

    View full-size slide

  11. http://lukew.com/ff/entry.asp?1506
    1,450,000
    mobile devices activated
    317,124
    newborns begin life
    Each day, on planet Earth…

    View full-size slide

  12. http://computerworld.com/s/article/9227412/Obama_orders_agencies_to_optimize_Web_content_for_mobile

    View full-size slide

  13. “Obama orders agencies to optimize Web content for mobile”
    http://flickr.com/photos/whitehouse/7161178504

    View full-size slide

  14. Essentially, “responsive” has
    broken into the mainstream.
    It ain’t just for designer blogs
    anymore. Some pretty big
    name sites are adapting…

    View full-size slide

  15. Microsoft.com — Home page is responsive

    View full-size slide

  16. Grammy.com — Most of the site is responsive

    View full-size slide

  17. Time.com — Entire site is responsive

    View full-size slide

  18. Disney.com — Entire site is responsive
    There is one Flash ad, which disappears if the browser is at “mobile” width.
    Note: Most mobile devices have little/no support for Flash, Silverlight, etc.

    View full-size slide

  19. Disney.com — Menu adapts, based on screen size

    View full-size slide

  20. Pepsi Innovation — Entire site is responsive
    http://innovation.capturaonline.com

    View full-size slide

  21. Pepsi Innovation — Entire site is responsive
    http://innovation.capturaonline.com

    View full-size slide

  22. Like accessibility, RWD works best with advanced planning…
    #FAIL

    View full-size slide

  23. // For good browsers...
    @import base
    @media (min-width:320px)
    @import 320-up
    @media (min-width:480px)
    @import 480-up
    @media (min-width:780px)
    @import 780-up
    @media (min-width:960px)
    @import 960-up
    @media (min-width:1100px)
    @import 1100-up

    View full-size slide

  24. // For older IE...
    @import base
    @import 320-up
    @import 480-up
    @import 780-up
    @import 960-up




    View full-size slide

  25. CSS Sass Compass
    http://sonspring.com/journal/sass-for-designers

    View full-size slide

  26. http://thingsorganizedneatly.tumblr.com/post/9494864300/submission-the-compulsively-tidy-ursus-wehrli
    CSS served to browser
    Neatly organized *.sass

    View full-size slide

  27. http://compass-style.org

    View full-size slide

  28. Compass makes vendor prefixes easy...

    View full-size slide

  29. Compass brings sanity to gradients...

    View full-size slide

  30. http://host.sonspring.com/handlebbbars
    Handlebbbars
    demo of Handlebars.js
    and the Dribbble API

    View full-size slide

  31. Sweet, responsive Handlebbbars action
    http://host.sonspring.com/handlebbbars

    View full-size slide

  32. @media (min-width: 880px) {
    /* line 198, ../sass/_site.sass */
    body {
    width: 880px;
    margin: 0 auto;
    }
    /* line 202, ../sass/_site.sass */
    #list li {
    float: left;
    width: 400px;
    height: 36em;
    }
    }
    @media (min-width: 1320px) {
    /* line 208, ../sass/_site.sass */
    body {
    width: 1320px;
    }
    }

    View full-size slide

  33. @media queries
    aren’t just for width.
    Also works well for
    “retina” detection…

    View full-size slide

  34. @media only screen and (-webkit-min-device-pixel-ratio: 2),
    only screen and ( min-device-pixel-ratio: 2) {
    span.location {
    background-image: url([email protected]);
    background-size: 16px 14px;
    }
    span.success {
    background-image: url([email protected]);
    background-size: 13px 14px;
    }
    a.delete {
    background: url([email protected]) no-repeat 0 -100px;
    }
    .content a.fav-link {
    background-image: url([email protected]);
    background-size: 11px 13px;
    }
    }

    View full-size slide

  35. The biggest problem facing
    responsive design is
    and potential file size.
    But, there’s a neat solution
    for JPG images, at least…

    View full-size slide

  36. A non-exhaustive
    list of potentially
    helpful responsive
    CSS frameworks…

    View full-size slide

  37. http://trentwalton.com/2010/07/05/non-hover
    Elements that rely only on mousemove,
    mouseover, mouseout or the CSS pseudo-
    class :hover may not always behave as
    expected on a touch-screen device such
    as iPad or iPhone. — Apple Reference Library

    View full-size slide

  38. http://www.flickr.com/photos/sigalakos/4516917297/

    View full-size slide

  39. http://presentationzen.com/presentationzen/2010/08/a-long-time-ago-before-death-by-powerpoint.html
    Be concise, for people on-the-go (mobile)…

    View full-size slide

  40. http://presentationzen.com/presentationzen/2010/08/a-long-time-ago-before-death-by-powerpoint.html
    Resist the temptation of information overload…

    View full-size slide

  41. INNOVATION PORTAL
    Extended Designs

    View full-size slide

  42. SIDE BY SIDE
    The differences of Mobile vs. Desktop

    View full-size slide

  43. MOBILE DESIGN

    View full-size slide

  44. DESKTOP DESIGN

    View full-size slide

  45. DEMO TIME! :)
    Also, don’t forget you can
    download the slides here…
    http://j.mp/pro-rwd

    View full-size slide