Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Mobile friendly websites on SMX 2016

1,246 views

Published on

My presentation on SMX 2016 in Munich.

Published in: Mobile
  • Be the first to comment

Mobile friendly websites on SMX 2016

  1. 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. 2. © 121WATT - André Goldmann@fuchsfaktor10 #smx Wie kriegen wir unsere Daten schnell durch die Leitung?
  3. 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. 4. © 121WATT - André Goldmann@fuchsfaktor10 #smx Wie schwer ist eigentlich eine [mobile] Website?
  5. 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. 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. 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. 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. 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. 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. 11. © 121WATT - André Goldmann 11 http://tools.pingdom.com/fpt/ Pingdom Website Speed Test
  12. 12. › 12
  13. 13. › 13
  14. 14. © 121WATT - André Goldmann@fuchsfaktor10 #smx Checklisten für den Einstieg in die Optimierung
  15. 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. 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. 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. 18. © 121WATT - André Goldmann@fuchsfaktor10 #smx <picture> Responsive Bilder für unterschiedliche Anwendungsfälle
  19. 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. 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. 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. 22. © 121WATT - André Goldmann@fuchsfaktor10 #smx Beispiel: Zalando auf dem Desktop 22
  23. 23. © 121WATT - André Goldmann@fuchsfaktor10 #smx Beispiel: Zalando auf dem Smartphone 23
  24. 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. 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. 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. 27. © 121WATT - André Goldmann@fuchsfaktor10 #smx Viewport-basierte Bildauswahl 27 Bild-Quelle: http://www.html5rocks.com/en/tutorials/responsive/picture-element/
  28. 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. 29. © 121WATT - André Goldmann 29 https://kraken.io/ kraken.io: Bilder automatisch optimieren
  30. 30. © 121WATT - André Goldmann@fuchsfaktor10 #smx Optimierung für den jeweiligen Nutzer
  31. 31. © 121WATT - André Goldmann@fuchsfaktor10 #smx Was ist Contextual Content? oder: Was ist personalisierter Content?
  32. 32. © 121WATT - André Goldmann@fuchsfaktor10 #smx Unterschiedliche Zielgruppen – personalisierter Content 32
  33. 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. 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. 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. 36. © 121WATT - André Goldmann 36 http://html5demos.com/geo Geolocation nutzen!
  37. 37. © 121WATT - André Goldmann 37 http://caniuse.com/#search=Geolocation Can I use Geolocation?
  38. 38. © 121WATT - André Goldmann 38 https://www.maxmind.com/de/geoip2-services-and-databases Fragen ist nett. Einfach machen ist besser.
  39. 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. 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. 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. 42. © 121WATT - André Goldmann 42 https://dan.exposure.co/tbd-fest Beispiel: exposure.co https://dan.exposure.co/tbd-fest?slow=1
  43. 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. 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. 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. 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. 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. 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. 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. 50. © 121WATT - André Goldmann@fuchsfaktor10 #smx Wie kann man das alles umsetzen? …mit Tools natürlich.
  51. 51. © 121WATT - André Goldmann 51 http://www.monetate.com/ Monetate
  52. 52. © 121WATT - André Goldmann 52 http://www.gravity.com/ Gravity
  53. 53. © 121WATT - André Goldmann 53 http://www.apptus.com/ APPTUS
  54. 54. © 121WATT - André Goldmann 54 https://www.onespot.com/ OneSpot
  55. 55. © 121WATT - André Goldmann 55 http://www.monoloop.com/ Monoloop
  56. 56. © 121WATT - André Goldmann 56 https://www.optimizely.com/ Optimizely
  57. 57. © 121WATT - André Goldmann 57 http://www.webpower.eu/de/ Webpower
  58. 58. © 121WATT - André Goldmann 58 https://vwo.com/ Visual Website Optimizer
  59. 59. © 121WATT - André Goldmann@fuchsfaktor10 #smx Structured Data
  60. 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. 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. 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. 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. 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. 65. © 121WATT - André Goldmann@fuchsfaktor10 #smx https://www.google.de/webmasters/markup-helper/u/0/ Structured Data Integration 65
  66. 66. © 121WATT - André Goldmann@fuchsfaktor10 #smx Structured Data Testing Tool 66 https://developers.google.com/webmasters/structured-data/testing-tool/
  67. 67. © 121WATT - André Goldmann@pixeldreher #convcon Ausblick in die Zukunft
  68. 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. 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. 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. 71. © 121WATT - André Goldmann 71 http://caniuse.com/#feat=http2 Can i use HTTP/2?
  72. 72. © 121WATT - André Goldmann@pixeldreher #convcon Priorisierung aller Maßnahmen
  73. 73. © 121WATT - André Goldmann https://www.google.com/analytics/web/#report/visitors-mobile-overview/
  74. 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. 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. 76. © 121WATT - André Goldmann@fuchsfaktor10 #smx Priorisierung von Teilbereichen 76 https://www.google.com/analytics/web/#report/content-drilldown/
  77. 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. 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

×