Responsive Design

März 2014

Als Agentur für digitale Kommunikation

und Interaktion betreuen wir seit 1992

führende Marken in ihren digitalen Kanälen

und internationalen Märkten.

Ray Sono belegt laut aktuellem

BVDW Ranking der größten Internet-

Agenturen Deutschlands Platz 15.

Mitarbeiter: 140

Standort: München

www.raysono.com

Ray Sono AG

2

3

Ray Sono ... aus fünf Gründen

Analytics als Fundament

für die digitale Kreation

Ray Sono – die User

Experience-Spezialisten

Projektgeschäft und laufende

Betreuung aus einer Hand

Der Ray Sono Customer

Journey-Ansatz

Full-Service-Agentur

mit optimaler Größe

4

Travel Referenzen User Experience

Lufthansa

UX-Beratung und Konzept; Usability-

Testing, Conversion Optimierung

(Buchungsstrecke).

Deutsche Bahn

UX-Beratung; Usability- und A/B-

Testing, Conversion Optimierung

(Fokus: Buchungsstrecke).

TUI

UX-Beratung; Analytics, Conversion

Optimierung.

4

Motel One

UX-Beratung, Konzept und Design,

Umsetzung, Conversion Optimierung,

mobile Website, iPhone App.

DER.com

Relaunch der.com: UX-Beratung,

Konzept & Design; technische

Umsetzung, Conversion Optimierung.

Südtirol

UX-Beratung, Konzept & Design,

technische Umsetzung, Conversion

Optimierung.

5

Miles & More Memberscout

6

Referenzen Responsive Design

Lufthansa Miles & More

Relaunch Newsletter im Responsive

Design. Internationales Newsletter

Management (5 Mio./Monat).

Austrian Airlines

Relaunch Newsletter im Responsive

Design. Internationales Newsletter

Management.

Deutsche Bahn

Konzeption und Umsetzung

Kampagnen-Landingpages im

Responsive Design (Multi-Device).

Comprano

Umsetzung Ratgeber-Plattform (Multi-

Device), Rapid Prototyping, Responsive

Design.

DATEV

Umsetzung Kampagnen-Landingpages

im Responsive Design (Multi-Device).

Süddeutsche Zeitung

Konzept, Design und Umsetzung des

Online Service Centers im Responsive

Design (Multi-Device).

6

7

Warum

Responsive?

8

„Global mobile

data traffic

grew 81% in 2013“ Cisco® Visual Networking Index (VNI) http://www.cisco.com/c/en/us/solutions/collateral/service-provider/visual-networking-index-vni/white_paper_c11-520862.html

9

Das Internet

verändert sich. Mehr Geräte mit immer mehr verschiedenen Betriebssystemen, Bedienformen und

Bildschirmgrößen greifen auf Webinhalte zu – von überall.

10

Internet

Gestern Heute Morgen

Stationär Mobil Allgegenwärtig

11

Der Kontext

ist flexibel. Durch die Vielzahl der internetfähigen Geräte und möglichen Nutzungssituationen des

Internets kann man nicht mehr von einem sicher vorhersagbaren Nutzungskontext

ausgehen.

Mobile Geräte werden oftmals vom heimischen Wohnzimmer aus im WLAN zum

Shopping benutzt, Laptopnutzer sitzen im Zug oder gehen über ihre 3G-Karte ins

Internet.

12

Kontext früher

Fähiger Browser

Großer Monitor

Schnelle

Verbindung

Fokussiert

Stationär

Bequem

Effiziente

Bedienung

Schnelle

Rechenleistung

Kontext heute

14

Vorhersagbarkeit

war gestern Optimale Screengröße, minimale Ladezeit, zuhause oder unterwegs, Maus- oder

Touchbedienung, Spielen oder Shoppen?

Sicher erkennbar ist nur die Bildschirmgröße und –ausrichtung. Bei Betriebssystem und

Browser gibt es bereits Unschärfen durch ungenaue Standards. Ob der Nutzer über

WLAN oder 3G/2G surft, ist nicht herauszufinden.

Durch die Vielzahl an Zugriffsmöglichkeiten und Nutzungsabsichten auf das Internet

gibt es keine wirklich festen Anhaltspunkte mehr. Daher wird Flexibilität immer

wichtiger.

15

1. Die Bedürfnisse des Kunden

zu jedem Zeitpunkt verstehen

z.B. mit Customer Journey Management

2. Für jedes Device die passenden

