• 1. ResponsiveDesignVorgehen und Fallstricke
  • 2. Wer?Marcel Zimmermann -Senior Konzepterwww.cybay.de@dicomar@cybaynewmedia
  • 3. lese ich späterhabe ichgelesen1996 2012
  • 4. lese ich späterhabe ichgelesen1996 2012
  • 5. Bradfrostweb.com
  • 6. HürdeIdeeErfolg
  • 7. Hürden
  • 8. Bücherschrank
  • 9. Hürde 1
  • 10. Universalität
  • 11. Universalität
  • 12. Bradfrostweb.com
  • 13. Allgemeingültig?Gibt es nicht noch den „Mobile“ UseCase?Auflösungs- vs. Device-optimiert?Muss nun alles „neu“ gemacht werden?
  • 14. Hürde 2
  • 15. Das Team
  • 16. Das Team
  • 17. Das Team
  • 18. Use CaseIch suche einbestimmtes ProduktProduktsuche Produkt 1Startseite
  • 19. Use CaseKontakt-formularIch suche einbestimmtes ProduktProduktsuche Produkt 1Startseite Ansprech-partnerFinde ich alleine eine Lösung? FAQ Anleitung
  • 20. Use Case Es ist 22h, bitte perMail oder RückrufKontakt- formularIch suche einbestimmtes ProduktProduktsuche Produkt 1StartseiteAnsprech- partner Finde ich alleineeine Lösung? FAQ Anleitung
  • 21. Use Case Es ist 22h, bitte perMail oder RückrufKontakt- formularIch suche einbestimmtes Produkt Produktsuche Produkt 1StartseiteAnsprech- partner Login meine Finde ich alleineProdukteeine Lösung? Ich bin unterwegs und FAQbrauche eine Lösung zumAnleitung Produkt
  • 22. Use Case Es ist 22h, bitte perMail oder RückrufKontakt- formularIch suche einbestimmtes Produkt Produktsuche Produkt 1StartseiteAnsprech- partner Login meine Finde ich alleineProdukteeine Lösung? Ich bin unterwegs und FAQbrauche eine Lösung zumAnleitung Produkt
  • 23. Haupt Navigation RelatedRelated 1 1 Related 2 Related1Lokale Related 2 Content Navigation ContentRelated 1 Related2 RelatedRelated 12
  • 24. Haupt Navigation RelatedRelated 1 1 Related 2Related 1Lokale Related 2 Content Navigation ContentRelated 1 Related2 RelatedRelated 12FAQAnsprech-Kontakt-Anleitung partner formular
  • 25. Haupt Navigation Haupt NavigationQuick NavigationRelated 2 Lokale Related 2 ContentContentNavigation Related 1 Related 1 Related 1 Related 2 Related 1 Related 2Lokale Navigation
  • 26. Der Teufel imDetail
  • 27. Haupt NavigationRelated 2 Lokale Related 2ContentNavigation Related 1 Related 1
  • 28. Haupt NavigationRelated 2 Lokale Related 2ContentNavigation Related 1 Related 1
  • 29. Haupt Navigation Haupt NavigationQuick NavigationRelated 2 Lokale Related 2 ContentContentNavigation Related 1 Related 1 Related 1 Related 2 Related 1 Related 2Lokale Navigation
  • 30. Haupt NavigationRelated 2 Lokale Related 2ContentNavigation Related 1 Related 1
  • 31. Haupt Navigation Haupt NavigationRelated 2Related 1 Lokale Related 2LokaleContentContent Related 1NavigationNavigation Related 1 Related 1 Related 1 Related 2 Related 2
  • 32. Haupt Navigation Related 1 Lokale Content Related 1Navigation Related 1 Related 2 Related 2
  • 33. Haupt Navigation Related 1 Lokale Content Related 1Navigation Related 1 Related 2 Related 2
  • 34. Haupt NavigationHaupt Navigation Quick Navigation Related 1 LokaleContent Content Related 1NavigationRelated 1 Related 1Related 2Related 2 Related 2 Related 2Related 1Related 1Related 2 Lokale Navigation
  • 35. Haupt NavigationHaupt Navigation Quick Navigation Related 1 LokaleContent Content Related 1NavigationRelated 1 Related 1Related 2x Related 2 Related 2 Related 2Related 1Related 1Related 2 Lokale Navigation
  • 36. Haupt NavigationHaupt Navigation Quick Navigation Related 1 LokaleContent Content Related 1NavigationRelated 1 Related 1Related 2x Related 2 Related 2 Related 2Related 1Related 1Related 2 Lokale Navigation
  • 37. Haupt NavigationHaupt Navigation Quick Navigation Related 1 LokaleContent Content Related 1Navigation Related 2Related 1 Related 1Related 2x Related 2 Related 2 Related 2Related 1Related 1Related 2 Lokale Navigation
  • 38. Haupt NavigationHaupt Navigation Quick Navigation Related 1 LokaleContent Content Related 1NavigationRelated 1 Related 1Related 2x Related 2 Related 2 Related 2 Related 2Related 1Related 1Related 2 Lokale Navigation
  • 39. Haupt NavigationHaupt NavigationHaupt Navigation Quick NavigationQuick Navigation Related 1 LokaleContent Content Content Related 1NavigationRelated 1 Related 1 Related 1Related 2 Related 1x Related 2 Related 1 Related 2 Related 2 Related 2Related 1 Related 2Related 1 Related 2Related 2 Related 2 Lokale Navigation Lokale Navigation
  • 40. Konzeption TeamDesignTechnik
  • 41. Hürde 3
  • 42. DasPrototyping
  • 43. Was ist einPrototyp?(es zeigt) "die Darstellung [...] desSystems, welche [...] für eine Beurteilungverwendet werden kann." 
  • 44. PrototypingRapid PrototypingVisuelles Rapid PrototypingVisuelles Responsive Rapid Prototyping ok.. wie machen wir das?
  • 45. Paper Axure HTML
  • 46. Simulation User Flow geht schnell kostet wenig dauert lange kostet viel
  • 47. Simulation View Port geht schnell ist genau dauert lange ungenau
  • 48. Simulation View Port geht schnell ist genau dauert lange ungenau
  • 49. Simulation View Port geht schnell ist genau dauert lange ungenau
  • 50. Simulation View Port geht schnell ist genau dauert lange ungenau
  • 51. Simulation „Verhalten“ „echtes“ Verhalten Daumenkino
  • 52. Simulation „Verhalten“ „echtes“ Verhalten Daumenkino
  • 53. Simulation „Verhalten“ „echtes“ Verhalten Daumenkino
  • 54. Simulation „Verhalten“ „echtes“ Verhalten Daumenkino
  • 55. Simulation „Verhalten“ „echtes“ Verhalten Daumenkino
  • 56. Werkzeuge
  • 57. Simulation „Verhalten“-Feedback
  • 58. Patterns doppeltes Markup gleiches Markup Column DropLayout Shift
  • 59. Column Drop & Layout Shift
  • 60. Column Drop & Layout Shift
  • 61. Layout Shift
  • 62. Layout Shift
  • 63. Layout Shift
  • 64. Layout Shift
  • 65. Layout Shift
  • 66. Layout Shift
  • 67. Es ist eine Momentaufnahme
  • 68. Hindernisseüberwinden!
  • 69. MerkenVisuell mit technisch korrekterSprachemobile first, coding firstWas wir brauchenRelativität zum eigenen WissenRelativität zur eigenen Rolle
    Please download to view
  • All materials on our website are shared by users. If you have any questions about copyright issues, please report us to resolve them. We are always happy to assist you.
    ...

    Responsive Design - Vorgehen und Fallstricke

    by marcel-zimmermann

    on

    Report

    Category:

    Design

    Download: 0

    Comment: 0

    4,140

    views

    Comments

    Description

    Vortrag von Marcel Zimmermann (Cybay New Media GmbH) auf der IA Konferenz 2012 im Essen.
    Download Responsive Design - Vorgehen und Fallstricke

    Transcript

    • 1. ResponsiveDesignVorgehen und Fallstricke
  • 2. Wer?Marcel Zimmermann -Senior Konzepterwww.cybay.de@dicomar@cybaynewmedia
  • 3. lese ich späterhabe ichgelesen1996 2012
  • 4. lese ich späterhabe ichgelesen1996 2012
  • 5. Bradfrostweb.com
  • 6. HürdeIdeeErfolg
  • 7. Hürden
  • 8. Bücherschrank
  • 9. Hürde 1
  • 10. Universalität
  • 11. Universalität
  • 12. Bradfrostweb.com
  • 13. Allgemeingültig?Gibt es nicht noch den „Mobile“ UseCase?Auflösungs- vs. Device-optimiert?Muss nun alles „neu“ gemacht werden?
  • 14. Hürde 2
  • 15. Das Team
  • 16. Das Team
  • 17. Das Team
  • 18. Use CaseIch suche einbestimmtes ProduktProduktsuche Produkt 1Startseite
  • 19. Use CaseKontakt-formularIch suche einbestimmtes ProduktProduktsuche Produkt 1Startseite Ansprech-partnerFinde ich alleine eine Lösung? FAQ Anleitung
  • 20. Use Case Es ist 22h, bitte perMail oder RückrufKontakt- formularIch suche einbestimmtes ProduktProduktsuche Produkt 1StartseiteAnsprech- partner Finde ich alleineeine Lösung? FAQ Anleitung
  • 21. Use Case Es ist 22h, bitte perMail oder RückrufKontakt- formularIch suche einbestimmtes Produkt Produktsuche Produkt 1StartseiteAnsprech- partner Login meine Finde ich alleineProdukteeine Lösung? Ich bin unterwegs und FAQbrauche eine Lösung zumAnleitung Produkt
  • 22. Use Case Es ist 22h, bitte perMail oder RückrufKontakt- formularIch suche einbestimmtes Produkt Produktsuche Produkt 1StartseiteAnsprech- partner Login meine Finde ich alleineProdukteeine Lösung? Ich bin unterwegs und FAQbrauche eine Lösung zumAnleitung Produkt
  • 23. Haupt Navigation RelatedRelated 1 1 Related 2 Related1Lokale Related 2 Content Navigation ContentRelated 1 Related2 RelatedRelated 12
  • 24. Haupt Navigation RelatedRelated 1 1 Related 2Related 1Lokale Related 2 Content Navigation ContentRelated 1 Related2 RelatedRelated 12FAQAnsprech-Kontakt-Anleitung partner formular
  • 25. Haupt Navigation Haupt NavigationQuick NavigationRelated 2 Lokale Related 2 ContentContentNavigation Related 1 Related 1 Related 1 Related 2 Related 1 Related 2Lokale Navigation
  • 26. Der Teufel imDetail
  • 27. Haupt NavigationRelated 2 Lokale Related 2ContentNavigation Related 1 Related 1
  • 28. Haupt NavigationRelated 2 Lokale Related 2ContentNavigation Related 1 Related 1
  • 29. Haupt Navigation Haupt NavigationQuick NavigationRelated 2 Lokale Related 2 ContentContentNavigation Related 1 Related 1 Related 1 Related 2 Related 1 Related 2Lokale Navigation
  • 30. Haupt NavigationRelated 2 Lokale Related 2ContentNavigation Related 1 Related 1
  • 31. Haupt Navigation Haupt NavigationRelated 2Related 1 Lokale Related 2LokaleContentContent Related 1NavigationNavigation Related 1 Related 1 Related 1 Related 2 Related 2
  • 32. Haupt Navigation Related 1 Lokale Content Related 1Navigation Related 1 Related 2 Related 2
  • 33. Haupt Navigation Related 1 Lokale Content Related 1Navigation Related 1 Related 2 Related 2
  • 34. Haupt NavigationHaupt Navigation Quick Navigation Related 1 LokaleContent Content Related 1NavigationRelated 1 Related 1Related 2Related 2 Related 2 Related 2Related 1Related 1Related 2 Lokale Navigation
  • 35. Haupt NavigationHaupt Navigation Quick Navigation Related 1 LokaleContent Content Related 1NavigationRelated 1 Related 1Related 2x Related 2 Related 2 Related 2Related 1Related 1Related 2 Lokale Navigation
  • 36. Haupt NavigationHaupt Navigation Quick Navigation Related 1 LokaleContent Content Related 1NavigationRelated 1 Related 1Related 2x Related 2 Related 2 Related 2Related 1Related 1Related 2 Lokale Navigation
  • 37. Haupt NavigationHaupt Navigation Quick Navigation Related 1 LokaleContent Content Related 1Navigation Related 2Related 1 Related 1Related 2x Related 2 Related 2 Related 2Related 1Related 1Related 2 Lokale Navigation
  • 38. Haupt NavigationHaupt Navigation Quick Navigation Related 1 LokaleContent Content Related 1NavigationRelated 1 Related 1Related 2x Related 2 Related 2 Related 2 Related 2Related 1Related 1Related 2 Lokale Navigation
  • 39. Haupt NavigationHaupt NavigationHaupt Navigation Quick NavigationQuick Navigation Related 1 LokaleContent Content Content Related 1NavigationRelated 1 Related 1 Related 1Related 2 Related 1x Related 2 Related 1 Related 2 Related 2 Related 2Related 1 Related 2Related 1 Related 2Related 2 Related 2 Lokale Navigation Lokale Navigation
  • 40. Konzeption TeamDesignTechnik
  • 41. Hürde 3
  • 42. DasPrototyping
  • 43. Was ist einPrototyp?(es zeigt) "die Darstellung [...] desSystems, welche [...] für eine Beurteilungverwendet werden kann." 
  • 44. PrototypingRapid PrototypingVisuelles Rapid PrototypingVisuelles Responsive Rapid Prototyping ok.. wie machen wir das?
  • 45. Paper Axure HTML
  • 46. Simulation User Flow geht schnell kostet wenig dauert lange kostet viel
  • 47. Simulation View Port geht schnell ist genau dauert lange ungenau
  • 48. Simulation View Port geht schnell ist genau dauert lange ungenau
  • 49. Simulation View Port geht schnell ist genau dauert lange ungenau
  • 50. Simulation View Port geht schnell ist genau dauert lange ungenau
  • 51. Simulation „Verhalten“ „echtes“ Verhalten Daumenkino
  • 52. Simulation „Verhalten“ „echtes“ Verhalten Daumenkino
  • 53. Simulation „Verhalten“ „echtes“ Verhalten Daumenkino
  • 54. Simulation „Verhalten“ „echtes“ Verhalten Daumenkino
  • 55. Simulation „Verhalten“ „echtes“ Verhalten Daumenkino
  • 56. Werkzeuge
  • 57. Simulation „Verhalten“-Feedback
  • 58. Patterns doppeltes Markup gleiches Markup Column DropLayout Shift
  • 59. Column Drop & Layout Shift
  • 60. Column Drop & Layout Shift
  • 61. Layout Shift
  • 62. Layout Shift
  • 63. Layout Shift
  • 64. Layout Shift
  • 65. Layout Shift
  • 66. Layout Shift
  • 67. Es ist eine Momentaufnahme
  • 68. Hindernisseüberwinden!
  • 69. MerkenVisuell mit technisch korrekterSprachemobile first, coding firstWas wir brauchenRelativität zum eigenen WissenRelativität zur eigenen Rolle
  • Fly UP