Proactive Responsive Design

3,438 views

Published on

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

Published in: Design

Proactive Responsive Design

  1. 1. ProactiveResponsive Design Dallas Society of Visual Communications Wednesday — October 24, 2012 http://flickr.com/photos/63631877@N00/3937964101
  2. 2. We work as designers/devs atNathan Smith Mark Sims Mike TownsonPrincipal UI Architect UI Developer UX Designer http://www.projekt202.com
  3. 3. Relax, don’t stress outtaking notes. You canget the slides here…http://j.mp/pro-rwd
  4. 4. Front-end development is like playing midfield. It’s the“glue” that connects visual design with the server-side.
  5. 5. The term “Responsive Web Design”was coined by Ethan Marcotte, in anan article published by A List Apart.Loosely defined, it means adaptingto various screen sizes, using a fluidgrid and @media queries in CSS.
  6. 6. Ethan also wrote a book… http://www.abookapart.com/products/responsive-web-design
  7. 7. When should you use RWD™?Responsive web design using @media queries (with onecodebase for all devices) typically works best for web“sites” (not apps). Apps work best when tailored to oneparticular interaction paradigm. For instance, mobileGmail is a different experience than on the desktop.As a general rule of thumb, if your content can be readvia RSS (such as Google Reader) and still make sense, itmight be worth considering a responsive approach.
  8. 8. State of mobile in 2007 — The year the iPhone was introduced http://flickr.com/photos/djwudi/382030798
  9. 9. The state of mobile in 2012 — Touch screens reign supreme
  10. 10. The one thing all these phones havein common (besides Angry Birds) isthey all have decent web browsers. http://paulirish.com/2010/high-res-browser-icons
  11. 11. Each day, on planet Earth…1,450,000mobile devices activated 317,124 newborns begin life http://lukew.com/ff/entry.asp?1506
  12. 12. http://computerworld.com/s/article/9227412/Obama_orders_agencies_to_optimize_Web_content_for_mobile
  13. 13. “Obama orders agencies to optimize Web content for mobile” http://flickr.com/photos/whitehouse/7161178504
  14. 14. Essentially, “responsive” hasbroken into the mainstream.It ain’t just for designer blogsanymore. Some pretty bigname sites are adapting…
  15. 15. Microsoft.com — Home page is responsive
  16. 16. Grammy.com — Most of the site is responsive
  17. 17. Time.com — Entire site is responsive
  18. 18. Disney.com — Entire site is responsiveThere 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.
  19. 19. Disney.com — Menu adapts, based on screen size
  20. 20. Pepsi Innovation — Entire site is responsive http://innovation.capturaonline.com
  21. 21. Pepsi Innovation — Entire site is responsive http://innovation.capturaonline.com
  22. 22. Like accessibility, RWD works best with advanced planning…#FAIL
  23. 23. // 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
  24. 24. // 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]-->
  25. 25. CSS Sass Compass http://sonspring.com/journal/sass-for-designers
  26. 26. Neatly organized *.sass CSS served to browser http://thingsorganizedneatly.tumblr.com/post/9494864300/submission-the-compulsively-tidy-ursus-wehrli
  27. 27. http://compass-style.org
  28. 28. Compass makes vendor prefixes easy...
  29. 29. Compass brings sanity to gradients...
  30. 30. Handlebbbarsdemo of Handlebars.jsand the Dribbble API http://host.sonspring.com/handlebbbars
  31. 31. Sweet, responsive Handlebbbars action http://host.sonspring.com/handlebbbars
  32. 32. @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; }}
  33. 33. @media queriesaren’t just for width.Also works well for“retina” detection…
  34. 34. @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; }}
  35. 35. The biggest problem facingresponsive design is <img>and potential file size.But, there’s a neat solutionfor JPG images, at least…
  36. 36. A non-exhaustivelist of potentiallyhelpful responsiveCSS frameworks…
  37. 37. Elements that rely only on mousemove,mouseover, mouseout or the CSS pseudo-class :hover may not always behave asexpected on a touch-screen device suchas iPad or iPhone. — Apple Reference Library http://trentwalton.com/2010/07/05/non-hover
  38. 38. http://www.flickr.com/photos/sigalakos/4516917297/
  39. 39. Be concise, for people on-the-go (mobile)…http://presentationzen.com/presentationzen/2010/08/a-long-time-ago-before-death-by-powerpoint.html
  40. 40. Resist the temptation of information overload…http://presentationzen.com/presentationzen/2010/08/a-long-time-ago-before-death-by-powerpoint.html
  41. 41. INNOVATION PORTAL Extended Designs
  42. 42. SIDE BY SIDEThe differences of Mobile vs. Desktop
  43. 43. HOME
  44. 44. HOME
  45. 45. MOBILE DESIGN
  46. 46. DESKTOP DESIGN
  47. 47. DEMO TIME! :)Also, don’t forget you candownload the slides here… http://j.mp/pro-rwd

×