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 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 Slide

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

    View Slide

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

    View 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 Slide

  6. View Slide

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

    View Slide

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

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

    View Slide

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

    View Slide

  11. 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 Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  16. Microsoft.com — Home page is responsive

    View Slide

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

    View Slide

  18. Time.com — Entire site is responsive

    View Slide

  19. 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 Slide

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

    View Slide

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

    View Slide

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

    View Slide

  23. View Slide

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

    View Slide

  25. View Slide

  26. // 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 Slide

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




    View Slide

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

    View Slide

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

    View Slide

  30. http://compass-style.org

    View Slide

  31. Compass makes vendor prefixes easy...

    View Slide

  32. Compass brings sanity to gradients...

    View Slide

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

    View Slide

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

    View Slide

  35. @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 Slide

  36. View Slide

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

    View Slide

  38. View Slide

  39. @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 Slide

  40. View Slide

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

    View Slide

  42. View Slide

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

    View Slide

  44. View Slide

  45. View Slide

  46. View Slide

  47. View Slide

  48. 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 Slide

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

    View Slide

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

    View Slide

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

    View Slide

  52. INNOVATION PORTAL
    Extended Designs

    View Slide

  53. View Slide

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

    View Slide

  55. HOME

    View Slide

  56. HOME

    View Slide

  57. MOBILE DESIGN

    View Slide

  58. View Slide

  59. View Slide

  60. View Slide

  61. View Slide

  62. DESKTOP DESIGN

    View Slide

  63. View Slide

  64. View Slide

  65. View Slide

  66. View Slide

  67. View Slide

  68. View Slide

  69. View Slide

  70. View Slide

  71. View Slide

  72. View Slide

  73. View Slide

  74. View Slide

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

    View Slide