Uploaded byLydia Whitehead
Building a Responsive Web Design Process
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.
More Related Content
Similar to Building a Responsive Web Design Process
![Copy of Presentation - [Your Organization Name]_20250924_181258_0000.pdf](https://cdn.slidesharecdn.com/ss_thumbnails/copyofpresentation-yourorganizationname202509241812580000-251117131601-9744dd2d-thumbnail.jpg?width=640&height=640&fit=bounds)
![Laminated_Springs[1]. Machine design practice](https://cdn.slidesharecdn.com/ss_thumbnails/laminatedsprings1-251116120255-2a3c06fb-thumbnail.jpg?width=640&height=640&fit=bounds)
Building a Responsive Web Design Process
- 1. Building a Responsive WebDesign Process Hello! Lydia › @lydiology
- 2. This isn’t aboutwriting code. But this is ›
- 3. What is responsivedesign?
- 4. MOBILE DESKTOP 2012.dconstruct.org
- 5. MOBILE DESKTOP unitedpixelworkers.com
- 6. When to goresponsive? Time Budget Strategy
- 7. How does responsive changethe design process?
- 8. The Website Process* Research + Strategery Content Gathering Wireframes Design Code *in a nutshell, your mileage may vary
- 9. The Website Processwith Responsive
- 10. Love on thecontent!
- 11.
- 14. Decide on breakpoints. ‹ Analytics = helpful
- 15. Work out agrid template(s).
- 16.
- 17.
- 18. Desktop Mobile
- 19. Desktop Mobile
- 20.
- 21.
- 22. When the developeris not the designer (and vice versa).
- 24. Doing Better NextTime.
- 25. Thanks! GET THIS SHOW! Slidesat: 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