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

Daniel Riemer User Interface Designer

www.active-value.de

Organisation

Inhabergeführte GmbH

Standort

Düsseldorf

Gründungsjahr

2005

Anzahl Mitarbeiter

25

Das Web im Zeitalter von iPhone und iPad

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

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

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

Das Smartphone als ständiger Begleiter

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

Verbreitung internetfähiger Smartphones in Deutschland

18% 29% 40%

2011 2012 2013

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

Smartphones werden überall genutzt

95%

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

87% 78% 72%

Mehr als nur ein Unterhaltungs- und Kommunikationsmedium

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

86% 81%

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

Mobile Traffic

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

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

Wie können Unternehmen diesem Trend gerecht

werden?

Option A „Wir machen nix.“

Vorteile

•  Kostengünstig

Nachteile

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

Option A „Wir machen nix.“

Option B Separate, mobile-optimierte Website

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

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

Option B Separate, mobile-optimierte Website

Option C Responsive Webdesign

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

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

Vorteile

•  Optimale Darstellung

•  Einfacher Pflegeaufwand

•  Keine Redirects notwendig

•  Volle SEO-Power

Nachteile

•  Schlechtere Performance

•  Höherer Entwicklungsaufwand

Vorteile

•  Optimale Darstellung

•  Einfacher Pflegeaufwand

•  Keine Redirects notwendig

•  Volle SEO-Power

Nachteile

•  Schlechtere Performance

•  Höherer Entwicklungsaufwand

Vorteile

•  Optimale Darstellung

•  Einfacher Pflegeaufwand

•  Keine Redirects notwendig

•  Volle SEO-Power

Nachteile

•  Schlechtere Performance

•  Höherer Entwicklungsaufwand

Vorteile

•  Optimale Darstellung

•  Einfacher Pflegeaufwand

•  Keine Redirects notwendig

•  Volle SEO-Power

Nachteile

•  Schlechtere Performance

•  Höherer Entwicklungsaufwand

Von Google

empfohlen!

Responsive Webdesign Die Zutaten

1

2

3

Fluides Gestaltungsraster

Flexible Bilder und Videos

„Media Queries“

1

2

3

Fluides Gestaltungsraster

Flexible Bilder und Videos

„Media Queries“

1

2

3

Fluides Gestaltungsraster

Flexible Bilder und Videos

„Media Queries“

Media Queries Ermöglichen medienabhängige und

mediengerechte Gestaltung

Performance

Touch

Ergonomics

Feature Detection

Conditional Loading

Neuer Workflow

Content Strategy

Designer Developer

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

Style Tiles

Prototypen

Designer + Developer

Quantifizierbarer Nutzen Das leistet Responsive Webdesign

Mobile Traffic

+ 80%

Mobile Traffic

Unique Visitors

+ 80%

+ 25%

Mobile Traffic

Unique Visitors

Time spent

+ 80%

+ 25%

+ 10%

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%

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%

Wie „responsive“ ist Ihre Website?

Tools

www.active-value.de/

responsive-design-viewer

Haben Sie Fragen?

Vielen Dank!

daniel.riemer@active-value.de