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

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

2. Daniel Riemer
User Interface Designer

3. www.active-value.de

4. Organisation
Inhabergeführte GmbH
Standort
Düsseldorf
Gründungsjahr
2005
Anzahl Mitarbeiter
25

7. Das Web im Zeitalter von
iPhone und iPad

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

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

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

11. Das Smartphone als
ständiger Begleiter

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

13. Verbreitung internetfähiger
Smartphones in Deutschland
18% 29% 40%
2011 2012 2013
http://services.google.com/fh/files/misc/omp-2013-de-local.pdf

14. Smartphones werden
überall genutzt
95%
http://services.google.com/fh/files/misc/omp-2013-de-local.pdf
87% 78% 72%

15. Mehr als nur ein Unterhaltungs- und
Kommunikationsmedium
http://services.google.com/fh/files/misc/omp-2013-de-local.pdf
86% 81%

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

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

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

19. Wie können Unternehmen
diesem Trend gerecht
werden?

20. Option A
„Wir machen nix.“

21. Vorteile
• Kostengünstig
Nachteile
• Führt mittel- bis langfristig
zum Aus. Garantiert.

22. Option A
„Wir machen nix.“

23. Option B
Separate, mobile-optimierte Website

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

25. 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

26. Option B
Separate, mobile-optimierte Website

27. Option C
Responsive Webdesign

28. 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

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

30. Vorteile
• Optimale Darstellung
• Einfacher Pflegeaufwand
• Keine Redirects notwendig
• Volle SEO-Power
Nachteile
• Schlechtere Performance
• Höherer
Entwicklungsaufwand

31. Vorteile
• Optimale Darstellung
• Einfacher Pflegeaufwand
• Keine Redirects notwendig
• Volle SEO-Power
Nachteile
• Schlechtere Performance
• Höherer
Entwicklungsaufwand

32. Vorteile
• Optimale Darstellung
• Einfacher Pflegeaufwand
• Keine Redirects notwendig
• Volle SEO-Power
Nachteile
• Schlechtere Performance
• Höherer
Entwicklungsaufwand

33. Vorteile
• Optimale Darstellung
• Einfacher Pflegeaufwand
• Keine Redirects notwendig
• Volle SEO-Power
Nachteile
• Schlechtere Performance
• Höherer
Entwicklungsaufwand
Von Google
empfohlen!

34. Responsive Webdesign
Die Zutaten

35. 1
2
3
Fluides
Gestaltungsraster
Flexible Bilder
und Videos
„Media Queries“

36. 1
2
3
Fluides
Gestaltungsraster
Flexible Bilder
und Videos
„Media Queries“

37. 1
2
3
Fluides
Gestaltungsraster
Flexible Bilder
und Videos
„Media Queries“

38. Media Queries
Ermöglichen medienabhängige und
mediengerechte Gestaltung

39. Performance
Touch
Ergonomics
Feature Detection
Conditional Loading
Neuer Workflow
Content Strategy

40. Designer Developer

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

43. Style Tiles

45. Prototypen

48. Designer + Developer

49. Quantifizierbarer Nutzen
Das leistet Responsive Webdesign

50. Mobile Traffic + 80%

51. Mobile Traffic
Unique Visitors
+ 80%
+ 25%

52. Mobile Traffic
Unique Visitors
Time spent
+ 80%
+ 25%
+ 10%

53. 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%

54. 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%

55. Wie „responsive“ ist
Ihre Website?
Tools

56. www.active-value.de/
responsive-design-viewer

57. Haben Sie Fragen?

58. Vielen Dank!
daniel.riemer@active-value.de