Responsive Design for Complex Websites Reality check – How does it really change the design process?
IXDA Munich Meeting 08 April 2013 Sabine Berghaus
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
Product description
Configuration & Checkout
Media Center (Video Content)
Help Center
Self-Care Area / Customer Center
News & Specials
Magazine
Brand experience
Complete relaunch | “Flagship Store”
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
Limitations
Reality Check
Common “Rules” and our approach
No more Photoshop! Rule #1
h$p://37signals.com/svn/posts/1061-‐why-‐we-‐skip-‐photoshop h$p://www.youtube.com/watch?v=6e3m9qRj67o
How would you create a prototype for a template – module system?
Challenge #1
7 IA working at the same time
Challenge #2
Create a standard specification for all viewports?
We started with a pilot – detailed specification for the first workpackage …
Viewport L Viewport M Viewport S
Trial & Error
Still you might want to keep the specification as small as possible
Solution #1
The “responsive guide” holds all rules for responsive design.
InDesign allowed us to work on the same specification at the same time.
Solution #2
Keep a module list for overview and alignment.
Solution #3
Summary: Specification setup
Basic rules Module specification
Overview and alignment
Mobile First Rule #2
Challenge #3: What if your client “thinks desktop”?
How do you create responsive design when you work “mobile second”?
Solution #4: Floorplanning
Solution #5: Responsive Patterns
List with images Text list Carousel Expandable list
Summary: You can design mobile second, if…
… you keep your content structured – Content First!
… your define your layout with basic responsive patterns in mind.
No more waterfall!
Rule #3
IA
Designer
Developer
Separate budgets for concept and development!
Challenge #4
Also in a waterfall process you can make use of “connected thinking”
Solution #6: Proof of concept
Summary:
Get tech and creative connected as soon as possible – even if the track has not officially started. Challenge and review creative concepts.
F!?% the pagefold! Rule #4
Challenge #5 “But the price is still above the fold, right?”
Communicate. Explain.
Solution #7
Set “golden rules” for responsive design – together with your client. (or other topics e.g. personalization)
Solution #8: Use devices for presentation
Summary:
Get hands-on with your client. Team work!
Limitations
Limitations What did not work so well?
Challenge #6: One size does not fit all…
Open issue: Responsive layout does not mean “optimized for all use cases”. Some aspects require separate solutions or progressive enhancement.
Challenge #7: Responsive Advertising
Open issue: Good solutions for responsive advertising are still missing.
Limitations
Learnings In a nutshell
1. Clean specification setup
2. Content first
3. Connected thinking
4. Hands-on with client
Get in touch
Sabine Berghaus E-Mail: [email protected] Twitter: @stadtnomadin Website: about.me/sabineberghaus
Thank you!
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
Recommended