Responsive Design for Complex Websites (IXDA Munich)
Upcoming SlideShare
Loading in...5
×
 

Responsive Design for Complex Websites (IXDA Munich)

on

  • 1,072 views

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

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

Statistics

Views

Total Views
1,072
Views on SlideShare
917
Embed Views
155

Actions

Likes
5
Downloads
29
Comments
1

5 Embeds 155

http://querweb.wordpress.com 86
http://www.krautsource.info 56
http://www.linkedin.com 6
https://twitter.com 4
http://thedigitalflaneur.com 3

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • What were the 10 Commandments that were in German?
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Responsive Design for Complex Websites (IXDA Munich) Responsive Design for Complex Websites (IXDA Munich) Presentation Transcript

  • Responsive Design for Complex WebsitesReality check – How does it really changethe design process?IXDA Munich Meeting08 April 2013Sabine Berghaus  
  • 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  
  • Complete relaunch | “Flagship Store” Configuration & Checkout Self-Care Area / Customer Center Help Center Brand experience Product description News & Specials Media Center (Video Content) Magazine
  • 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
  • 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://www.youtube.com/watch?v=6e3m9qRj67o  
  • 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 thefirst workpackage …
  • 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 define your layout with basic responsive patterns in mind.
  • 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 review creativeconcepts.
  • 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 progressive enhancement.
  • 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 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