Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Responsive Design - Vorgehen und Fallstricke

4,964 views

Published on

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

Published in: Design

Responsive Design - Vorgehen und Fallstricke

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

×