Contenu connexe
Similaire à Mobile friendly websites on SMX 2016 (20)
Mobile friendly websites on SMX 2016
- 1. © 121WATT - André Goldmann@fuchsfaktor10 #smx
„Hallo? Haaaaallo???
Können Sie mich hören??
Die Verbindung ist so schlecht.
Mobile-friendly sind Sie aber nicht grad.“
- 2. © 121WATT - André Goldmann@fuchsfaktor10 #smx
Wie kriegen wir unsere
Daten schnell durch die
Leitung?
- 3. © 121WATT - André Goldmann@fuchsfaktor10 #smx
3
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
- 4. © 121WATT - André Goldmann@fuchsfaktor10 #smx
Wie schwer ist eigentlich eine
[mobile] Website?
- 5. © 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
5
http://www.posterxxl.de/
Wie schwer ist eine [mobile] Website?
- 6. © 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
6
- 7. © 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
7
m.zalando.de
Wie schwer ist eine [mobile] Website?
- 8. © 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
8
- 9. © 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
9
http://www.121watt.de
Wie schwer ist eine [mobile] Website?
- 10. © 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
10
- 11. © 121WATT - André Goldmann
11
http://tools.pingdom.com/fpt/
Pingdom Website Speed Test
- 14. © 121WATT - André Goldmann@fuchsfaktor10 #smx
Checklisten für den Einstieg in
die Optimierung
- 15. © 121WATT - André Goldmann@fuchsfaktor10 #smx
Ladezeit-Optimierung
Server:
Caching & gzip-Kompression aktivieren
HTTP-Requests reduzieren
Weiterleitungsketten auseinandernehmen
Datenbanken optimieren
Fertige Social Widgets (von Facebook & Co.) bitte nicht nutzen
15
- 16. © 121WATT - André Goldmann@fuchsfaktor10 #smx
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)
16
- 17. © 121WATT - André Goldmann@fuchsfaktor10 #smx
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
17
- 18. © 121WATT - André Goldmann@fuchsfaktor10 #smx
<picture>
Responsive Bilder für unterschiedliche Anwendungsfälle
- 19. © 121WATT - André Goldmann@fuchsfaktor10 #smx
Probleme bei skalierten Bildern
19
• kein Qualitätsverlust
• mehr Datenvolumen beim Nutzer
• deutlicher Qualitätsverlust
• weniger Datenvolumen beim Nutzer
- 20. © 121WATT - André Goldmann@fuchsfaktor10 #smx
Lösung: <picture>-Element
20
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>
- 21. © 121WATT - André Goldmann@fuchsfaktor10 #smx
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
21
- 22. © 121WATT - André Goldmann@fuchsfaktor10 #smx
Beispiel: Zalando auf dem Desktop
22
- 23. © 121WATT - André Goldmann@fuchsfaktor10 #smx
Beispiel: Zalando auf dem Smartphone
23
- 24. © 121WATT - André Goldmann@fuchsfaktor10 #smx
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
24
- 25. © 121WATT - André Goldmann@fuchsfaktor10 #smx
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
25
- 26. © 121WATT - André Goldmann@fuchsfaktor10 #smx
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
26
- 27. © 121WATT - André Goldmann@fuchsfaktor10 #smx
Viewport-basierte Bildauswahl
27
Bild-Quelle: http://www.html5rocks.com/en/tutorials/responsive/picture-element/
- 28. © 121WATT - André Goldmann@fuchsfaktor10 #smx
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
(User-Generated Content, Performance, automatische Prozesse)
28
- 29. © 121WATT - André Goldmann
29
https://kraken.io/
kraken.io: Bilder automatisch optimieren
- 30. © 121WATT - André Goldmann@fuchsfaktor10 #smx
Optimierung für den
jeweiligen Nutzer
- 31. © 121WATT - André Goldmann@fuchsfaktor10 #smx
Was ist Contextual Content?
oder: Was ist personalisierter Content?
- 32. © 121WATT - André Goldmann@fuchsfaktor10 #smx
Unterschiedliche Zielgruppen – personalisierter Content
32
- 33. © 121WATT - André Goldmann@fuchsfaktor10 #smx
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
33
- 34. © 121WATT - André Goldmann@fuchsfaktor10 #smx
Kontext: Der Ort des Nutzers
Location-based Services: Angepasste Inhalte und Funktionen auf Basis der
geografischen Position des Nutzers (GPS)
34
- 35. © 121WATT - André Goldmann@fuchsfaktor10 #smx
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
35
- 36. © 121WATT - André Goldmann
36
http://html5demos.com/geo
Geolocation nutzen!
- 37. © 121WATT - André Goldmann
37
http://caniuse.com/#search=Geolocation
Can I use Geolocation?
- 38. © 121WATT - André Goldmann
38
https://www.maxmind.com/de/geoip2-services-and-databases
Fragen ist nett. Einfach machen ist besser.
- 39. © 121WATT - André Goldmann@fuchsfaktor10 #smx
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
39
- 40. © 121WATT - André Goldmann@fuchsfaktor10 #smx
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
40
- 41. © 121WATT - André Goldmann@fuchsfaktor10 #smx
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
41
- 42. © 121WATT - André Goldmann
42
https://dan.exposure.co/tbd-fest
Beispiel: exposure.co
https://dan.exposure.co/tbd-fest?slow=1
- 43. © 121WATT - André Goldmann@fuchsfaktor10 #smx
Kontext: Aktueller Status des Nutzers
Nutzer wechseln zwischen den Geräten und erweitern/aktualisieren ihren Status
während des Prozesses.
43
https://think.withgoogle.com/databoard/media/pdfs/the-new-multi-screen-world-study_research-studies.pdf
- 44. © 121WATT - André Goldmann@fuchsfaktor10 #smx
Kontext: Aktueller Status des Nutzers
44
https://think.withgoogle.com/databoard/media/pdfs/the-new-multi-screen-world-study_research-studies.pdf
- 45. © 121WATT - André Goldmann
„ungeeignete Produkte“ mobil verkaufen
45
Problem: Produkt mobil nicht
verfügbar oder sinnvoll.
Lösung: Hotline nutzen und Anruf-
Button zur Verfügung stellen.
- 46. © 121WATT - André Goldmann
„ungeeignete Produkte“ mobil verkaufen
46
Problem: Produkt mobil nicht
verfügbar oder sinnvoll.
Lösung: Hotline nutzen und Anruf-
Button zur Verfügung stellen.
- 47. © 121WATT - André Goldmann
„ungeeignete Produkte“ mobil verkaufen
47
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.
- 48. © 121WATT - André Goldmann
„ungeeignete Produkte“ mobil verkaufen
48
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.
- 49. © 121WATT - André Goldmann@fuchsfaktor10 #smx
Umsetzung von „Contextual Content“:
49
Kontext X, dann Inhalt Y
Ich brauche:
Informationen über den Kontext
Ich brauche:
Zusatz-Informationen für meinen Inhalt
- 50. © 121WATT - André Goldmann@fuchsfaktor10 #smx
Wie kann man das alles
umsetzen?
…mit Tools natürlich.
- 51. © 121WATT - André Goldmann
51
http://www.monetate.com/
Monetate
- 52. © 121WATT - André Goldmann
52
http://www.gravity.com/
Gravity
- 53. © 121WATT - André Goldmann
53
http://www.apptus.com/
APPTUS
- 54. © 121WATT - André Goldmann
54
https://www.onespot.com/
OneSpot
- 55. © 121WATT - André Goldmann
55
http://www.monoloop.com/
Monoloop
- 56. © 121WATT - André Goldmann
56
https://www.optimizely.com/
Optimizely
- 57. © 121WATT - André Goldmann
57
http://www.webpower.eu/de/
Webpower
- 58. © 121WATT - André Goldmann
58
https://vwo.com/
Visual Website Optimizer
- 59. © 121WATT - André Goldmann@fuchsfaktor10 #smx
Structured Data
- 60. © 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
60
Aktuell sichtbare strukturierte Daten
auf google.de
- 61. © 121WATT - André Goldmann
61
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
- 62. © 121WATT - André Goldmann
62
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
- 63. © 121WATT - André Goldmann
63
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
- 64. © 121WATT - André Goldmann
Aktuell sichtbare strukturierte Daten
auf google.de
64
Hier sichtbar: https://schema.org/Event Markup
Weitere mögliche Untergliederungen wären z.B.:
• BusinessEvent
• ComedyEvent
• DanceEvent
• DeliveryEvent
• EducationEvent
• Festival
• FoodEvent
• SaleEvent
• SportsEvent
- 65. © 121WATT - André Goldmann@fuchsfaktor10 #smx
https://www.google.de/webmasters/markup-helper/u/0/
Structured Data Integration
65
- 66. © 121WATT - André Goldmann@fuchsfaktor10 #smx
Structured Data Testing Tool
66
https://developers.google.com/webmasters/structured-data/testing-tool/
- 67. © 121WATT - André Goldmann@pixeldreher #convcon
Ausblick in die Zukunft
- 68. © 121WATT - André Goldmann
https://developers.google.com/app-indexing/
https://de.onpage.org/wiki/App_Indexing
Studie von Searchmetrics zum App-Indexing:
http://pages.searchmetrics.com/App-Indexing.html
68
App-Indexing
- 69. © 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 modifiziert
Monetarisierung kann über neue, eigens für
AMP angelegte Ad-Formate, Abomodelle und
Bezahlschranken vorgenommen werden
69
https://www.ampproject.org/
Accelerated Mobile Pages (AMP)
- 70. © 121WATT - André Goldmann
70
https://http2.github.io/
HTTP/2
Ausführlicher Artikel über HTTP/2:
https://www.smashingmagazine.com/2016/02/
getting-ready-for-http2/
- 71. © 121WATT - André Goldmann
71
http://caniuse.com/#feat=http2
Can i use HTTP/2?
- 72. © 121WATT - André Goldmann@pixeldreher #convcon
Priorisierung aller
Maßnahmen
- 73. © 121WATT - André Goldmann
https://www.google.com/analytics/web/#report/visitors-mobile-overview/
- 74. © 121WATT - André Goldmann@fuchsfaktor10 #smx
Wie kann ich meine Maßnahmen priorisieren?
74
Hotels:
40% mobile Traffic
Flüge:
20% mobile Traffic
Pauschalreisen:
35% mobile Traffic
Last-Minute:
55% mobile Traffic
Mietwagen:
70% mobile Traffic
Ferienwohnungen:
35% mobile Traffic
- 75. © 121WATT - André Goldmann@fuchsfaktor10 #smx
Wie kann ich meine Maßnahmen priorisieren?
75
Hotels:
40% mobile Traffic
Flüge:
20% mobile Traffic
Pauschalreisen:
35% mobile Traffic
Last-Minute:
55% mobile Traffic
Mietwagen:
70% mobile Traffic
Ferienwohnungen:
35% mobile Traffic
- 76. © 121WATT - André Goldmann@fuchsfaktor10 #smx
Priorisierung von Teilbereichen
76
https://www.google.com/analytics/web/#report/content-drilldown/
- 77. © 121WATT - André Goldmann@fuchsfaktor10 #smx
Podcast zum Relaunch von Expedia
77
http://responsivewebdesign.com/podcast/expedia.html
http://responsivewebdesign.com/podcast/expedia-two.html
- 78. © 121WATT - André Goldmann@fuchsfaktor10 #smx
Fragen?
78
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