A Responsive Project Process

2,839 views

Published on

We'll go beyond the ems, percentages and media queries by sharing how responsive design has affected how we approach and practice analysis, content, wireframes, design, testing and site delivery from a more holistic point of view. Presented by Dave Ruse.

Published in: Technology, Business
  • Be the first to comment

A Responsive Project Process

  1. 1. Design & User ExperienceA Responsive Process Presented by Dave Ruse
  2. 2. Dave RuseWeb DesignerPhase2 Technology
  3. 3. A Responsive ProcessA ResponsiveProcess A Responsive Process A Responsive Process
  4. 4. Nearly 7 percent of all online purchases were made using iPads, just 18 months after thetablet computers were released by Apple Inc. http://www.businessinsider.com/online-shopping-jumps-164-pct-on-christmas-day-2011-1222-25% of US and UK mobile Internet browsersnever or infrequently use the desktop Internet. http://www.lukew.com/ff/entry.asp?14051.45M devices shipped per day - 317,124 births http://www.lukew.com/ff/entry.asp?1506
  5. 5. http://www.flickr.com/photos/kenleewrites/4770358603/
  6. 6. “The role of the designer, isthat of a very good, thoughtfulhost, all of whose energy goesinto trying to anticipate theneeds of his guests.Charles Eames
  7. 7. This changes everythinga lot.
  8. 8. Setting the Stage
  9. 9. Within yourproject team. http://www.flickr.com/photos/elstudio/3532534210/
  10. 10. http://farm3.staticflickr.com/2220/2520224926_3cc57b
  11. 11. http://www.flickr.com/photos/alismith44/269843032/
  12. 12. Copy
  13. 13. Check out the links in IMPORTANT LINKS Here’s a linkthe sidebar for more Another link So many linksinformation.
  14. 14. Check out the links inthe sidebar for moreinformation.IMPORTANT LINKSHere’s a linkAnother linkSo many links
  15. 15. Use Caution WhenHiding Content
  16. 16. Images
  17. 17. Video
  18. 18. Ads
  19. 19. Wireframes
  20. 20. Prototype
  21. 21. http://dropbox.headscapedev.com/projects/wireframes/demo.htm
  22. 22. http://dropbox.headscapedev.com/projects/wireframes/demo.htm
  23. 23. Design
  24. 24. “The tool doesn’t makethe craftsman.Oliver Reichenstein
  25. 25. Style Tiles
  26. 26. or
  27. 27. and
  28. 28. FIDELITY FLEXIBILITY
  29. 29. Internal Reviews
  30. 30. Development
  31. 31. Drupal
  32. 32. Testing
  33. 33. Bandwidth http://www.flickr.com/photos/magicdaddy/3679257428/
  34. 34. Handoff http://www.flickr.com/photos/denverjeffrey/3989287247/
  35. 35. http://www.flickr.com/photos/stevendepolo/5749192621/
  36. 36. Thanks!@daveruse
  37. 37. ?
  38. 38. ResourcesResponsive Web Design - Ethan Marcottehttp://www.abookapart.com/products/responsive-web-designMobile First - Luke Wroblewskihttp://www.abookapart.com/products/mobile-firstResponsive Text - Frankie Robertohttp://www.frankieroberto.com/responsive_textResponsive Video - Fitvid.jshttp://fitvidsjs.com/Ads and Responsive Web Designhttp://blog.jonphillips.ca/2012/01/17/ads-and-responsive-web-design/Wireframes in the Browserhttp://dropbox.headscapedev.com/projects/wireframes/demo.htmStyle Tileshttp://www.styletil.es
  39. 39. BBC Style Guidehttp://www.bbc.co.uk/gel/Death of a Cut Up Man - Josh Cooperhttp://www.agileapproach.com/blog-entry/death-of-a-cut-up-manTest on Real Mobile Devices Without Breaking the Bank - Brad Frosthttp://bradfrostweb.com/blog/mobile/test-on-real-mobile-devices-without-breaking-the-bank/Strategies for Choosing Test Deviceshttp://stephanierieger.com/strategies-for-choosing-test-devices/How Much Does A One-Second Page Load Delay Cost?http://www.readwriteweb.com/archives/infographic_how_much_does_a_one-second_page_load_d.phpLimit Bandwidth to Your Mac/PChttp://osxdaily.com/2009/08/19/limit-connection-bandwidth-with-speedlimit/http://www.netlimiter.com/Starbucks Style Guidehttp://www.starbucks.com/static/reference/styleguide/
  40. 40. What did you think? Locate this session on the DrupalCon Denver websitehttp://denver2012.drupal.org/program Click the “Take the Survey” link. Thank You!

×