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

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. Proactive Responsive Design http://flickr.com/photos/63631877@N00/3937964101 Dallas Society of Visual Communications Wednesday

    — October 24, 2012
  2. Nathan Smith Principal UI Architect Mike Townson UX Designer We

    work as designers/devs at Mark Sims UI Developer http://www.projekt202.com
  3. Relax, don’t stress out taking notes. You can get the

    slides here… http://j.mp/pro-rwd
  4. Front-end development is like playing midfield. It’s the “glue” that

    connects visual design with the server-side.
  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.
  6. None
  7. Ethan also wrote a book… http://www.abookapart.com/products/responsive-web-design

  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.
  9. http://flickr.com/photos/djwudi/382030798 State of mobile in 2007 — The year the

    iPhone was introduced
  10. The state of mobile in 2012 — Touch screens reign

    supreme
  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
  12. http://lukew.com/ff/entry.asp?1506 1,450,000 mobile devices activated 317,124 newborns begin life Each

    day, on planet Earth…
  13. http://computerworld.com/s/article/9227412/Obama_orders_agencies_to_optimize_Web_content_for_mobile

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

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

    for designer blogs anymore. Some pretty big name sites are adapting…
  16. Microsoft.com — Home page is responsive

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

  18. Time.com — Entire site is responsive

  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.
  20. Disney.com — Menu adapts, based on screen size

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

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

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

  25. None
  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
  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]-->
  28. CSS Sass Compass http://sonspring.com/journal/sass-for-designers

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

  30. http://compass-style.org

  31. Compass makes vendor prefixes easy...

  32. Compass brings sanity to gradients...

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

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

  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; } }
  36. None
  37. @media queries aren’t just for width. Also works well for

    “retina” detection…
  38. None
  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; } }
  40. None
  41. The biggest problem facing responsive design is <img> and potential

    file size. But, there’s a neat solution for JPG images, at least…
  42. None
  43. A non-exhaustive list of potentially helpful responsive CSS frameworks…

  44. None
  45. None
  46. None
  47. None
  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
  49. http://www.flickr.com/photos/sigalakos/4516917297/

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

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

  52. INNOVATION PORTAL Extended Designs

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

  55. HOME

  56. HOME

  57. MOBILE DESIGN

  58. None
  59. None
  60. None
  61. None
  62. DESKTOP DESIGN

  63. None
  64. None
  65. None
  66. None
  67. None
  68. None
  69. None
  70. None
  71. None
  72. None
  73. None
  74. None
  75. DEMO TIME! :) Also, don’t forget you can download the

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