Mais conteúdo relacionado
Semelhante a Mobile CRO – Performance Tuning & personalisierte Inhalte (9)
Mobile CRO – Performance Tuning & personalisierte Inhalte
- 1. © 121WATT - André Goldmann@pixeldreher #convcon
Mobile CRO
Performance-Tuning &
Content-Optimierung für
mobile Webseiten
- 2. © 121WATT - André Goldmann@pixeldreher #convcon
André Goldmann
2
• Seit 1996 Front-End-Entwickler
& Optimierer aus Leidenschaft
• Chief Operating Officer bei der 121WATT
Geschäftsinhaber bei Pixeldreher
• Seminare bei der 121WATT:
Mobile SEO
Technical SEO & OnPage
SEO-Grundlagen & SEO für E-Commerce
• Twitter: @pixeldreher
E-Mail: andre.goldmann@121watt.de
- 3. © 121WATT - André Goldmann@pixeldreher #convcon
Los gehts!
- 4. © 121WATT - André Goldmann@pixeldreher #convcon
Performance-Potentiale
finden und nutzen.
- 5. © 121WATT - André Goldmann@pixeldreher #convcon
Für was/wen optimieren wir?
- 6. © 121WATT - André Goldmann@pixeldreher #convcon
Für was/wen optimieren wir?
Umsatz
- 7. © 121WATT - André Goldmann@pixeldreher #convcon
Für was/wen optimieren wir?
Umsatz
Klicks
- 8. © 121WATT - André Goldmann@pixeldreher #convcon
Für was/wen optimieren wir?
Umsatz
Klicks
Besucher
- 9. © 121WATT - André Goldmann@pixeldreher #convcon
Für was/wen optimieren wir?
Umsatz
Klicks
Besucher
Algorithmen
- 10. © 121WATT - André Goldmann@pixeldreher #convcon
Für was/wen optimieren wir?
Umsatz
Klicks
Besucher
Time on site
Algorithmen
- 11. © 121WATT - André Goldmann@pixeldreher #convcon
Für was/wen optimieren wir?
Umsatz
Klicks
Traffic
Besucher
Time on site
Algorithmen
- 12. © 121WATT - André Goldmann@pixeldreher #convcon
Auf allen Ebenen für eine
bessere Conversion.
- 14. © 121WATT - André Goldmann@pixeldreher #convcon
13
Amazon kosten eine Sekunde Wartezeit – ca. 1,6Mrd. $/Jahr
Quelle: http://www.fastcompany.com/1825005/how-one-second-could-cost-amazon-16-billion-sales
- 15. © 121WATT - André Goldmann@pixeldreher #convcon
13
Amazon kosten eine Sekunde Wartezeit – ca. 1,6Mrd. $/Jahr
Quelle: http://www.fastcompany.com/1825005/how-one-second-could-cost-amazon-16-billion-sales
Google hat errechnet, dass eine 4/10 Sekunde täglich Acht Mio. weniger Suchen bedeuten würde
Quelle: http://montparnas.com/marketing-strategy-innovation-ideas/more-evidence-that-speed-is-key-to-user-experience
- 16. © 121WATT - André Goldmann@pixeldreher #convcon
Was wiegt eigentlich eine
Website?
- 17. © 121WATT - André Goldmann
Beispiel posterxxl.de:
15
http://www.posterxxl.de/
Was wiegt eine Website?
- 18. © 121WATT - André Goldmann
Beispiel posterxxl.de:
Requests: 118
15
http://www.posterxxl.de/
Was wiegt eine Website?
- 19. © 121WATT - André Goldmann
Beispiel posterxxl.de:
Requests: 118
• 1500 kb Bilder
15
http://www.posterxxl.de/
Was wiegt eine Website?
- 20. © 121WATT - André Goldmann
Beispiel posterxxl.de:
Requests: 118
• 1500 kb Bilder
• 802,3 kb Script
15
http://www.posterxxl.de/
Was wiegt eine Website?
- 21. © 121WATT - André Goldmann
Beispiel posterxxl.de:
Requests: 118
• 1500 kb Bilder
• 802,3 kb Script
• 290,6 kb Diverses
15
http://www.posterxxl.de/
Was wiegt eine Website?
- 22. © 121WATT - André Goldmann
Beispiel posterxxl.de:
Requests: 118
• 1500 kb Bilder
• 802,3 kb Script
• 290,6 kb Diverses
• 54,1 kb HTML
15
http://www.posterxxl.de/
Was wiegt eine Website?
- 23. © 121WATT - André Goldmann
Beispiel posterxxl.de:
Requests: 118
• 1500 kb Bilder
• 802,3 kb Script
• 290,6 kb Diverses
• 54,1 kb HTML
• 28,6 kb CSS
15
http://www.posterxxl.de/
Was wiegt eine Website?
- 24. © 121WATT - André Goldmann
Beispiel posterxxl.de:
Requests: 118
• 1500 kb Bilder
• 802,3 kb Script
• 290,6 kb Diverses
• 54,1 kb HTML
• 28,6 kb CSS
15
http://www.posterxxl.de/
Was wiegt eine Website?
- 25. © 121WATT - André Goldmann
Beispiel posterxxl.de:
Requests: 118
• 1500 kb Bilder
• 802,3 kb Script
• 290,6 kb Diverses
• 54,1 kb HTML
• 28,6 kb CSS
Page Size: 2.6 MB
15
http://www.posterxxl.de/
Was wiegt eine Website?
- 26. © 121WATT - André Goldmann
Was bedeutet das für mobile?
Ladezeit für 2,6 MB:
16
- 27. © 121WATT - André Goldmann
Was bedeutet das für mobile?
Ladezeit für 2,6 MB:
• GPRS: 56 kbit/sec
2,6 MB = 46 Sekunden
16
- 28. © 121WATT - André Goldmann
Was bedeutet das für mobile?
Ladezeit für 2,6 MB:
• GPRS: 56 kbit/sec
2,6 MB = 46 Sekunden
• EDGE: 220 kbit/sec
2,6 MB = 12 Sekunden
16
- 29. © 121WATT - André Goldmann
Was bedeutet das für mobile?
Ladezeit für 2,6 MB:
• GPRS: 56 kbit/sec
2,6 MB = 46 Sekunden
• EDGE: 220 kbit/sec
2,6 MB = 12 Sekunden
• UMTS (3G): 376 kbit/sec
2,6 MB = 7 Sekunden
16
- 30. © 121WATT - André Goldmann
Was bedeutet das für mobile?
Ladezeit für 2,6 MB:
• GPRS: 56 kbit/sec
2,6 MB = 46 Sekunden
• EDGE: 220 kbit/sec
2,6 MB = 12 Sekunden
• UMTS (3G): 376 kbit/sec
2,6 MB = 7 Sekunden
• HSPA: 7,2 Mbit/sec – 42,2 Mbit/sec
2,6 MB = 0,3 Sekunden
16
- 31. © 121WATT - André Goldmann
Was bedeutet das für mobile?
Ladezeit für 2,6 MB:
• GPRS: 56 kbit/sec
2,6 MB = 46 Sekunden
• EDGE: 220 kbit/sec
2,6 MB = 12 Sekunden
• UMTS (3G): 376 kbit/sec
2,6 MB = 7 Sekunden
• HSPA: 7,2 Mbit/sec – 42,2 Mbit/sec
2,6 MB = 0,3 Sekunden
• LTE (4G): 100 Mbit/sec
2,6 MB = 0,02 Sekunden
16
- 32. © 121WATT - André Goldmann
Beispiel m.zalando.de:
17
m.zalando.de
Was wiegt eine Website?
- 33. © 121WATT - André Goldmann
Beispiel m.zalando.de:
Requests: 129
17
m.zalando.de
Was wiegt eine Website?
- 34. © 121WATT - André Goldmann
Beispiel m.zalando.de:
Requests: 129
• 507,3 kb Script
17
m.zalando.de
Was wiegt eine Website?
- 35. © 121WATT - André Goldmann
Beispiel m.zalando.de:
Requests: 129
• 507,3 kb Script
• 243,9 kb Bilder
17
m.zalando.de
Was wiegt eine Website?
- 36. © 121WATT - André Goldmann
Beispiel m.zalando.de:
Requests: 129
• 507,3 kb Script
• 243,9 kb Bilder
• 35,7 kb CSS
17
m.zalando.de
Was wiegt eine Website?
- 37. © 121WATT - André Goldmann
Beispiel m.zalando.de:
Requests: 129
• 507,3 kb Script
• 243,9 kb Bilder
• 35,7 kb CSS
• 26,1 kb Diverses
17
m.zalando.de
Was wiegt eine Website?
- 38. © 121WATT - André Goldmann
Beispiel m.zalando.de:
Requests: 129
• 507,3 kb Script
• 243,9 kb Bilder
• 35,7 kb CSS
• 26,1 kb Diverses
• 21,8 kb HTML
17
m.zalando.de
Was wiegt eine Website?
- 39. © 121WATT - André Goldmann
Beispiel m.zalando.de:
Requests: 129
• 507,3 kb Script
• 243,9 kb Bilder
• 35,7 kb CSS
• 26,1 kb Diverses
• 21,8 kb HTML
17
m.zalando.de
Was wiegt eine Website?
- 40. © 121WATT - André Goldmann
Beispiel m.zalando.de:
Requests: 129
• 507,3 kb Script
• 243,9 kb Bilder
• 35,7 kb CSS
• 26,1 kb Diverses
• 21,8 kb HTML
Page Size: 834,9 kb
17
m.zalando.de
Was wiegt eine Website?
- 41. © 121WATT - André Goldmann
Was bedeutet das für mobile?
Ladezeit für 834,9 kb:
18
- 42. © 121WATT - André Goldmann
Was bedeutet das für mobile?
Ladezeit für 834,9 kb:
• GPRS: 56 kbit/sec
834,9 kb = 15 Sekunden
18
- 43. © 121WATT - André Goldmann
Was bedeutet das für mobile?
Ladezeit für 834,9 kb:
• GPRS: 56 kbit/sec
834,9 kb = 15 Sekunden
• EDGE: 220 kbit/sec
834,9 kb = 4 Sekunden
18
- 44. © 121WATT - André Goldmann
Was bedeutet das für mobile?
Ladezeit für 834,9 kb:
• GPRS: 56 kbit/sec
834,9 kb = 15 Sekunden
• EDGE: 220 kbit/sec
834,9 kb = 4 Sekunden
• UMTS (3G): 376 kbit/sec
834,9 kb = 2 Sekunden
18
- 45. © 121WATT - André Goldmann
Was bedeutet das für mobile?
Ladezeit für 834,9 kb:
• GPRS: 56 kbit/sec
834,9 kb = 15 Sekunden
• EDGE: 220 kbit/sec
834,9 kb = 4 Sekunden
• UMTS (3G): 376 kbit/sec
834,9 kb = 2 Sekunden
• HSPA: 7,2 Mbit/sec – 42,2 Mbit/sec
834,9 kb = 0,1 Sekunden
18
- 46. © 121WATT - André Goldmann
Was bedeutet das für mobile?
Ladezeit für 834,9 kb:
• GPRS: 56 kbit/sec
834,9 kb = 15 Sekunden
• EDGE: 220 kbit/sec
834,9 kb = 4 Sekunden
• UMTS (3G): 376 kbit/sec
834,9 kb = 2 Sekunden
• HSPA: 7,2 Mbit/sec – 42,2 Mbit/sec
834,9 kb = 0,1 Sekunden
• LTE (4G): 100 Mbit/sec
834,9 kb = 0,008 Sekunden
18
- 47. © 121WATT - André Goldmann
Beispiel 121watt.de:
19
http://www.121watt.de
Was wiegt eine Website?
- 48. © 121WATT - André Goldmann
Beispiel 121watt.de:
Requests: 66
19
http://www.121watt.de
Was wiegt eine Website?
- 49. © 121WATT - André Goldmann
Beispiel 121watt.de:
Requests: 66
• 321,2 kb Bilder
19
http://www.121watt.de
Was wiegt eine Website?
- 50. © 121WATT - André Goldmann
Beispiel 121watt.de:
Requests: 66
• 321,2 kb Bilder
• 147,6 kb Script
19
http://www.121watt.de
Was wiegt eine Website?
- 51. © 121WATT - André Goldmann
Beispiel 121watt.de:
Requests: 66
• 321,2 kb Bilder
• 147,6 kb Script
• 84,3 kb Diverses
19
http://www.121watt.de
Was wiegt eine Website?
- 52. © 121WATT - André Goldmann
Beispiel 121watt.de:
Requests: 66
• 321,2 kb Bilder
• 147,6 kb Script
• 84,3 kb Diverses
• 18,7 kb CSS
19
http://www.121watt.de
Was wiegt eine Website?
- 53. © 121WATT - André Goldmann
Beispiel 121watt.de:
Requests: 66
• 321,2 kb Bilder
• 147,6 kb Script
• 84,3 kb Diverses
• 18,7 kb CSS
• 13 kb HTML
19
http://www.121watt.de
Was wiegt eine Website?
- 54. © 121WATT - André Goldmann
Beispiel 121watt.de:
Requests: 66
• 321,2 kb Bilder
• 147,6 kb Script
• 84,3 kb Diverses
• 18,7 kb CSS
• 13 kb HTML
19
http://www.121watt.de
Was wiegt eine Website?
- 55. © 121WATT - André Goldmann
Beispiel 121watt.de:
Requests: 66
• 321,2 kb Bilder
• 147,6 kb Script
• 84,3 kb Diverses
• 18,7 kb CSS
• 13 kb HTML
Page Size: 584.7 kb
19
http://www.121watt.de
Was wiegt eine Website?
- 56. © 121WATT - André Goldmann
Was bedeutet das für mobile?
Ladezeit für 584,7 kb:
20
- 57. © 121WATT - André Goldmann
Was bedeutet das für mobile?
Ladezeit für 584,7 kb:
• GPRS: 56 kbit/sec
584,7 kb = 10 Sekunden
20
- 58. © 121WATT - André Goldmann
Was bedeutet das für mobile?
Ladezeit für 584,7 kb:
• GPRS: 56 kbit/sec
584,7 kb = 10 Sekunden
• EDGE: 220 kbit/sec
584,7 kb = 3 Sekunden
20
- 59. © 121WATT - André Goldmann
Was bedeutet das für mobile?
Ladezeit für 584,7 kb:
• GPRS: 56 kbit/sec
584,7 kb = 10 Sekunden
• EDGE: 220 kbit/sec
584,7 kb = 3 Sekunden
• UMTS (3G): 376 kbit/sec
584,7 kb = 2 Sekunden
20
- 60. © 121WATT - André Goldmann
Was bedeutet das für mobile?
Ladezeit für 584,7 kb:
• GPRS: 56 kbit/sec
584,7 kb = 10 Sekunden
• EDGE: 220 kbit/sec
584,7 kb = 3 Sekunden
• UMTS (3G): 376 kbit/sec
584,7 kb = 2 Sekunden
• HSPA: 7,2 Mbit/sec – 42,2 Mbit/sec
584,7 kb = 0,08 Sekunden
20
- 61. © 121WATT - André Goldmann
Was bedeutet das für mobile?
Ladezeit für 584,7 kb:
• GPRS: 56 kbit/sec
584,7 kb = 10 Sekunden
• EDGE: 220 kbit/sec
584,7 kb = 3 Sekunden
• UMTS (3G): 376 kbit/sec
584,7 kb = 2 Sekunden
• HSPA: 7,2 Mbit/sec – 42,2 Mbit/sec
584,7 kb = 0,08 Sekunden
• LTE (4G): 100 Mbit/sec
584,7 kb = 0,005 Sekunden
20
- 62. © 121WATT - André Goldmann
21
http://tools.pingdom.com/fpt/
Pingdom Website Speed Test
- 63. © 121WATT - André Goldmann@pixeldreher #convcon
Checklisten für den Einstieg in
die Optimierung
- 64. © 121WATT - André Goldmann@pixeldreher #convcon
Ladezeit-Optimierung
Server:
23
- 65. © 121WATT - André Goldmann@pixeldreher #convcon
Ladezeit-Optimierung
Server:
Caching & gzip-Kompression aktivieren
23
- 66. © 121WATT - André Goldmann@pixeldreher #convcon
Ladezeit-Optimierung
Server:
Caching & gzip-Kompression aktivieren
HTTP-Requests reduzieren
23
- 67. © 121WATT - André Goldmann@pixeldreher #convcon
Ladezeit-Optimierung
Server:
Caching & gzip-Kompression aktivieren
HTTP-Requests reduzieren
Weiterleitungsketten auseinandernehmen
23
- 68. © 121WATT - André Goldmann@pixeldreher #convcon
Ladezeit-Optimierung
Server:
Caching & gzip-Kompression aktivieren
HTTP-Requests reduzieren
Weiterleitungsketten auseinandernehmen
Datenbanken optimieren
23
- 69. © 121WATT - André Goldmann@pixeldreher #convcon
Ladezeit-Optimierung
Server:
Caching & gzip-Kompression aktivieren
HTTP-Requests reduzieren
Weiterleitungsketten auseinandernehmen
Datenbanken optimieren
Fertige Social Widgets (von Facebook & Co.) bitte nicht nutzen
23
- 70. © 121WATT - André Goldmann@pixeldreher #convcon
Ladezeit Optimierung
HTML:
24
- 71. © 121WATT - André Goldmann@pixeldreher #convcon
Ladezeit Optimierung
HTML:
HTML-Kommentare entfernen
24
- 72. © 121WATT - André Goldmann@pixeldreher #convcon
Ladezeit Optimierung
HTML:
HTML-Kommentare entfernen
HTML-Code komprimieren & ungenutztes CSS entfernen
24
- 73. © 121WATT - André Goldmann@pixeldreher #convcon
Ladezeit Optimierung
HTML:
HTML-Kommentare entfernen
HTML-Code komprimieren & ungenutztes CSS entfernen
Inline CSS & JS entfernen und in Dateien ausführen (können gecached
werden)
24
- 74. © 121WATT - André Goldmann@pixeldreher #convcon
Ladezeit Optimierung
HTML:
HTML-Kommentare entfernen
HTML-Code komprimieren & ungenutztes CSS entfernen
Inline CSS & JS entfernen und in Dateien ausführen (können gecached
werden)
CSS: Neue Dateien nicht per @import nachladen
24
- 75. © 121WATT - André Goldmann@pixeldreher #convcon
Ladezeit Optimierung
HTML:
HTML-Kommentare entfernen
HTML-Code komprimieren & ungenutztes CSS entfernen
Inline CSS & JS entfernen und in Dateien ausführen (können gecached
werden)
CSS: Neue Dateien nicht per @import nachladen
CSS & JavaScript komprimieren und an der richtigen Stelle integrieren (am
besten via CDN oder Subdomain)
24
- 76. © 121WATT - André Goldmann@pixeldreher #convcon
Ladezeit Optimierung
HTML:
HTML-Kommentare entfernen
HTML-Code komprimieren & ungenutztes CSS entfernen
Inline CSS & JS entfernen und in Dateien ausführen (können gecached
werden)
CSS: Neue Dateien nicht per @import nachladen
CSS & JavaScript komprimieren und an der richtigen Stelle integrieren (am
besten via CDN oder Subdomain)
CSS3 statt Grafiken für Buttons nutzen
24
- 77. © 121WATT - André Goldmann@pixeldreher #convcon
Ladezeit Optimierung
HTML:
HTML-Kommentare entfernen
HTML-Code komprimieren & ungenutztes CSS entfernen
Inline CSS & JS entfernen und in Dateien ausführen (können gecached
werden)
CSS: Neue Dateien nicht per @import nachladen
CSS & JavaScript komprimieren und an der richtigen Stelle integrieren (am
besten via CDN oder Subdomain)
CSS3 statt Grafiken für Buttons nutzen
Inhalte per AJAX nachladen (gerne auch das, was nicht im Sichtbereich des
Nutzers ist)
24
- 78. © 121WATT - André Goldmann@pixeldreher #convcon
Ladezeit Optimierung
Bilder:
25
- 79. © 121WATT - André Goldmann@pixeldreher #convcon
Ladezeit Optimierung
Bilder:
Bildgrößen und Datei-Formate richtig wählen (.jpg für Fotos/
Hintergrundgrafiken; .png oder .gif für Layoutgrafiken; Alternativ auch .svg
oder .webp)
25
- 80. © 121WATT - André Goldmann@pixeldreher #convcon
Ladezeit Optimierung
Bilder:
Bildgrößen und Datei-Formate richtig wählen (.jpg für Fotos/
Hintergrundgrafiken; .png oder .gif für Layoutgrafiken; Alternativ auch .svg
oder .webp)
Bilder nicht durch CSS- oder HTML-Angaben skalieren
25
- 81. © 121WATT - André Goldmann@pixeldreher #convcon
Ladezeit Optimierung
Bilder:
Bildgrößen und Datei-Formate richtig wählen (.jpg für Fotos/
Hintergrundgrafiken; .png oder .gif für Layoutgrafiken; Alternativ auch .svg
oder .webp)
Bilder nicht durch CSS- oder HTML-Angaben skalieren
Bildqualität reduzieren
25
- 82. © 121WATT - André Goldmann@pixeldreher #convcon
Ladezeit Optimierung
Bilder:
Bildgrößen und Datei-Formate richtig wählen (.jpg für Fotos/
Hintergrundgrafiken; .png oder .gif für Layoutgrafiken; Alternativ auch .svg
oder .webp)
Bilder nicht durch CSS- oder HTML-Angaben skalieren
Bildqualität reduzieren
Icons als Font laden (http://fontello.com/ oder https://icomoon.io/)
25
- 83. © 121WATT - André Goldmann@pixeldreher #convcon
Ladezeit Optimierung
Bilder:
Bildgrößen und Datei-Formate richtig wählen (.jpg für Fotos/
Hintergrundgrafiken; .png oder .gif für Layoutgrafiken; Alternativ auch .svg
oder .webp)
Bilder nicht durch CSS- oder HTML-Angaben skalieren
Bildqualität reduzieren
Icons als Font laden (http://fontello.com/ oder https://icomoon.io/)
Bilder per CDN laden
25
- 84. © 121WATT - André Goldmann@pixeldreher #convcon
Ladezeit Optimierung
Bilder:
Bildgrößen und Datei-Formate richtig wählen (.jpg für Fotos/
Hintergrundgrafiken; .png oder .gif für Layoutgrafiken; Alternativ auch .svg
oder .webp)
Bilder nicht durch CSS- oder HTML-Angaben skalieren
Bildqualität reduzieren
Icons als Font laden (http://fontello.com/ oder https://icomoon.io/)
Bilder per CDN laden
Einsatz des <picture>-Element
25
- 85. © 121WATT - André Goldmann@pixeldreher #convcon
<picture>
Responsive Bilder für unterschiedliche Anwendungsfälle
- 86. © 121WATT - André Goldmann@pixeldreher #convcon
Probleme bei skalierten Bildern
27
- 87. © 121WATT - André Goldmann@pixeldreher #convcon
Probleme bei skalierten Bildern
27
• kein Qualitätsverlust
• mehr Datenvolumen beim Nutzer
- 88. © 121WATT - André Goldmann@pixeldreher #convcon
Probleme bei skalierten Bildern
27
• kein Qualitätsverlust
• mehr Datenvolumen beim Nutzer
• deutlicher Qualitätsverlust
• weniger Datenvolumen beim Nutzer
- 89. © 121WATT - André Goldmann@pixeldreher #convcon
Lösung: <picture>-Element
28
Bildquelle: http://www.apple.com/de/
Bildquelle: http://www.apple.com/de/
Das Picture Element übergibt, passend zum Endgerät/Auflösung die passende Bilddatei aus.
<picture>
<source media="(min-width: 650px)"srcset="images/kitten-stretching.png">
<source media="(min-width: 465px)“ srcset="images/kitten-sitting.png">
<img src="images/kitten-curled.png" alt="a cute kitten">
</picture>
- 90. © 121WATT - André Goldmann@pixeldreher #convcon
Lösung: <picture>-Element
28
Bildquelle: http://www.apple.com/de/
Bildquelle: http://www.apple.com/de/
Das Picture Element übergibt, passend zum Endgerät/Auflösung die passende Bilddatei aus.
<picture>
<source media="(min-width: 650px)"srcset="images/kitten-stretching.png">
<source media="(min-width: 465px)“ srcset="images/kitten-sitting.png">
<img src="images/kitten-curled.png" alt="a cute kitten">
</picture>
- 91. © 121WATT - André Goldmann@pixeldreher #convcon
Lösung: <picture>-Element
28
Bildquelle: http://www.apple.com/de/
Bildquelle: http://www.apple.com/de/
Das Picture Element übergibt, passend zum Endgerät/Auflösung die passende Bilddatei aus.
<picture>
<source media="(min-width: 650px)"srcset="images/kitten-stretching.png">
<source media="(min-width: 465px)“ srcset="images/kitten-sitting.png">
<img src="images/kitten-curled.png" alt="a cute kitten">
</picture>
- 92. © 121WATT - André Goldmann@pixeldreher #convcon
Einleitung <picture> Element
Durch das <picture> Element sind Entwickler/Designer flexibler im Bereich von:
• Art-Direction-basierte Bildauswahl
• Pixel-Dichten-basierte Bildauswahl
• Viewport-basierte Bildauswahl
• Bild-Dateiformat-basierte Bildauswahl (SVG, WebP)
29
- 93. © 121WATT - André Goldmann@pixeldreher #convcon
Beispiel: Zalando auf dem Desktop
30
- 94. © 121WATT - André Goldmann@pixeldreher #convcon
Beispiel: Zalando auf dem Smartphone
31
- 95. © 121WATT - André Goldmann@pixeldreher #convcon
Beispiel: Zalando auf dem Smartphone
31
- 96. © 121WATT - André Goldmann@pixeldreher #convcon
Einleitung <picture> Element
Durch das <picture> Element sind Entwickler/Designer flexibler im Bereich von:
• Art-Direction-basierte Bildauswahl
• Pixel-Dichten-basierte Bildauswahl
• Viewport-basierte Bildauswahl
• Bild-Dateiformat-basierte Bildauswahl (SVG, WebP)
32
- 97. © 121WATT - André Goldmann@pixeldreher #convcon
Pixel-Dichten-basierte Bildauswahl (Pixeldensity)
Für den Nutzer sichtbar:
Bild 100x100 Pixel
für 2fache Pixel-Dichte (iPhone & Co.):
Bild 200x200 Pixel
für 1,5fache Pixeldichte:
Bild 150x150 Pixel
Das Bild selbst wird jedoch immer
in 100x100 Pixeln per CSS ausgegeben
33
- 98. © 121WATT - André Goldmann@pixeldreher #convcon
Einleitung <picture> Element
Durch das <picture> Element sind Entwickler/Designer flexibler im Bereich von:
• Art-Direction-basierte Bildauswahl
• Pixel-Dichten-basierte Bildauswahl
• Viewport-basierte Bildauswahl
• Bild-Dateiformat-basierte Bildauswahl (SVG, WebP)
34
- 99. © 121WATT - André Goldmann@pixeldreher #convcon
Viewport-basierte Bildauswahl
35
Bild-Quelle: http://www.html5rocks.com/en/tutorials/responsive/picture-element/
- 100. © 121WATT - André Goldmann@pixeldreher #convcon
Einleitung <picture> Element
Durch das <picture> Element sind Entwickler/Designer flexibler im Bereich von:
• Art-Direction-basierte Bildauswahl
• Pixel-Dichten-basierte Bildauswahl
• Viewport-basierte Bildauswahl
• Bild-Dateiformat-basierte Bildauswahl (SVG, WebP)
36
- 101. © 121WATT - André Goldmann
37
caniuse.com/#search=picture
Aktueller Browser-Support (Stand 10/2015)
- 102. © 121WATT - André Goldmann@pixeldreher #convcon
Lösungsansatz: <picture> & Picturefill
• JavaScript-Lösung, die das src-Element im <img> mit dem jeweils definierten
Bild austauscht
• Download unter: http://scottjehl.github.io/picturefill/
38
- 103. © 121WATT - André Goldmann@pixeldreher #convcon
Wann sollten wir welche Auswahl definieren?
39
- 104. © 121WATT - André Goldmann@pixeldreher #convcon
Wann sollten wir welche Auswahl definieren?
• Art-Direction-basierte Bildauswahl
(Bildausschnitt enorm wichtig, CTA muss sichtbar sein)
39
- 105. © 121WATT - André Goldmann@pixeldreher #convcon
Wann sollten wir welche Auswahl definieren?
• Art-Direction-basierte Bildauswahl
(Bildausschnitt enorm wichtig, CTA muss sichtbar sein)
• Pixel-Dichten-basierte Bildauswahl
(Zielgruppe ist im High-Resolution Bereich)
39
- 106. © 121WATT - André Goldmann@pixeldreher #convcon
Wann sollten wir welche Auswahl definieren?
• Art-Direction-basierte Bildauswahl
(Bildausschnitt enorm wichtig, CTA muss sichtbar sein)
• Pixel-Dichten-basierte Bildauswahl
(Zielgruppe ist im High-Resolution Bereich)
• Viewport-basierte Bildauswahl
(Usergenerated Content, Performance, automatische Prozesse)
39
- 107. © 121WATT - André Goldmann@pixeldreher #convcon
Wann sollten wir welche Auswahl definieren?
• Art-Direction-basierte Bildauswahl
(Bildausschnitt enorm wichtig, CTA muss sichtbar sein)
• Pixel-Dichten-basierte Bildauswahl
(Zielgruppe ist im High-Resolution Bereich)
• Viewport-basierte Bildauswahl
(Usergenerated Content, Performance, automatische Prozesse)
• Bild-Dateiformat-basierte Bildauswahl (SVG, WebP)
(sollte eher über andere Lösungen geregelt werden. Fallbacks sind in der
Regel eh vorhanden bzw. es wird bereits das beste Format genutzt)
39
- 108. © 121WATT - André Goldmann@pixeldreher #convcon
Auswirkungen
• Art-Direction-basierte Bildauswahl
(Bildausschnitt enorm wichtig, CTA muss sichtbar sein)
• Pixel-Dichten-basierte Bildauswahl
(Zielgruppe ist im High-Resolution Bereich)
• Viewport-basierte Bildauswahl
(User Generated Content, Performance, automatische Prozesse)
• Bild-Dateiformat-basierte Bildauswahl (SVG, WebP)
(sollte eher über andere Lösungen geregelt werden. Fallbacks sind in der
Regel eh vorhanden bzw. es wird bereits das beste Format genutzt)
40
- 109. © 121WATT - André Goldmann
41
https://kraken.io/
kraken.io: Bilder automatisch optimieren
- 110. © 121WATT - André Goldmann
42
https://developers.google.com/speed/
Make the Web Faster Blog
- 111. © 121WATT - André Goldmann@pixeldreher #convcon
Responsive Content =
Contextual Content
- 112. © 121WATT - André Goldmann@pixeldreher #convcon
Was ist Contextual Content?
oder: Was ist personalisierter Content?
- 113. © 121WATT - André Goldmann@pixeldreher #convcon
Unterschiedliche Zielgruppen – personalisierter Content
45
- 114. © 121WATT - André Goldmann@pixeldreher #convcon
Unterschiedliche Zielgruppen – personalisierter Content
45
- 115. © 121WATT - André Goldmann@pixeldreher #convcon
Unterschiedliche Zielgruppen – personalisierter Content
45
- 116. © 121WATT - André Goldmann@pixeldreher #convcon
Unterschiedliche Zielgruppen – personalisierter Content
45
- 117. © 121WATT - André Goldmann@pixeldreher #convcon
Unterschiedliche Zielgruppen – personalisierter Content
45
- 118. © 121WATT - André Goldmann@pixeldreher #convcon
Unterschiedliche Zielgruppen – personalisierter Content
45
- 119. © 121WATT - André Goldmann@pixeldreher #convcon
Unterschiedliche Zielgruppen – personalisierter Content
45
- 120. © 121WATT - André Goldmann@pixeldreher #convcon
Unterschiedliche Zielgruppen – personalisierter Content
45
- 121. © 121WATT - André Goldmann@pixeldreher #convcon
Unterschiedliche Zielgruppen – personalisierter Content
45
- 122. © 121WATT - André Goldmann@pixeldreher #convcon
Kontext: Der Nutzer selbst
Nutzerdaten verwenden, um Inhalte auszuspielen:
• Verbindung zu Social Networks nutzen
• Daten in Cookies speichern oder „nach Login“
Personalisierte Inhalte des Nutzers
Registrierungsoptionen ein/ausblenden
Sortierung der Inhalte
46
- 123. © 121WATT - André Goldmann@pixeldreher #convcon
Kontext: Der Ort des Nutzers
Location-based Services: Angepasste Inhalte und Funktionen auf Basis der
geografischen Position des Nutzers (GPS)
47
- 124. © 121WATT - André Goldmann
Wozu kann man die Geolocation nutzen?
48
- 125. © 121WATT - André Goldmann
Wozu kann man die Geolocation nutzen?
Navigation zu einem Geschäft (festgelegte Adresse)
48
- 126. © 121WATT - André Goldmann
Wozu kann man die Geolocation nutzen?
Navigation zu einem Geschäft (festgelegte Adresse)
Personalisierung von Headlines & Inhalten (Ortsname, Straße etc.)
48
- 127. © 121WATT - André Goldmann
Wozu kann man die Geolocation nutzen?
Navigation zu einem Geschäft (festgelegte Adresse)
Personalisierung von Headlines & Inhalten (Ortsname, Straße etc.)
Lokale Werbung
48
- 128. © 121WATT - André Goldmann
Wozu kann man die Geolocation nutzen?
Navigation zu einem Geschäft (festgelegte Adresse)
Personalisierung von Headlines & Inhalten (Ortsname, Straße etc.)
Lokale Werbung
Geschäftsadressen passend zur Location ausgeben (Seminarstandorte etc.)
48
- 129. © 121WATT - André Goldmann
Wozu kann man die Geolocation nutzen?
Navigation zu einem Geschäft (festgelegte Adresse)
Personalisierung von Headlines & Inhalten (Ortsname, Straße etc.)
Lokale Werbung
Geschäftsadressen passend zur Location ausgeben (Seminarstandorte etc.)
Berechnung von Liefergebühren, Preisen etc.
48
- 130. © 121WATT - André Goldmann
Wozu kann man die Geolocation nutzen?
Navigation zu einem Geschäft (festgelegte Adresse)
Personalisierung von Headlines & Inhalten (Ortsname, Straße etc.)
Lokale Werbung
Geschäftsadressen passend zur Location ausgeben (Seminarstandorte etc.)
Berechnung von Liefergebühren, Preisen etc.
Vorausgefüllte Formularfelder
48
- 131. © 121WATT - André Goldmann
49
http://html5demos.com/geo
Geolocation nutzen!
- 132. © 121WATT - André Goldmann
50
http://caniuse.com/#search=Geolocation
Can I use Geolocation?
- 133. © 121WATT - André Goldmann
51
https://www.maxmind.com/de/geoip2-services-and-databases
Fragen ist nett. Einfach machen ist besser.
- 134. © 121WATT - André Goldmann@pixeldreher #convcon
Kontext: Das eigentliche Gerät
Responsive Design: Angepasste Inhaltsmengen, Bedienlogik &
Darstellung der Website.
Darstellung/Funktion der Website auf Basis des Geräts/der
Geräteart
Umleitung zur App-Installation
52
- 135. © 121WATT - André Goldmann@pixeldreher #convcon
Kontext: Uhrzeit des Nutzers
Anpassung der Inhalte je nach Tageszeit bzw. größeren
Zeitabschnitten, wie wochentags & Wochenende oder der aktuellen
Jahreszeit.
Kontaktmöglichkeiten oder Anreise-Informationen am Tag eines
Events
Layout zur Weihnachtszeit etc. automatisch angepasst
Abends eher gedeckte Farben als am Tag
53
- 136. © 121WATT - André Goldmann@pixeldreher #convcon
Kontext: Haltung oder Befinden des Nutzers
Sitzt der Nutzer auf dem Sofa?
Befindet er sich gestresst und beengt auf dem Markt oder in der Bahn?
Hinweis auf sensible Daten vorab geben
Geräteausrichtung nutzen, um Inhalte besser darzustellen
54
- 137. © 121WATT - André Goldmann
55
https://dan.exposure.co/tbd-fest
Beispiel: exposure.co
- 138. © 121WATT - André Goldmann
55
https://dan.exposure.co/tbd-fest
Beispiel: exposure.co
https://dan.exposure.co/tbd-fest?slow=1
- 139. © 121WATT - André Goldmann@pixeldreher #convcon
Kontext: Aktueller Status des Nutzers
Nutzer wechseln zwischen den Geräten und erweitern/aktualisieren ihren Status
während des Prozesses.
56
https://think.withgoogle.com/databoard/media/pdfs/the-new-multi-screen-world-study_research-studies.pdf
- 140. © 121WATT - André Goldmann@pixeldreher #convcon
Kontext: Aktueller Status des Nutzers
57
https://think.withgoogle.com/databoard/media/pdfs/the-new-multi-screen-world-study_research-studies.pdf
- 141. © 121WATT - André Goldmann
„ungeeignete Produkte“ mobil verkaufen
58
- 142. © 121WATT - André Goldmann
„ungeeignete Produkte“ mobil verkaufen
58
Problem: Produkt mobil nicht
verfügbar oder sinnvoll.
- 143. © 121WATT - André Goldmann
„ungeeignete Produkte“ mobil verkaufen
58
Problem: Produkt mobil nicht
verfügbar oder sinnvoll.
Lösung: Hotline nutzen und Anruf-
Button zur Verfügung stellen.
- 144. © 121WATT - André Goldmann
„ungeeignete Produkte“ mobil verkaufen
59
Problem: Produkt mobil nicht
verfügbar oder sinnvoll.
Lösung: Hotline nutzen und Anruf-
Button zur Verfügung stellen.
- 145. © 121WATT - André Goldmann
„ungeeignete Produkte“ mobil verkaufen
60
Problem: Produkt mobil nicht
verfügbar oder sinnvoll.
- 146. © 121WATT - André Goldmann
„ungeeignete Produkte“ mobil verkaufen
60
Problem: Produkt mobil nicht
verfügbar oder sinnvoll.
Lösung 2: Link zum Produkt per
E-Mail zuschicken, um am Desktop
die Conversion auszulösen.
- 147. © 121WATT - André Goldmann
„ungeeignete Produkte“ mobil verkaufen
61
Problem: Produkt mobil nicht
verfügbar oder sinnvoll.
- 148. © 121WATT - André Goldmann
„ungeeignete Produkte“ mobil verkaufen
61
Problem: Produkt mobil nicht
verfügbar oder sinnvoll.
Lösung 2: Link zum Produkt per
E-Mail zuschicken, um am Desktop
die Conversion auszulösen.
- 149. © 121WATT - André Goldmann@pixeldreher #convcon
Umsetzung von „Contextual Content“:
62
Kontext X, dann Inhalt Y
- 150. © 121WATT - André Goldmann@pixeldreher #convcon
Umsetzung von „Contextual Content“:
62
Kontext X, dann Inhalt Y
Ich brauche:
Informationen über den Kontext
- 151. © 121WATT - André Goldmann@pixeldreher #convcon
Umsetzung von „Contextual Content“:
62
Kontext X, dann Inhalt Y
Ich brauche:
Informationen über den Kontext
Ich brauche:
Zusatz-Informationen für meinen Inhalt
- 152. © 121WATT - André Goldmann@pixeldreher #convcon
Wie kann man das alles
umsetzen?
…mit Tools natürlich.
- 153. © 121WATT - André Goldmann
64
http://www.monetate.com/
Monetate
- 154. © 121WATT - André Goldmann
65
http://www.gravity.com/
Gravity
- 155. © 121WATT - André Goldmann
66
http://www.apptus.com/
APPTUS
- 156. © 121WATT - André Goldmann
67
https://www.onespot.com/
OneSpot
- 157. © 121WATT - André Goldmann
68
http://www.monoloop.com/
Monoloop
- 158. © 121WATT - André Goldmann
69
https://www.optimizely.com/
Optimizely
- 159. © 121WATT - André Goldmann
70
http://www.webpower.eu/de/
Webpower
- 160. © 121WATT - André Goldmann
71
https://vwo.com/
Visual Website Optimizer
- 161. © 121WATT - André Goldmann@pixeldreher #convcon
Structured Data
- 162. © 121WATT - André Goldmann
Hier sichtbar: http://schema.org/Organization Markup + MyBusiness Seiten
Weitere mögliche Untergliederungen wären z.B.:
• Airline
• Corporation
• EducationalOrganization
• GovernmentOrganization
• LocalBusiness
• NGO
• PerformingGroup
• SportsOrganization
73
Aktuell sichtbare strukturierte Daten
auf google.de
- 163. © 121WATT - André Goldmann
74
Aktuell sichtbare strukturierte Daten
auf google.de
Hier sichtbar: https://schema.org/Review Markup für Sterne & Reviews sowie
https://schema.org/BreadcrumbList für Breadcrumbs.
Reviews & Sterne können z.B. für folgende Seiten-Typen genutzt werden:
• Organisationen
• Produkte
• „Plätze“ (Orte)
• Angebote
• Marken
• Events
• Services
• Kreative Arbeiten
- 164. © 121WATT - André Goldmann
75
Aktuell sichtbare strukturierte Daten
auf google.de
Hier sichtbar: https://schema.org/MediaObject Markup
Weitere mögliche Untergliederungen wären z.B.:
• Audio
• Downloads
• Bilder
• Musikvideos
• Videos im allgemeinen
- 165. © 121WATT - André Goldmann
76
Aktuell sichtbare strukturierte Daten
auf google.de
Hier sichtbar: https://schema.org/SoftwareApplication Markup
Weitere mögliche Untergliederungen wären z.B.:
• MobileApplication (Apps)
• Videogames
• WebApplication
- 166. © 121WATT - André Goldmann
Aktuell sichtbare strukturierte Daten
auf google.de
77
Hier sichtbar: https://schema.org/Event Markup
Weitere mögliche Untergliederungen wären z.B.:
• BusinessEvent
• ComedyEvent
• DanceEvent
• DeliveryEvent
• EducationEvent
• Festival
• FoodEvent
• SaleEvent
• SportsEvent
- 167. © 121WATT - André Goldmann@pixeldreher #convcon
https://www.google.de/webmasters/markup-helper/u/0/
Structured Data Integration
78
- 168. © 121WATT - André Goldmann@pixeldreher #convcon
Structured Data Testing Tool
79
https://developers.google.com/webmasters/structured-data/testing-tool/
- 169. © 121WATT - André Goldmann@pixeldreher #convcon
Schon mal an das
Gerät gedacht?
- 170. © 121WATT - André Goldmann@pixeldreher #convcon
Mögliche Conversions…
81
- 171. © 121WATT - André Goldmann@pixeldreher #convcon
Mögliche Conversions…
81
Bestellung
- 172. © 121WATT - André Goldmann@pixeldreher #convcon
Mögliche Conversions…
81
Bestellung
Klick auf einen Link
- 173. © 121WATT - André Goldmann@pixeldreher #convcon
Mögliche Conversions…
81
Bestellung
Anmeldung
Klick auf einen Link
- 174. © 121WATT - André Goldmann@pixeldreher #convcon
Mögliche Conversions…
81
Bestellung
Anmeldung
Video angesehen
Klick auf einen Link
- 175. © 121WATT - André Goldmann@pixeldreher #convcon
Mögliche Conversions…
81
Bestellung
Anmeldung
Video angesehen
Bewertung geschrieben
Klick auf einen Link
- 176. © 121WATT - André Goldmann@pixeldreher #convcon
Mögliche Conversions…
81
Bestellung
Anmeldung
Video angesehen
Kommentar hinterlassen
Bewertung geschrieben
Klick auf einen Link
- 177. © 121WATT - André Goldmann@pixeldreher #convcon
Mögliche Conversions…
81
Bestellung
Anmeldung
Video angesehen
Kommentar hinterlassen
Bewertung geschrieben
Klick auf einen Link
Allgemeine Interaktion
- 178. © 121WATT - André Goldmann@pixeldreher #convcon
Mögliche Conversions…
81
Bestellung
Anmeldung
Video angesehen
Kommentar hinterlassen
Bewertung geschrieben
Klick auf einen Link
Allgemeine Interaktion Social Sharing
- 179. © 121WATT - André Goldmann@pixeldreher #convcon
Mögliche Conversions…
81
Bestellung
Anmeldung
Video angesehen
Kommentar hinterlassen
Bewertung geschrieben
Klick auf einen Link
Allgemeine Interaktion Social Sharing
?
- 180. © 121WATT - André Goldmann
Telefonnummern nutzen
82
- 181. © 121WATT - André Goldmann
Telefonnummern nutzen
• Aufbau wie beim mailto: Link für E-Mails
<a href="tel:+4989416126990">089 / 416 126 990</a>
82
- 182. © 121WATT - André Goldmann
Telefonnummern nutzen
• Aufbau wie beim mailto: Link für E-Mails
<a href="tel:+4989416126990">089 / 416 126 990</a>
• internationale Nummern-Präfix für das Land nutzen (Bsp.: +49 statt 0)
82
- 183. © 121WATT - André Goldmann
Telefonnummern nutzen
• Aufbau wie beim mailto: Link für E-Mails
<a href="tel:+4989416126990">089 / 416 126 990</a>
• internationale Nummern-Präfix für das Land nutzen (Bsp.: +49 statt 0)
• nach Möglichkeit eigene „Online“-Rufnummer nutzen, um Tracking zu
ermöglichen
82
- 184. © 121WATT - André Goldmann
83
www.intelliad.de/telefon-tracking/
Alternative Call-Tracking Services
- 185. © 121WATT - André Goldmann
84
https://www.infinitycloud.com/call-tracking
Alternative Call-Tracking Services
- 186. © 121WATT - André Goldmann@pixeldreher #convcon
Ausblick in die Zukunft
- 187. © 121WATT - André Goldmann
• Googles Antwort auf „Instant Articles“ von
Facebook
• Komprimiert den Code auf ein Minimum
(AMP HTML)
• Code wird bei Google gecached und
ausgegeben
• Analytics, Ad-Code und Co. werden entfernt
Monetarisierung kann über neue, eigens für
AMP angelegte Ad-Formate, Abomodelle und
Bezahlschranken vorgenommen werden
86
https://www.ampproject.org/
Accelerated Mobile Pages (AMP)
- 188. © 121WATT - André Goldmann@pixeldreher #convcon
Fragen?
87
André Goldmann
andre.goldmann@121watt.de
@pixeldreher
121WATT
Luise-Ullrich-Str. 20
80636 München
Tel.: 089 / 416 126 993
@121WATTT | info@121watt.de
www.121watt.de