Proactive Responsive Design

3e101126b514c65ee531e47bd6281ba3?s=47 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

3e101126b514c65ee531e47bd6281ba3?s=128

Nathan Smith

October 24, 2012
Tweet

Transcript

  1. 2.

    Nathan Smith Principal UI Architect Mike Townson UX Designer We

    work as designers/devs at Mark Sims UI Developer http://www.projekt202.com
  2. 3.

    Relax, don’t stress out taking notes. You can get the

    slides here… http://j.mp/pro-rwd
  3. 4.
  4. 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.
  5. 6.
  6. 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.
  7. 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
  8. 15.

    Essentially, “responsive” has broken into the mainstream. It ain’t just

    for designer blogs anymore. Some pretty big name sites are adapting…
  9. 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.
  10. 23.
  11. 25.
  12. 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
  13. 27.

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

    @import 780-up @import 960-up <!--[if (gt IE 8) | (IEMobile)]><!--> <link rel="stylesheet" href="/css/style.css"> <!--<![endif]--> <!--[if (lt IE 9) & (!IEMobile)]> <link rel="stylesheet" href="/css/ie.css"> <![endif]-->
  14. 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; } }
  15. 36.
  16. 38.
  17. 39.

    @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (

    min-device-pixel-ratio: 2) { span.location { background-image: url(location@2x.png); background-size: 16px 14px; } span.success { background-image: url(success@2x.png); background-size: 13px 14px; } a.delete { background: url(delete@2x.png) no-repeat 0 -100px; } .content a.fav-link { background-image: url(favorite@2x.png); background-size: 11px 13px; } }
  18. 40.
  19. 41.

    The biggest problem facing responsive design is <img> and potential

    file size. But, there’s a neat solution for JPG images, at least…
  20. 42.
  21. 44.
  22. 45.
  23. 46.
  24. 47.
  25. 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
  26. 53.
  27. 55.
  28. 56.
  29. 58.
  30. 59.
  31. 60.
  32. 61.
  33. 63.
  34. 64.
  35. 65.
  36. 66.
  37. 67.
  38. 68.
  39. 69.
  40. 70.
  41. 71.
  42. 72.
  43. 73.
  44. 74.
  45. 75.

    DEMO TIME! :) Also, don’t forget you can download the

    slides here… http://j.mp/pro-rwd