Responsive Design for Complex Websites (IXDA Munich)
6 likes2,750 views
This document discusses responsive design for complex websites. It outlines some common rules and challenges when taking a responsive approach. These include using tools like InDesign instead of Photoshop, keeping content structured with basic responsive patterns, and getting technical and creative teams connected early through concepts and testing. The presentation aims to help others learn from their experience designing a large responsive redesign project.
Responsive Design for Complex Websites (IXDA Munich)
- 1. Responsive Design for Complex Websites Reality check – How does it really change the design process? IXDA Munich Meeting 08 April 2013 Sabine Berghaus
- 2. Lots of websites have taken a responsive approach*… … but our challenge was a little bigger…. *h$p://gravitydept.com/blog/skinny-‐;es-‐and-‐responsive-‐ecommerce/?utm_source=Responsive+Design +Weekly&utm_campaign=18bf5a122f-‐RWD_interview_6&utm_medium=email
- 3. Complete relaunch | “Flagship Store” Configuration & Checkout Self-Care Area / Customer Center Help Center Brand experience Product description News & Specials Media Center (Video Content) Magazine
- 4. Project Setup Team • 7 Information Architects • 5 Visual Designers • 100 Client Stakeholders Timeline: July – December 2012 Discover Define Deliver • Workshops • Define vision • Design Specification • Stakeholder Interviews • Basic concept • Batch Process • Design direction • User Testing • User Testing
- 5. Reality Common “Rules” Check and our approach Limitations
- 6. Rule #1 No more Photoshop! h$p://37signals.com/svn/posts/1061-‐why-‐we-‐skip-‐photoshop h$p://www.youtube.com/watch?v=6e3m9qRj67o
- 7. Challenge #1 How would you create a prototype for a template – module system?
- 8. Challenge #2 7 IA working at the same time
- 9. Create a standard specification for all viewports?
- 10. Trial & Error Viewport L Viewport M Viewport S We started with a pilot – detailed specification for the first workpackage …
- 11. Still you might want to keep the specification as small as possible
- 12. Solution #1 The “responsive guide” holds all rules for responsive design.
- 13. Solution #2 InDesign allowed us to work on the same specification at the same time.
- 14. Solution #3 Keep a module list for overview and alignment.
- 15. Summary: Specification setup Module Basic rules specification Overview and alignment
- 16. Rule #2 Mobile First
- 17. Challenge #3: What if your client “thinks desktop”?
- 18. How do you create responsive design when you work “mobile second”?
- 20. Solution #5: Responsive Patterns List with images Text list Carousel Expandable list
- 21. Summary: You can design mobile second, if… … you keep your content structured – Content First! … your define your layout with basic responsive patterns in mind.
- 22. Rule #3 No more waterfall! Developer Designer IA
- 23. Challenge #4 Separate budgets for concept and development!
- 24. Also in a waterfall process you can make use of “connected thinking”
- 25. Solution #6: Proof of concept
- 26. Summary: Get tech and creative connected as soon as possible – even if the track has not officially started. Challenge and review creative concepts.
- 27. Rule #4 F!?% the pagefold!
- 28. Challenge #5 “But the price is still above the fold, right?”
- 30. Solution #7 Set “golden rules” for responsive design – together with your client. (or other topics e.g. personalization)
- 31. Solution #8: Use devices for presentation
- 32. Summary: Get hands-on with your client. Team work!
- 33. Limitations What did not work so well? Limitations
- 34. Challenge #6: One size does not fit all…
- 35. Open issue: Responsive layout does not mean “optimized for all use cases”. Some aspects require separate solutions or progressive enhancement.
- 37. Open issue: Good solutions for responsive advertising are still missing.
- 38. Learnings In a nutshell Limitations
- 39. 1. Clean specification setup 2. Content first 3. Connected thinking 4. Hands-on with client
- 41. Thank you! Get in touch Sabine Berghaus E-Mail: sberghaus@sapient.com Twitter: @stadtnomadin Website: about.me/sabineberghaus
- 42. Image references Pages 4, 10, 12, 13, 14, 15, 19, 20, 30, 36: Own images Page 25: http://www.flickr.com/photos/genista/4449316/sizes/o/ Page 3: by: Genista http://www.flickr.com/photos/kinghuang/3234346294/ by: King Chung Huang Page 27: Page 8: http://pixabay.com/en/book-origami-paper-folded-fold-58444/ http://upload.wikimedia.org/wikipedia/commons/0/06/ by: Nhelia Bundesarchiv_Bild_183-61419-0001,_VEB_Th %C3%BCringer_Bekleidungswerk_Erfurt,_Brigade.jpg Page 28: by: Hecker http://pixabay.com/en/number-digit-folding-rule-measure-92412/ by: weinstock Page 12: http://www.flickr.com/photos/romytetue/8099431861/ Page 31: By: tetue http://commons.wikimedia.org/wiki/ File:IPad_2_Smart_Cover_at_unveiling.jpg Page 17: by: Robert Scoble http://commons.wikimedia.org/wiki/File:IMac_aluminium.png by: Matthieu Riegler Page 34: http://farm5.staticflickr.com/4091/5064535003_8ed0837f29_o.jpg Page 16: by: Silvar http://www.fotopedia.com/items/flickr-2567626636 by: William Hook Page 40: http://farm4.static.flickr.com/3394/3526522573_8f40a675b6.jpg Page 22: by: walknboston Assembly Line http://upload.wikimedia.org/wikipedia/commons/2/29/ Ford_assembly_line_-_1913.jpg Page 23: http://www.flickr.com/photos/68751915@N05/6869762317/ by: 401(K) 2013