© 121WATT - André Goldmann
Achtung Falle!Fehler bei Mobile- und Responsive-Webdesign (RWD) vermeiden
Berlin, 04.11. - 05.11.2014
© 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 121WATTGeschäftsinhaber bei PixeldreherSeit 1996 Front-End Entwickler & Optimierer aus Leidenschaft
• Twitter: @pixeldreherE-Mail: [email protected]
© 121WATT - André Goldmann
Ich arbeitete unter anderem für diese Kunden
© 121WATT - André Goldmann
Privates Projekt
4
© 121WATT - André Goldmann
Privates Projekt
4
> 374.000 Besucher
© 121WATT - André Goldmann
Privates Projekt
4
> 374.000 Besucher
> 3.126.000 Seitenaufrufe
© 121WATT - André Goldmann
Privates Projekt
4
> 374.000 Besucher
> 3.126.000 Seitenaufrufe
> 1 TB Traffic im Monat
© 121WATT - André Goldmann
Privates Projekt
4
> 374.000 Besucher
> 3.126.000 Seitenaufrufe
> 1 TB Traffic im Monat80% Mobile-Traffic
© 121WATT - André Goldmann
Privates Projekt
Seit März 2014 mit Apps für Android & iOS
© 121WATT - André Goldmann
Konvertiert „mobile“ nicht?… oder kommt es auf meine Zielgruppe & den Kontext an?
© 121WATT - André Goldmann
Kurze Fragerunde…
© 121WATT - André Goldmann
Fragerunde…
Wer hat schon ein Bahnticket mit dem Handy gekauft?
© 121WATT - André Goldmann
Fragerunde…
Schon mal Pizza, Döner oder Nudeln per App bestellt und bezahlt?
© 121WATT - André Goldmann
Fragerunde…
Günstige Produkte, Angebote oder Schnäppchen mit dem Handy bestellt?
© 121WATT - André Goldmann
Fragerunde…
Versicherung mit dem Handy abgeschlossen?
© 121WATT - André Goldmann
Fragerunde…
Reise oder Kurzurlaub mit dem Smartphone gebucht?
© 121WATT - André Goldmann
Fragerunde…
Produkte über 1.000,- € per Smartphone bestellt?
© 121WATT - André Goldmann
Fragerunde…
Ticket für die ConversionConference mit dem Handy geordert?
© 121WATT - André Goldmann
Fragerunde…
Ein Tool oder eine berufliche Dienstleistung per Smartphone gebucht?
© 121WATT - André Goldmann
Jetzt nochmal im Kontext
© 121WATT - André Goldmann
Fragerunde…
Wer hat schon ein Bahnticket mit dem Handy gekauft?
Unterwegs, schnell und privat
© 121WATT - André Goldmann
Fragerunde…
Schon mal Pizza, Döner oder Nudeln per App bestellt und bezahlt?
Praktisch, schnell & „Alltagsproblemlöser“
© 121WATT - André Goldmann
Fragerunde…
Günstige Produkte, Angebote oder Schnäppchen mit dem Handy bestellt?
Schnelligkeit, keine Gefahr & privat
© 121WATT - André Goldmann
Fragerunde…
Versicherung mit dem Handy abgeschlossen?
Mit Ruhe und Bedacht, komplex & leseintensiv
© 121WATT - André Goldmann
Fragerunde…
Reise oder Kurzurlaub mit dem Smartphone gebucht?
Preisvergleich, Visuell & keine einseitige Entscheidung
© 121WATT - André Goldmann
Fragerunde…
Produkte über 1.000,- € per Smartphone bestellt?
Vertrauen, „mal eben 1.000,- €“
© 121WATT - André Goldmann
Fragerunde…
Ticket für die ConversionConference mit dem Handy geordert?
Business, man sitzt eh vor dem Desktop, genug Zeit
© 121WATT - André Goldmann
Fragerunde…
Ein Tool oder eine berufliche Dienstleistung per Smartphone gebucht?
Vergleich, Desktop-Tools, Auswahl, nicht-mobil Verfügbar
© 121WATT - André Goldmann
Wie ging das alles eigentlich los?Können wir eigentlich Desktop mit „Mobile“ vergleichen?
© 121WATT - André Goldmann
1993 - Kommerzielle Durchbruch
Bild Quelle: http://www.computerhistory.org/
© 121WATT - André Goldmann
1999 - bin ich da schon drin’ oder was?
Bild Quelle: http://www.spiegel.de/
© 121WATT - André Goldmann
90er - 2007.
Bild Quelle: https://www.youtube.com/
© 121WATT - André Goldmann
Die Entwicklung des mobilen Internets
© 121WATT - André Goldmann
Die Entwicklung des mobilen Internets
© 121WATT - André Goldmann
Die Entwicklung des mobilen Internets
Mosaic
1993
© 121WATT - André Goldmann
Die Entwicklung des mobilen Internets
Mosaic
1993
ISDN in DEU
1995
© 121WATT - André Goldmann
Die Entwicklung des mobilen Internets
Mosaic
1993
ISDN in DEU
1995
Boris’ ;)
1999
© 121WATT - André Goldmann
Die Entwicklung des mobilen Internets
Mosaic
1993
ISDN in DEU
1995
Boris’ ;)
1999
The iPhone
2007
© 121WATT - André Goldmann
Die Entwicklung des mobilen Internets
Mosaic
1993
ISDN in DEU
1995
Boris’ ;)
1999
The iPhone
2007
RWD erstmalserwähnt
05/2010
© 121WATT - André Goldmann
Die Entwicklung des mobilen Internets
Mosaic
1993
ISDN in DEU
1995
Boris’ ;)
1999
The iPhone
2007
RWD erstmalserwähnt
05/2010
Erste RWDin DEU
seit 2011
© 121WATT - André Goldmann
Die Entwicklung des mobilen Internets
Mosaic
1993
ISDN in DEU
1995
Boris’ ;)
1999
The iPhone
2007
RWD erstmalserwähnt
05/2010
Erste RWDin DEU
seit 2011
© 121WATT - André Goldmann
Die Entwicklung des mobilen Internets
Mosaic
1993
ISDN in DEU
1995
Boris’ ;)
1999
The iPhone
2007
RWD erstmalserwähnt
05/2010
Erste RWDin DEU
seit 2011
m.website.de vs. native Apps
© 121WATT - André Goldmann
Die Entwicklung des mobilen Internets
Mosaic
1993
ISDN in DEU
1995
Boris’ ;)
1999
The iPhone
2007
RWD erstmalserwähnt
05/2010
Erste RWDin DEU
seit 2011
m.website.de vs. native Apps
Tablet-PCs…
© 121WATT - André Goldmann
Die Entwicklung des mobilen Internets
Mosaic
1993
ISDN in DEU
1995
Boris’ ;)
1999
The iPhone
2007
RWD erstmalserwähnt
05/2010
Erste RWDin DEU
seit 2011
m.website.de vs. native Apps
Tablet-PCs…
18 Jahre vs. 3 Jahre
Gleicher Inhalt & Code
© 121WATT - André Goldmann
Das Umdenken der Anwenderkann schnell beginnen.
Zeit für RWD ;)
Bild Quelle: http://www.apple.com/iphone-6/apple-pay/
© 121WATT - André Goldmann
Was ist anders bei RWD?Workflows & Ansätze
© 121WATT - André Goldmann
ALLES
© 121WATT - André Goldmann
Flexibles Layout
Bildquelle: http://www.apple.com/de/
© 121WATT - André Goldmann
Flexibles Layout
Bildquelle: http://www.apple.com/de
© 121WATT - André Goldmann
Flexibles Layout
Bildquelle: http://www.apple.com/de
© 121WATT - André Goldmann
Flexibles Layout
Bildquelle: http://www.apple.com/de
© 121WATT - André Goldmann
Flexibles Layout
Bildquelle: http://www.apple.com/de
© 121WATT - André Goldmann
Flexibles Layout
Bildquelle: http://www.apple.com/de
Auflösung von
5120 x 2880 Pixel
© 121WATT - André Goldmann
Was erwarten Besucher?
© 121WATT - André Goldmann
Studie von Google (2012)
© 121WATT - André Goldmann
Studie von Google (2012)
• 69% der Teilnehmer würden auf einer mobilfähigen Website ein Produkt kaufen
© 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
© 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
© 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
© 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
© 121WATT - André Goldmann
Standards: Android Design
http://developer.android.com/design/index.html
© 121WATT - André Goldmann
Standards: iOS Human Interface Guidelines
https://developer.apple.com/library/ios/documentation/userexperience/conceptual/mobilehig/Anatomy.html
© 121WATT - André Goldmann
Standards: iOS Human Interface Guidelines
https://developer.apple.com/library/ios/documentation/userexperience/conceptual/mobilehig/Anatomy.html
© 121WATT - André Goldmann
Webdesign Workflow (früher)Als der Nachbar Websites „programmierte“…
© 121WATT - André Goldmann
Webdesign Workflow (früher)
© 121WATT - André Goldmann
Webdesign Workflow (früher)
• Planung
© 121WATT - André Goldmann
Webdesign Workflow (früher)
• Planung
• Wireframes
© 121WATT - André Goldmann
Webdesign Workflow (früher)
• Planung
• Wireframes
• Design mit Photoshop, Fireworks, „Illustrator“ & Co.
© 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)
© 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
© 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
© 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
© 121WATT - André Goldmann
RWD WorkflowPunkt 1 - 47…
© 121WATT - André Goldmann
Probleme im Jahr 2014
© 121WATT - André Goldmann
Probleme im Jahr 2014
• Unzählige Displaygrößen und Auflösungen
© 121WATT - André Goldmann
Probleme im Jahr 2014
• Unzählige Displaygrößen und Auflösungen
• Webseiten werden in unterschiedlichen Situationen und Kontexten benutzt
© 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
© 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
© 121WATT - André Goldmann
RWD Workflow
© 121WATT - André Goldmann
RWD Workflow
• Planung
© 121WATT - André Goldmann
RWD Workflow
• Planung
• Inhalte / Seitenarchitektur
© 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
© 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
© 121WATT - André Goldmann
RWD PerformanceWenn Sekunden zu Stunden werden!
© 121WATT - André Goldmann
X
Warum Ladezeit-Optimierung?
© 121WATT - André Goldmann
X
• Hohe Bouncerate
Warum Ladezeit-Optimierung?
© 121WATT - André Goldmann
X
• Hohe Bouncerate
• schlechte User Experience
Warum Ladezeit-Optimierung?
© 121WATT - André Goldmann
X
• Hohe Bouncerate
• schlechte User Experience
• könnte sich negativ für das Ranking bei Google & Co. auswirken
Warum Ladezeit-Optimierung?
© 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?
© 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?
© 121WATT - André Goldmann
Ladezeit-Optimierung - Tools
51
tools.pingdom.com/fpt/
© 121WATT - André Goldmann
Ladezeit-Optimierung - Tools
52
© 121WATT - André Goldmann
Ladezeit-Optimierung - Tools
X
https://www.google.com/analytics/web/#report/content-site-speed-suggestions/
© 121WATT - André Goldmann
Ladezeit-Optimierung - Tools
53
http://developers.google.com/speed/pagespeed/insights/
© 121WATT - André Goldmann
54
© 121WATT - André Goldmann
55
© 121WATT - André Goldmann
Ladezeit-Optimierung
Server:
56
© 121WATT - André Goldmann
Ladezeit-Optimierung
Server:
• Caching- & Kompression aktivieren
56
© 121WATT - André Goldmann
Ladezeit-Optimierung
Server:
• Caching- & Kompression aktivieren
• HTTP Requests reduzieren
56
© 121WATT - André Goldmann
Ladezeit-Optimierung
Server:
• Caching- & Kompression aktivieren
• HTTP Requests reduzieren
• Weiterleitungen vermeiden & 404 Fehler (bei Bildern, Skripten & Co.) beseitigen
56
© 121WATT - André Goldmann
Ladezeit-Optimierung
Server:
• Caching- & Kompression aktivieren
• HTTP Requests reduzieren
• Weiterleitungen vermeiden & 404 Fehler (bei Bildern, Skripten & Co.) beseitigen
• Weiterleitungsketten auseinandernehmen
56
© 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
© 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
© 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
© 121WATT - André Goldmann
57
HTML:
• HTML Kommentare entfernen
Ladezeit-Optimierung
© 121WATT - André Goldmann
57
HTML:
• HTML Kommentare entfernen
• HTML Code komprimieren & ungenutztes CSS entfernen
Ladezeit-Optimierung
© 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
© 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
© 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
© 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
© 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
© 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
© 121WATT - André Goldmann
X
Ladezeit-Optimierung: InstantClick
http://instantclick.io/
© 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.
© 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
© 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
© 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
© 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
© 121WATT - André Goldmann
Icons als Fonts ausgeben
http://fontawesome.io/
http://fontello.com/
© 121WATT - André Goldmann
Grafiken für alle Displays/Auflösungen
http://www.imgix.com/
http://adaptive-images.com/
© 121WATT - André Goldmann
Nützliche Quellen
• Sitespeed.iohttp://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/
• PhantomJShttps://github.com/macbre/phantomas
• Pingdom Toolshttp://tools.pingdom.com/fpt/
• Google Analytics SiteSpeed Datenansicht https://www.google.com/analytics/web/#report/content-site-speed-suggestions/
• Automatische Bildoptimierunghttps://kraken.io/
61
© 121WATT - André Goldmann
<picture>Responsive Bilder für unterschiedliche Anwendungsfälle
© 121WATT - André Goldmann
Probleme bei von skalierten Bildern
© 121WATT - André Goldmann
Probleme bei von skalierten Bildern
• kein Qualitätsverlust
• mehr Datenvolumen beim Nutzer
© 121WATT - André Goldmann
Probleme bei von skalierten Bildern
• kein Qualitätsverlust
• mehr Datenvolumen beim Nutzer
• deutlicher Qualitätsverlust
• weniger Datenvolumen beim Nutzer
© 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>
© 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>
© 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>
© 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)
© 121WATT - André Goldmann
Beispiel: Zalando auf dem Desktop
© 121WATT - André Goldmann
Beispiel: Zalando auf dem Smartphone
© 121WATT - André Goldmann
Beispiel: Zalando auf dem Smartphone
© 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)
© 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 immerin 100x100 Pixel per CSS ausgegeben
© 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)
© 121WATT - André Goldmann
Viewport-basierte Bildauswahl
Bild-Quelle: http://www.html5rocks.com/en/tutorials/responsive/picture-element/
© 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)
© 121WATT - André Goldmann
Aktueller Browser-Support (Stand 10/2014)
http://caniuse.com/#search=picture
© 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/
© 121WATT - André Goldmann
Aktueller Browser-Support (Stand 10/2014)
http://caniuse.com/#search=picture
© 121WATT - André Goldmann
Aktueller Browser-Support (Stand 10/2014)
http://caniuse.com/#search=picture
© 121WATT - André Goldmann
Wann sollten wir welche Auswahl definieren?
© 121WATT - André Goldmann
Wann sollten wir welche Auswahl definieren?
• Art-Direction-basierte Bildauswahl(Bildausschnitt enorm wichtig, CTA muss sichtbar sein)
© 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)
© 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)
© 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)
© 121WATT - André Goldmann
Auswirkungen
© 121WATT - André Goldmann
Responsive FormulareAuch hier kann man vieles falsch machen.
© 121WATT - André Goldmann
Regeln für responsive (mobile) Formulare
© 121WATT - André Goldmann
Regeln für responsive (mobile) Formulare
Keine wiederholenden Felder & Aktionen (Passwort wiederholen, E-Mail Adresse verifizieren)
© 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.)
© 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)
© 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)
© 121WATT - André Goldmann
HTML5 und Formulare
© 121WATT - André Goldmann
HTML5 und Formulare
Formulare auf dem Desktop machen in der Regel keinen Spaß - aber man muss ja…
© 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.
© 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!
© 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>
© 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>
© 121WATT - André Goldmann
Input Typen von HTML5: number
Beispiel-Code:
<form>
<input type="number" name="number">
</form>
© 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>
© 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>
© 121WATT - André Goldmann
Input Typen von HTML5: datetime-local
Zur Eingabe von Datum- & Zeitangaben.
Beispiel-Code:
<form>
<input type="datetime-local" name="bdaytime">
</form>
© 121WATT - André Goldmann
Input Typen von HTML5: color
Zur Eingabe von Farbwerten.
Beispiel-Code:
<form>
<input type="color" name="favcolor">
</form>
© 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
© 121WATT - André Goldmann
Adressen in Formularen
© 121WATT - André Goldmann
Adressen in Formularen
© 121WATT - André Goldmann
Adressen in Formularen
© 121WATT - André Goldmann
Formulare auf Autopilot
https://www.deutschepost.de/de/d/deutsche-post-direkt/datafactory.html
© 121WATT - André Goldmann
Formular-Validierung
© 121WATT - André Goldmann
„normale“ Validierung nach dem Abschicken
https://www.youtube.com/watch?v=FWDDRG93puY
© 121WATT - André Goldmann
Real-Time Validierung VOR dem Abschicken
https://www.youtube.com/watch?v=hlU74LIPauo
© 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-Time Validierung komplett ausgefüllt haben und die Dauer um 42% reduziert
werden konnte
© 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:
© 121WATT - André Goldmann
Responsive Testing
Bildquelle: http://www.elezea.com/2013/11/rwd-content-modules/
© 121WATT - André Goldmann
Responsive Testing
Bildquelle: http://www.elezea.com/2013/11/rwd-content-modules/
© 121WATT - André Goldmann
http://alphapixels.com/prepros/
Prepros App (Mac OS, Windows + alle Smartphones)
© 121WATT - André Goldmann
http://incident57.com/codekit/
CodeKit (Mac OS + alle Smartphones)
© 121WATT - André Goldmann
Wireframe Testing: Balsamiq (Windows, Linux, Mac OS)
https://balsamiq.com/
© 121WATT - André Goldmann
Wireframe Testing: JUSTINMIND (Windows, Linux, Mac OS)
http://www.justinmind.com/
© 121WATT - André Goldmann
https://creative.adobe.com/de/products/reflow
Adobe Edge Reflow (Windows, Mac OS)
© 121WATT - André Goldmann
Google Chrome Browser
© 121WATT - André Goldmann
Google Chrome Browser
© 121WATT - André Goldmann
Google Chrome Browser
© 121WATT - André Goldmann
Google Chrome Browser
© 121WATT - André Goldmann
Google Chrome Browser
© 121WATT - André Goldmann
Firefox
© 121WATT - André Goldmann
http://lab.maltewassermann.com/viewport-resizer/
Viewport Resizer - Breakpoint Tester
© 121WATT - André Goldmann
http://lab.maltewassermann.com/viewport-resizer/
Viewport Resizer - Breakpoint Tester
© 121WATT - André Goldmann
responsive.is
http://responsive.is/
© 121WATT - André Goldmann
responsive.is
http://responsive.is/
© 121WATT - André Goldmann
responsive.is
http://responsive.is/
© 121WATT - André Goldmann
Smartphone Simulatoren
iOS Simulatorhttps://developer.apple.com/library/ios/documentation/IDEs/Conceptual/iOS_Simulator_Guide/Introduction/Introduction.html
Android Simulatorhttp://developer.android.com/tools/devices/emulator.html
Windows Phone Simulatorhttp://msdn.microsoft.com/library/windows/apps/ff402563(v=vs.105).aspx
Opera Mini Simulatorhttps://dev.opera.com/articles/installing-opera-mini-on-your-computer/
Firefox OS Simulatorhttps://developer.mozilla.org/en-US/docs/Tools/Firefox_OS_1.1_Simulator
© 121WATT - André Goldmann
Smartphone Simulatoren
iOS Simulatorhttps://developer.apple.com/library/ios/documentation/IDEs/Conceptual/iOS_Simulator_Guide/Introduction/Introduction.html
Android Simulatorhttp://developer.android.com/tools/devices/emulator.html
Windows Phone Simulatorhttp://msdn.microsoft.com/library/windows/apps/ff402563(v=vs.105).aspx
Opera Mini Simulatorhttps://dev.opera.com/articles/installing-opera-mini-on-your-computer/
Firefox OS Simulatorhttps://developer.mozilla.org/en-US/docs/Tools/Firefox_OS_1.1_Simulator
kein Touch
© 121WATT - André Goldmann
Smartphone Simulatoren
iOS Simulatorhttps://developer.apple.com/library/ios/documentation/IDEs/Conceptual/iOS_Simulator_Guide/Introduction/Introduction.html
Android Simulatorhttp://developer.android.com/tools/devices/emulator.html
Windows Phone Simulatorhttp://msdn.microsoft.com/library/windows/apps/ff402563(v=vs.105).aspx
Opera Mini Simulatorhttps://dev.opera.com/articles/installing-opera-mini-on-your-computer/
Firefox OS Simulatorhttps://developer.mozilla.org/en-US/docs/Tools/Firefox_OS_1.1_Simulator
kein Touchkein Mobilfunknetz
© 121WATT - André Goldmann
Smartphone Simulatoren
iOS Simulatorhttps://developer.apple.com/library/ios/documentation/IDEs/Conceptual/iOS_Simulator_Guide/Introduction/Introduction.html
Android Simulatorhttp://developer.android.com/tools/devices/emulator.html
Windows Phone Simulatorhttp://msdn.microsoft.com/library/windows/apps/ff402563(v=vs.105).aspx
Opera Mini Simulatorhttps://dev.opera.com/articles/installing-opera-mini-on-your-computer/
Firefox OS Simulatorhttps://developer.mozilla.org/en-US/docs/Tools/Firefox_OS_1.1_Simulator
kein Touchkein Mobilfunknetzkeine CPU vom Device
© 121WATT - André Goldmann
Smartphone Simulatoren
iOS Simulatorhttps://developer.apple.com/library/ios/documentation/IDEs/Conceptual/iOS_Simulator_Guide/Introduction/Introduction.html
Android Simulatorhttp://developer.android.com/tools/devices/emulator.html
Windows Phone Simulatorhttp://msdn.microsoft.com/library/windows/apps/ff402563(v=vs.105).aspx
Opera Mini Simulatorhttps://dev.opera.com/articles/installing-opera-mini-on-your-computer/
Firefox OS Simulatorhttps://developer.mozilla.org/en-US/docs/Tools/Firefox_OS_1.1_Simulator
kein Touchkein Mobilfunknetzkeine CPU vom Deviceandere Auflösungen/Pixeldichte
© 121WATT - André Goldmann
Smartphone Simulatoren
iOS Simulatorhttps://developer.apple.com/library/ios/documentation/IDEs/Conceptual/iOS_Simulator_Guide/Introduction/Introduction.html
Android Simulatorhttp://developer.android.com/tools/devices/emulator.html
Windows Phone Simulatorhttp://msdn.microsoft.com/library/windows/apps/ff402563(v=vs.105).aspx
Opera Mini Simulatorhttps://dev.opera.com/articles/installing-opera-mini-on-your-computer/
Firefox OS Simulatorhttps://developer.mozilla.org/en-US/docs/Tools/Firefox_OS_1.1_Simulator
kein Touchkein Mobilfunknetzkeine CPU vom Deviceandere Auflösungen/PixeldichteBetrachtungsabstand
© 121WATT - André Goldmann
Smartphone Simulatoren
iOS Simulatorhttps://developer.apple.com/library/ios/documentation/IDEs/Conceptual/iOS_Simulator_Guide/Introduction/Introduction.html
Android Simulatorhttp://developer.android.com/tools/devices/emulator.html
Windows Phone Simulatorhttp://msdn.microsoft.com/library/windows/apps/ff402563(v=vs.105).aspx
Opera Mini Simulatorhttps://dev.opera.com/articles/installing-opera-mini-on-your-computer/
Firefox OS Simulatorhttps://developer.mozilla.org/en-US/docs/Tools/Firefox_OS_1.1_Simulator
kein Touchkein Mobilfunknetzkeine CPU vom Deviceandere Auflösungen/PixeldichteBetrachtungsabstandFehlerhafte Feature-Detection
© 121WATT - André Goldmann
Network Link Conditioner (Mac OS, iOS)
http://nshipster.com/network-link-conditioner/
© 121WATT - André Goldmann
https://creative.adobe.com/de/products/inspect
Adobe Edge Inspect (Windows, Mac OS, Android, iOS, Windowsphone & Amazon Kindle Fire)
© 121WATT - André Goldmann
Ghostlab
http://vanamco.com/ghostlab/
Bild Quelle: http://www.html5rocks.com/en/tutorials/tooling/synchronized-cross-device-testing/
© 121WATT - André Goldmann
Ghostlab
http://vanamco.com/ghostlab/
Bild Quelle: http://www.html5rocks.com/en/tutorials/tooling/synchronized-cross-device-testing/
© 121WATT - André Goldmann
UX Recorder für iOS
http://www.uxrecorder.com/
© 121WATT - André Goldmann
Silverback App für Mac OS X (Usability Testing)
http://silverbackapp.com/
© 121WATT - André Goldmann
Image Testing: Skala Preview (Mac OS, iOS, Android)
http://bjango.com/mac/skalapreview/
© 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/
© 121WATT - André Goldmann
Performance-Tool: Pingdom
120
tools.pingdom.com/fpt/
© 121WATT - André Goldmann
Bonus: Responsive Produkte
© 121WATT - André Goldmann
Ist mein Produkt mobil nicht verfügbar?
© 121WATT - André Goldmann
Ist mein Produkt mobil nicht verfügbar?
© 121WATT - André Goldmann
Mobile Konversion macht mobil keinen Sinn?
© 121WATT - André Goldmann
Mobile Konversion macht mobil keinen Sinn?
© 121WATT - André Goldmann
Ziel von RWD
124
Was Nutzer wollen
Unser Ziel
© 121WATT - André Goldmann
Ziel von RWD
124
Was Nutzer wollen
Unser Ziel
© 121WATT - André Goldmann
Ziel von RWD
124
Was Nutzer wollen
Unser Ziel
Ziel von RWD ist eine hohe Schnittmengeauf beiden Seiten (Nutzer/Anbieter)
© 121WATT - André Goldmann
Mit welcher Hand nutzen Sie Ihr Smartphone?
…bitte mal Arm hoch.
© 121WATT - André Goldmann
126
© 121WATT - André Goldmann
126
© 121WATT - André Goldmann
126
© 121WATT - André Goldmann
Zeit für eine Studie
http://www.uxmatters.com/mt/archives/2013/02/how-do-users-really-hold-mobile-devices.php
© 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-HandGehalten; Ein-HandZwei-Händig
© 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-HandGehalten; Ein-HandZwei-Händig
49 %
© 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-HandGehalten; Ein-HandZwei-Händig
36 %
49 %
© 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-HandGehalten; Ein-HandZwei-Händig
15 %
36 %
49 %
© 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
© 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
© 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
© 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
© 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
© 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
© 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
© 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
© 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
© 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
© 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
© 121WATT - André Goldmann
131
Anmelden & genauere Ergebnisse
© 121WATT - André Goldmann
Ergebnis: Webdesign kann nicht überall gleich aussehen und funktionieren.
© 121WATT - André Goldmann
Lohnt sich die Optimierung für Mobile und brauche ich RWD?
© 121WATT - André Goldmann
https://www.google.com/analytics/web/#report/visitors-mobile-overview/
© 121WATT - André Goldmann
Schlechte Beispiele…die man besser nicht wiederholt.
© 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.
© 121WATT - André Goldmann
Mobile Fails
© 121WATT - André Goldmann
Mobile Fails
© 121WATT - André Goldmann
Mobile Fails
Ist hier der Platz zum scrollen und für die Inhalte ausreichen?
© 121WATT - André Goldmann
Mobile Fails
Zu viel Inhalt der keinen Fokus zulässt
© 121WATT - André Goldmann
Mobile Fails
Zu viel Inhalt der keinen Fokus zulässt
© 121WATT - André Goldmann
Mobile Fails
CSS: position:absolute
© 121WATT - André Goldmann
Mobile Fails
Wer versteht das?
© 121WATT - André Goldmann
Mobile Fails
Ob ich Inhalte die ich nicht vollständig lesen kann, wirklich teilen möchte?
© 121WATT - André Goldmann
Mobile Fails
Mehr „Bars“ haben leider nicht ins Layout gepasst ^^
© 121WATT - André Goldmann
Mobile Fails
Mehr „Bars“ haben leider nicht ins Layout gepasst ^^
© 121WATT - André Goldmann
Mobile Fails
Schon einmal etwas von einer Weiterleitung gehört?
© 121WATT - André Goldmann
Mobile Fails
Ok = Yes Cancel = No
© 121WATT - André Goldmann
Jetzt wird’s teuer.
© 121WATT - André Goldmann
© 121WATT - André Goldmann
Mobile Fails
© 121WATT - André Goldmann
Mobile Fails
© 121WATT - André Goldmann
Mobile Fails
© 121WATT - André Goldmann
Mobile Fails
© 121WATT - André Goldmann
Mobile Fails
© 121WATT - André Goldmann
Mobile Fails
© 121WATT - André Goldmann
Besuchen Sie eigene Websites regelmässig!
© 121WATT - André Goldmann
Besuchen Sie
MIT DEM SMARTPHONE!
© 121WATT - André Goldmann
Fail 1 - Forgetting the mobile userhttp://www.webdesign.org/web-design-fails.22423.html
https://www.google.com/glass/start/
© 121WATT - André Goldmann
Fail 1 - Forgetting the mobile userhttp://www.webdesign.org/web-design-fails.22423.html
https://www.google.com/glass/start/
© 121WATT - André Goldmann
André [email protected]@pixeldreher
Xing: https://www.xing.com/profile/Andre_Goldmann4
121WATTLuise-Ullrich-Str. 20 80636 München
Tel.: 089 / 416 126 993
@121WATTT | [email protected]
© 121WATT - André Goldmann
http://www.abookapart.com/products/responsive-web-design
Buch-Tipp
© 121WATT - André Goldmann
http://www.abookapart.com/products/mobile-first
Buch-Tipp
© 121WATT - André Goldmann
http://www.abookapart.com/products/content-strategy-for-mobile
Buch-Tipp
© 121WATT - André Goldmann
http://www.abookapart.com/products/designing-for-emotion
Buch-Tipp
Top Related