Lösungen anbieten

z.B. Responsive Design / device-spezifische Angebote

3. Den Wechsel zwischen

den Geräten erleichtern

z.B. einheitliches Look & Feel, übergreifendes

Login + Merkzettel, Cloud Services

Herausforderungen

16

Was ist Responsive

Design?

17

Was ist Responsive

Design? EIN Content für ALLE Devices. Aber: die Inhalte passen sich flexibel an das Gerät an:

• visuelle Darstellungsform (flexible Anordnung von Elementen und Inhalten)

• bedürfniskonforme Auslieferung bzw. Nichtauslieferung von Inhalten

18

Breakpoint Graph

(320) 512 768 1024 (1280)

Smartphone Mini-Tablet Tablet Desktop

Beispiel mit 3 Breakpoints

19

Pixel-Angaben und Display-Größen

Die Angabe der physikalisch vorhandenen Pixel sagt nichts über die reale Größe des

Device-Display aus.

1080 pxl breit

(HTC One)

1024 pxl breit

(ältere Desktops)

Obwohl beide Devices praktisch die selbe Breite haben, muss auf das Smartphone

eine andere Seite wie auf den Desktop ausgespielt werden.

20

Die Referenz: The Boston Globe

PC Smartphone Tablet

http://bostonglobe.com/

21

Travel: primär Destinationen und Hotels

Destinationen:

Visit Finland: http://www.visitfinland.com/de/

Visit Stockholm: http://beta.visitstockholm.com/

Visit London: http://www.visitlondon.com/

Travel Oregon: http://traveloregon.com/

I Travel New York: http://www.itravelyork.info/

North Dakota: http://www.ndtourism.com/

Pennsylvania: http://www.visitpa.com/

Washington DC: http://washington.org/

Michigan: http://www.michigan.org/

Sonoma County: http://www.sonomacounty.com/

Barbados: http://www.barbados.org/

Stadt Erlangen: http://www.erlangen.de/

Airlines:

Thomas Cook http://www.flythomascook.com/

KLM http://www.klm.com/home/nl/en

Hotels:

Wythe Hotel: http://wythehotel.com/

Atlantic Hotel: http://www.theatlantichotel.com/

Z Ocean Hotel: http://zoceanhotelsouthbeach.com/

Macdonald Hotels: http://www.macdonaldhotels.co.uk/

Si Como No Resort: http://www.sicomono.com/

Westville Hotel Ensikillen: http://westvillehotel.co.uk/

Weitere:

Africa Exclusive: http://www.safari.co.uk/

Roadtrippers: https://roadtrippers.com

Gatwick Airport: http://www.gatwickairport.com/

Scandorama: http://www.scandorama.se/

Ölvemarks Holiday: http://www.olvemarks.se/

Holiday Taxis: http://www.holidaytaxis.com/

Travel Age West: http://www.travelagewest.com/Hotels

22

Responsive:

ja oder nein? Von den Top 50 Airlines weltweit sind aktuell nur zwei responsive.

Von den Top 100 börsennotierten Firmen in UK (FTSE100) haben aktuell nur zwei

eine responsive Website. Über die Hälfte haben noch nicht mal eine mobile Website.

www.thedrum.com/news/2014/02/27/only-two-ftse100-use-responsive-web-design-will-over-half-not-having-mobile-site

www.tnooz.com/article/airlines-mobile/

23

Erforschen Sie das

Nutzer-Verhalten Erforschen Sie in welchen Situationen die Nutzer Ihr Web-Angebot verwenden, welche

speziellen Bedürfnisse sie dabei haben und welche Geräte sie verwenden.

Dazu sind Customer Journey Analysen sehr hilfreich, aber auch Tagebuch-Studien

oder Nutzer-Interviews können wichtige Erkenntnisse beisteuern.

24

Entwicken Sie für

den Kontext … … nicht für Geräte. Die Bedürfnisse eines Nutzers im Zug unterwegs unterscheiden

sich von den Bedürfnissen eines Nutzers im Büro oder zuhause auf dem Sofa.

Es ist nicht genau vorhersagbar wo ein Nutzer welches Gerät verwendet!

25

Kriterien

zur Entscheidung Anpassungs-Möglichkeiten und –

Erfordernisse (spezielle Use Cases)

Flexibilität in Konzept & Screendesign

Art der Inhalte (Video, Flash, …)

Komplett-Relaunch vs. Weiterentwicklung

Notwendigkeit responsiver Werbemittel

