Contenu connexe Similaire à Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014 (20) Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 20141. © 121WATT - André Goldmann
Achtung Falle!
Fehler bei Mobile- und Responsive-Webdesign (RWD) vermeiden
Berlin, 04.11. - 05.11.2014
2. © 121WATT - André Goldmann
André Goldmann
‣ 26.03.1984, erster HTML-Code mit 15 Jahren
‣ Verheiratet, 1 Tochter
‣ Seit 2007 Selbständig bei Pixeldreher & ab 2012: Entwickler, SEO, Online
Marketing-Spezi. Ab 2014 CTO & Referent bei der 121WATT
‣ Davor: Front-End Entwickler bei preisvergleich.de, ab-in-den-urlaub.de,
kredite.de, auto.de & unister.de
‣ Hobbies: meine Familie, Eishockey, Reisen & Konzerte
‣ Betreute Kunden:
• CTO bei der 121WATT
Geschäftsinhaber bei Pixeldreher
Seit 1996 Front-End Entwickler
& Optimierer aus Leidenschaft
• Twitter: @pixeldreher
E-Mail: andre.goldmann@121watt.de
3. © 121WATT - André Goldmann
Ich arbeitete unter anderem für diese Kunden
5. © 121WATT - André Goldmann
Privates Projekt
4
> 374.000 Besucher
6. © 121WATT - André Goldmann
Privates Projekt
4
> 374.000 Besucher
> 3.126.000 Seitenaufrufe
7. © 121WATT - André Goldmann
Privates Projekt
4
> 374.000 Besucher
> 3.126.000 Seitenaufrufe
> 1 TB Traffic im Monat
8. © 121WATT - André Goldmann
Privates Projekt
4
> 374.000 Besucher
> 3.126.000 Seitenaufrufe
> 1 TB Traffic im Monat
80% Mobile-Traffic
9. © 121WATT - André Goldmann
Privates Projekt
Seit März 2014 mit Apps
für Android & iOS
10. © 121WATT - André Goldmann
Konvertiert „mobile“ nicht?
… oder kommt es auf meine Zielgruppe & den Kontext an?
12. © 121WATT - André Goldmann
Fragerunde…
Wer hat schon ein Bahnticket mit dem Handy gekauft?
13. © 121WATT - André Goldmann
Fragerunde…
Schon mal Pizza, Döner oder Nudeln per App bestellt und bezahlt?
14. © 121WATT - André Goldmann
Fragerunde…
Günstige Produkte, Angebote oder Schnäppchen mit dem Handy bestellt?
15. © 121WATT - André Goldmann
Fragerunde…
Versicherung mit dem Handy abgeschlossen?
16. © 121WATT - André Goldmann
Fragerunde…
Reise oder Kurzurlaub mit dem Smartphone gebucht?
17. © 121WATT - André Goldmann
Fragerunde…
Produkte über 1.000,- € per Smartphone bestellt?
18. © 121WATT - André Goldmann
Fragerunde…
Ticket für die ConversionConference mit dem Handy geordert?
19. © 121WATT - André Goldmann
Fragerunde…
Ein Tool oder eine berufliche Dienstleistung per Smartphone gebucht?
20. © 121WATT - André Goldmann
Jetzt nochmal im Kontext
21. © 121WATT - André Goldmann
Fragerunde…
Wer hat schon ein Bahnticket mit dem Handy gekauft?
Unterwegs, schnell und privat
22. © 121WATT - André Goldmann
Fragerunde…
Schon mal Pizza, Döner oder Nudeln per App bestellt und bezahlt?
Praktisch, schnell & „Alltagsproblemlöser“
23. © 121WATT - André Goldmann
Fragerunde…
Günstige Produkte, Angebote oder Schnäppchen mit dem Handy bestellt?
Schnelligkeit, keine Gefahr & privat
24. © 121WATT - André Goldmann
Fragerunde…
Versicherung mit dem Handy abgeschlossen?
Mit Ruhe und Bedacht, komplex & leseintensiv
25. © 121WATT - André Goldmann
Fragerunde…
Reise oder Kurzurlaub mit dem Smartphone gebucht?
Preisvergleich, Visuell & keine einseitige Entscheidung
26. © 121WATT - André Goldmann
Fragerunde…
Produkte über 1.000,- € per Smartphone bestellt?
Vertrauen, „mal eben 1.000,- €“
27. © 121WATT - André Goldmann
Fragerunde…
Ticket für die ConversionConference mit dem Handy geordert?
Business, man sitzt eh vor dem Desktop, genug Zeit
28. © 121WATT - André Goldmann
Fragerunde…
Ein Tool oder eine berufliche Dienstleistung per Smartphone gebucht?
Vergleich, Desktop-Tools, Auswahl, nicht-mobil Verfügbar
29. © 121WATT - André Goldmann
Wie ging das alles eigentlich los?
Können wir eigentlich Desktop mit „Mobile“ vergleichen?
30. © 121WATT - André Goldmann
1993 - Kommerzielle Durchbruch
Bild Quelle: http://www.computerhistory.org/
31. © 121WATT - André Goldmann
1999 - bin ich da schon drin’ oder was?
Bild Quelle: http://www.spiegel.de/
32. © 121WATT - André Goldmann
90er - 2007.
Bild Quelle: https://www.youtube.com/
33. © 121WATT - André Goldmann
2007.
Bild Quelle: http://www.chip.de/
34. © 121WATT - André Goldmann
Die Entwicklung des mobilen Internets
35. © 121WATT - André Goldmann
Die Entwicklung des mobilen Internets
36. © 121WATT - André Goldmann
Die Entwicklung des mobilen Internets
Mosaic
1993
37. © 121WATT - André Goldmann
Die Entwicklung des mobilen Internets
Mosaic
1993
ISDN in DEU
1995
38. © 121WATT - André Goldmann
Die Entwicklung des mobilen Internets
Mosaic
1993
ISDN in DEU
1995
Boris’ ;)
1999
39. © 121WATT - André Goldmann
Die Entwicklung des mobilen Internets
Mosaic
1993
ISDN in DEU
1995
Boris’ ;)
1999
The iPhone
2007
40. © 121WATT - André Goldmann
Die Entwicklung des mobilen Internets
Mosaic
1993
ISDN in DEU
1995
Boris’ ;)
1999
The iPhone
2007
RWD erstmals
erwähnt
05/2010
41. © 121WATT - André Goldmann
Die Entwicklung des mobilen Internets
Mosaic
1993
ISDN in DEU
1995
Boris’ ;)
1999
The iPhone
2007
RWD erstmals
erwähnt
05/2010
Erste RWD
in DEU
seit 2011
42. © 121WATT - André Goldmann
Die Entwicklung des mobilen Internets
Mosaic
1993
ISDN in DEU
1995
Boris’ ;)
1999
The iPhone
2007
RWD erstmals
erwähnt
05/2010
Erste RWD
in DEU
seit 2011
43. © 121WATT - André Goldmann
Die Entwicklung des mobilen Internets
Mosaic
1993
ISDN in DEU
1995
Boris’ ;)
1999
The iPhone
2007
RWD erstmals
erwähnt
05/2010
Erste RWD
in DEU
seit 2011
m.website.de vs. native Apps
44. © 121WATT - André Goldmann
Die Entwicklung des mobilen Internets
Mosaic
1993
ISDN in DEU
1995
Boris’ ;)
1999
The iPhone
2007
RWD erstmals
erwähnt
05/2010
Erste RWD
in DEU
seit 2011
m.website.de vs. native Apps
Tablet-PCs…
45. © 121WATT - André Goldmann
Die Entwicklung des mobilen Internets
Mosaic
1993
ISDN in DEU
1995
Boris’ ;)
1999
The iPhone
2007
RWD erstmals
erwähnt
05/2010
Erste RWD
in DEU
seit 2011
m.website.de vs. native Apps
Tablet-PCs…
18 Jahre vs. 3 Jahre
Gleicher Inhalt & Code
46. © 121WATT - André Goldmann
Das Umdenken der Anwender
kann schnell beginnen.
Zeit für RWD ;)
Bild Quelle: http://www.apple.com/iphone-6/apple-pay/
47. © 121WATT - André Goldmann
Was ist anders bei RWD?
Workflows & Ansätze
49. © 121WATT - André Goldmann
Flexibles Layout
Bildquelle: http://www.apple.com/de/
50. © 121WATT - André Goldmann
Flexibles Layout
Bildquelle: http://www.apple.com/de
51. © 121WATT - André Goldmann
Flexibles Layout
Bildquelle: http://www.apple.com/de
52. © 121WATT - André Goldmann
Flexibles Layout
Bildquelle: http://www.apple.com/de
53. © 121WATT - André Goldmann
Flexibles Layout
Bildquelle: http://www.apple.com/de
54. © 121WATT - André Goldmann
Flexibles Layout
Bildquelle: http://www.apple.com/de
Auflösung von
5120 x 2880 Pixel
56. © 121WATT - André Goldmann
Studie von Google (2012)
57. © 121WATT - André Goldmann
Studie von Google (2012)
• 69% der Teilnehmer würden auf einer mobilfähigen Website ein Produkt kaufen
58. © 121WATT - André Goldmann
Studie von Google (2012)
• 69% der Teilnehmer würden auf einer mobilfähigen Website ein Produkt kaufen
• 61% der mobilen Teilnehmer verlassen eine Website wenn sie nicht sofort das
finden, was sie ursprünglich gesucht haben
59. © 121WATT - André Goldmann
Studie von Google (2012)
• 69% der Teilnehmer würden auf einer mobilfähigen Website ein Produkt kaufen
• 61% der mobilen Teilnehmer verlassen eine Website wenn sie nicht sofort das
finden, was sie ursprünglich gesucht haben
• 50% der Teilnehmer würden ein Produkt nicht nutzen/kaufen, wenn der mobile
Auftritt des Unternehmen „schlecht“ ist
60. © 121WATT - André Goldmann
Studie von Google (2012)
• 69% der Teilnehmer würden auf einer mobilfähigen Website ein Produkt kaufen
• 61% der mobilen Teilnehmer verlassen eine Website wenn sie nicht sofort das
finden, was sie ursprünglich gesucht haben
• 50% der Teilnehmer würden ein Produkt nicht nutzen/kaufen, wenn der mobile
Auftritt des Unternehmen „schlecht“ ist
• Folgen: Frustrationen und Ärger bei den Besuchern/Kunden
52% sehen bei einem schlechten mobilen Auftritt auch Auswirkungen auf
zukünftige Geschäfte mit dem Unternehmen (Image)
48% sind der Meinung, dass solche Unternehmen sich nicht für sie als Kunden
interessieren würden
61. © 121WATT - André Goldmann
Studie von Google (2012)
• 69% der Teilnehmer würden auf einer mobilfähigen Website ein Produkt kaufen
• 61% der mobilen Teilnehmer verlassen eine Website wenn sie nicht sofort das
finden, was sie ursprünglich gesucht haben
• 50% der Teilnehmer würden ein Produkt nicht nutzen/kaufen, wenn der mobile
Auftritt des Unternehmen „schlecht“ ist
• Folgen: Frustrationen und Ärger bei den Besuchern/Kunden
52% sehen bei einem schlechten mobilen Auftritt auch Auswirkungen auf
zukünftige Geschäfte mit dem Unternehmen (Image)
48% sind der Meinung, dass solche Unternehmen sich nicht für sie als Kunden
interessieren würden
https://www.thinkwithgoogle.com/research-studies/what-users-want-most-from-mobile-sites-today.html
62. © 121WATT - André Goldmann
Standards: Android Design
http://developer.android.com/design/index.html
63. © 121WATT - André Goldmann
Standards: iOS Human Interface Guidelines
https://developer.apple.com/library/ios/documentation/userexperience/conceptual/mobilehig/Anatomy.html
64. © 121WATT - André Goldmann
Standards: iOS Human Interface Guidelines
https://developer.apple.com/library/ios/documentation/userexperience/conceptual/mobilehig/Anatomy.html
65. © 121WATT - André Goldmann
Webdesign Workflow (früher)
Als der Nachbar Websites „programmierte“…
66. © 121WATT - André Goldmann
Webdesign Workflow (früher)
67. © 121WATT - André Goldmann
Webdesign Workflow (früher)
• Planung
68. © 121WATT - André Goldmann
Webdesign Workflow (früher)
• Planung
• Wireframes
69. © 121WATT - André Goldmann
Webdesign Workflow (früher)
• Planung
• Wireframes
• Design mit Photoshop, Fireworks, „Illustrator“ & Co.
70. © 121WATT - André Goldmann
Webdesign Workflow (früher)
• Planung
• Wireframes
• Design mit Photoshop, Fireworks, „Illustrator“ & Co.
• Entwicklung der Designs (Pixelgenau für 3 aktuelle Browser und 15 Zoll Röhren)
71. © 121WATT - André Goldmann
Webdesign Workflow (früher)
• Planung
• Wireframes
• Design mit Photoshop, Fireworks, „Illustrator“ & Co.
• Entwicklung der Designs (Pixelgenau für 3 aktuelle Browser und 15 Zoll Röhren)
• Übergabe an den Kunden oder Server
72. © 121WATT - André Goldmann
Webdesign Workflow (früher)
• Planung
• Wireframes
• Design mit Photoshop, Fireworks, „Illustrator“ & Co.
• Entwicklung der Designs (Pixelgenau für 3 aktuelle Browser und 15 Zoll Röhren)
• Übergabe an den Kunden oder Server
• Juhu - online
73. © 121WATT - André Goldmann
Webdesign Workflow (früher)
• Planung
• Wireframes
• Design mit Photoshop, Fireworks, „Illustrator“ & Co.
• Entwicklung der Designs (Pixelgenau für 3 aktuelle Browser und 15 Zoll Röhren)
• Übergabe an den Kunden oder Server
• Juhu - online
• PUNKT
74. © 121WATT - André Goldmann
RWD Workflow
Punkt 1 - 47…
76. © 121WATT - André Goldmann
Probleme im Jahr 2014
• Unzählige Displaygrößen und Auflösungen
77. © 121WATT - André Goldmann
Probleme im Jahr 2014
• Unzählige Displaygrößen und Auflösungen
• Webseiten werden in unterschiedlichen Situationen und Kontexten benutzt
78. © 121WATT - André Goldmann
Probleme im Jahr 2014
• Unzählige Displaygrößen und Auflösungen
• Webseiten werden in unterschiedlichen Situationen und Kontexten benutzt
• Sehr viele Browser/Betriebssysteme
79. © 121WATT - André Goldmann
Probleme im Jahr 2014
• Unzählige Displaygrößen und Auflösungen
• Webseiten werden in unterschiedlichen Situationen und Kontexten benutzt
• Sehr viele Browser/Betriebssysteme
• Webseiten sind dynamisch und reagieren auf Nutzerverhalten
82. © 121WATT - André Goldmann
RWD Workflow
• Planung
• Inhalte / Seitenarchitektur
83. © 121WATT - André Goldmann
RWD Workflow
• Planung
• Inhalte / Seitenarchitektur
• Prototyp -> Testing <- Layout (in einer Schleife bis es „rund“ läuft)
Gestaltung geschieht im Coding-Prozess & nicht mehr in einer PSD-Datei
84. © 121WATT - André Goldmann
RWD Workflow
• Planung
• Inhalte / Seitenarchitektur
• Prototyp -> Testing <- Layout (in einer Schleife bis es „rund“ läuft)
Gestaltung geschieht im Coding-Prozess & nicht mehr in einer PSD-Datei
• Live -> Optimierungsprozess am User beginnt
85. © 121WATT - André Goldmann
Styletil.es
http://styletil.es/
86. © 121WATT - André Goldmann
styletil.es Beispiel
http://styletil.es/
87. © 121WATT - André Goldmann
RWD Performance
Wenn Sekunden zu Stunden werden!
88. © 121WATT - André Goldmann
X
Warum Ladezeit-Optimierung?
89. © 121WATT - André Goldmann
X
• Hohe Bouncerate
Warum Ladezeit-Optimierung?
90. © 121WATT - André Goldmann
X
• Hohe Bouncerate
• schlechte User Experience
Warum Ladezeit-Optimierung?
91. © 121WATT - André Goldmann
X
• Hohe Bouncerate
• schlechte User Experience
• könnte sich negativ für das Ranking bei Google & Co. auswirken
Warum Ladezeit-Optimierung?
92. © 121WATT - André Goldmann
X
• Hohe Bouncerate
• schlechte User Experience
• könnte sich negativ für das Ranking bei Google & Co. auswirken
• < 800ms Idealwert - ab ca 1,5 beeinflusst die Ladezeit das Verhalten des
Suchmaschinen Crawlers
Warum Ladezeit-Optimierung?
93. © 121WATT - André Goldmann
X
• Hohe Bouncerate
• schlechte User Experience
• könnte sich negativ für das Ranking bei Google & Co. auswirken
• < 800ms Idealwert - ab ca 1,5 beeinflusst die Ladezeit das Verhalten des
Suchmaschinen Crawlers
• Mobile Nutzer sind für jede Optimierung dankbar
Warum Ladezeit-Optimierung?
94. © 121WATT - André Goldmann
Ladezeit-Optimierung - Tools
51
tools.pingdom.com/fpt/
95. © 121WATT - André Goldmann
Ladezeit-Optimierung - Tools
52
96. © 121WATT - André Goldmann
Ladezeit-Optimierung - Tools
X
https://www.google.com/analytics/web/#report/content-site-speed-suggestions/
97. © 121WATT - André Goldmann
Ladezeit-Optimierung - Tools
53
http://developers.google.com/speed/pagespeed/insights/
100. © 121WATT - André Goldmann
Ladezeit-Optimierung
Server:
56
101. © 121WATT - André Goldmann
Ladezeit-Optimierung
Server:
• Caching- & Kompression aktivieren
56
102. © 121WATT - André Goldmann
Ladezeit-Optimierung
Server:
• Caching- & Kompression aktivieren
• HTTP Requests reduzieren
56
103. © 121WATT - André Goldmann
Ladezeit-Optimierung
Server:
• Caching- & Kompression aktivieren
• HTTP Requests reduzieren
• Weiterleitungen vermeiden & 404 Fehler (bei Bildern, Skripten & Co.)
beseitigen
56
104. © 121WATT - André Goldmann
Ladezeit-Optimierung
Server:
• Caching- & Kompression aktivieren
• HTTP Requests reduzieren
• Weiterleitungen vermeiden & 404 Fehler (bei Bildern, Skripten & Co.)
beseitigen
• Weiterleitungsketten auseinandernehmen
56
105. © 121WATT - André Goldmann
Ladezeit-Optimierung
Server:
• Caching- & Kompression aktivieren
• HTTP Requests reduzieren
• Weiterleitungen vermeiden & 404 Fehler (bei Bildern, Skripten & Co.)
beseitigen
• Weiterleitungsketten auseinandernehmen
• Datenbanken optimieren
56
106. © 121WATT - André Goldmann
Ladezeit-Optimierung
Server:
• Caching- & Kompression aktivieren
• HTTP Requests reduzieren
• Weiterleitungen vermeiden & 404 Fehler (bei Bildern, Skripten & Co.)
beseitigen
• Weiterleitungsketten auseinandernehmen
• Datenbanken optimieren
• Keine (externen ) Frames einbauen
56
107. © 121WATT - André Goldmann
Ladezeit-Optimierung
Server:
• Caching- & Kompression aktivieren
• HTTP Requests reduzieren
• Weiterleitungen vermeiden & 404 Fehler (bei Bildern, Skripten & Co.)
beseitigen
• Weiterleitungsketten auseinandernehmen
• Datenbanken optimieren
• Keine (externen ) Frames einbauen
• Fertige Social Widgets (von Facebook & Co.) bitte nicht nutzen
56
108. © 121WATT - André Goldmann
57
HTML:
Ladezeit-Optimierung
109. © 121WATT - André Goldmann
57
HTML:
• HTML Kommentare entfernen
Ladezeit-Optimierung
110. © 121WATT - André Goldmann
57
HTML:
• HTML Kommentare entfernen
• HTML Code komprimieren & ungenutztes CSS entfernen
Ladezeit-Optimierung
111. © 121WATT - André Goldmann
57
HTML:
• HTML Kommentare entfernen
• HTML Code komprimieren & ungenutztes CSS entfernen
• Inline CSS & JS entfernen und in Dateien ausführen (können gecached werden)
Ladezeit-Optimierung
112. © 121WATT - André Goldmann
57
HTML:
• HTML Kommentare entfernen
• HTML Code komprimieren & ungenutztes CSS entfernen
• Inline CSS & JS entfernen und in Dateien ausführen (können gecached werden)
• CSS: Nicht per @import neue Dateien „nachladen“
Ladezeit-Optimierung
113. © 121WATT - André Goldmann
57
HTML:
• HTML Kommentare entfernen
• HTML Code komprimieren & ungenutztes CSS entfernen
• Inline CSS & JS entfernen und in Dateien ausführen (können gecached werden)
• CSS: Nicht per @import neue Dateien „nachladen“
• CSS & JavaScript komprimieren und an der richtigen Stelle integrieren (am
besten via CDN oder Subdomain)
Ladezeit-Optimierung
114. © 121WATT - André Goldmann
57
HTML:
• HTML Kommentare entfernen
• HTML Code komprimieren & ungenutztes CSS entfernen
• Inline CSS & JS entfernen und in Dateien ausführen (können gecached werden)
• CSS: Nicht per @import neue Dateien „nachladen“
• CSS & JavaScript komprimieren und an der richtigen Stelle integrieren (am
besten via CDN oder Subdomain)
• CSS3 statt Grafiken für Buttons und Co. nutzen (lässt sich auch besser testen ;-))
Ladezeit-Optimierung
115. © 121WATT - André Goldmann
57
HTML:
• HTML Kommentare entfernen
• HTML Code komprimieren & ungenutztes CSS entfernen
• Inline CSS & JS entfernen und in Dateien ausführen (können gecached werden)
• CSS: Nicht per @import neue Dateien „nachladen“
• CSS & JavaScript komprimieren und an der richtigen Stelle integrieren (am
besten via CDN oder Subdomain)
• CSS3 statt Grafiken für Buttons und Co. nutzen (lässt sich auch besser testen ;-))
• headjs.com <— kombiniert JS Dateien und lädt sie automatisch asynchron
Ladezeit-Optimierung
116. © 121WATT - André Goldmann
57
HTML:
• HTML Kommentare entfernen
• HTML Code komprimieren & ungenutztes CSS entfernen
• Inline CSS & JS entfernen und in Dateien ausführen (können gecached werden)
• CSS: Nicht per @import neue Dateien „nachladen“
• CSS & JavaScript komprimieren und an der richtigen Stelle integrieren (am
besten via CDN oder Subdomain)
• CSS3 statt Grafiken für Buttons und Co. nutzen (lässt sich auch besser testen ;-))
• headjs.com <— kombiniert JS Dateien und lädt sie automatisch asynchron
• Inhalte per AJAX nachladen (gerne auch das, was nicht im Sichtbereich der
Nutzers ist) <— Lazy Load
Ladezeit-Optimierung
117. © 121WATT - André Goldmann
X
Ladezeit-Optimierung: InstantClick
http://instantclick.io/
118. © 121WATT - André Goldmann
X
Ladezeit-Optimierung: InstantClick
http://instantclick.io/
InstantClick tauscht lediglich den
<title> und <body> Inhalt einer
Website aus
Alle weiteren Elemente sind bereits
im Browser-Cache vorhanden und
werden genutzt.
119. © 121WATT - André Goldmann
58
Bilder:
Ladezeit-Optimierung
120. © 121WATT - André Goldmann
58
Bilder:
• Bildgrößen und Datei-Formate richtig wählen (.jpg für Fotos/
Hintergrundgrafiken; .png oder .gif für Layoutgrafiken)
Ladezeit-Optimierung
121. © 121WATT - André Goldmann
58
Bilder:
• Bildgrößen und Datei-Formate richtig wählen (.jpg für Fotos/
Hintergrundgrafiken; .png oder .gif für Layoutgrafiken)
• Bildqualität reduzieren, EXIF- & Meta-Tags entfernen
Ladezeit-Optimierung
122. © 121WATT - André Goldmann
58
Bilder:
• Bildgrößen und Datei-Formate richtig wählen (.jpg für Fotos/
Hintergrundgrafiken; .png oder .gif für Layoutgrafiken)
• Bildqualität reduzieren, EXIF- & Meta-Tags entfernen
• Icons als Font laden (http://fontawesome.io/, http://fontello.com/)
Ladezeit-Optimierung
123. © 121WATT - André Goldmann
58
Bilder:
• Bildgrößen und Datei-Formate richtig wählen (.jpg für Fotos/
Hintergrundgrafiken; .png oder .gif für Layoutgrafiken)
• Bildqualität reduzieren, EXIF- & Meta-Tags entfernen
• Icons als Font laden (http://fontawesome.io/, http://fontello.com/)
• Responsive Bilder nutzen (http://adaptive-images.com/)
Ladezeit-Optimierung
124. © 121WATT - André Goldmann
Icons als Fonts ausgeben
http://fontawesome.io/
http://fontello.com/
125. © 121WATT - André Goldmann
Grafiken für alle Displays/Auflösungen
http://www.imgix.com/
http://adaptive-images.com/
126. © 121WATT - André Goldmann
Nützliche Quellen
• Sitespeed.io
http://www.sitespeed.io/
• PageSpeed Insights (by Google)
https://chrome.google.com/webstore/detail/pagespeed-insights-by-goo/
gplegfbjlmmehdoakndmohflojccocli
• PageSpeed Insights (extern)
http://developers.google.com/speed/pagespeed/insights/
• PhantomJS
https://github.com/macbre/phantomas
• Pingdom Tools
http://tools.pingdom.com/fpt/
• Google Analytics SiteSpeed Datenansicht
https://www.google.com/analytics/web/#report/content-site-speed-suggestions/
• Automatische Bildoptimierung
https://kraken.io/
61
127. © 121WATT - André Goldmann
<picture>
Responsive Bilder für unterschiedliche Anwendungsfälle
128. © 121WATT - André Goldmann
Probleme bei von skalierten Bildern
129. © 121WATT - André Goldmann
Probleme bei von skalierten Bildern
• kein Qualitätsverlust
• mehr Datenvolumen beim Nutzer
130. © 121WATT - André Goldmann
Probleme bei von skalierten Bildern
• kein Qualitätsverlust
• mehr Datenvolumen beim Nutzer
• deutlicher Qualitätsverlust
• weniger Datenvolumen beim Nutzer
131. © 121WATT - André Goldmann
Lösung: <picture>-Element
Bildquelle: http://www.apple.com/de/
Bildquelle: http://www.apple.com/de/
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>
132. © 121WATT - André Goldmann
Lösung: <picture>-Element
Bildquelle: http://www.apple.com/de/
Bildquelle: http://www.apple.com/de/
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>
133. © 121WATT - André Goldmann
Lösung: <picture>-Element
Bildquelle: http://www.apple.com/de/
Bildquelle: http://www.apple.com/de/
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>
134. © 121WATT - André Goldmann
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
• Bild-Dateiformat-basierte Bildauswahl (SVG, WebP)
135. © 121WATT - André Goldmann
Beispiel: Zalando auf dem Desktop
136. © 121WATT - André Goldmann
Beispiel: Zalando auf dem Smartphone
137. © 121WATT - André Goldmann
Beispiel: Zalando auf dem Smartphone
138. © 121WATT - André Goldmann
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
• Bild-Dateiformat-basierte Bildauswahl (SVG, WebP)
139. © 121WATT - André Goldmann
Pixeldichte-basierte Bildauswahl (Pixeldensity)
Für den Nutzer sichtbar:
Bild 100x100 Pixel
für 2fach Pixeldichte (iPhone & Co.):
Bild 200x200 Pixel
für 1,5fach Pixeldichte:
Bild 150x150 Pixel
Das Bild selbst, wird jedoch immer
in 100x100 Pixel per CSS ausgegeben
140. © 121WATT - André Goldmann
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
• Bild-Dateiformat-basierte Bildauswahl (SVG, WebP)
141. © 121WATT - André Goldmann
Viewport-basierte Bildauswahl
Bild-Quelle: http://www.html5rocks.com/en/tutorials/responsive/picture-element/
142. © 121WATT - André Goldmann
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
• Bild-Dateiformat-basierte Bildauswahl (SVG, WebP)
143. © 121WATT - André Goldmann
Aktueller Browser-Support (Stand 10/2014)
http://caniuse.com/#search=picture
144. © 121WATT - André Goldmann
Lösungsansatz: <picture> & Picturefill
• JavaScript Lösung die das src Element im <img> mit dem jeweils definierten Bild
austauscht
• Download unter: http://scottjehl.github.io/picturefill/
145. © 121WATT - André Goldmann
Aktueller Browser-Support (Stand 10/2014)
http://caniuse.com/#search=picture
146. © 121WATT - André Goldmann
Aktueller Browser-Support (Stand 10/2014)
http://caniuse.com/#search=picture
147. © 121WATT - André Goldmann
Wann sollten wir welche Auswahl definieren?
148. © 121WATT - André Goldmann
Wann sollten wir welche Auswahl definieren?
• Art-Direction-basierte Bildauswahl
(Bildausschnitt enorm wichtig, CTA muss sichtbar sein)
149. © 121WATT - André Goldmann
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)
150. © 121WATT - André Goldmann
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
(Usergenerated Content, Performance, automatische Prozesse)
151. © 121WATT - André Goldmann
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
(Usergenerated Content, Performance, automatische Prozesse)
• Bild-Dateiformat-basierte Bildauswahl (SVG, WebP)
(sollte eher über andere Lösungen geregelt werden. Fallbacks sind in der
Regel eh vorhanden bzw. es wird bereits der beste Format genutzt)
153. © 121WATT - André Goldmann
Responsive Formulare
Auch hier kann man vieles falsch machen.
154. © 121WATT - André Goldmann
Regeln für responsive (mobile) Formulare
155. © 121WATT - André Goldmann
Regeln für responsive (mobile) Formulare
Keine wiederholenden Felder & Aktionen
(Passwort wiederholen, E-Mail Adresse
verifizieren)
156. © 121WATT - André Goldmann
Regeln für responsive (mobile) Formulare
Keine wiederholenden Felder & Aktionen
(Passwort wiederholen, E-Mail Adresse
verifizieren)
Vor-Ausfüllung von Feldern ermöglichen
(aktuelles Datum +/- geplante Rückreise etc.)
157. © 121WATT - André Goldmann
Regeln für responsive (mobile) Formulare
Keine wiederholenden Felder & Aktionen
(Passwort wiederholen, E-Mail Adresse
verifizieren)
Vor-Ausfüllung von Feldern ermöglichen
(aktuelles Datum +/- geplante Rückreise etc.)
„Wo bin ich grad“- Status-Balken integrieren
(Schritt 1-3 oder genaue Definition: Was, Wann)
158. © 121WATT - André Goldmann
Regeln für responsive (mobile) Formulare
Keine wiederholenden Felder & Aktionen
(Passwort wiederholen, E-Mail Adresse
verifizieren)
Vor-Ausfüllung von Feldern ermöglichen
(aktuelles Datum +/- geplante Rückreise etc.)
„Wo bin ich grad“- Status-Balken integrieren
(Schritt 1-3 oder genaue Definition: Was, Wann)
Datum? Visuelle Kalender sind am besten zu
benutzen und zeigen dem Nutzer genau, welchen
Tag/Datum er grad wählt - im Vergleich zu dem,
was in den kommenden Folien vorgestellt wird)
160. © 121WATT - André Goldmann
HTML5 und Formulare
Formulare auf dem Desktop machen in der Regel
keinen Spaß - aber man muss ja…
161. © 121WATT - André Goldmann
HTML5 und Formulare
Formulare auf dem Desktop machen in der Regel
keinen Spaß - aber man muss ja…
Status Quo „Mobile Formulare“: Kleineres
Display, Keyboard verdeckt Inhalte, schlechtere
Internetverbindung.
162. © 121WATT - André Goldmann
HTML5 und Formulare
Formulare auf dem Desktop machen in der Regel
keinen Spaß - aber man muss ja…
Status Quo „Mobile Formulare“: Kleineres
Display, Keyboard verdeckt Inhalte, schlechtere
Internetverbindung.
HTML5 macht es uns durch neue Input Types
und Attribute möglich, die Nutzererfahrung von
Formularen zu verbessern!
163. © 121WATT - André Goldmann
Input Typen von HTML5: url
Um eine valide URL einzugeben, muss der Nutzer
zwingend mit http://, ftp:// oder mailto: beginnen.
Beispiel-Code:
<form>
<input type="url" name="homepage">
</form>
164. © 121WATT - André Goldmann
Input Typen von HTML5: tel
Beim tel-Typ wird automatisch die
Zahlentastatur ausgewählt und unnötiges hin
und her wechseln zwischen Zeichen und Zahlen
entfällt.
Beispiel-Code:
<form>
<input type="tel" name="usrtel">
</form>
165. © 121WATT - André Goldmann
Input Typen von HTML5: number
Beispiel-Code:
<form>
<input type="number"
name="number">
</form>
166. © 121WATT - André Goldmann
Input Typen von HTML5: email
Für E-Mail Eingaben wird das @-Zeichen und
der . direkt in der Standard-Tastatur integriert.
Beispiel-Code:
<form>
<input type="tel"
name="tel_number">
</form>
167. © 121WATT - André Goldmann
Input Typen von HTML5: date
Zur Eingabe von Datum-Angaben.
Wochentage werden nicht mit angezeigt, was
wiederum ein Problem werden kann, wenn der
Tag, für den Nutzer von Wichtigkeit ist. Beispiel:
Reisen, Flüge etc.
Beispiel-Code:
<form>
<input type="date" name="bday">
</form>
168. © 121WATT - André Goldmann
Input Typen von HTML5: datetime-local
Zur Eingabe von Datum- & Zeitangaben.
Beispiel-Code:
<form>
<input type="datetime-local"
name="bdaytime">
</form>
169. © 121WATT - André Goldmann
Input Typen von HTML5: color
Zur Eingabe von Farbwerten.
Beispiel-Code:
<form>
<input type="color"
name="favcolor">
</form>
170. © 121WATT - André Goldmann
Formulare auf Autopilot
Der Einsatz von HTML5 ermöglicht es uns,
bereits eingegeben Werte aus anderen
Formularen (auch aus der Vergangenheit) zu
übernehmen.
<input type="text" name="email"
id="email“ placeholder="E-Mail
Adresse" required
autocomplete="email">
https://developers.google.com/web/fundamentals/
input/form/label-and-name-inputs#use-metadata-
to-enable-auto-complete
174. © 121WATT - André Goldmann
Formulare auf Autopilot
https://www.deutschepost.de/de/d/deutsche-post-direkt/datafactory.html
176. © 121WATT - André Goldmann
„normale“ Validierung nach dem Abschicken
https://www.youtube.com/watch?v=FWDDRG93puY
177. © 121WATT - André Goldmann
Real-Time Validierung VOR dem Abschicken
https://www.youtube.com/watch?v=hlU74LIPauo
178. © 121WATT - André Goldmann
Studie zur Real-Time Validierung
http://alistapart.com/article/inline-validation-in-web-forms
Studie ergab das +22% das Formular mit
Real-TimeValidierung komplett ausgefüllt
haben und die Dauer um 42% reduziert
werden konnte
179. © 121WATT - André Goldmann
Formulare sich selbstständig validieren lassen
Einsatz von regulären Ausdrücken zur Vermeidung von Fehleingaben nutzen:
Pflichtfelder nicht mit Javascript validieren sondern direkt im Input Feld:
Platzhalter direkt im Input Feld definieren:
…oder den Autofocus auf das erste Feld setzen:
180. © 121WATT - André Goldmann
Responsive Testing
Bildquelle: http://www.elezea.com/2013/11/rwd-content-modules/
181. © 121WATT - André Goldmann
Responsive Testing
Bildquelle: http://www.elezea.com/2013/11/rwd-content-modules/
182. © 121WATT - André Goldmann
http://alphapixels.com/prepros/
Prepros App (Mac OS, Windows + alle Smartphones)
183. © 121WATT - André Goldmann
http://incident57.com/codekit/
CodeKit (Mac OS + alle Smartphones)
184. © 121WATT - André Goldmann
Wireframe Testing: Balsamiq (Windows, Linux, Mac OS)
https://balsamiq.com/
185. © 121WATT - André Goldmann
Wireframe Testing: JUSTINMIND (Windows, Linux, Mac
OS)
http://www.justinmind.com/
186. © 121WATT - André Goldmann
https://creative.adobe.com/de/products/reflow
Adobe Edge Reflow (Windows, Mac OS)
187. © 121WATT - André Goldmann
http://macaw.co/
MACAW (Mac OS)
194. © 121WATT - André Goldmann
http://lab.maltewassermann.com/viewport-resizer/
Viewport Resizer - Breakpoint Tester
195. © 121WATT - André Goldmann
http://lab.maltewassermann.com/viewport-resizer/
Viewport Resizer - Breakpoint Tester
196. © 121WATT - André Goldmann
responsive.is
http://responsive.is/
197. © 121WATT - André Goldmann
responsive.is
http://responsive.is/
198. © 121WATT - André Goldmann
responsive.is
http://responsive.is/
199. © 121WATT - André Goldmann
Smartphone Simulatoren
iOS Simulator
https://developer.apple.com/library/ios/
documentation/IDEs/Conceptual/
iOS_Simulator_Guide/Introduction/
Introduction.html
Android Simulator
http://developer.android.com/tools/devices/
emulator.html
Windows Phone Simulator
http://msdn.microsoft.com/library/windows/apps/
ff402563(v=vs.105).aspx
Opera Mini Simulator
https://dev.opera.com/articles/installing-opera-
mini-on-your-computer/
Firefox OS Simulator
https://developer.mozilla.org/en-US/docs/Tools/
Firefox_OS_1.1_Simulator
200. © 121WATT - André Goldmann
Smartphone Simulatoren
iOS Simulator
https://developer.apple.com/library/ios/
documentation/IDEs/Conceptual/
iOS_Simulator_Guide/Introduction/
Introduction.html
Android Simulator
http://developer.android.com/tools/devices/
emulator.html
Windows Phone Simulator
http://msdn.microsoft.com/library/windows/apps/
ff402563(v=vs.105).aspx
Opera Mini Simulator
https://dev.opera.com/articles/installing-opera-
mini-on-your-computer/
Firefox OS Simulator
https://developer.mozilla.org/en-US/docs/Tools/
Firefox_OS_1.1_Simulator
kein Touch
201. © 121WATT - André Goldmann
Smartphone Simulatoren
iOS Simulator
https://developer.apple.com/library/ios/
documentation/IDEs/Conceptual/
iOS_Simulator_Guide/Introduction/
Introduction.html
Android Simulator
http://developer.android.com/tools/devices/
emulator.html
Windows Phone Simulator
http://msdn.microsoft.com/library/windows/apps/
ff402563(v=vs.105).aspx
Opera Mini Simulator
https://dev.opera.com/articles/installing-opera-
mini-on-your-computer/
Firefox OS Simulator
https://developer.mozilla.org/en-US/docs/Tools/
Firefox_OS_1.1_Simulator
kein Touch
kein Mobilfunknetz
202. © 121WATT - André Goldmann
Smartphone Simulatoren
iOS Simulator
https://developer.apple.com/library/ios/
documentation/IDEs/Conceptual/
iOS_Simulator_Guide/Introduction/
Introduction.html
Android Simulator
http://developer.android.com/tools/devices/
emulator.html
Windows Phone Simulator
http://msdn.microsoft.com/library/windows/apps/
ff402563(v=vs.105).aspx
Opera Mini Simulator
https://dev.opera.com/articles/installing-opera-
mini-on-your-computer/
Firefox OS Simulator
https://developer.mozilla.org/en-US/docs/Tools/
Firefox_OS_1.1_Simulator
kein Touch
kein Mobilfunknetz
keine CPU vom Device
203. © 121WATT - André Goldmann
Smartphone Simulatoren
iOS Simulator
https://developer.apple.com/library/ios/
documentation/IDEs/Conceptual/
iOS_Simulator_Guide/Introduction/
Introduction.html
Android Simulator
http://developer.android.com/tools/devices/
emulator.html
Windows Phone Simulator
http://msdn.microsoft.com/library/windows/apps/
ff402563(v=vs.105).aspx
Opera Mini Simulator
https://dev.opera.com/articles/installing-opera-
mini-on-your-computer/
Firefox OS Simulator
https://developer.mozilla.org/en-US/docs/Tools/
Firefox_OS_1.1_Simulator
kein Touch
kein Mobilfunknetz
keine CPU vom Device
andere Auflösungen/Pixeldichte
204. © 121WATT - André Goldmann
Smartphone Simulatoren
iOS Simulator
https://developer.apple.com/library/ios/
documentation/IDEs/Conceptual/
iOS_Simulator_Guide/Introduction/
Introduction.html
Android Simulator
http://developer.android.com/tools/devices/
emulator.html
Windows Phone Simulator
http://msdn.microsoft.com/library/windows/apps/
ff402563(v=vs.105).aspx
Opera Mini Simulator
https://dev.opera.com/articles/installing-opera-
mini-on-your-computer/
Firefox OS Simulator
https://developer.mozilla.org/en-US/docs/Tools/
Firefox_OS_1.1_Simulator
kein Touch
kein Mobilfunknetz
keine CPU vom Device
andere Auflösungen/Pixeldichte
Betrachtungsabstand
205. © 121WATT - André Goldmann
Smartphone Simulatoren
iOS Simulator
https://developer.apple.com/library/ios/
documentation/IDEs/Conceptual/
iOS_Simulator_Guide/Introduction/
Introduction.html
Android Simulator
http://developer.android.com/tools/devices/
emulator.html
Windows Phone Simulator
http://msdn.microsoft.com/library/windows/apps/
ff402563(v=vs.105).aspx
Opera Mini Simulator
https://dev.opera.com/articles/installing-opera-
mini-on-your-computer/
Firefox OS Simulator
https://developer.mozilla.org/en-US/docs/Tools/
Firefox_OS_1.1_Simulator
kein Touch
kein Mobilfunknetz
keine CPU vom Device
andere Auflösungen/Pixeldichte
Betrachtungsabstand
Fehlerhafte Feature-Detection
206. © 121WATT - André Goldmann
Network Link Conditioner (Mac OS, iOS)
http://nshipster.com/network-link-conditioner/
207. © 121WATT - André Goldmann
http://opendevicelab.com/
OpenDeviceLab
208. © 121WATT - André Goldmann
https://creative.adobe.com/de/products/inspect
Adobe Edge Inspect (Windows, Mac OS, Android, iOS,
Windowsphone & Amazon Kindle Fire)
209. © 121WATT - André Goldmann
Ghostlab
http://vanamco.com/ghostlab/
Bild Quelle: http://www.html5rocks.com/en/tutorials/tooling/synchronized-cross-device-testing/
210. © 121WATT - André Goldmann
Ghostlab
http://vanam
Bild Quelle: http://www.html5rocks.com/en/tutorials/tooling/synchronized-cross-device-testing/
211. © 121WATT - André Goldmann
UX Recorder für iOS
http://www.uxrecorder.com/
212. © 121WATT - André Goldmann
Silverback App für Mac OS X (Usability Testing)
http://silverbackapp.com/
213. © 121WATT - André Goldmann
Image Testing: Skala Preview (Mac OS, iOS, Android)
http://bjango.com/mac/skalapreview/
214. © 121WATT - André Goldmann
http://typecast.com/
Typecast
215. © 121WATT - André Goldmann
Mobile-Website Conversion Testing
https://www.clicktale.com/
http://www.crazyegg.com/
http://visualwebsiteoptimizer.com/
https://www.optimizely.com/
http://mouseflow.com/
216. © 121WATT - André Goldmann
Performance-Tool: Pingdom
120
tools.pingdom.com/fpt/
217. © 121WATT - André Goldmann
Bonus: Responsive Produkte
218. © 121WATT - André Goldmann
Ist mein Produkt mobil nicht verfügbar?
219. © 121WATT - André Goldmann
Ist mein Produkt mobil nicht verfügbar?
220. © 121WATT - André Goldmann
Mobile Konversion macht mobil keinen Sinn?
221. © 121WATT - André Goldmann
Mobile Konversion macht mobil keinen Sinn?
222. © 121WATT - André Goldmann
Ziel von RWD
124
Was Nutzer
wollen
Unser Ziel
223. © 121WATT - André Goldmann
Ziel von RWD
124
Was Nutzer
wollen
Unser Ziel
224. © 121WATT - André Goldmann
Ziel von RWD
124
Was Nutzer
wollen
Unser Ziel
Ziel von RWD ist eine hohe Schnittmenge
auf beiden Seiten (Nutzer/Anbieter)
225. © 121WATT - André Goldmann
Mit welcher Hand nutzen Sie Ihr
Smartphone?
…bitte mal Arm hoch.
229. © 121WATT - André Goldmann
Zeit für eine Studie
http://www.uxmatters.com/mt/archives/2013/02/how-do-users-really-hold-mobile-devices.php
230. © 121WATT - André Goldmann
Zeit für eine Studie
http://www.uxmatters.com/mt/archives/2013/02/how-do-users-really-hold-mobile-devices.php
Ein-Hand
Gehalten; Ein-Hand
Zwei-Händig
231. © 121WATT - André Goldmann
Zeit für eine Studie
http://www.uxmatters.com/mt/archives/2013/02/how-do-users-really-hold-mobile-devices.php
Ein-Hand
Gehalten; Ein-Hand
Zwei-Händig
49 %
232. © 121WATT - André Goldmann
Zeit für eine Studie
http://www.uxmatters.com/mt/archives/2013/02/how-do-users-really-hold-mobile-devices.php
Ein-Hand
Gehalten; Ein-Hand
Zwei-Händig
36 %
49 %
233. © 121WATT - André Goldmann
Zeit für eine Studie
http://www.uxmatters.com/mt/archives/2013/02/how-do-users-really-hold-mobile-devices.php
Ein-Hand
Gehalten; Ein-Hand
Zwei-Händig
15 %
36 %
49 %
234. © 121WATT - André Goldmann
Zeit für eine Studie: Ein-Hand
Bild Quelle: http://www.uxmatters.com/mt/archives/2013/02/how-do-users-really-hold-mobile-devices.php
235. © 121WATT - André Goldmann
Zeit für eine Studie: Ein-Hand
Bild Quelle: http://www.uxmatters.com/mt/archives/2013/02/how-do-users-really-hold-mobile-devices.php
• 67% mit dem rechten Daumen
236. © 121WATT - André Goldmann
Zeit für eine Studie: Ein-Hand
Bild Quelle: http://www.uxmatters.com/mt/archives/2013/02/how-do-users-really-hold-mobile-devices.php
• 67% mit dem rechten Daumen
• 33% mit dem linken Daumen
237. © 121WATT - André Goldmann
Zeit für eine Studie: Gehalten; Ein-Hand
Bild Quelle: http://www.uxmatters.com/mt/archives/2013/02/how-do-users-really-hold-mobile-devices.php
238. © 121WATT - André Goldmann
Zeit für eine Studie: Gehalten; Ein-Hand
Bild Quelle: http://www.uxmatters.com/mt/archives/2013/02/how-do-users-really-hold-mobile-devices.php
• 72% navigieren mit dem Daumen
239. © 121WATT - André Goldmann
Zeit für eine Studie: Gehalten; Ein-Hand
Bild Quelle: http://www.uxmatters.com/mt/archives/2013/02/how-do-users-really-hold-mobile-devices.php
• 72% navigieren mit dem Daumen
• 28% mit dem Zeigefinger
240. © 121WATT - André Goldmann
Zeit für eine Studie: Gehalten; Ein-Hand
Bild Quelle: http://www.uxmatters.com/mt/archives/2013/02/how-do-users-really-hold-mobile-devices.php
• 72% navigieren mit dem Daumen
• 28% mit dem Zeigefinger
• 79% halten mit der li. Hand
241. © 121WATT - André Goldmann
Zeit für eine Studie: Gehalten; Ein-Hand
Bild Quelle: http://www.uxmatters.com/mt/archives/2013/02/how-do-users-really-hold-mobile-devices.php
• 72% navigieren mit dem Daumen
• 28% mit dem Zeigefinger
• 79% halten mit der li. Hand
• 21% mit der re. Hand
242. © 121WATT - André Goldmann
Zeit für eine Studie: Zwei-Händig
Bild Quelle: http://www.uxmatters.com/mt/archives/2013/02/how-do-users-really-hold-mobile-devices.php
243. © 121WATT - André Goldmann
Zeit für eine Studie: Zwei-Händig
Bild Quelle: http://www.uxmatters.com/mt/archives/2013/02/how-do-users-really-hold-mobile-devices.php
• 90% im Portraitmodus
244. © 121WATT - André Goldmann
Zeit für eine Studie: Zwei-Händig
Bild Quelle: http://www.uxmatters.com/mt/archives/2013/02/how-do-users-really-hold-mobile-devices.php
• 90% im Portraitmodus
• 10% im Landscapemodus
245. © 121WATT - André Goldmann
131
Anmelden & genauere Ergebnisse
246. © 121WATT - André Goldmann
Ergebnis: Webdesign kann nicht überall gleich
aussehen und funktionieren.
247. © 121WATT - André Goldmann
Lohnt sich die Optimierung für Mobile
und brauche ich RWD?
248. © 121WATT - André Goldmann
https://www.google.com/analytics/web/#report/visitors-mobile-overview/
249. © 121WATT - André Goldmann
Schlechte Beispiele
…die man besser nicht wiederholt.
250. © 121WATT - André Goldmann
Mobile Fails
Schade eigentlich. Man hätte, wenn
schon dieser Hinweis mit der E-Mail
kommt, aber mindestens ein Formular
anzeigen können.
253. © 121WATT - André Goldmann
Mobile Fails
Ist hier der Platz zum scrollen
und für die Inhalte ausreichen?
254. © 121WATT - André Goldmann
Mobile Fails
Zu viel Inhalt der keinen Fokus zulässt
255. © 121WATT - André Goldmann
Mobile Fails
Zu viel Inhalt der keinen Fokus zulässt
256. © 121WATT - André Goldmann
Mobile Fails
CSS: position:absolute
257. © 121WATT - André Goldmann
Mobile Fails
Wer versteht das?
258. © 121WATT - André Goldmann
Mobile Fails
Ob ich Inhalte die ich nicht vollständig
lesen kann, wirklich teilen möchte?
259. © 121WATT - André Goldmann
Mobile Fails
Mehr „Bars“ haben leider
nicht ins Layout gepasst ^^
260. © 121WATT - André Goldmann
Mobile Fails
Mehr „Bars“ haben leider
nicht ins Layout gepasst ^^
261. © 121WATT - André Goldmann
Mobile Fails
Schon einmal etwas von
einer Weiterleitung gehört?
262. © 121WATT - André Goldmann
Mobile Fails
Ok = Yes
Cancel = No
271. © 121WATT - André Goldmann
Besuchen Sie eigene Websites regelmässig!
272. © 121WATT - André Goldmann
Besuchen Sie
MIT DEM SMARTPHONE!
273. © 121WATT - André Goldmann
Fail 1 - Forgetting the mobile user
http://www.webdesign.org/web-design-fails.22423.html
https://www.google.com/glass/start/
274. © 121WATT - André Goldmann
Fail 1 - Forgetting the mobile user
http://www.webdesign.org/web-design-fails.22423.html
https://www.google.com/glass/start/
275. © 121WATT - André Goldmann
André Goldmann
andre.goldmann@121watt.de
@pixeldreher
Xing: https://www.xing.com/profile/
Andre_Goldmann4
121WATT
Luise-Ullrich-Str. 20
80636 München
Tel.: 089 / 416 126 993
@121WATTT | info@121watt.de
www.121watt.de
276. © 121WATT - André Goldmann
http://www.abookapart.com/products/responsive-web-design
Buch-Tipp
277. © 121WATT - André Goldmann
http://www.abookapart.com/products/mobile-first
Buch-Tipp
278. © 121WATT - André Goldmann
http://www.abookapart.com/products/content-strategy-for-mobile
Buch-Tipp
279. © 121WATT - André Goldmann
http://www.abookapart.com/products/designing-for-emotion
Buch-Tipp