Building a Responsive Web Design Process

1,904 views

Published on

Talk given at MidwestUX on June 1, 2012.

Published in: Design, Business, Technology
0 Comments
6 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,904
On SlideShare
0
From Embeds
0
Number of Embeds
62
Actions
Shares
0
Downloads
0
Comments
0
Likes
6
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • it depends with an emphasis on pretty much always\nUNLESS: budget, time, skill? — STRATEGY?\n
  • it depends with an emphasis on pretty much always\nUNLESS: budget, time, skill? — STRATEGY?\n
  • it depends with an emphasis on pretty much always\nUNLESS: budget, time, skill? — STRATEGY?\n
  • \n
  • \n
  • \n
  • identify content components or content types or sections, blocks, parts\n
  • (a great place to get the client involved)\nremind them of this prioritization \n(and its importance) often.\n
  • (a great place to get the client involved)\nremind them of this prioritization \n(and its importance) often.\n
  • \n
  • \n
  • Keep in mind you may have a few, depending on the nature of your site.\n
  • We “bookended” the design desktop - mobile\n(a great place to get the client involved)\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • I’m designer who knows and can code, our developer can design.\n\n(communicating the design. instead of creating PSDs for each\nscreen, we created mobile styles for that “breakpoint” and communicated and \nannotated the desktop version)\n
  • \n
  • -we probably could have gotten to the code sooner\n-responsive.is\n-Twitter bootstrap?\n
  • \n
  • 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

    ×