Anforderungen in der technischen

Umsetzung (z.B. CMS, IBE)

Website Performance (Ladezeit)

Browser-Unterstützung (z.B. IE 6-8)

Intensität der Contentpflege

Gesamte Mobil-Strategie (inkl. Apps)

26

Responsive macht

häufig Sinn In vielen Fällen verwenden die Nutzer verschiedene Geräte für dieselben Aufgaben

– ein Indikator dass ein Responsive Design Sinn macht.

Wenn sich ein spezieller Anwendungsfall (Use Case) für ein Device isolieren lässt

(z.B. Kurznachrichten auf dem Smartphone), ist eine separate Lösung sinnvoll.

Newsletter: unbedingt responsive!

27

Gute Zwischen-

Lösungen Zum Beispiel:

• Responsive Website (für Desktop + Tablet) + separate mobile Website

• Touch-optimierte Desktop-Website + separate mobile Website

• Eigene Smartphone-App (oder Tablet) für sehr spezielle Use Cases

28

Wenn Responsive,

dann ...

29

1. Flexibles Design,

flexible Prozesse Dynamisierung der Inhalte bedeutet auch Dynamisierung der Entwicklungsprozesse.

30

Launch

Launch

Verändertes Prozessvorgehen beim Responsive Webdesign

Analyse Konzept Design Entwick-

lung Test

Lineares Wasserfall-Vorgehen

Analyse Konzept

Design

Entwick.

Test

…

Agiler, iterativer Prozess mit enger Kooperation aller Fachbereiche

… …

31 31

Abstimmung. Der Arbeitsprozess sollte von Anfang an interdisziplinär geführt werden.

Konzept, Design und Programmierung müssen von Anfang an einen Tisch und alle

Steps gemeinsam besprechen und erarbeiten.

32

2. Mobile first vs.

Desktop first?

33

Mobile UND

Desktop first! Ein „Verkleinern“ einer existierenden Desktop Site auf ein Responsive Design, um

diese auch auf Smartphones gut abrufen zu können, führt oft zu weniger optimalen

Ergebnissen. Aus Content-Sicht ist „Mobile first“ daher die bessere Herangehensweise.

Bezüglich der Darstellung der Features und der optischen Gestaltung hat sich unserer

Erfahrung nach gezeigt, dass ein paralleles Betrachten aller Größen das optimale

Vorgehen ist.

34

3. Fokus auf

Content-Reduktion Die Ursache, dass viele Websites auf kleinen Screens nicht gut funktionieren, ist oft,

dass sie es auf großen Screens auch nicht tun.

Im Rahmen eines Responsive Designs empfehlen wir daher, bestehenden Web-

Content auf mögliche Reduktionspotentiale hin zu überprüfen.

Insbesondere Contents, die keinem Use Case zuzuordnen sind, sollten kritisch

überprüft werden.

35

Die Ursache, dass viele Websites auf kleinen Screens nicht gut funktionieren, ist oft,

dass sie es auf großen Screens auch nicht tun.

Im Rahmen eines Responsive Designs gilt es daher, bestehenden Content auf

mögliche Reduktionspotentiale hin zu überprüfen.

Insbesondere Contents, die keinem Use Case zuzuordnen sind, sollten kritisch

überprüft werden.

Bedürfniskonforme Auslieferung bzw. Nichtauslieferung von Inhalten.

Content Choreography

36

4. Testen und

Optimieren Wie in eigentlich allen Projekten ist es auch in Responsive Design Projekten essentiell

wichtig, vor und nach dem Launch zu testen und zu optimieren – sowohl qualitativ (z.B.

mit Use Labs) als auch quantitativ (A/B Testing).

Responsive A/B-Test-Varianten bedeuten mehr Aufwand gegenüber „einfachen“ Test-

Varianten!

© Copyright

Dieses Dokument der Ray Sono AG ist ausschließlich für den Adressaten bzw.

Auftraggeber bestimmt. Die in diesem Dokument enthaltenen Inhalte und Ideen sind

urheberrechtlich geschützt. Alle Rechte vorbehalten.

37

Stefan Spiegel

Managing Partner |

Leitung Travel & Touristik

Office +49 89 74646-169

stefan.spiegel@raysono.com

Vielen Dank für Ihre Aufmerksamkeit!

Ray Sono AG

Tumblingerstr. 32

80337 München

Office +49 89 74646-0

www.raysono.com

info@raysono.com

Folgen Sie uns: