mobile friendly websites on smx 2016

© 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.“


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

http://www.fastcompany.com/1825005/how-one-second-could-cost-amazon-16-billion-sales

http://montparnas.com/marketing-strategy-innovation-ideas/more-evidence-that-speed-is-key-to-user-experience


Wie schwer ist eigentlich eine [mobile] Website?

© 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?

http://posterxxl.de


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


Beispiel m.zalando.de:

Requests: 129

• 507,3 kb Script

• 243,9 kb Bilder

• 35,7 kb CSS


• 21,8 kb HTML

Page Size: 834,9 kb

7

m.zalando.de


http://m.zalando.de

http://m.zalando.de



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


Beispiel 121watt.de:

Requests: 66

• 321,2 kb Bilder

• 147,6 kb Script


• 18,7 kb CSS

• 13 kb HTML

Page Size: 584.7 kb

9

http://www.121watt.de


http://121watt.de




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

http://tools.pingdom.com/fpt/

Pingdom Website Speed Test

› 12

› 13


Checklisten für den Einstieg in die Optimierung


Ladezeit-Optimierung

Server:

Caching & gzip-Kompression aktivieren

HTTP-Requests reduzieren

Weiterleitungsketten auseinandernehmen

Datenbanken optimieren

Fertige Social Widgets (von Facebook & Co.) bitte nicht nutzen

15


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


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

http://fontello.com/

https://icomoon.io/


<picture>Responsive Bilder für unterschiedliche Anwendungsfälle


Probleme bei skalierten Bildern

19

• kein Qualitätsverlust

• mehr Datenvolumen beim Nutzer

• deutlicher Qualitätsverlust

• weniger Datenvolumen beim Nutzer


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>

http://www.apple.com/de/

http://www.apple.com/de/


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


Beispiel: Zalando auf dem Desktop

22


Beispiel: Zalando auf dem Smartphone

23







24


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







26


Viewport-basierte Bildauswahl

27

Bild-Quelle: http://www.html5rocks.com/en/tutorials/responsive/picture-element/

http://www.html5rocks.com/en/tutorials/responsive/picture-element/


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

https://kraken.io/

kraken.io: Bilder automatisch optimieren


Optimierung für den jeweiligen Nutzer


Was ist Contextual Content?oder: Was ist personalisierter Content?


Unterschiedliche Zielgruppen – personalisierter Content

32


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


Kontext: Der Ort des Nutzers

Location-based Services: Angepasste Inhalte und Funktionen auf Basis der geografischen Position des Nutzers (GPS)

34


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

http://html5demos.com/geo

Geolocation nutzen!

http://html5demos.com/geo


37

http://caniuse.com/#search=Geolocation

Can I use Geolocation?

http://caniuse.com/#search=Geolocation


38

https://www.maxmind.com/de/geoip2-services-and-databases

Fragen ist nett. Einfach machen ist besser.

https://www.maxmind.com/de/geoip2-services-and-databases


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


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


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

https://dan.exposure.co/tbd-fest

Beispiel: exposure.co

https://dan.exposure.co/tbd-fest?slow=1

https://dan.exposure.co/tbd-fest


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


Kontext: Aktueller Status des Nutzers

44

https://think.withgoogle.com/databoard/media/pdfs/the-new-multi-screen-world-study_research-studies.pdf


„ungeeignete Produkte“ mobil verkaufen

45

Problem: Produkt mobil nichtverfügbar oder sinnvoll.

Lösung: Hotline nutzen und Anruf-Button zur Verfügung stellen.



46


Lösung: Hotline nutzen und Anruf-Button zur Verfügung stellen.



47


Lösung 2: Link zum Produkt per E-Mail zuschicken, um am Desktopdie Conversion auszulösen.



48


Lösung 2: Link zum Produkt per E-Mail zuschicken, um am Desktopdie Conversion auszulösen.


Umsetzung von „Contextual Content“:

49

Kontext X, dann Inhalt Y

Ich brauche: Informationen über den Kontext

Ich brauche: Zusatz-Informationen für meinen Inhalt


Wie kann man das alles umsetzen?

…mit Tools natürlich.


51

http://www.monetate.com/

Monetate


52

http://www.gravity.com/

Gravity


53

http://www.apptus.com/

APPTUS


54

https://www.onespot.com/

OneSpot


55

http://www.monoloop.com/

Monoloop


56

https://www.optimizely.com/

Optimizely


57

http://www.webpower.eu/de/

Webpower


58

https://vwo.com/

Visual Website Optimizer


Structured Data


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

http://schema.org/Organization


61


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

https://schema.org/Review

https://schema.org/BreadcrumbList


62


Hier sichtbar: https://schema.org/MediaObject Markup


• Audio

• Downloads

• Bilder

• Musikvideos

• Videos im allgemeinen

https://schema.org/MediaObject


63


Hier sichtbar: https://schema.org/SoftwareApplication Markup


• MobileApplication (Apps)

• Videogames

• WebApplication

https://schema.org/SoftwareApplication



64

Hier sichtbar: https://schema.org/Event Markup


• BusinessEvent

• ComedyEvent

• DanceEvent

• DeliveryEvent

• EducationEvent

• Festival

• FoodEvent

• SaleEvent

• SportsEvent

https://schema.org/Event


https://www.google.de/webmasters/markup-helper/u/0/

Structured Data Integration

65

https://www.google.de/webmasters/markup-helper/u/0/


Structured Data Testing Tool

66

https://developers.google.com/webmasters/structured-data/testing-tool/

https://developers.google.com/webmasters/structured-data/testing-tool/


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

https://developers.google.com/app-indexing/

https://de.onpage.org/wiki/App_Indexing

http://pages.searchmetrics.com/App-Indexing.html


• 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

https://http2.github.io/

HTTP/2

Ausführlicher Artikel über HTTP/2:

https://www.smashingmagazine.com/2016/02/getting-ready-for-http2/

https://http2.github.io/

https://www.smashingmagazine.com/2016/02/getting-ready-for-http2/


71

http://caniuse.com/#feat=http2

Can i use HTTP/2?

http://caniuse.com/#feat=http2


https://www.google.com/analytics/web/#report/visitors-mobile-overview/


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


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


Priorisierung von Teilbereichen

76

https://www.google.com/analytics/web/#report/content-drilldown/

https://www.google.com/analytics/web/#report/content-drilldown/


Podcast zum Relaunch von Expedia

77

http://responsivewebdesign.com/podcast/expedia.html

http://responsivewebdesign.com/podcast/expedia-two.html

http://responsivewebdesign.com/podcast/expedia.html

http://responsivewebdesign.com/podcast/expedia-two.html


Fragen?

78

André Goldmann [email protected]@pixeldreher

121WATTLuise-Ullrich-Str. 2080636 München

Tel.: 089 / 416 126 993

@121WATTT | [email protected]
