SlideShare une entreprise Scribd logo
1  sur  42
Télécharger pour lire hors ligne
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	
  
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 Stakeholders



Timeline: 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 approach

Limitations
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 #1



How would you create a
prototype for a template
– module system?
Challenge #2




               7 IA working at
               the same time
Create a standard specification for all
viewports?
Trial & Error




Viewport L           Viewport M            Viewport S




We started with a pilot – detailed specification for the
first workpackage …
Still you might want to keep the
specification as small as possible
Solution #1




The “responsive guide” holds all rules
for responsive design.
Solution #2




InDesign allowed us to work on the same
specification at the same time.
Solution #3




Keep a module list for overview and alignment.
Summary: Specification setup

         Module                Basic rules
         specification




Overview and
alignment
Rule
 #2
       Mobile First
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.
Rule
 #3

No more
waterfall!
                             Developer


                  Designer

             IA
Challenge #4




Separate budgets
for concept and
development!
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.
Rule
 #4
       F!?% the pagefold!
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   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 solutions
or progressive enhancement.
Challenge #7:
Responsive Advertising
Open issue:
Good solutions for responsive advertising
are still missing.
Learnings   In a nutshell


Limitations
1. Clean specification setup
2. Content first
3. Connected thinking
4. Hands-on with client
Responsive Design for Complex Websites (IXDA Munich)
Thank you!


Get in touch
Sabine Berghaus
E-Mail: sberghaus@sapient.com
Twitter: @stadtnomadin
Website: about.me/sabineberghaus
Image references
Pages 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: Genista
http://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: Nhelia
Bundesarchiv_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: weinstock
Page 12:
http://www.flickr.com/photos/romytetue/8099431861/
                                                            Page 31:
By: tetue
                                                            http://commons.wikimedia.org/wiki/
                                                            File:IPad_2_Smart_Cover_at_unveiling.jpg
Page 17:
                                                            by: Robert Scoble
http://commons.wikimedia.org/wiki/File:IMac_aluminium.png
by: Matthieu Riegler
                                                            Page 34:
                                                            http://farm5.staticflickr.com/4091/5064535003_8ed0837f29_o.jpg
Page 16:
                                                            by: Silvar
http://www.fotopedia.com/items/flickr-2567626636
by: William Hook
                                                            Page 40:
                                                            http://farm4.static.flickr.com/3394/3526522573_8f40a675b6.jpg
Page 22:
                                                            by: walknboston
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

Contenu connexe

Similaire à Responsive Design for Complex Websites (IXDA Munich)

Wakanda model-driven @ ICSSEA12
Wakanda model-driven @ ICSSEA12Wakanda model-driven @ ICSSEA12
Wakanda model-driven @ ICSSEA12Christophe Keromen
 
The Age of Responsive Design
The Age of Responsive DesignThe Age of Responsive Design
The Age of Responsive DesignDenise Jacobs
 
Agile, UX and The Enterprise
Agile, UX and The Enterprise Agile, UX and The Enterprise
Agile, UX and The Enterprise Lexi Thorn
 
Introduction to building wireframes
Introduction to building wireframesIntroduction to building wireframes
Introduction to building wireframesHong Qu
 
Drupal session 3 - biginlucerne.com - lessons learned
Drupal session 3 - biginlucerne.com - lessons learnedDrupal session 3 - biginlucerne.com - lessons learned
Drupal session 3 - biginlucerne.com - lessons learnedNETNODE AG
 
Hacking & everything you need to survice a hackday - Yahoo! Agency Hack Day N...
Hacking & everything you need to survice a hackday - Yahoo! Agency Hack Day N...Hacking & everything you need to survice a hackday - Yahoo! Agency Hack Day N...
Hacking & everything you need to survice a hackday - Yahoo! Agency Hack Day N...Saurabh Sahni
 
37 ways for innovation by combination
37 ways for innovation by combination37 ways for innovation by combination
37 ways for innovation by combinationMarc Heleven
 
Software craftsmanship - Imperative or Hype
Software craftsmanship - Imperative or HypeSoftware craftsmanship - Imperative or Hype
Software craftsmanship - Imperative or HypeSUGSA
 
Business of Front-end Web Development
Business of Front-end Web DevelopmentBusiness of Front-end Web Development
Business of Front-end Web DevelopmentRachel Andrew
 
Product Owner Challenge 3.0 (Agile Cambridge 2016)
Product Owner Challenge 3.0 (Agile Cambridge 2016)Product Owner Challenge 3.0 (Agile Cambridge 2016)
Product Owner Challenge 3.0 (Agile Cambridge 2016)Michael Tarnowski
 
Exercise 1.4 Social Impacts and Ethical Issues
Exercise 1.4 Social Impacts and Ethical IssuesExercise 1.4 Social Impacts and Ethical Issues
Exercise 1.4 Social Impacts and Ethical Issuesclemwj
 
