responsive webdesign am beispiel von kiepeneheuer & witsch

58
Internet to go Neue Anforderung an die Mobilisierung von Websites am Beispiel der Verlagsmarke Kiepenheuer & Witsch Online Marketing Forum 2014 – Düsseldorf

Upload: daniel-riemer

Post on 07-Dec-2014

343 views

Category:

Design


2 download

DESCRIPTION

Internet to go – Neue Anforderung an die Mobilisierung von Websites am Beispiel der Verlagsmarke Kiepenheuer & Witsch

TRANSCRIPT

Page 1: Responsive Webdesign am Beispiel von Kiepeneheuer & Witsch

Internet to go Neue Anforderung an die Mobilisierung von Websites am Beispiel der Verlagsmarke Kiepenheuer & Witsch

Online Marketing Forum 2014 – Düsseldorf

Page 2: Responsive Webdesign am Beispiel von Kiepeneheuer & Witsch

Daniel Riemer User Interface Designer

Page 3: Responsive Webdesign am Beispiel von Kiepeneheuer & Witsch

www.active-value.de

Page 4: Responsive Webdesign am Beispiel von Kiepeneheuer & Witsch

Organisation

Inhabergeführte GmbH

Standort

Düsseldorf

Gründungsjahr

2005

Anzahl Mitarbeiter

25

Page 5: Responsive Webdesign am Beispiel von Kiepeneheuer & Witsch
Page 6: Responsive Webdesign am Beispiel von Kiepeneheuer & Witsch
Page 7: Responsive Webdesign am Beispiel von Kiepeneheuer & Witsch

Das Web im Zeitalter von iPhone und iPad

Page 8: Responsive Webdesign am Beispiel von Kiepeneheuer & Witsch

http://bradfrostweb.com/wp-content/uploads/2012/03/03-650x487.png

Page 9: Responsive Webdesign am Beispiel von Kiepeneheuer & Witsch

http://bradfrostweb.com/wp-content/uploads/2012/03/03-650x487.png

Page 10: Responsive Webdesign am Beispiel von Kiepeneheuer & Witsch

http://bradfrostweb.com/wp-content/uploads/2012/03/03-650x487.png

Page 11: Responsive Webdesign am Beispiel von Kiepeneheuer & Witsch

Das Smartphone als ständiger Begleiter

Page 12: Responsive Webdesign am Beispiel von Kiepeneheuer & Witsch

http://instagram.com/p/W2BuMLQLRB/

Page 13: Responsive Webdesign am Beispiel von Kiepeneheuer & Witsch

Verbreitung internetfähiger Smartphones in Deutschland

18% 29% 40%

2011 2012 2013

http://services.google.com/fh/files/misc/omp-2013-de-local.pdf

Page 14: Responsive Webdesign am Beispiel von Kiepeneheuer & Witsch

Smartphones werden überall genutzt

95%

http://services.google.com/fh/files/misc/omp-2013-de-local.pdf

87% 78% 72%

Page 15: Responsive Webdesign am Beispiel von Kiepeneheuer & Witsch

Mehr als nur ein Unterhaltungs- und Kommunikationsmedium

http://services.google.com/fh/files/misc/omp-2013-de-local.pdf

86% 81%

Page 16: Responsive Webdesign am Beispiel von Kiepeneheuer & Witsch

http://de.slideshare.net/kleinerperkins/kpcb-internet-trends-2013

Mobile Traffic

Page 17: Responsive Webdesign am Beispiel von Kiepeneheuer & Witsch

http://www.flickr.com/photos/brad_frost/7387824246

Page 18: Responsive Webdesign am Beispiel von Kiepeneheuer & Witsch

http://opensignal.com/reports/fragmentation-2013/

Page 19: Responsive Webdesign am Beispiel von Kiepeneheuer & Witsch

Wie können Unternehmen diesem Trend gerecht

werden?

Page 20: Responsive Webdesign am Beispiel von Kiepeneheuer & Witsch

Option A „Wir machen nix.“

Page 21: Responsive Webdesign am Beispiel von Kiepeneheuer & Witsch

Vorteile

•  Kostengünstig

Nachteile

•  Führt mittel- bis langfristig zum Aus. Garantiert.

Page 22: Responsive Webdesign am Beispiel von Kiepeneheuer & Witsch

Option A „Wir machen nix.“

Page 23: Responsive Webdesign am Beispiel von Kiepeneheuer & Witsch

Option B Separate, mobile-optimierte Website

Page 24: Responsive Webdesign am Beispiel von Kiepeneheuer & Witsch

http://m.spiegel.de & http://www.spiegel.de

Page 25: Responsive Webdesign am Beispiel von Kiepeneheuer & Witsch

Vorteile

•  Mobile Website unabhängig

Nachteile

•  Ignoriert Vielfalt der Devices und Displaygrößen

•  Doppelter Pflegeaufwand

•  Fehleranfälligkeit bei Redirects

•  Unter Umständen Schwächung des SEO-Signals

Page 26: Responsive Webdesign am Beispiel von Kiepeneheuer & Witsch

Option B Separate, mobile-optimierte Website

Page 27: Responsive Webdesign am Beispiel von Kiepeneheuer & Witsch

Option C Responsive Webdesign

Page 28: Responsive Webdesign am Beispiel von Kiepeneheuer & Witsch

Responsive Webdesign

Gestalterischer und technischer Ansatz zur Erstellung von Websites, so dass diese auf Eigenschaften des jeweils benutzten Endgeräts reagieren können. Der grafische Aufbau einer „responsiven“ Webseite erfolgt anhand der Anforderungen des jeweiligen Gerätes, mit dem die Seite betrachtet wird.

