SlideShare ist ein Scribd-Unternehmen logo
1 von 42
Downloaden Sie, um offline zu lesen
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
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

Weitere ähnliche Inhalte

Ähnlich wie 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
 

Ähnlich wie 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
 

Mehr von 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
 

Mehr von 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
 

Kürzlich hochgeladen

The State of Passkeys with FIDO Alliance.pptx
The State of Passkeys with FIDO Alliance.pptxThe State of Passkeys with FIDO Alliance.pptx
The State of Passkeys with FIDO Alliance.pptxLoriGlavin3
 
Emixa Mendix Meetup 11 April 2024 about Mendix Native development
Emixa Mendix Meetup 11 April 2024 about Mendix Native developmentEmixa Mendix Meetup 11 April 2024 about Mendix Native development
Emixa Mendix Meetup 11 April 2024 about Mendix Native developmentPim van der Noll
 
Digital Identity is Under Attack: FIDO Paris Seminar.pptx
Digital Identity is Under Attack: FIDO Paris Seminar.pptxDigital Identity is Under Attack: FIDO Paris Seminar.pptx
Digital Identity is Under Attack: FIDO Paris Seminar.pptxLoriGlavin3
 
Genislab builds better products and faster go-to-market with Lean project man...
Genislab builds better products and faster go-to-market with Lean project man...Genislab builds better products and faster go-to-market with Lean project man...
Genislab builds better products and faster go-to-market with Lean project man...Farhan Tariq
 
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptxUse of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptxLoriGlavin3
 
React Native vs Ionic - The Best Mobile App Framework
React Native vs Ionic - The Best Mobile App FrameworkReact Native vs Ionic - The Best Mobile App Framework
React Native vs Ionic - The Best Mobile App FrameworkPixlogix Infotech
 
Connecting the Dots for Information Discovery.pdf
Connecting the Dots for Information Discovery.pdfConnecting the Dots for Information Discovery.pdf
Connecting the Dots for Information Discovery.pdfNeo4j
 
Long journey of Ruby standard library at RubyConf AU 2024
Long journey of Ruby standard library at RubyConf AU 2024Long journey of Ruby standard library at RubyConf AU 2024
Long journey of Ruby standard library at RubyConf AU 2024Hiroshi SHIBATA
 
2024 April Patch Tuesday
2024 April Patch Tuesday2024 April Patch Tuesday
2024 April Patch TuesdayIvanti
 
Abdul Kader Baba- Managing Cybersecurity Risks and Compliance Requirements i...
Abdul Kader Baba- Managing Cybersecurity Risks  and Compliance Requirements i...Abdul Kader Baba- Managing Cybersecurity Risks  and Compliance Requirements i...
Abdul Kader Baba- Managing Cybersecurity Risks and Compliance Requirements i...itnewsafrica
 
Bridging Between CAD & GIS: 6 Ways to Automate Your Data Integration
Bridging Between CAD & GIS:  6 Ways to Automate Your Data IntegrationBridging Between CAD & GIS:  6 Ways to Automate Your Data Integration
Bridging Between CAD & GIS: 6 Ways to Automate Your Data Integrationmarketing932765
 
A Framework for Development in the AI Age
A Framework for Development in the AI AgeA Framework for Development in the AI Age
A Framework for Development in the AI AgeCprime
 
Testing tools and AI - ideas what to try with some tool examples
Testing tools and AI - ideas what to try with some tool examplesTesting tools and AI - ideas what to try with some tool examples
Testing tools and AI - ideas what to try with some tool examplesKari Kakkonen
 
Scale your database traffic with Read & Write split using MySQL Router
Scale your database traffic with Read & Write split using MySQL RouterScale your database traffic with Read & Write split using MySQL Router
Scale your database traffic with Read & Write split using MySQL RouterMydbops
 
Potential of AI (Generative AI) in Business: Learnings and Insights
Potential of AI (Generative AI) in Business: Learnings and InsightsPotential of AI (Generative AI) in Business: Learnings and Insights
Potential of AI (Generative AI) in Business: Learnings and InsightsRavi Sanghani
 
Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...
Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...
Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...BookNet Canada
 
Glenn Lazarus- Why Your Observability Strategy Needs Security Observability
Glenn Lazarus- Why Your Observability Strategy Needs Security ObservabilityGlenn Lazarus- Why Your Observability Strategy Needs Security Observability
Glenn Lazarus- Why Your Observability Strategy Needs Security Observabilityitnewsafrica
 
Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24
Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24
Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24Mark Goldstein
 
Design pattern talk by Kaya Weers - 2024 (v2)
Design pattern talk by Kaya Weers - 2024 (v2)Design pattern talk by Kaya Weers - 2024 (v2)
Design pattern talk by Kaya Weers - 2024 (v2)Kaya Weers
 