jhipster-geekle-gbloch
jhipster-geekle-gblochjhipster-geekle-gbloch
jhipster-geekle-gblochGaëtan Bloch
 
Sedgwick e0498336-d0105-30536a-self check-a
Sedgwick e0498336-d0105-30536a-self check-aSedgwick e0498336-d0105-30536a-self check-a
Sedgwick e0498336-d0105-30536a-self check-aColleen Sedgwick
 
Software Craftsmanship - It's an Imperative
Software Craftsmanship - It's an ImperativeSoftware Craftsmanship - It's an Imperative
Software Craftsmanship - It's an ImperativeFadi Stephan
 

Similaire à Responsive Design for Complex Websites (IXDA Munich) (20)

Wakanda model-driven @ ICSSEA12
Wakanda model-driven @ ICSSEA12Wakanda model-driven @ ICSSEA12
Wakanda model-driven @ ICSSEA12
 
The Age of Responsive Design
The Age of Responsive DesignThe Age of Responsive Design
The Age of Responsive Design
 
Agile, UX and The Enterprise
Agile, UX and The Enterprise Agile, UX and The Enterprise
Agile, UX and The Enterprise
 
Introduction to building wireframes
Introduction to building wireframesIntroduction to building wireframes
Introduction to building wireframes
 
Drupal session 3 - biginlucerne.com - lessons learned
Drupal session 3 - biginlucerne.com - lessons learnedDrupal session 3 - biginlucerne.com - lessons learned
Drupal session 3 - biginlucerne.com - lessons learned
 
Hacking & everything you need to survice a hackday - Yahoo! Agency Hack Day N...
Hacking & everything you need to survice a hackday - Yahoo! Agency Hack Day N...Hacking & everything you need to survice a hackday - Yahoo! Agency Hack Day N...
Hacking & everything you need to survice a hackday - Yahoo! Agency Hack Day N...
 
Hacking 101
Hacking 101Hacking 101
Hacking 101
 
37 ways for innovation by combination
37 ways for innovation by combination37 ways for innovation by combination
37 ways for innovation by combination
 
Software craftsmanship - Imperative or Hype
Software craftsmanship - Imperative or HypeSoftware craftsmanship - Imperative or Hype
Software craftsmanship - Imperative or Hype
 
Business of Front-end Web Development
Business of Front-end Web DevelopmentBusiness of Front-end Web Development
Business of Front-end Web Development
 
why agile?
why agile?why agile?
why agile?
 
Product Owner Challenge 3.0 (Agile Cambridge 2016)
Product Owner Challenge 3.0 (Agile Cambridge 2016)Product Owner Challenge 3.0 (Agile Cambridge 2016)
Product Owner Challenge 3.0 (Agile Cambridge 2016)
 
Exercise 1.4 Social Impacts and Ethical Issues
Exercise 1.4 Social Impacts and Ethical IssuesExercise 1.4 Social Impacts and Ethical Issues
Exercise 1.4 Social Impacts and Ethical Issues
 
Ux1
Ux1Ux1
Ux1
 
jhipster-geekle-gbloch
jhipster-geekle-gblochjhipster-geekle-gbloch
jhipster-geekle-gbloch
 
Sedgwick e0498336-d0105-30536a-self check-a
Sedgwick e0498336-d0105-30536a-self check-aSedgwick e0498336-d0105-30536a-self check-a
Sedgwick e0498336-d0105-30536a-self check-a
 
Software Craftsmanship - It's an Imperative
Software Craftsmanship - It's an ImperativeSoftware Craftsmanship - It's an Imperative
Software Craftsmanship - It's an Imperative
 
Ade Oshineye Google
Ade Oshineye  GoogleAde Oshineye  Google
Ade Oshineye Google
 
Scale up down
Scale up downScale up down
Scale up down
 
Scale up down
Scale up downScale up down
Scale up down
 

Plus de Sabine Berghaus

Stages in Digital Business Transformation
Stages in Digital Business TransformationStages in Digital Business Transformation
Stages in Digital Business TransformationSabine Berghaus
 
The Fuzzy Front-End of Digital Transformation: Three Perspectives on the Form...
The Fuzzy Front-End of Digital Transformation: Three Perspectives on the Form...The Fuzzy Front-End of Digital Transformation: Three Perspectives on the Form...
The Fuzzy Front-End of Digital Transformation: Three Perspectives on the Form...Sabine Berghaus
 
Keynote Mobile Business Forum 2015
Keynote Mobile Business Forum 2015Keynote Mobile Business Forum 2015
Keynote Mobile Business Forum 2015Sabine Berghaus
 
