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

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(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;
    }
    }
    

    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