Generative AI - Gitex v1Generative AI - Gitex v1.pptx
Generative AI - Gitex v1Generative AI - Gitex v1.pptxGenerative AI - Gitex v1Generative AI - Gitex v1.pptx
Generative AI - Gitex v1Generative AI - Gitex v1.pptxfnnc6jmgwh
 

Kürzlich hochgeladen (20)

The State of Passkeys with FIDO Alliance.pptx
The State of Passkeys with FIDO Alliance.pptxThe State of Passkeys with FIDO Alliance.pptx
The State of Passkeys with FIDO Alliance.pptx
 
Emixa Mendix Meetup 11 April 2024 about Mendix Native development
Emixa Mendix Meetup 11 April 2024 about Mendix Native developmentEmixa Mendix Meetup 11 April 2024 about Mendix Native development
Emixa Mendix Meetup 11 April 2024 about Mendix Native development
 
Digital Identity is Under Attack: FIDO Paris Seminar.pptx
Digital Identity is Under Attack: FIDO Paris Seminar.pptxDigital Identity is Under Attack: FIDO Paris Seminar.pptx
Digital Identity is Under Attack: FIDO Paris Seminar.pptx
 
Genislab builds better products and faster go-to-market with Lean project man...
Genislab builds better products and faster go-to-market with Lean project man...Genislab builds better products and faster go-to-market with Lean project man...
Genislab builds better products and faster go-to-market with Lean project man...
 
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptxUse of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
Use of FIDO in the Payments and Identity Landscape: FIDO Paris Seminar.pptx
 
React Native vs Ionic - The Best Mobile App Framework
React Native vs Ionic - The Best Mobile App FrameworkReact Native vs Ionic - The Best Mobile App Framework
React Native vs Ionic - The Best Mobile App Framework
 
Connecting the Dots for Information Discovery.pdf
Connecting the Dots for Information Discovery.pdfConnecting the Dots for Information Discovery.pdf
Connecting the Dots for Information Discovery.pdf
 
Long journey of Ruby standard library at RubyConf AU 2024
Long journey of Ruby standard library at RubyConf AU 2024Long journey of Ruby standard library at RubyConf AU 2024
Long journey of Ruby standard library at RubyConf AU 2024
 
2024 April Patch Tuesday
2024 April Patch Tuesday2024 April Patch Tuesday
2024 April Patch Tuesday
 
Abdul Kader Baba- Managing Cybersecurity Risks and Compliance Requirements i...
Abdul Kader Baba- Managing Cybersecurity Risks  and Compliance Requirements i...Abdul Kader Baba- Managing Cybersecurity Risks  and Compliance Requirements i...
Abdul Kader Baba- Managing Cybersecurity Risks and Compliance Requirements i...
 
Bridging Between CAD & GIS: 6 Ways to Automate Your Data Integration
Bridging Between CAD & GIS:  6 Ways to Automate Your Data IntegrationBridging Between CAD & GIS:  6 Ways to Automate Your Data Integration
Bridging Between CAD & GIS: 6 Ways to Automate Your Data Integration
 
A Framework for Development in the AI Age
A Framework for Development in the AI AgeA Framework for Development in the AI Age
A Framework for Development in the AI Age
 
Testing tools and AI - ideas what to try with some tool examples
Testing tools and AI - ideas what to try with some tool examplesTesting tools and AI - ideas what to try with some tool examples
Testing tools and AI - ideas what to try with some tool examples
 
Scale your database traffic with Read & Write split using MySQL Router
Scale your database traffic with Read & Write split using MySQL RouterScale your database traffic with Read & Write split using MySQL Router
Scale your database traffic with Read & Write split using MySQL Router
 
Potential of AI (Generative AI) in Business: Learnings and Insights
Potential of AI (Generative AI) in Business: Learnings and InsightsPotential of AI (Generative AI) in Business: Learnings and Insights
Potential of AI (Generative AI) in Business: Learnings and Insights
 
Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...
Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...
Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...
 
Glenn Lazarus- Why Your Observability Strategy Needs Security Observability
Glenn Lazarus- Why Your Observability Strategy Needs Security ObservabilityGlenn Lazarus- Why Your Observability Strategy Needs Security Observability
Glenn Lazarus- Why Your Observability Strategy Needs Security Observability
 
Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24
Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24
Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24
 
Design pattern talk by Kaya Weers - 2024 (v2)
Design pattern talk by Kaya Weers - 2024 (v2)Design pattern talk by Kaya Weers - 2024 (v2)
Design pattern talk by Kaya Weers - 2024 (v2)
 
Generative AI - Gitex v1Generative AI - Gitex v1.pptx
Generative AI - Gitex v1Generative AI - Gitex v1.pptxGenerative AI - Gitex v1Generative AI - Gitex v1.pptx
Generative AI - Gitex v1Generative AI - Gitex v1.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
  • 40.
  • 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