http://de.wikipedia.org/wiki/Responsive_Webdesign

Page 29: Responsive Webdesign am Beispiel von Kiepeneheuer & Witsch

http://www.bbc.com/news?view=beta

Page 30: Responsive Webdesign am Beispiel von Kiepeneheuer & Witsch

Vorteile

•  Optimale Darstellung

•  Einfacher Pflegeaufwand

•  Keine Redirects notwendig

•  Volle SEO-Power

Nachteile

•  Schlechtere Performance

•  Höherer Entwicklungsaufwand

Page 31: Responsive Webdesign am Beispiel von Kiepeneheuer & Witsch

Vorteile

•  Optimale Darstellung

•  Einfacher Pflegeaufwand

•  Keine Redirects notwendig

•  Volle SEO-Power

Nachteile

•  Schlechtere Performance

•  Höherer Entwicklungsaufwand

Page 32: Responsive Webdesign am Beispiel von Kiepeneheuer & Witsch

Vorteile

•  Optimale Darstellung

•  Einfacher Pflegeaufwand

•  Keine Redirects notwendig

•  Volle SEO-Power

Nachteile

•  Schlechtere Performance

•  Höherer Entwicklungsaufwand

Page 33: Responsive Webdesign am Beispiel von Kiepeneheuer & Witsch

Vorteile

•  Optimale Darstellung

•  Einfacher Pflegeaufwand

•  Keine Redirects notwendig

•  Volle SEO-Power

Nachteile

•  Schlechtere Performance

•  Höherer Entwicklungsaufwand

Von Google

empfohlen!

Page 34: Responsive Webdesign am Beispiel von Kiepeneheuer & Witsch

Responsive Webdesign Die Zutaten

Page 35: Responsive Webdesign am Beispiel von Kiepeneheuer & Witsch

1

2

3

Fluides Gestaltungsraster

Flexible Bilder und Videos

„Media Queries“

Page 36: Responsive Webdesign am Beispiel von Kiepeneheuer & Witsch

1

2

3

Fluides Gestaltungsraster

Flexible Bilder und Videos

„Media Queries“

Page 37: Responsive Webdesign am Beispiel von Kiepeneheuer & Witsch

1

2

3

Fluides Gestaltungsraster

Flexible Bilder und Videos

„Media Queries“

Page 38: Responsive Webdesign am Beispiel von Kiepeneheuer & Witsch

Media Queries Ermöglichen medienabhängige und

mediengerechte Gestaltung

Page 39: Responsive Webdesign am Beispiel von Kiepeneheuer & Witsch

Performance

Touch

Ergonomics

Feature Detection

Conditional Loading

Neuer Workflow

Content Strategy

Page 40: Responsive Webdesign am Beispiel von Kiepeneheuer & Witsch

Designer Developer

Page 41: Responsive Webdesign am Beispiel von Kiepeneheuer & Witsch

http://www.flickr.com/photos/brad_frost/7387824246

Page 42: Responsive Webdesign am Beispiel von Kiepeneheuer & Witsch
Page 43: Responsive Webdesign am Beispiel von Kiepeneheuer & Witsch

Style Tiles

Page 44: Responsive Webdesign am Beispiel von Kiepeneheuer & Witsch
Page 45: Responsive Webdesign am Beispiel von Kiepeneheuer & Witsch

Prototypen

Page 46: Responsive Webdesign am Beispiel von Kiepeneheuer & Witsch
Page 47: Responsive Webdesign am Beispiel von Kiepeneheuer & Witsch
Page 48: Responsive Webdesign am Beispiel von Kiepeneheuer & Witsch

Designer + Developer

Page 49: Responsive Webdesign am Beispiel von Kiepeneheuer & Witsch

Quantifizierbarer Nutzen Das leistet Responsive Webdesign

Page 50: Responsive Webdesign am Beispiel von Kiepeneheuer & Witsch

Mobile Traffic

+ 80%

Page 51: Responsive Webdesign am Beispiel von Kiepeneheuer & Witsch

Mobile Traffic

Unique Visitors

+ 80%

+ 25%

Page 52: Responsive Webdesign am Beispiel von Kiepeneheuer & Witsch

Mobile Traffic

Unique Visitors

Time spent

+ 80%

+ 25%

+ 10%

Page 53: Responsive Webdesign am Beispiel von Kiepeneheuer & Witsch

http://www.magazine.org/timecom-gm-craig-ettinger-bringing-responsive-web-design-iconic-brand

Mobile Traffic

Unique Visitors

Time spent

Mobile Bounce Rate

+ 23%

+ 15%

+ 7%

- 26%

Page 54: Responsive Webdesign am Beispiel von Kiepeneheuer & Witsch

http://electricpulp.com/notes/you-like-apples/

iPhone / iPod Android Non-Mobile

Conversion Rate

Umsatz

+ 65,7%

+ 101,2%

+ 407,3%

+ 591,4%

+ 20,3%

+ 41,1%

Page 55: Responsive Webdesign am Beispiel von Kiepeneheuer & Witsch

Wie „responsive“ ist Ihre Website?

Tools

Page 56: Responsive Webdesign am Beispiel von Kiepeneheuer & Witsch

www.active-value.de/

responsive-design-viewer

Page 57: Responsive Webdesign am Beispiel von Kiepeneheuer & Witsch

Haben Sie Fragen?

Page 58: Responsive Webdesign am Beispiel von Kiepeneheuer & Witsch

Vielen Dank!

[email protected]