Submit Search
Upload
Mobile friendly websites on SMX 2016
•
3 likes
•
2,065 views
André Goldmann
Follow
My presentation on SMX 2016 in Munich.
Read less
Read more
Mobile
Report
Share
Report
Share
1 of 78
Download now
Download to read offline
Recommended
Mobile CRO – Performance Tuning & personalisierte Inhalte
Mobile CRO – Performance Tuning & personalisierte Inhalte
André Goldmann
Performance-Optimierung für WordPress-Websites
Performance-Optimierung für WordPress-Websites
André Goldmann
Crawl-Budget-Booster für eine bessere Search Engine Experience
Crawl-Budget-Booster für eine bessere Search Engine Experience
André Goldmann
Wichtiger Frühjahrsputz: 6-Punkte-Plan für Ihre Website
Wichtiger Frühjahrsputz: 6-Punkte-Plan für Ihre Website
André Goldmann
Mobile SEO Grundlagen
Mobile SEO Grundlagen
André Goldmann
Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference...
Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference...
André Goldmann
Die 10 häufigsten Fehler in Relaunch-Projekten
Die 10 häufigsten Fehler in Relaunch-Projekten
André Goldmann
Bilder für das Web optimieren
Bilder für das Web optimieren
André Goldmann
Recommended
Mobile CRO – Performance Tuning & personalisierte Inhalte
Mobile CRO – Performance Tuning & personalisierte Inhalte
André Goldmann
Performance-Optimierung für WordPress-Websites
Performance-Optimierung für WordPress-Websites
André Goldmann
Crawl-Budget-Booster für eine bessere Search Engine Experience
Crawl-Budget-Booster für eine bessere Search Engine Experience
André Goldmann
Wichtiger Frühjahrsputz: 6-Punkte-Plan für Ihre Website
Wichtiger Frühjahrsputz: 6-Punkte-Plan für Ihre Website
André Goldmann
Mobile SEO Grundlagen
Mobile SEO Grundlagen
André Goldmann
Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference...
Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference...
André Goldmann
Die 10 häufigsten Fehler in Relaunch-Projekten
Die 10 häufigsten Fehler in Relaunch-Projekten
André Goldmann
Bilder für das Web optimieren
Bilder für das Web optimieren
André Goldmann
SEO Wettbewerbsanalyse – Tools & Strategien für erfolgreiche SEO
SEO Wettbewerbsanalyse – Tools & Strategien für erfolgreiche SEO
André Goldmann
Mobile Relaunch - Praxistipps zur Entwicklung einer mobilen Website
Mobile Relaunch - Praxistipps zur Entwicklung einer mobilen Website
André Goldmann
Marken-Suchbegriffe finden & nutzen
Marken-Suchbegriffe finden & nutzen
André Goldmann
Die Macht des Nutzerkontexts über Ihre Website-Ziele
Die Macht des Nutzerkontexts über Ihre Website-Ziele
André Goldmann
Effizientes Arbeiten mit dem Screaming Frog SEO-Spider
Effizientes Arbeiten mit dem Screaming Frog SEO-Spider
André Goldmann
Prophylaxe statt Reparatur - Landingpage Probleme aufdecken und beseitigen
Prophylaxe statt Reparatur - Landingpage Probleme aufdecken und beseitigen
André Goldmann
Fehlende Workflows der Google Search Console (GSC) kompensieren
Fehlende Workflows der Google Search Console (GSC) kompensieren
André Goldmann
Website-Optimierung mit Google Optimize
Website-Optimierung mit Google Optimize
André Goldmann
Planung und Aufbau erfolgreicher Landingpages
Planung und Aufbau erfolgreicher Landingpages
André Goldmann
Website-Optimierung mit Google Analytics
Website-Optimierung mit Google Analytics
André Goldmann
Was nicht passt wird responsive gemacht - Extended Edition
Was nicht passt wird responsive gemacht - Extended Edition
Christoph Reinartz
Container Tag – Nie mehr warten auf die IT! - Tag Management Lösung
Container Tag – Nie mehr warten auf die IT! - Tag Management Lösung
Connected-Blog
Responsive Webdesign - Unter der Haube
Responsive Webdesign - Unter der Haube
falconwhite
DC Storm - Tag Management / Container Tag - Nie mehr warten auf die IT
DC Storm - Tag Management / Container Tag - Nie mehr warten auf die IT
DC Storm Deutschland GmbH
Responsive Images
Responsive Images
Sven Wolfermann
PHP Kongress 2010 - Web-Performance
PHP Kongress 2010 - Web-Performance
Nico Steiner
Focus on Quality - Bessere Webfrontends durch Web Components
Focus on Quality - Bessere Webfrontends durch Web Components
PatrickHillert
Webinar: Was die Top eCommerce Firmen über Ihre Performance auf Web- & Mobile
Webinar: Was die Top eCommerce Firmen über Ihre Performance auf Web- & Mobile
SOASTA
Was die Top eCommerce Firmen über Ihre Performance auf Web & Mobile
Was die Top eCommerce Firmen über Ihre Performance auf Web & Mobile
SOASTA
Google Analytics Konferenz 2013: Alexander Knett, e-dialog: Website Speed Ana...
Google Analytics Konferenz 2013: Alexander Knett, e-dialog: Website Speed Ana...
e-dialog GmbH
Push-Benachrichtigungen in SharePoint via SignalR
Push-Benachrichtigungen in SharePoint via SignalR
Christian Heindel
Responsive Mit Irhem Webseiten (German Edition)
Responsive Mit Irhem Webseiten (German Edition)
Koombea
More Related Content
What's hot
SEO Wettbewerbsanalyse – Tools & Strategien für erfolgreiche SEO
SEO Wettbewerbsanalyse – Tools & Strategien für erfolgreiche SEO
André Goldmann
Mobile Relaunch - Praxistipps zur Entwicklung einer mobilen Website
Mobile Relaunch - Praxistipps zur Entwicklung einer mobilen Website
André Goldmann
Marken-Suchbegriffe finden & nutzen
Marken-Suchbegriffe finden & nutzen
André Goldmann
Die Macht des Nutzerkontexts über Ihre Website-Ziele
Die Macht des Nutzerkontexts über Ihre Website-Ziele
André Goldmann
Effizientes Arbeiten mit dem Screaming Frog SEO-Spider
Effizientes Arbeiten mit dem Screaming Frog SEO-Spider
André Goldmann
Prophylaxe statt Reparatur - Landingpage Probleme aufdecken und beseitigen
Prophylaxe statt Reparatur - Landingpage Probleme aufdecken und beseitigen
André Goldmann
Fehlende Workflows der Google Search Console (GSC) kompensieren
Fehlende Workflows der Google Search Console (GSC) kompensieren
André Goldmann
Website-Optimierung mit Google Optimize
Website-Optimierung mit Google Optimize
André Goldmann
Planung und Aufbau erfolgreicher Landingpages
Planung und Aufbau erfolgreicher Landingpages
André Goldmann
Website-Optimierung mit Google Analytics
Website-Optimierung mit Google Analytics
André Goldmann
What's hot
(10)
SEO Wettbewerbsanalyse – Tools & Strategien für erfolgreiche SEO
SEO Wettbewerbsanalyse – Tools & Strategien für erfolgreiche SEO
Mobile Relaunch - Praxistipps zur Entwicklung einer mobilen Website
Mobile Relaunch - Praxistipps zur Entwicklung einer mobilen Website
Marken-Suchbegriffe finden & nutzen
Marken-Suchbegriffe finden & nutzen
Die Macht des Nutzerkontexts über Ihre Website-Ziele
Die Macht des Nutzerkontexts über Ihre Website-Ziele
Effizientes Arbeiten mit dem Screaming Frog SEO-Spider
Effizientes Arbeiten mit dem Screaming Frog SEO-Spider
Prophylaxe statt Reparatur - Landingpage Probleme aufdecken und beseitigen
Prophylaxe statt Reparatur - Landingpage Probleme aufdecken und beseitigen
Fehlende Workflows der Google Search Console (GSC) kompensieren
Fehlende Workflows der Google Search Console (GSC) kompensieren
Website-Optimierung mit Google Optimize
Website-Optimierung mit Google Optimize
Planung und Aufbau erfolgreicher Landingpages
Planung und Aufbau erfolgreicher Landingpages
Website-Optimierung mit Google Analytics
Website-Optimierung mit Google Analytics
Similar to Mobile friendly websites on SMX 2016
Was nicht passt wird responsive gemacht - Extended Edition
Was nicht passt wird responsive gemacht - Extended Edition
Christoph Reinartz
Container Tag – Nie mehr warten auf die IT! - Tag Management Lösung
Container Tag – Nie mehr warten auf die IT! - Tag Management Lösung
Connected-Blog
Responsive Webdesign - Unter der Haube
Responsive Webdesign - Unter der Haube
falconwhite
DC Storm - Tag Management / Container Tag - Nie mehr warten auf die IT
DC Storm - Tag Management / Container Tag - Nie mehr warten auf die IT
DC Storm Deutschland GmbH
Responsive Images
Responsive Images
Sven Wolfermann
PHP Kongress 2010 - Web-Performance
PHP Kongress 2010 - Web-Performance
Nico Steiner
Focus on Quality - Bessere Webfrontends durch Web Components
Focus on Quality - Bessere Webfrontends durch Web Components
PatrickHillert
Webinar: Was die Top eCommerce Firmen über Ihre Performance auf Web- & Mobile
Webinar: Was die Top eCommerce Firmen über Ihre Performance auf Web- & Mobile
SOASTA
Was die Top eCommerce Firmen über Ihre Performance auf Web & Mobile
Was die Top eCommerce Firmen über Ihre Performance auf Web & Mobile
SOASTA
Google Analytics Konferenz 2013: Alexander Knett, e-dialog: Website Speed Ana...
Google Analytics Konferenz 2013: Alexander Knett, e-dialog: Website Speed Ana...
e-dialog GmbH
Push-Benachrichtigungen in SharePoint via SignalR
Push-Benachrichtigungen in SharePoint via SignalR
Christian Heindel
Responsive Mit Irhem Webseiten (German Edition)
Responsive Mit Irhem Webseiten (German Edition)
Koombea
Online / Offline
Online / Offline
Peter Rozek
SDC2011: Web Performance Optimization
SDC2011: Web Performance Optimization
Jakob
Technologie und SEO: Cloud, Big Data und Mobile First angeschaut
Technologie und SEO: Cloud, Big Data und Mobile First angeschaut
Ralf Schwoebel
Google Analytics Konferenz 2013: Holger Tempel, webalytics: Universal Analyti...
Google Analytics Konferenz 2013: Holger Tempel, webalytics: Universal Analyti...
e-dialog GmbH
Automatisierung von Client-seitigen Web-Performance-Optimierungen
Automatisierung von Client-seitigen Web-Performance-Optimierungen
Jakob
Responsive Web Design für Mobilgeräte mit Drupal
Responsive Web Design für Mobilgeräte mit Drupal
Acquia
Was nicht passt wird responsive gemacht - Conference Edition
Was nicht passt wird responsive gemacht - Conference Edition
Christoph Reinartz
Sencha Touch & PhoneGap
Sencha Touch & PhoneGap
Stefan Kolb
Similar to Mobile friendly websites on SMX 2016
(20)
Was nicht passt wird responsive gemacht - Extended Edition
Was nicht passt wird responsive gemacht - Extended Edition
Container Tag – Nie mehr warten auf die IT! - Tag Management Lösung
Container Tag – Nie mehr warten auf die IT! - Tag Management Lösung
Responsive Webdesign - Unter der Haube
Responsive Webdesign - Unter der Haube
DC Storm - Tag Management / Container Tag - Nie mehr warten auf die IT
DC Storm - Tag Management / Container Tag - Nie mehr warten auf die IT
Responsive Images
Responsive Images
PHP Kongress 2010 - Web-Performance
PHP Kongress 2010 - Web-Performance
Focus on Quality - Bessere Webfrontends durch Web Components
Focus on Quality - Bessere Webfrontends durch Web Components
Webinar: Was die Top eCommerce Firmen über Ihre Performance auf Web- & Mobile
Webinar: Was die Top eCommerce Firmen über Ihre Performance auf Web- & Mobile
Was die Top eCommerce Firmen über Ihre Performance auf Web & Mobile
Was die Top eCommerce Firmen über Ihre Performance auf Web & Mobile
Google Analytics Konferenz 2013: Alexander Knett, e-dialog: Website Speed Ana...
Google Analytics Konferenz 2013: Alexander Knett, e-dialog: Website Speed Ana...
Push-Benachrichtigungen in SharePoint via SignalR
Push-Benachrichtigungen in SharePoint via SignalR
Responsive Mit Irhem Webseiten (German Edition)
Responsive Mit Irhem Webseiten (German Edition)
Online / Offline
Online / Offline
SDC2011: Web Performance Optimization
SDC2011: Web Performance Optimization
Technologie und SEO: Cloud, Big Data und Mobile First angeschaut
Technologie und SEO: Cloud, Big Data und Mobile First angeschaut
Google Analytics Konferenz 2013: Holger Tempel, webalytics: Universal Analyti...
Google Analytics Konferenz 2013: Holger Tempel, webalytics: Universal Analyti...
Automatisierung von Client-seitigen Web-Performance-Optimierungen
Automatisierung von Client-seitigen Web-Performance-Optimierungen
Responsive Web Design für Mobilgeräte mit Drupal
Responsive Web Design für Mobilgeräte mit Drupal
Was nicht passt wird responsive gemacht - Conference Edition
Was nicht passt wird responsive gemacht - Conference Edition
Sencha Touch & PhoneGap
Sencha Touch & PhoneGap
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
12.
› 12
13.
› 13
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
Download now