Responsive Design for Complex Websites (IXDA Munich)

1,495 views
1,398 views

Published on

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

Published in: Technology, Travel
1 Comment
5 Likes
Statistics
Notes
  • What were the 10 Commandments that were in German?
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
1,495
On SlideShare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
32
Comments
1
Likes
5
Embeds 0
No embeds

No notes for slide

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

×