Post on 05-Dec-2014
description
transcript
Wie verändert sich der Designprozess wirklich? Responsive Design – Reality Check
2
Es gibt viele responsive Websites…
… aber unser Projekt war ein wenig größer
3
Vollständiger Relaunch der Corporate Website – “Flagship Store”
4
Was uns aber fehlte war ein neuer Prozess für komplexe Projekte. Eine Responsive Design Toolbox.
?
01 Reality Check Was die Experten sagen und was wir gemacht haben…
6
Rule01
Kein Photoshop!
7
8
Aber wie können 7 IA gleichzeitig ein komplexes Template-Modul System als interaktiven Prototyp spezifizieren?
9
Der erste Ansatz: Detaillierte Spezifikation für alle Viewports
Viewport L Viewport M Viewport S
10
Trotzdem sollte die Spezifikation so klein wie möglich sein. Wir erstellten einen “Responsive Guide” zur getrennten Dokumentation von responsive Regeln und Modulspezifikation.
11
Beispiel für Responsive Regeln: Generelle Regeln zu den Viewport Definitionen
12
TOOLBOX
Deliverables Responsive Guide Für allgemeine Regeln und zur ersten Abstimmung mit dem Kunden.
13
Rule02
Mobile First!
14
Aber der Kunde denkt noch in der Desktop Welt… Wie kann man ein responsive Design konzipieren, wenn man “mobile second” arbeitet?
15
Flurplanung – “Content First”
Wir bauen EINE Website. Es gibt keine unterschiedlichen Versionen für mobile
und Desktop. Die Reihenfolge von Content ist immer dieselbe.
17
Responsive Patterns
List with images Carousel Expandable list
18
TOOLBOX
Prozess Content First Art und Reihenfolge der Inhalte zuerst festlegen. Responsive Patterns Grundsätzliche Muster werden auf alle Module angewendet.
19
Rule03
Kein Wasserfall!
20
Aber bei den meisten Kunden gibt es getrennte Budgets für Design und Entwicklung. Daher muss man auch in einem Wasserfall Prozess die verschiedenen Skills kombinieren.
21
Proof of Concept Neue Konzepte und Designs werden von Entwicklern auf Herz und Nieren geprüst und wenn nötig gemeinsam überarbeitet.
22
TOOLBOX
Team Connected Thinking Entwickler sind fester Teil eines Kreativteams - Proof of Concept - Prototyping - Usability Testing
23
Rule04
“No! Pagefold!”
24
“Aber der Preis ist noch über dem Fold, oder?” Wie arbeitet man mit Kunden zusammen, denen das Konzept von Responsive Design neu ist?
25
Definiert “goldene Regeln” für das Responsive Design – gemeinsam mit euren Kunden. Schafft zu Beginn des Projekts ein gemeinsames Verständnis. (oder auch für andere Themen – z.B. Personalisierung)
26
Vertrauen ist wichtig! Mit dem Kunden werden Konzept, Design und Funktionalität abgestimmt, nicht das responsive Verhalten.
27
TOOLBOX
Kundenkommunikation “Goldene Regeln” Der Kunde versteht die Implikationen von Responsive Design für die Website.
Fallstricke Was hat nicht so super funktioniert?
29
Problem01
“One size does not fit all”
30
CHECKOUT
Checkout in Viewport L …
… und in Viewport S…
Kritische Prozesse benötigen manchmal separate Lösungen, die nur mit höherem technischen Aufwand zu realisieren sind.
32
Problem02
Responsive Advertising
33
FIXE WERBEFORMATE
Werbeformen verhalten sich nicht responsiv beim Verkleinern des Viewports.
34
SEPARATE FORMATE PRO VIEWPORT Viewport M<1023px
Viewport S <650 px
Wirklich responsive Werbeformate werden von Vermarktern (noch) nicht
angeboten.
03 Responsive Design Toolbox Unsere Erfahrungen auf einen Blick
37
TOOLBOX
Bewährte Methoden: • Prototyping • Mobile First • Kombiniert und iterativ
arbeiten Unsere Erfahrungen: • Responsive Guide • Content First • Responsive Patterns • Connected Thinking • Goldene Regeln Oder… • …
38
© 2013 SAPIENT CORPORATION | CONFIDENTIAL
Dankeschön!
Sabine Berghaus Senior Information Architect E-Mail: sberghaus@sapient.com Twitter: @stadtnomadin Website: about.me/sabineberghaus
40
Image references Pages 4, 9, 11, 12, 15, 17, 18, 33, 34, 37 : Own images Page 3: http://www.flickr.com/photos/kinghuang/3234346294/ by: King Chung Huang Page 10: http://www.flickr.com/photos/romytetue/8099431861/ By: tetue Page 14: http://commons.wikimedia.org/wiki/File:IMac_aluminium.png by: Matthieu Riegler Page 20: http://www.flickr.com/photos/68751915@N05/6869762317/ by: 401(K) 2013 Page 21: http://www.flickr.com/photos/genista/4449316/sizes/o/ by: Genista Page 24: http://pixabay.com/en/number-digit-folding-rule-measure-92412/ by: weinstock Page 26: http://pixabay.com/en/michelangelo-abstract-boy-child-71282/ By: Public Domain Pictures Page 38: http://farm4.static.flickr.com/3394/3526522573_8f40a675b6.jpg by: walknboston