...

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