Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Responsive Design for Complex WebsitesReality check – How does it really changethe design process?IXDA Munich Meeting08 Ap...
Lots of websites have taken aresponsive approach*…… but our challenge was a little bigger….*h$p://gravitydept.com/blog/ski...
Complete relaunch | “Flagship Store”                                             Configuration & Checkout Self-Care Area /...
Project Setup            Team            •  7 Information Architects            •  5 Visual Designers            •  100 Cl...
Reality   Common “Rules”    Check     and our approachLimitations
Rule #1                      No more Photoshop!h$p://37signals.com/svn/posts/1061-­‐why-­‐we-­‐skip-­‐photoshop	     h$p:/...
Challenge #1How would you create aprototype for a template– module system?
Challenge #2               7 IA working at               the same time
Create a standard specification for allviewports?
Trial & ErrorViewport L           Viewport M            Viewport SWe started with a pilot – detailed specification for the...
Still you might want to keep thespecification as small as possible
Solution #1The “responsive guide” holds all rulesfor responsive design.
Solution #2InDesign allowed us to work on the samespecification at the same time.
Solution #3Keep a module list for overview and alignment.
Summary: Specification setup         Module                Basic rules         specificationOverview andalignment
Rule #2       Mobile First
Challenge #3:What if your client “thinks desktop”?
How do you create responsive designwhen you work “mobile second”?
Solution #4: Floorplanning
Solution #5: Responsive PatternsList with images   Text list   Carousel   Expandable list
Summary:You can design mobile second, if…… you keep yourcontent structured –Content First!                       … your de...
Rule #3No morewaterfall!                             Developer                  Designer             IA
Challenge #4Separate budgetsfor concept anddevelopment!
Also in a waterfall process you can makeuse of “connected thinking”
Solution #6: Proof of concept
Summary:Get tech and creative connected as soonas possible – even if the track has notofficially started.Challenge and rev...
Rule #4       F!?% the pagefold!
Challenge #5“But the price is still above thefold, right?”
Communicate. Explain.
Solution #7Set “golden rules”for responsivedesign – togetherwith your client.(or other topics e.g.personalization)
Solution #8:Use devices for presentation
Summary:Get hands-on with your client.Team work!
Limitations   What did not               work so well?Limitations
Challenge #6:One size does not fit all…
Open issue:Responsive layout does not mean“optimized for all use cases”.Some aspects require separate solutionsor progress...
Challenge #7:Responsive Advertising
Open issue:Good solutions for responsive advertisingare still missing.
Learnings   In a nutshellLimitations
1. Clean specification setup2. Content first3. Connected thinking4. Hands-on with client
Thank you!Get in touchSabine BerghausE-Mail: sberghaus@sapient.comTwitter: @stadtnomadinWebsite: about.me/sabineberghaus
Image referencesPages 4, 10, 12, 13, 14, 15, 19, 20, 30, 36: Own images                                                   ...
Responsive Design for Complex Websites (IXDA Munich)
Upcoming SlideShare
Loading in …5
×

Responsive Design for Complex Websites (IXDA Munich)

2,082 views

Published on

This is a presentation I held at the IXDA Munich meeting on 08 April 2013.

Published in: Technology, Travel
  • What were the 10 Commandments that were in German?
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Responsive Design for Complex Websites (IXDA Munich)

  1. 1. Responsive Design for Complex WebsitesReality check – How does it really changethe design process?IXDA Munich Meeting08 April 2013Sabine Berghaus  
  2. 2. Lots of websites have taken aresponsive 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. 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. 4. Project Setup Team •  7 Information Architects •  5 Visual Designers •  100 Client StakeholdersTimeline: July – December 2012 Discover   Define   Deliver  •  Workshops •  Define vision •  Design Specification•  Stakeholder Interviews •  Basic concept •  Batch Process •  Design direction •  User Testing •  User Testing
  5. 5. Reality Common “Rules” Check and our approachLimitations
  6. 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. 7. Challenge #1How would you create aprototype for a template– module system?
  8. 8. Challenge #2 7 IA working at the same time
  9. 9. Create a standard specification for allviewports?
  10. 10. Trial & ErrorViewport L Viewport M Viewport SWe started with a pilot – detailed specification for thefirst workpackage …
  11. 11. Still you might want to keep thespecification as small as possible
  12. 12. Solution #1The “responsive guide” holds all rulesfor responsive design.
  13. 13. Solution #2InDesign allowed us to work on the samespecification at the same time.
  14. 14. Solution #3Keep a module list for overview and alignment.
  15. 15. Summary: Specification setup Module Basic rules specificationOverview andalignment
  16. 16. Rule #2 Mobile First
  17. 17. Challenge #3:What if your client “thinks desktop”?
  18. 18. How do you create responsive designwhen you work “mobile second”?
  19. 19. Solution #4: Floorplanning
  20. 20. Solution #5: Responsive PatternsList with images Text list Carousel Expandable list
  21. 21. Summary:You can design mobile second, if…… you keep yourcontent structured –Content First! … your define your layout with basic responsive patterns in mind.
  22. 22. Rule #3No morewaterfall! Developer Designer IA
  23. 23. Challenge #4Separate budgetsfor concept anddevelopment!
  24. 24. Also in a waterfall process you can makeuse of “connected thinking”
  25. 25. Solution #6: Proof of concept
  26. 26. Summary:Get tech and creative connected as soonas possible – even if the track has notofficially started.Challenge and review creativeconcepts.
  27. 27. Rule #4 F!?% the pagefold!
  28. 28. Challenge #5“But the price is still above thefold, right?”
  29. 29. Communicate. Explain.
  30. 30. Solution #7Set “golden rules”for responsivedesign – togetherwith your client.(or other topics e.g.personalization)
  31. 31. Solution #8:Use devices for presentation
  32. 32. Summary:Get hands-on with your client.Team work!
  33. 33. Limitations What did not work so well?Limitations
  34. 34. Challenge #6:One size does not fit all…
  35. 35. Open issue:Responsive layout does not mean“optimized for all use cases”.Some aspects require separate solutionsor progressive enhancement.
  36. 36. Challenge #7:Responsive Advertising
  37. 37. Open issue:Good solutions for responsive advertisingare still missing.
  38. 38. Learnings In a nutshellLimitations
  39. 39. 1. Clean specification setup2. Content first3. Connected thinking4. Hands-on with client
  40. 40. Thank you!Get in touchSabine BerghausE-Mail: sberghaus@sapient.comTwitter: @stadtnomadinWebsite: about.me/sabineberghaus
  41. 41. Image referencesPages 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: Genistahttp://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: NheliaBundesarchiv_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: weinstockPage 12:http://www.flickr.com/photos/romytetue/8099431861/ Page 31:By: tetue http://commons.wikimedia.org/wiki/ File:IPad_2_Smart_Cover_at_unveiling.jpgPage 17: by: Robert Scoblehttp://commons.wikimedia.org/wiki/File:IMac_aluminium.pngby: Matthieu Riegler Page 34: http://farm5.staticflickr.com/4091/5064535003_8ed0837f29_o.jpgPage 16: by: Silvarhttp://www.fotopedia.com/items/flickr-2567626636by: William Hook Page 40: http://farm4.static.flickr.com/3394/3526522573_8f40a675b6.jpgPage 22: by: walknbostonAssembly Linehttp://upload.wikimedia.org/wikipedia/commons/2/29/Ford_assembly_line_-_1913.jpgPage 23:http://www.flickr.com/photos/68751915@N05/6869762317/by: 401(K) 2013

×