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
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.
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
24. Like accessibility, RWD works best with advanced planning… #FAIL
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; } }
37. @media queries aren’t just for width. Also works well for “retina” detection…
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; } }
41. The biggest problem facing responsive design is <img> and potential file size. But, there’s a neat solution for JPG images, at least…
43. A non-exhaustive list of potentially helpful responsive CSS frameworks…
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
54. SIDE BY SIDE The differences of Mobile vs. Desktop
55. HOME
56. HOME
57. MOBILE DESIGN
62. DESKTOP DESIGN
75. DEMO TIME! :) Also, don’t forget you can download the slides here… http://j.mp/pro-rwd