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?

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

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?

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

Ladezeit für 834,9 kb:
834,9 kb = 15 Sekunden
834,9 kb = 0,1 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

Ladezeit für 584,7 kb:
10

11
http://tools.pingdom.com/fpt/
Pingdom Website Speed Test

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 Graﬁken 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/
Hintergrundgraﬁken; .png oder .gif für Layoutgraﬁken; 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

<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
20
Bildquelle: http://www.apple.com/de/
Bildquelle: http://www.apple.com/de/
Das Picture Element übergibt, passend zum Endgerät/Auﬂö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>

Einleitung <picture> Element
Durch das <picture> Element sind Entwickler/Designer ﬂexibler 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 immer 
in 100x100 Pixeln per CSS ausgegeben
25

26

Viewport-basierte Bildauswahl
27
Bild-Quelle: http://www.html5rocks.com/en/tutorials/responsive/picture-element/

Wann sollten wir welche Auswahl deﬁnieren?
• 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
geograﬁschen 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!

37
http://caniuse.com/#search=Geolocation
Can I use Geolocation?

38
https://www.maxmind.com/de/geoip2-services-and-databases
Fragen ist nett. Einfach machen ist besser.

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 Beﬁnden des Nutzers
Sitzt der Nutzer auf dem Sofa? 
Beﬁndet 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

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 nicht 
verfü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 Desktop 
die Conversion auszulösen.

48
Lösung 2: Link zum Produkt per 
E-Mail zuschicken, um am Desktop 
die 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

61
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
auf google.de
Hier sichtbar: https://schema.org/MediaObject Markup
• Audio
• Downloads
• Bilder
• Musikvideos
• Videos im allgemeinen

63
auf google.de
Hier sichtbar: https://schema.org/SoftwareApplication Markup
• MobileApplication (Apps)
• Videogames
• WebApplication

auf google.de
64
Hier sichtbar: https://schema.org/Event Markup
• BusinessEvent
• ComedyEvent
• DanceEvent
• DeliveryEvent
• EducationEvent
• Festival
• FoodEvent
• SaleEvent
• SportsEvent

https://www.google.de/webmasters/markup-helper/u/0/
Structured Data Integration
65

Structured Data Testing Tool
66
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

• 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 modiﬁziert
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/

71
http://caniuse.com/#feat=http2
Can i use HTTP/2?

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/

Podcast zum Relaunch von Expedia
77
http://responsivewebdesign.com/podcast/expedia.html
http://responsivewebdesign.com/podcast/expedia-two.html

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

Mobile friendly websites on SMX 2016

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (10)

Ähnlich wie Mobile friendly websites on SMX 2016

Ähnlich wie Mobile friendly websites on SMX 2016 (20)

Mobile friendly websites on SMX 2016