Responsive Design for Complex Websites (IXDA Munich)

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