Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Building a Responsive Web Design Process

1,979 views

Published on

Talk given at MidwestUX on June 1, 2012.

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

Building a Responsive Web Design Process

  1. 1. Building a ResponsiveWeb Design Process Hello! Lydia › @lydiology
  2. 2. This isn’t about writing code. But this is ›
  3. 3. What is responsive design?
  4. 4. MOBILE DESKTOP2012.dconstruct.org
  5. 5. MOBILE DESKTOPunitedpixelworkers.com
  6. 6. When to go responsive?TimeBudgetStrategy
  7. 7. How does responsivechange the design process?
  8. 8. The Website Process* Research + Strategery Content Gathering Wireframes Design Code*in a nutshell, your mileage may vary
  9. 9. The Website Process with Responsive
  10. 10. Love on the content!
  11. 11. Identify and prioritize.Content chunks!
  12. 12. Decide on breakpoints. ‹ Analytics = helpful
  13. 13. Work out a grid template(s).
  14. 14. Wireframe.
  15. 15. Content styles/patternsare your friend.
  16. 16. Desktop Mobile
  17. 17. Desktop Mobile
  18. 18. Desktop AND mobile!
  19. 19. Iterate.
  20. 20. When the developer is not thedesigner (and vice versa).
  21. 21. Doing Better Next Time.
  22. 22. Thanks!GET THIS SHOW!Slides at: slideshare.net/lydiawhiteheadA VERY SHORT LIST OF HELPFUL RESPONSIVE DESIGN TOOLS & RESOURCESwww.responsive.iswww.thismanslife.co.uk/projects/lab/responsivewireframes/www.alistapart.com/articles/responsive-web-design/www.lukew.com/ff/entry.asp?1514www.adactio.com/journal/5351/Responsive Web Design by Ethan MarcottePERSONAL PLUG@lydiologyabout.me/lydiologysmallboxweb.com

×