Adoption of Mobile Business Solutions and its Impact on Organizational Stakeh...
Adoption of Mobile Business Solutions and its Impact on Organizational Stakeh...Adoption of Mobile Business Solutions and its Impact on Organizational Stakeh...
Adoption of Mobile Business Solutions and its Impact on Organizational Stakeh...Sabine Berghaus
 
Responsive Design - Reality Check
Responsive Design - Reality CheckResponsive Design - Reality Check
Responsive Design - Reality CheckSabine Berghaus
 
Report - Experteninterviews Mobile Digital Consumer
Report - Experteninterviews Mobile Digital ConsumerReport - Experteninterviews Mobile Digital Consumer
Report - Experteninterviews Mobile Digital ConsumerSabine Berghaus
 
Grobkonzept Indoor Navigation - Barcamp Mainz
Grobkonzept Indoor Navigation - Barcamp MainzGrobkonzept Indoor Navigation - Barcamp Mainz
Grobkonzept Indoor Navigation - Barcamp MainzSabine Berghaus
 

Plus de Sabine Berghaus (8)

Stages in Digital Business Transformation
Stages in Digital Business TransformationStages in Digital Business Transformation
Stages in Digital Business Transformation
 
The Fuzzy Front-End of Digital Transformation: Three Perspectives on the Form...
The Fuzzy Front-End of Digital Transformation: Three Perspectives on the Form...The Fuzzy Front-End of Digital Transformation: Three Perspectives on the Form...
The Fuzzy Front-End of Digital Transformation: Three Perspectives on the Form...
 
Keynote Mobile Business Forum 2015
Keynote Mobile Business Forum 2015Keynote Mobile Business Forum 2015
Keynote Mobile Business Forum 2015
 
Adoption of Mobile Business Solutions and its Impact on Organizational Stakeh...
Adoption of Mobile Business Solutions and its Impact on Organizational Stakeh...Adoption of Mobile Business Solutions and its Impact on Organizational Stakeh...
Adoption of Mobile Business Solutions and its Impact on Organizational Stakeh...
 
Responsive Design - Reality Check
Responsive Design - Reality CheckResponsive Design - Reality Check
Responsive Design - Reality Check
 
Report - Experteninterviews Mobile Digital Consumer
Report - Experteninterviews Mobile Digital ConsumerReport - Experteninterviews Mobile Digital Consumer
Report - Experteninterviews Mobile Digital Consumer
 
Mobile Digital Consumer
Mobile Digital ConsumerMobile Digital Consumer
Mobile Digital Consumer
 
Grobkonzept Indoor Navigation - Barcamp Mainz
Grobkonzept Indoor Navigation - Barcamp MainzGrobkonzept Indoor Navigation - Barcamp Mainz
Grobkonzept Indoor Navigation - Barcamp Mainz
 

Dernier

Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintMahmoud Rabie
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfinfogdgmi
 
GenAI and AI GCC State of AI_Object Automation Inc
GenAI and AI GCC State of AI_Object Automation IncGenAI and AI GCC State of AI_Object Automation Inc
GenAI and AI GCC State of AI_Object Automation IncObject Automation
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopBachir Benyammi
 
PicPay - GenAI Finance Assistant - ChatGPT for Customer Service
PicPay - GenAI Finance Assistant - ChatGPT for Customer ServicePicPay - GenAI Finance Assistant - ChatGPT for Customer Service
PicPay - GenAI Finance Assistant - ChatGPT for Customer ServiceRenan Moreira de Oliveira
 
Things you didn't know you can use in your Salesforce
Things you didn't know you can use in your SalesforceThings you didn't know you can use in your Salesforce
Things you didn't know you can use in your SalesforceMartin Humpolec
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdfPedro Manuel
 
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyesHow to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyesThousandEyes
 
Babel Compiler - Transforming JavaScript for All Browsers.pptx
Babel Compiler - Transforming JavaScript for All Browsers.pptxBabel Compiler - Transforming JavaScript for All Browsers.pptx
Babel Compiler - Transforming JavaScript for All Browsers.pptxYounusS2
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024SkyPlanner
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8DianaGray10
 
Introduction to Quantum Computing
Introduction to Quantum ComputingIntroduction to Quantum Computing
Introduction to Quantum ComputingGDSC PJATK
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1DianaGray10
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding TeamAdam Moalla
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPathCommunity
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesMd Hossain Ali
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IES VE
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesDavid Newbury
 
Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.YounusS2
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxGDSC PJATK
 

Dernier (20)

Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership Blueprint
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdf
 
GenAI and AI GCC State of AI_Object Automation Inc
GenAI and AI GCC State of AI_Object Automation IncGenAI and AI GCC State of AI_Object Automation Inc
GenAI and AI GCC State of AI_Object Automation Inc
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 Workshop
 
