Click here to load reader

Responsive Design - Vorgehen und Fallstricke

  • View
    4.144

  • Download
    0

Embed Size (px)

DESCRIPTION

Vortrag von Marcel Zimmermann (Cybay New Media GmbH) auf der IA Konferenz 2012 im Essen.

Text of Responsive Design - Vorgehen und Fallstricke

  • 1. ResponsiveDesignVorgehen und Fallstricke

2. Wer?Marcel Zimmermann -Senior [email protected]@cybaynewmedia 3. lese ich spterhabe ichgelesen1996 2012 4. lese ich spterhabe ichgelesen1996 2012 5. Bradfrostweb.com 6. HrdeIdeeErfolg 7. Hrden 8. Bcherschrank 9. Hrde 1 10. Universalitt 11. Universalitt 12. Bradfrostweb.com 13. Allgemeingltig?Gibt es nicht noch den Mobile UseCase?Auflsungs- vs. Device-optimiert?Muss nun alles neu gemacht werden? 14. Hrde 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 Lsung? FAQ Anleitung 20. Use Case Es ist 22h, bitte perMail oder RckrufKontakt- formularIch suche einbestimmtes ProduktProduktsuche Produkt 1StartseiteAnsprech- partner Finde ich alleineeine Lsung? FAQ Anleitung 21. Use Case Es ist 22h, bitte perMail oder RckrufKontakt- formularIch suche einbestimmtes Produkt Produktsuche Produkt 1StartseiteAnsprech- partner Login meine Finde ich alleineProdukteeine Lsung? Ich bin unterwegs und FAQbrauche eine Lsung zumAnleitung Produkt 22. Use Case Es ist 22h, bitte perMail oder RckrufKontakt- formularIch suche einbestimmtes Produkt Produktsuche Produkt 1StartseiteAnsprech- partner Login meine Finde ich alleineProdukteeine Lsung? Ich bin unterwegs und FAQbrauche eine Lsung 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. Hrde 3 42. DasPrototyping 43. Was ist einPrototyp?(es zeigt) "die Darstellung [...] desSystems, welche [...] fr 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. Hindernisseberwinden! 69. MerkenVisuell mit technisch korrekterSprachemobile first, coding firstWas wir brauchenRelativitt zum eigenen WissenRelativitt zur eigenen Rolle