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,477 views

Published on

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

Published in: Technology, Travel
  • My friend sent me a link to to tis site. This awesome company. They wrote my entire research paper for me, and it turned out brilliantly. I highly recommend this service to anyone in my shoes. ⇒ www.HelpWriting.net ⇐.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THE BOOK INTO AVAILABLE FORMAT (New Update) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://soo.gd/irt2 } ......................................................................................................................... Download Full EPUB Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download Full doc Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download PDF EBOOK here { https://soo.gd/irt2 } ......................................................................................................................... Download EPUB Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download doc Ebook here { https://soo.gd/irt2 } ......................................................................................................................... ......................................................................................................................... ................................................................................................................................... eBook is an electronic version of a traditional print book THE can be read by using a personal computer or by using an eBook reader. (An eBook reader can be a software application for use on a computer such as Microsoft's free Reader application, or a book-sized computer THE is used solely as a reading device such as Nuvomedia's Rocket eBook.) Users can purchase an eBook on diskette or CD, but the most popular method of getting an eBook is to purchase a downloadable file of the eBook (or other reading material) from a Web site (such as Barnes and Noble) to be read from the user's computer or reading device. Generally, an eBook can be downloaded in five minutes or less ......................................................................................................................... .............. Browse by Genre Available eBOOK .............................................................................................................................. Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, CookBOOK, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult, Crime, EBOOK, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, ......................................................................................................................... ......................................................................................................................... .....BEST SELLER FOR EBOOK RECOMMEND............................................................. ......................................................................................................................... Blowout: Corrupted Democracy, Rogue State Russia, and the Richest, Most Destructive Industry on Earth,-- The Ride of a Lifetime: Lessons Learned from 15 Years as CEO of the Walt Disney Company,-- Call Sign Chaos: Learning to Lead,-- StrengthsFinder 2.0,-- Stillness Is the Key,-- She Said: Breaking the Sexual Harassment Story THE Helped Ignite a Movement,-- Atomic Habits: An Easy & Proven Way to Build Good Habits & Break Bad Ones,-- Everything Is Figureoutable,-- What It Takes: Lessons in the Pursuit of Excellence,-- Rich Dad Poor Dad: What the Rich Teach Their Kids About Money THE the Poor and Middle Class Do Not!,-- The Total Money Makeover: Classic Edition: A Proven Plan for Financial Fitness,-- Shut Up and Listen!: Hard Business Truths THE Will Help You Succeed, ......................................................................................................................... .........................................................................................................................
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THE BOOK INTO AVAILABLE FORMAT (New Update) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://soo.gd/irt2 } ......................................................................................................................... Download Full EPUB Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download Full doc Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download PDF EBOOK here { https://soo.gd/irt2 } ......................................................................................................................... Download EPUB Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download doc Ebook here { https://soo.gd/irt2 } ......................................................................................................................... ......................................................................................................................... ................................................................................................................................... eBook is an electronic version of a traditional print book THE can be read by using a personal computer or by using an eBook reader. (An eBook reader can be a software application for use on a computer such as Microsoft's free Reader application, or a book-sized computer THE is used solely as a reading device such as Nuvomedia's Rocket eBook.) Users can purchase an eBook on diskette or CD, but the most popular method of getting an eBook is to purchase a downloadable file of the eBook (or other reading material) from a Web site (such as Barnes and Noble) to be read from the user's computer or reading device. Generally, an eBook can be downloaded in five minutes or less ......................................................................................................................... .............. Browse by Genre Available eBOOK .............................................................................................................................. Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, CookBOOK, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult, Crime, EBOOK, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, ......................................................................................................................... ......................................................................................................................... .....BEST SELLER FOR EBOOK RECOMMEND............................................................. ......................................................................................................................... Blowout: Corrupted Democracy, Rogue State Russia, and the Richest, Most Destructive Industry on Earth,-- The Ride of a Lifetime: Lessons Learned from 15 Years as CEO of the Walt Disney Company,-- Call Sign Chaos: Learning to Lead,-- StrengthsFinder 2.0,-- Stillness Is the Key,-- She Said: Breaking the Sexual Harassment Story THE Helped Ignite a Movement,-- Atomic Habits: An Easy & Proven Way to Build Good Habits & Break Bad Ones,-- Everything Is Figureoutable,-- What It Takes: Lessons in the Pursuit of Excellence,-- Rich Dad Poor Dad: What the Rich Teach Their Kids About Money THE the Poor and Middle Class Do Not!,-- The Total Money Makeover: Classic Edition: A Proven Plan for Financial Fitness,-- Shut Up and Listen!: Hard Business Truths THE Will Help You Succeed, ......................................................................................................................... .........................................................................................................................
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • 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

×