© 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.“
© 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.“
© 121WATT - André Goldmann@fuchsfaktor10 #smx
Wie kriegen wir unsere Daten schnell durch die Leitung?
© 121WATT - André Goldmann@fuchsfaktor10 #smx3
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ürdeQuelle: http://montparnas.com/marketing-strategy-innovation-ideas/more-evidence-that-speed-is-key-to-user-experience
© 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?
© 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
© 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?
© 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
© 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?
© 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
© 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
© 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
© 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
© 121WATT - André Goldmann@fuchsfaktor10 #smx
<picture>Responsive Bilder für unterschiedliche Anwendungsfälle
© 121WATT - André Goldmann@fuchsfaktor10 #smx
Probleme bei skalierten Bildern
19
• kein Qualitätsverlust
• mehr Datenvolumen beim Nutzer
• deutlicher Qualitätsverlust
• weniger Datenvolumen beim Nutzer
© 121WATT - André Goldmann@fuchsfaktor10 #smx
Lösung: <picture>-Element
20Bildquelle: 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>
© 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
© 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
© 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 immerin 100x100 Pixeln per CSS ausgegeben
25
© 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
© 121WATT - André Goldmann@fuchsfaktor10 #smx
Viewport-basierte Bildauswahl
27
Bild-Quelle: http://www.html5rocks.com/en/tutorials/responsive/picture-element/
© 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
© 121WATT - André Goldmann@fuchsfaktor10 #smx
Was ist Contextual Content?oder: Was ist personalisierter Content?
© 121WATT - André Goldmann@fuchsfaktor10 #smx
Unterschiedliche Zielgruppen – personalisierter Content
32
© 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
© 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
© 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
© 121WATT - André Goldmann
36
http://html5demos.com/geo
Geolocation nutzen!
© 121WATT - André Goldmann
37
http://caniuse.com/#search=Geolocation
Can I use Geolocation?
© 121WATT - André Goldmann
38
https://www.maxmind.com/de/geoip2-services-and-databases
Fragen ist nett. Einfach machen ist besser.
© 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
© 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
© 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
© 121WATT - André Goldmann
42
https://dan.exposure.co/tbd-fest
Beispiel: exposure.co
https://dan.exposure.co/tbd-fest?slow=1
© 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
© 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
© 121WATT - André Goldmann
„ungeeignete Produkte“ mobil verkaufen
45
Problem: Produkt mobil nichtverfügbar oder sinnvoll.
Lösung: Hotline nutzen und Anruf-Button zur Verfügung stellen.
© 121WATT - André Goldmann
„ungeeignete Produkte“ mobil verkaufen
46
Problem: Produkt mobil nichtverfügbar oder sinnvoll.
Lösung: Hotline nutzen und Anruf-Button zur Verfügung stellen.
© 121WATT - André Goldmann
„ungeeignete Produkte“ mobil verkaufen
47
Problem: Produkt mobil nichtverfügbar oder sinnvoll.
Lösung 2: Link zum Produkt per E-Mail zuschicken, um am Desktopdie Conversion auszulösen.
© 121WATT - André Goldmann
„ungeeignete Produkte“ mobil verkaufen
48
Problem: Produkt mobil nichtverfügbar oder sinnvoll.
Lösung 2: Link zum Produkt per E-Mail zuschicken, um am Desktopdie Conversion auszulösen.
© 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
© 121WATT - André Goldmann@fuchsfaktor10 #smx
Wie kann man das alles umsetzen?
…mit Tools natürlich.
© 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
© 121WATT - André Goldmann
61
Aktuell sichtbare strukturierte Daten auf google.de
Hier sichtbar: https://schema.org/Review Markup für Sterne & Reviews sowiehttps://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
© 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
© 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
© 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
© 121WATT - André Goldmann@fuchsfaktor10 #smx
https://www.google.de/webmasters/markup-helper/u/0/
Structured Data Integration
65
© 121WATT - André Goldmann@fuchsfaktor10 #smx
Structured Data Testing Tool
66
https://developers.google.com/webmasters/structured-data/testing-tool/
© 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
© 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)
© 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/
© 121WATT - André Goldmann
71
http://caniuse.com/#feat=http2
Can i use HTTP/2?
© 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
© 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
© 121WATT - André Goldmann@fuchsfaktor10 #smx
Priorisierung von Teilbereichen
76
https://www.google.com/analytics/web/#report/content-drilldown/
© 121WATT - André Goldmann@fuchsfaktor10 #smx
Podcast zum Relaunch von Expedia
77
http://responsivewebdesign.com/podcast/expedia.html
http://responsivewebdesign.com/podcast/expedia-two.html
© 121WATT - André Goldmann@fuchsfaktor10 #smx
Fragen?
78
André Goldmann [email protected]@pixeldreher
121WATTLuise-Ullrich-Str. 2080636 München
Tel.: 089 / 416 126 993
@121WATTT | [email protected]