PicPay - GenAI Finance Assistant - ChatGPT for Customer Service
PicPay - GenAI Finance Assistant - ChatGPT for Customer ServicePicPay - GenAI Finance Assistant - ChatGPT for Customer Service
PicPay - GenAI Finance Assistant - ChatGPT for Customer Service
 
Things you didn't know you can use in your Salesforce
Things you didn't know you can use in your SalesforceThings you didn't know you can use in your Salesforce
Things you didn't know you can use in your Salesforce
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdf
 
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyesHow to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
 
Babel Compiler - Transforming JavaScript for All Browsers.pptx
Babel Compiler - Transforming JavaScript for All Browsers.pptxBabel Compiler - Transforming JavaScript for All Browsers.pptx
Babel Compiler - Transforming JavaScript for All Browsers.pptx
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8
 
Introduction to Quantum Computing
Introduction to Quantum ComputingIntroduction to Quantum Computing
Introduction to Quantum Computing
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation Developers
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond Ontologies
 
Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptx
 

Responsive Design for Complex Websites (IXDA Munich)

  • 1. Responsive Design for Complex Websites Reality check – How does it really change the design process? IXDA Munich Meeting 08 April 2013 Sabine Berghaus  
  • 2. 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  
  • 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. Project Setup Team •  7 Information Architects •  5 Visual Designers •  100 Client Stakeholders Timeline: July – December 2012 Discover   Define   Deliver   •  Workshops •  Define vision •  Design Specification •  Stakeholder Interviews •  Basic concept •  Batch Process •  Design direction •  User Testing •  User Testing
  • 5. Reality Common “Rules” Check and our approach Limitations
  • 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. Challenge #1 How would you create a prototype for a template – module system?
  • 8. Challenge #2 7 IA working at the same time
  • 9. Create a standard specification for all viewports?
  • 10. Trial & Error Viewport L Viewport M Viewport S We started with a pilot – detailed specification for the first workpackage …
  • 11. Still you might want to keep the specification as small as possible
  • 12. Solution #1 The “responsive guide” holds all rules for responsive design.
  • 13. Solution #2 InDesign allowed us to work on the same specification at the same time.
  • 14. Solution #3 Keep a module list for overview and alignment.
  • 15. Summary: Specification setup Module Basic rules specification Overview and alignment
  • 16. Rule #2 Mobile First
  • 17. Challenge #3: What if your client “thinks desktop”?
  • 18. How do you create responsive design when you work “mobile second”?
  • 20. Solution #5: Responsive Patterns List with images Text list Carousel Expandable list
  • 21. Summary: You can design mobile second, if… … you keep your content structured – Content First! … your define your layout with basic responsive patterns in mind.
  • 22. Rule #3 No more waterfall! Developer Designer IA
  • 23. Challenge #4 Separate budgets for concept and development!
  • 24. Also in a waterfall process you can make use of “connected thinking”
  • 25. Solution #6: Proof of concept
  • 26. Summary: Get tech and creative connected as soon as possible – even if the track has not officially started. Challenge and review creative concepts.
  • 27. Rule #4 F!?% the pagefold!
  • 28. Challenge #5 “But the price is still above the fold, right?”
  • 30. Solution #7 Set “golden rules” for responsive design – together with your client. (or other topics e.g. personalization)
  • 31. Solution #8: Use devices for presentation
  • 32. Summary: Get hands-on with your client. Team work!
  • 33. Limitations What did not work so well? Limitations
  • 34. Challenge #6: One size does not fit all…
  • 35. Open issue: Responsive layout does not mean “optimized for all use cases”. Some aspects require separate solutions or progressive enhancement.
  • 37. Open issue: Good solutions for responsive advertising are still missing.
  • 38. Learnings In a nutshell Limitations
  • 39. 1. Clean specification setup 2. Content first 3. Connected thinking 4. Hands-on with client
  • 41. Thank you! Get in touch Sabine Berghaus E-Mail: sberghaus@sapient.com Twitter: @stadtnomadin Website: about.me/sabineberghaus
  • 42. Image references Pages 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: Genista http://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: Nhelia Bundesarchiv_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: weinstock Page 12: http://www.flickr.com/photos/romytetue/8099431861/ Page 31: By: tetue http://commons.wikimedia.org/wiki/ File:IPad_2_Smart_Cover_at_unveiling.jpg Page 17: by: Robert Scoble http://commons.wikimedia.org/wiki/File:IMac_aluminium.png by: Matthieu Riegler Page 34: http://farm5.staticflickr.com/4091/5064535003_8ed0837f29_o.jpg Page 16: by: Silvar http://www.fotopedia.com/items/flickr-2567626636 by: William Hook Page 40: http://farm4.static.flickr.com/3394/3526522573_8f40a675b6.jpg Page 22: by: walknboston 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