Internet to go
Neue Anforderung an die Mobilisierung von Websites
am Beispiel der Verlagsmarke Kiepenheuer & Witsch
Online...
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/...
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%...
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 Pflegeaufw...
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 d...
http://www.bbc.com/news?view=beta
Vorteile
•  Optimale Darstellung
•  Einfacher Pflegeaufwand
•  Keine Redirects notwendig
•  Volle SEO-Power
Nachteile
•  Sc...
Vorteile
•  Optimale Darstellung
•  Einfacher Pflegeaufwand
•  Keine Redirects notwendig
•  Volle SEO-Power
Nachteile
•  Sc...
Vorteile
•  Optimale Darstellung
•  Einfacher Pflegeaufwand
•  Keine Redirects notwendig
•  Volle SEO-Power
Nachteile
•  Sc...
Vorteile
•  Optimale Darstellung
•  Einfacher Pflegeaufwand
•  Keine Redirects notwendig
•  Volle SEO-Power
Nachteile
•  Sc...
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 Visitor...
http://electricpulp.com/notes/you-like-apples/
iPhone / iPod Android Non-Mobile
Conversion Rate
Umsatz
+ 65,7%
+ 101,2%
+ ...
Wie „responsive“ ist
Ihre Website?
Tools
www.active-value.de/
responsive-design-viewer
Haben Sie Fragen?
Vielen Dank!
daniel.riemer@active-value.de
Responsive Webdesign am Beispiel von Kiepeneheuer & Witsch
Responsive Webdesign am Beispiel von Kiepeneheuer & Witsch
Responsive Webdesign am Beispiel von Kiepeneheuer & Witsch
Responsive Webdesign am Beispiel von Kiepeneheuer & Witsch
Responsive Webdesign am Beispiel von Kiepeneheuer & Witsch
Responsive Webdesign am Beispiel von Kiepeneheuer & Witsch
Nächste SlideShare
Wird geladen in …5
×

Responsive Webdesign am Beispiel von Kiepeneheuer & Witsch

687 Aufrufe

Veröffentlicht am

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

Veröffentlicht in: Design
0 Kommentare
1 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

Keine Downloads
Aufrufe
Aufrufe insgesamt
687
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
3
Aktionen
Geteilt
0
Downloads
14
Kommentare
0
Gefällt mir
1
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

Responsive Webdesign am Beispiel von Kiepeneheuer & Witsch

  1. 1. Internet to go Neue Anforderung an die Mobilisierung von Websites am Beispiel der Verlagsmarke Kiepenheuer & Witsch Online Marketing Forum 2014 – Düsseldorf
  2. 2. Daniel Riemer User Interface Designer
  3. 3. www.active-value.de
  4. 4. Organisation Inhabergeführte GmbH Standort Düsseldorf Gründungsjahr 2005 Anzahl Mitarbeiter 25
  5. 5. Das Web im Zeitalter von iPhone und iPad
  6. 6. http://bradfrostweb.com/wp-content/uploads/2012/03/03-650x487.png
  7. 7. http://bradfrostweb.com/wp-content/uploads/2012/03/03-650x487.png
  8. 8. http://bradfrostweb.com/wp-content/uploads/2012/03/03-650x487.png
  9. 9. Das Smartphone als ständiger Begleiter
  10. 10. http://instagram.com/p/W2BuMLQLRB/
  11. 11. Verbreitung internetfähiger Smartphones in Deutschland 18% 29% 40% 2011 2012 2013 http://services.google.com/fh/files/misc/omp-2013-de-local.pdf
  12. 12. Smartphones werden überall genutzt 95% http://services.google.com/fh/files/misc/omp-2013-de-local.pdf 87% 78% 72%
  13. 13. Mehr als nur ein Unterhaltungs- und Kommunikationsmedium http://services.google.com/fh/files/misc/omp-2013-de-local.pdf 86% 81%
  14. 14. http://de.slideshare.net/kleinerperkins/kpcb-internet-trends-2013 Mobile Traffic
  15. 15. http://www.flickr.com/photos/brad_frost/7387824246
  16. 16. http://opensignal.com/reports/fragmentation-2013/
  17. 17. Wie können Unternehmen diesem Trend gerecht werden?
  18. 18. Option A „Wir machen nix.“
  19. 19. Vorteile •  Kostengünstig Nachteile •  Führt mittel- bis langfristig zum Aus. Garantiert.
  20. 20. Option A „Wir machen nix.“
  21. 21. Option B Separate, mobile-optimierte Website
  22. 22. http://m.spiegel.de & http://www.spiegel.de
  23. 23. 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
  24. 24. Option B Separate, mobile-optimierte Website
  25. 25. Option C Responsive Webdesign
  26. 26. 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
  27. 27. http://www.bbc.com/news?view=beta
  28. 28. Vorteile •  Optimale Darstellung •  Einfacher Pflegeaufwand •  Keine Redirects notwendig •  Volle SEO-Power Nachteile •  Schlechtere Performance •  Höherer Entwicklungsaufwand
  29. 29. Vorteile •  Optimale Darstellung •  Einfacher Pflegeaufwand •  Keine Redirects notwendig •  Volle SEO-Power Nachteile •  Schlechtere Performance •  Höherer Entwicklungsaufwand
  30. 30. Vorteile •  Optimale Darstellung •  Einfacher Pflegeaufwand •  Keine Redirects notwendig •  Volle SEO-Power Nachteile •  Schlechtere Performance •  Höherer Entwicklungsaufwand
  31. 31. Vorteile •  Optimale Darstellung •  Einfacher Pflegeaufwand •  Keine Redirects notwendig •  Volle SEO-Power Nachteile •  Schlechtere Performance •  Höherer Entwicklungsaufwand Von Google empfohlen!
  32. 32. Responsive Webdesign Die Zutaten
  33. 33. 1 2 3 Fluides Gestaltungsraster Flexible Bilder und Videos „Media Queries“
  34. 34. 1 2 3 Fluides Gestaltungsraster Flexible Bilder und Videos „Media Queries“
  35. 35. 1 2 3 Fluides Gestaltungsraster Flexible Bilder und Videos „Media Queries“
  36. 36. Media Queries Ermöglichen medienabhängige und mediengerechte Gestaltung
  37. 37. Performance Touch Ergonomics Feature Detection Conditional Loading Neuer Workflow Content Strategy
  38. 38. Designer Developer
  39. 39. http://www.flickr.com/photos/brad_frost/7387824246
  40. 40. Style Tiles
  41. 41. Prototypen
  42. 42. Designer + Developer
  43. 43. Quantifizierbarer Nutzen Das leistet Responsive Webdesign
  44. 44. Mobile Traffic + 80%
  45. 45. Mobile Traffic Unique Visitors + 80% + 25%
  46. 46. Mobile Traffic Unique Visitors Time spent + 80% + 25% + 10%
  47. 47. 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%
  48. 48. 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%
  49. 49. Wie „responsive“ ist Ihre Website? Tools
  50. 50. www.active-value.de/ responsive-design-viewer
  51. 51. Haben Sie Fragen?
  52. 52. Vielen Dank! daniel.riemer@active-value.de

×