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