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!
Top Related