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