Building a Responsive Web Design Process
7 likes1,205 views
This document discusses responsive web design and how it changes the design process. It recommends prioritizing content and identifying content chunks when designing for different screen sizes. Designers should decide on breakpoints and create grid templates for different device widths. The process involves wireframing and designing for both desktop and mobile simultaneously through iteration. Effective collaboration between designers and developers is important when screen sizes are considered.
Building a Responsive Web Design Process
- 1. Building a Responsive Web Design Process Hello! Lydia › @lydiology
- 2. This isn’t about writing code. But this is ›
- 3. What is responsive design?
- 4. MOBILE DESKTOP 2012.dconstruct.org
- 5. MOBILE DESKTOP unitedpixelworkers.com
- 6. When to go responsive? Time Budget Strategy
- 7. How does responsive change the design process?
- 8. The Website Process* Research + Strategery Content Gathering Wireframes Design Code *in a nutshell, your mileage may vary
- 9. The Website Process with Responsive
- 10. Love on the content!
- 11. Identify and prioritize. Content chunks!
- 14. Decide on breakpoints. ‹ Analytics = helpful
- 15. Work out a grid template(s).
- 16. Wireframe.
- 17. Content styles/patterns are your friend.
- 18. Desktop Mobile
- 19. Desktop Mobile
- 21. Iterate.
- 22. When the developer is not the designer (and vice versa).
- 24. Doing Better Next Time.
- 25. Thanks! GET THIS SHOW! Slides at: slideshare.net/lydiawhitehead A VERY SHORT LIST OF HELPFUL RESPONSIVE DESIGN TOOLS & RESOURCES www.responsive.is www.thismanslife.co.uk/projects/lab/responsivewireframes/ www.alistapart.com/articles/responsive-web-design/ www.lukew.com/ff/entry.asp?1514 www.adactio.com/journal/5351/ Responsive Web Design by Ethan Marcotte PERSONAL PLUG @lydiology about.me/lydiology smallboxweb.com
Editor's Notes
- #2: \n
- #3: \n
- #4: \n
- #5: \n
- #6: \n
- #7: it depends with an emphasis on pretty much always\nUNLESS: budget, time, skill? — STRATEGY?\n
- #8: it depends with an emphasis on pretty much always\nUNLESS: budget, time, skill? — STRATEGY?\n
- #9: it depends with an emphasis on pretty much always\nUNLESS: budget, time, skill? — STRATEGY?\n
- #10: \n
- #11: \n
- #12: \n
- #13: identify content components or content types or sections, blocks, parts\n
- #14: (a great place to get the client involved)\nremind them of this prioritization \n(and its importance) often.\n
- #15: (a great place to get the client involved)\nremind them of this prioritization \n(and its importance) often.\n
- #16: \n
- #17: \n
- #18: Keep in mind you may have a few, depending on the nature of your site.\n
- #19: We “bookended” the design desktop - mobile\n(a great place to get the client involved)\n
- #20: \n
- #21: \n
- #22: \n
- #23: \n
- #24: \n
- #25: 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
- #26: \n
- #27: -we probably could have gotten to the code sooner\n-responsive.is\n-Twitter bootstrap?\n
- #28: \n