© 121WATT - André Goldmann
Achtung Falle!
Fehler bei Mobile- und Responsive-Webdesign (RWD) vermeiden
Berlin, 04.11. - 05....
© 121WATT - André Goldmann
André Goldmann
‣ 26.03.1984, erster HTML-Code mit 15 Jahren
‣ Verheiratet, 1 Tochter
‣ Seit 200...
© 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 Monat
80% Mobi...
© 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...
© 121WATT - André Goldmann
Fragerunde…
Günstige Produkte, Angebote oder Schnäppchen mit dem Handy bestellt?
Schnelligkeit,...
© 121WATT - André Goldmann
Fragerunde…
Versicherung mit dem Handy abgeschlossen?
Mit Ruhe und Bedacht, komplex & leseinten...
© 121WATT - André Goldmann
Fragerunde…
Reise oder Kurzurlaub mit dem Smartphone gebucht?
Preisvergleich, Visuell & keine e...
© 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 ...
© 121WATT - André Goldmann
Fragerunde…
Ein Tool oder eine berufliche Dienstleistung per Smartphone gebucht?
Vergleich, Des...
© 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
2007.
Bild Quelle: http://www.chip.de/
© 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
20...
© 121WATT - André Goldmann
Die Entwicklung des mobilen Internets
Mosaic
1993
ISDN in DEU
1995
Boris’ ;)
1999
The iPhone
20...
© 121WATT - André Goldmann
Die Entwicklung des mobilen Internets
Mosaic
1993
ISDN in DEU
1995
Boris’ ;)
1999
The iPhone
20...
© 121WATT - André Goldmann
Die Entwicklung des mobilen Internets
Mosaic
1993
ISDN in DEU
1995
Boris’ ;)
1999
The iPhone
20...
© 121WATT - André Goldmann
Die Entwicklung des mobilen Internets
Mosaic
1993
ISDN in DEU
1995
Boris’ ;)
1999
The iPhone
20...
© 121WATT - André Goldmann
Die Entwicklung des mobilen Internets
Mosaic
1993
ISDN in DEU
1995
Boris’ ;)
1999
The iPhone
20...
© 121WATT - André Goldmann
Die Entwicklung des mobilen Internets
Mosaic
1993
ISDN in DEU
1995
Boris’ ;)
1999
The iPhone
20...
© 121WATT - André Goldmann
Das Umdenken der Anwender

kann schnell beginnen.
Zeit für RWD ;)
Bild Quelle: http://www.apple...
© 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...
© 121WATT - André Goldmann
Studie von Google (2012)
• 69% der Teilnehmer würden auf einer mobilfähigen Website ein Produkt...
© 121WATT - André Goldmann
Studie von Google (2012)
• 69% der Teilnehmer würden auf einer mobilfähigen Website ein Produkt...
© 121WATT - André Goldmann
Studie von Google (2012)
• 69% der Teilnehmer würden auf einer mobilfähigen Website ein Produkt...
© 121WATT - André Goldmann
Studie von Google (2012)
• 69% der Teilnehmer würden auf einer mobilfähigen Website ein Produkt...
© 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...
© 121WATT - André Goldmann
Standards: iOS Human Interface Guidelines
https://developer.apple.com/library/ios/documentation...
© 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, „Illustrat...
© 121WATT - André Goldmann
Webdesign Workflow (früher)
• Planung
• Wireframes
• Design mit Photoshop, Fireworks, „Illustrat...
© 121WATT - André Goldmann
Webdesign Workflow (früher)
• Planung
• Wireframes
• Design mit Photoshop, Fireworks, „Illustrat...
© 121WATT - André Goldmann
Webdesign Workflow (früher)
• Planung
• Wireframes
• Design mit Photoshop, Fireworks, „Illustrat...
© 121WATT - André Goldmann
Webdesign Workflow (früher)
• Planung
• Wireframes
• Design mit Photoshop, Fireworks, „Illustrat...
© 121WATT - André Goldmann
RWD Workflow
Punkt 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 unterschie...
© 121WATT - André Goldmann
Probleme im Jahr 2014
• Unzählige Displaygrößen und Auflösungen
• Webseiten werden in unterschie...
© 121WATT - André Goldmann
Probleme im Jahr 2014
• Unzählige Displaygrößen und Auflösungen
• Webseiten werden in unterschie...
© 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 S...
© 121WATT - André Goldmann
RWD Workflow
• Planung
• Inhalte / Seitenarchitektur
• Prototyp -> Testing <- Layout (in einer S...
© 121WATT - André Goldmann
Styletil.es
http://styletil.es/
© 121WATT - André Goldmann
styletil.es Beispiel
http://styletil.es/
© 121WATT - André Goldmann
RWD Performance
Wenn 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 Googl...
© 121WATT - André Goldmann
X
• Hohe Bouncerate
• schlechte User Experience
• könnte sich negativ für das Ranking bei Googl...
© 121WATT - André Goldmann
X
• Hohe Bouncerate
• schlechte User Experience
• könnte sich negativ für das Ranking bei Googl...
© 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-...
© 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
• W...
© 121WATT - André Goldmann
Ladezeit-Optimierung
Server:
• Caching- & Kompression aktivieren
• HTTP Requests reduzieren
• W...
© 121WATT - André Goldmann
Ladezeit-Optimierung
Server:
• Caching- & Kompression aktivieren
• HTTP Requests reduzieren
• W...
© 121WATT - André Goldmann
Ladezeit-Optimierung
Server:
• Caching- & Kompression aktivieren
• HTTP Requests reduzieren
• W...
© 121WATT - André Goldmann
Ladezeit-Optimierung
Server:
• Caching- & Kompression aktivieren
• HTTP Requests reduzieren
• W...
© 121WATT - André Goldmann
57
HTML:
Ladezeit-Optimierung
© 121WATT - André Goldmann
57
HTML:
• HTML Kommentare entfernen
Ladezeit-Optimierung
© 121WATT - André Goldmann
57
HTML:
• HTML Kommentare entfernen
• HTML Code komprimieren & ungenutztes CSS entfernen
Ladez...
© 121WATT - André Goldmann
57
HTML:
• HTML Kommentare entfernen
• HTML Code komprimieren & ungenutztes CSS entfernen
• Inl...
© 121WATT - André Goldmann
57
HTML:
• HTML Kommentare entfernen
• HTML Code komprimieren & ungenutztes CSS entfernen
• Inl...
© 121WATT - André Goldmann
57
HTML:
• HTML Kommentare entfernen
• HTML Code komprimieren & ungenutztes CSS entfernen
• Inl...
© 121WATT - André Goldmann
57
HTML:
• HTML Kommentare entfernen
• HTML Code komprimieren & ungenutztes CSS entfernen
• Inl...
© 121WATT - André Goldmann
57
HTML:
• HTML Kommentare entfernen
• HTML Code komprimieren & ungenutztes CSS entfernen
• Inl...
© 121WATT - André Goldmann
57
HTML:
• HTML Kommentare entfernen
• HTML Code komprimieren & ungenutztes CSS entfernen
• Inl...
© 121WATT - André Goldmann
X
Ladezeit-Optimierung: InstantClick
http://instantclick.io/
© 121WATT - André Goldmann
X
Ladezeit-Optimierung: InstantClick
http://instantclick.io/
InstantClick tauscht lediglich den...
© 121WATT - André Goldmann
58
Bilder:
Ladezeit-Optimierung
© 121WATT - André Goldmann
58
Bilder:
• Bildgrößen und Datei-Formate richtig wählen (.jpg für Fotos/
Hintergrundgrafiken; ....
© 121WATT - André Goldmann
58
Bilder:
• Bildgrößen und Datei-Formate richtig wählen (.jpg für Fotos/
Hintergrundgrafiken; ....
© 121WATT - André Goldmann
58
Bilder:
• Bildgrößen und Datei-Formate richtig wählen (.jpg für Fotos/
Hintergrundgrafiken; ....
© 121WATT - André Goldmann
58
Bilder:
• Bildgrößen und Datei-Formate richtig wählen (.jpg für Fotos/
Hintergrundgrafiken; ....
© 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.io

http://www.sitespeed.io/
• PageSpeed Insights (by Google)

ht...
© 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
• d...
© 121WATT - André Goldmann
Lösung: <picture>-Element
Bildquelle: http://www.apple.com/de/
Bildquelle: http://www.apple.com...
© 121WATT - André Goldmann
Lösung: <picture>-Element
Bildquelle: http://www.apple.com/de/
Bildquelle: http://www.apple.com...
© 121WATT - André Goldmann
Lösung: <picture>-Element
Bildquelle: http://www.apple.com/de/
Bildquelle: http://www.apple.com...
© 121WATT - André Goldmann
Einleitung <picture> Element
Durch das <picture> Element sind Entwickler/Designer flexibler im B...
© 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 B...
© 121WATT - André Goldmann
Pixeldichte-basierte Bildauswahl (Pixeldensity)
Für den Nutzer sichtbar:

Bild 100x100 Pixel
fü...
© 121WATT - André Goldmann
Einleitung <picture> Element
Durch das <picture> Element sind Entwickler/Designer flexibler im B...
© 121WATT - André Goldmann
Viewport-basierte Bildauswahl
Bild-Quelle: http://www.html5rocks.com/en/tutorials/responsive/pi...
© 121WATT - André Goldmann
Einleitung <picture> Element
Durch das <picture> Element sind Entwickler/Designer flexibler im B...
© 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 ...
© 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

(Bildausschnit...
© 121WATT - André Goldmann
Wann sollten wir welche Auswahl definieren?
• Art-Direction-basierte Bildauswahl

(Bildausschnit...
© 121WATT - André Goldmann
Wann sollten wir welche Auswahl definieren?
• Art-Direction-basierte Bildauswahl

(Bildausschnit...
© 121WATT - André Goldmann
Wann sollten wir welche Auswahl definieren?
• Art-Direction-basierte Bildauswahl

(Bildausschnit...
© 121WATT - André Goldmann
Auswirkungen
© 121WATT - André Goldmann
Responsive Formulare
Auch 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 wiede...
© 121WATT - André Goldmann
Regeln für responsive (mobile) Formulare
Keine wiederholenden Felder & Aktionen
(Passwort wiede...
© 121WATT - André Goldmann
Regeln für responsive (mobile) Formulare
Keine wiederholenden Felder & Aktionen
(Passwort wiede...
© 121WATT - André Goldmann
Regeln für responsive (mobile) Formulare
Keine wiederholenden Felder & Aktionen
(Passwort wiede...
© 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 j...
© 121WATT - André Goldmann
HTML5 und Formulare
Formulare auf dem Desktop machen in der Regel
keinen Spaß - aber man muss j...
© 121WATT - André Goldmann
HTML5 und Formulare
Formulare auf dem Desktop machen in der Regel
keinen Spaß - aber man muss j...
© 121WATT - André Goldmann
Input Typen von HTML5: url
Um eine valide URL einzugeben, muss der Nutzer
zwingend mit http://,...
© 121WATT - André Goldmann
Input Typen von HTML5: tel
Beim tel-Typ wird automatisch die
Zahlentastatur ausgewählt und unnö...
© 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 Sta...
© 121WATT - André Goldmann
Input Typen von HTML5: date
Zur Eingabe von Datum-Angaben.
Wochentage werden nicht mit angezeig...
© 121WATT - André Goldmann
Input Typen von HTML5: datetime-local
Zur Eingabe von Datum- & Zeitangaben.
Beispiel-Code:
<for...
© 121WATT - André Goldmann
Input Typen von HTML5: color
Zur Eingabe von Farbwerten.
Beispiel-Code:
<form>
<input type="col...
© 121WATT - André Goldmann
Formulare auf Autopilot
Der Einsatz von HTML5 ermöglicht es uns,
bereits eingegeben Werte aus a...
© 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
S...
© 121WATT - André Goldmann
Formulare sich selbstständig validieren lassen
Einsatz von regulären Ausdrücken zur Vermeidung ...
© 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
http://macaw.co/
MACAW (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 Simulator

https://developer.apple.com/library/ios/
documentation/ID...
© 121WATT - André Goldmann
Smartphone Simulatoren
iOS Simulator

https://developer.apple.com/library/ios/
documentation/ID...
© 121WATT - André Goldmann
Smartphone Simulatoren
iOS Simulator

https://developer.apple.com/library/ios/
documentation/ID...
© 121WATT - André Goldmann
Smartphone Simulatoren
iOS Simulator

https://developer.apple.com/library/ios/
documentation/ID...
© 121WATT - André Goldmann
Smartphone Simulatoren
iOS Simulator

https://developer.apple.com/library/ios/
documentation/ID...
© 121WATT - André Goldmann
Smartphone Simulatoren
iOS Simulator

https://developer.apple.com/library/ios/
documentation/ID...
© 121WATT - André Goldmann
Smartphone Simulatoren
iOS Simulator

https://developer.apple.com/library/ios/
documentation/ID...
© 121WATT - André Goldmann
Network Link Conditioner (Mac OS, iOS)
http://nshipster.com/network-link-conditioner/
© 121WATT - André Goldmann
http://opendevicelab.com/
OpenDeviceLab
© 121WATT - André Goldmann
https://creative.adobe.com/de/products/inspect
Adobe Edge Inspect (Windows, Mac OS, Android, iO...
© 121WATT - André Goldmann
Ghostlab
http://vanamco.com/ghostlab/
Bild Quelle: http://www.html5rocks.com/en/tutorials/tooli...
© 121WATT - André Goldmann
Ghostlab
http://vanam
Bild Quelle: http://www.html5rocks.com/en/tutorials/tooling/synchronized-...
© 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
http://typecast.com/
Typecast
© 121WATT - André Goldmann
Mobile-Website Conversion Testing
https://www.clicktale.com/
http://www.crazyegg.com/
http://vi...
© 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 Schnittmenge

auf beid...
© 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-mobi...
© 121WATT - André Goldmann
Zeit für eine Studie
http://www.uxmatters.com/mt/archives/2013/02/how-do-users-really-hold-mobi...
© 121WATT - André Goldmann
Zeit für eine Studie
http://www.uxmatters.com/mt/archives/2013/02/how-do-users-really-hold-mobi...
© 121WATT - André Goldmann
Zeit für eine Studie
http://www.uxmatters.com/mt/archives/2013/02/how-do-users-really-hold-mobi...
© 121WATT - André Goldmann
Zeit für eine Studie
http://www.uxmatters.com/mt/archives/2013/02/how-do-users-really-hold-mobi...
© 121WATT - André Goldmann
Zeit für eine Studie: Ein-Hand
Bild Quelle: http://www.uxmatters.com/mt/archives/2013/02/how-do...
© 121WATT - André Goldmann
Zeit für eine Studie: Ein-Hand
Bild Quelle: http://www.uxmatters.com/mt/archives/2013/02/how-do...
© 121WATT - André Goldmann
Zeit für eine Studie: Ein-Hand
Bild Quelle: http://www.uxmatters.com/mt/archives/2013/02/how-do...
© 121WATT - André Goldmann
Zeit für eine Studie: Gehalten; Ein-Hand
Bild Quelle: http://www.uxmatters.com/mt/archives/2013...
© 121WATT - André Goldmann
Zeit für eine Studie: Gehalten; Ein-Hand
Bild Quelle: http://www.uxmatters.com/mt/archives/2013...
© 121WATT - André Goldmann
Zeit für eine Studie: Gehalten; Ein-Hand
Bild Quelle: http://www.uxmatters.com/mt/archives/2013...
© 121WATT - André Goldmann
Zeit für eine Studie: Gehalten; Ein-Hand
Bild Quelle: http://www.uxmatters.com/mt/archives/2013...
© 121WATT - André Goldmann
Zeit für eine Studie: Gehalten; Ein-Hand
Bild Quelle: http://www.uxmatters.com/mt/archives/2013...
© 121WATT - André Goldmann
Zeit für eine Studie: Zwei-Händig
Bild Quelle: http://www.uxmatters.com/mt/archives/2013/02/how...
© 121WATT - André Goldmann
Zeit für eine Studie: Zwei-Händig
Bild Quelle: http://www.uxmatters.com/mt/archives/2013/02/how...
© 121WATT - André Goldmann
Zeit für eine Studie: Zwei-Händig
Bild Quelle: http://www.uxmatters.com/mt/archives/2013/02/how...
© 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...
© 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 user
http://www.webdesign.org/web-design-fails.22423.html
https:...
© 121WATT - André Goldmann
Fail 1 - Forgetting the mobile user
http://www.webdesign.org/web-design-fails.22423.html
https:...
© 121WATT - André Goldmann
André Goldmann

andre.goldmann@121watt.de

@pixeldreher
Xing: https://www.xing.com/profile/
Andr...
© 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
Nächste SlideShare
Wird geladen in …5
×

Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014

3.591 Aufrufe

Veröffentlicht am

Fast jedes Unternehmen unterschätzt Mobile. Aber die mobile Welt ist nicht mit der Desktopwelt zu vergleichen. Und doch werden Designs und Businesspraktiken von Computer zu Mobile übertragen. Das Resultat sind Erwartungen an Mobile Conversions, die meist gar nicht erfüllt werden können. Von Giganten wie Facebook bis hin zu kleinen Start Ups, alle Unternehmen lernen, dass der Übergang zu einer mobilen Welt nicht nur schwierig, sondern auch riskant ist. Welche Mobile-Standards erwartet der Nutzer auf seinen Devices und wie können wir als Anbieter darauf eingehen? Wie erhöht man die mobile Konversionrate durch responsives Bildmaterial? Worauf muss beim Einsatz von HTML5 bei Formularen geachtet werden?

Veröffentlicht in: Daten & Analysen

Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014

  1. 1. © 121WATT - André Goldmann Achtung Falle! Fehler bei Mobile- und Responsive-Webdesign (RWD) vermeiden Berlin, 04.11. - 05.11.2014
  2. 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. 3. © 121WATT - André Goldmann Ich arbeitete unter anderem für diese Kunden
  4. 4. © 121WATT - André Goldmann Privates Projekt 4
  5. 5. © 121WATT - André Goldmann Privates Projekt 4 > 374.000 Besucher
  6. 6. © 121WATT - André Goldmann Privates Projekt 4 > 374.000 Besucher > 3.126.000 Seitenaufrufe
  7. 7. © 121WATT - André Goldmann Privates Projekt 4 > 374.000 Besucher > 3.126.000 Seitenaufrufe > 1 TB Traffic im Monat
  8. 8. © 121WATT - André Goldmann Privates Projekt 4 > 374.000 Besucher > 3.126.000 Seitenaufrufe > 1 TB Traffic im Monat 80% Mobile-Traffic
  9. 9. © 121WATT - André Goldmann Privates Projekt Seit März 2014 mit Apps für Android & iOS
  10. 10. © 121WATT - André Goldmann Konvertiert „mobile“ nicht? … oder kommt es auf meine Zielgruppe & den Kontext an?
  11. 11. © 121WATT - André Goldmann Kurze Fragerunde…
  12. 12. © 121WATT - André Goldmann Fragerunde… Wer hat schon ein Bahnticket mit dem Handy gekauft?
  13. 13. © 121WATT - André Goldmann Fragerunde… Schon mal Pizza, Döner oder Nudeln per App bestellt und bezahlt?
  14. 14. © 121WATT - André Goldmann Fragerunde… Günstige Produkte, Angebote oder Schnäppchen mit dem Handy bestellt?
  15. 15. © 121WATT - André Goldmann Fragerunde… Versicherung mit dem Handy abgeschlossen?
  16. 16. © 121WATT - André Goldmann Fragerunde… Reise oder Kurzurlaub mit dem Smartphone gebucht?
  17. 17. © 121WATT - André Goldmann Fragerunde… Produkte über 1.000,- € per Smartphone bestellt?
  18. 18. © 121WATT - André Goldmann Fragerunde… Ticket für die ConversionConference mit dem Handy geordert?
  19. 19. © 121WATT - André Goldmann Fragerunde… Ein Tool oder eine berufliche Dienstleistung per Smartphone gebucht?
  20. 20. © 121WATT - André Goldmann Jetzt nochmal im Kontext
  21. 21. © 121WATT - André Goldmann Fragerunde… Wer hat schon ein Bahnticket mit dem Handy gekauft? Unterwegs, schnell und privat
  22. 22. © 121WATT - André Goldmann Fragerunde… Schon mal Pizza, Döner oder Nudeln per App bestellt und bezahlt? Praktisch, schnell & „Alltagsproblemlöser“
  23. 23. © 121WATT - André Goldmann Fragerunde… Günstige Produkte, Angebote oder Schnäppchen mit dem Handy bestellt? Schnelligkeit, keine Gefahr & privat
  24. 24. © 121WATT - André Goldmann Fragerunde… Versicherung mit dem Handy abgeschlossen? Mit Ruhe und Bedacht, komplex & leseintensiv
  25. 25. © 121WATT - André Goldmann Fragerunde… Reise oder Kurzurlaub mit dem Smartphone gebucht? Preisvergleich, Visuell & keine einseitige Entscheidung
  26. 26. © 121WATT - André Goldmann Fragerunde… Produkte über 1.000,- € per Smartphone bestellt? Vertrauen, „mal eben 1.000,- €“
  27. 27. © 121WATT - André Goldmann Fragerunde… Ticket für die ConversionConference mit dem Handy geordert? Business, man sitzt eh vor dem Desktop, genug Zeit
  28. 28. © 121WATT - André Goldmann Fragerunde… Ein Tool oder eine berufliche Dienstleistung per Smartphone gebucht? Vergleich, Desktop-Tools, Auswahl, nicht-mobil Verfügbar
  29. 29. © 121WATT - André Goldmann Wie ging das alles eigentlich los? Können wir eigentlich Desktop mit „Mobile“ vergleichen?
  30. 30. © 121WATT - André Goldmann 1993 - Kommerzielle Durchbruch Bild Quelle: http://www.computerhistory.org/
  31. 31. © 121WATT - André Goldmann 1999 - bin ich da schon drin’ oder was? Bild Quelle: http://www.spiegel.de/
  32. 32. © 121WATT - André Goldmann 90er - 2007. Bild Quelle: https://www.youtube.com/
  33. 33. © 121WATT - André Goldmann 2007. Bild Quelle: http://www.chip.de/
  34. 34. © 121WATT - André Goldmann Die Entwicklung des mobilen Internets
  35. 35. © 121WATT - André Goldmann Die Entwicklung des mobilen Internets
  36. 36. © 121WATT - André Goldmann Die Entwicklung des mobilen Internets Mosaic 1993
  37. 37. © 121WATT - André Goldmann Die Entwicklung des mobilen Internets Mosaic 1993 ISDN in DEU 1995
  38. 38. © 121WATT - André Goldmann Die Entwicklung des mobilen Internets Mosaic 1993 ISDN in DEU 1995 Boris’ ;) 1999
  39. 39. © 121WATT - André Goldmann Die Entwicklung des mobilen Internets Mosaic 1993 ISDN in DEU 1995 Boris’ ;) 1999 The iPhone 2007
  40. 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. 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. 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. 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. 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. 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. 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. 47. © 121WATT - André Goldmann Was ist anders bei RWD? Workflows & Ansätze
  48. 48. © 121WATT - André Goldmann ALLES
  49. 49. © 121WATT - André Goldmann Flexibles Layout Bildquelle: http://www.apple.com/de/
  50. 50. © 121WATT - André Goldmann Flexibles Layout Bildquelle: http://www.apple.com/de
  51. 51. © 121WATT - André Goldmann Flexibles Layout Bildquelle: http://www.apple.com/de
  52. 52. © 121WATT - André Goldmann Flexibles Layout Bildquelle: http://www.apple.com/de
  53. 53. © 121WATT - André Goldmann Flexibles Layout Bildquelle: http://www.apple.com/de
  54. 54. © 121WATT - André Goldmann Flexibles Layout Bildquelle: http://www.apple.com/de Auflösung von 5120 x 2880 Pixel
  55. 55. © 121WATT - André Goldmann Was erwarten Besucher?
  56. 56. © 121WATT - André Goldmann Studie von Google (2012)
  57. 57. © 121WATT - André Goldmann Studie von Google (2012) • 69% der Teilnehmer würden auf einer mobilfähigen Website ein Produkt kaufen
  58. 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. 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. 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. 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. 62. © 121WATT - André Goldmann Standards: Android Design http://developer.android.com/design/index.html
  63. 63. © 121WATT - André Goldmann Standards: iOS Human Interface Guidelines https://developer.apple.com/library/ios/documentation/userexperience/conceptual/mobilehig/Anatomy.html
  64. 64. © 121WATT - André Goldmann Standards: iOS Human Interface Guidelines https://developer.apple.com/library/ios/documentation/userexperience/conceptual/mobilehig/Anatomy.html
  65. 65. © 121WATT - André Goldmann Webdesign Workflow (früher) Als der Nachbar Websites „programmierte“…
  66. 66. © 121WATT - André Goldmann Webdesign Workflow (früher)
  67. 67. © 121WATT - André Goldmann Webdesign Workflow (früher) • Planung
  68. 68. © 121WATT - André Goldmann Webdesign Workflow (früher) • Planung • Wireframes
  69. 69. © 121WATT - André Goldmann Webdesign Workflow (früher) • Planung • Wireframes • Design mit Photoshop, Fireworks, „Illustrator“ & Co.
  70. 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. 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. 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. 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. 74. © 121WATT - André Goldmann RWD Workflow Punkt 1 - 47…
  75. 75. © 121WATT - André Goldmann Probleme im Jahr 2014
  76. 76. © 121WATT - André Goldmann Probleme im Jahr 2014 • Unzählige Displaygrößen und Auflösungen
  77. 77. © 121WATT - André Goldmann Probleme im Jahr 2014 • Unzählige Displaygrößen und Auflösungen • Webseiten werden in unterschiedlichen Situationen und Kontexten benutzt
  78. 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. 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
  80. 80. © 121WATT - André Goldmann RWD Workflow
  81. 81. © 121WATT - André Goldmann RWD Workflow • Planung
  82. 82. © 121WATT - André Goldmann RWD Workflow • Planung • Inhalte / Seitenarchitektur
  83. 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. 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. 85. © 121WATT - André Goldmann Styletil.es http://styletil.es/
  86. 86. © 121WATT - André Goldmann styletil.es Beispiel http://styletil.es/
  87. 87. © 121WATT - André Goldmann RWD Performance Wenn Sekunden zu Stunden werden!
  88. 88. © 121WATT - André Goldmann X Warum Ladezeit-Optimierung?
  89. 89. © 121WATT - André Goldmann X • Hohe Bouncerate Warum Ladezeit-Optimierung?
  90. 90. © 121WATT - André Goldmann X • Hohe Bouncerate • schlechte User Experience Warum Ladezeit-Optimierung?
  91. 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. 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. 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. 94. © 121WATT - André Goldmann Ladezeit-Optimierung - Tools 51 tools.pingdom.com/fpt/
  95. 95. © 121WATT - André Goldmann Ladezeit-Optimierung - Tools 52
  96. 96. © 121WATT - André Goldmann Ladezeit-Optimierung - Tools X https://www.google.com/analytics/web/#report/content-site-speed-suggestions/
  97. 97. © 121WATT - André Goldmann Ladezeit-Optimierung - Tools 53 http://developers.google.com/speed/pagespeed/insights/
  98. 98. © 121WATT - André Goldmann 54
  99. 99. © 121WATT - André Goldmann 55
  100. 100. © 121WATT - André Goldmann Ladezeit-Optimierung Server: 56
  101. 101. © 121WATT - André Goldmann Ladezeit-Optimierung Server: • Caching- & Kompression aktivieren 56
  102. 102. © 121WATT - André Goldmann Ladezeit-Optimierung Server: • Caching- & Kompression aktivieren • HTTP Requests reduzieren 56
  103. 103. © 121WATT - André Goldmann Ladezeit-Optimierung Server: • Caching- & Kompression aktivieren • HTTP Requests reduzieren • Weiterleitungen vermeiden & 404 Fehler (bei Bildern, Skripten & Co.) beseitigen 56
  104. 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. 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. 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. 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. 108. © 121WATT - André Goldmann 57 HTML: Ladezeit-Optimierung
  109. 109. © 121WATT - André Goldmann 57 HTML: • HTML Kommentare entfernen Ladezeit-Optimierung
  110. 110. © 121WATT - André Goldmann 57 HTML: • HTML Kommentare entfernen • HTML Code komprimieren & ungenutztes CSS entfernen Ladezeit-Optimierung
  111. 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. 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. 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. 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. 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. 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. 117. © 121WATT - André Goldmann X Ladezeit-Optimierung: InstantClick http://instantclick.io/
  118. 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. 119. © 121WATT - André Goldmann 58 Bilder: Ladezeit-Optimierung
  120. 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. 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. 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. 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. 124. © 121WATT - André Goldmann Icons als Fonts ausgeben http://fontawesome.io/ http://fontello.com/
  125. 125. © 121WATT - André Goldmann Grafiken für alle Displays/Auflösungen http://www.imgix.com/ http://adaptive-images.com/
  126. 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. 127. © 121WATT - André Goldmann <picture> Responsive Bilder für unterschiedliche Anwendungsfälle
  128. 128. © 121WATT - André Goldmann Probleme bei von skalierten Bildern
  129. 129. © 121WATT - André Goldmann Probleme bei von skalierten Bildern • kein Qualitätsverlust • mehr Datenvolumen beim Nutzer
  130. 130. © 121WATT - André Goldmann Probleme bei von skalierten Bildern • kein Qualitätsverlust • mehr Datenvolumen beim Nutzer • deutlicher Qualitätsverlust • weniger Datenvolumen beim Nutzer
  131. 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. 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. 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. 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. 135. © 121WATT - André Goldmann Beispiel: Zalando auf dem Desktop
  136. 136. © 121WATT - André Goldmann Beispiel: Zalando auf dem Smartphone
  137. 137. © 121WATT - André Goldmann Beispiel: Zalando auf dem Smartphone
  138. 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. 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. 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. 141. © 121WATT - André Goldmann Viewport-basierte Bildauswahl Bild-Quelle: http://www.html5rocks.com/en/tutorials/responsive/picture-element/
  142. 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. 143. © 121WATT - André Goldmann Aktueller Browser-Support (Stand 10/2014) http://caniuse.com/#search=picture
  144. 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. 145. © 121WATT - André Goldmann Aktueller Browser-Support (Stand 10/2014) http://caniuse.com/#search=picture
  146. 146. © 121WATT - André Goldmann Aktueller Browser-Support (Stand 10/2014) http://caniuse.com/#search=picture
  147. 147. © 121WATT - André Goldmann Wann sollten wir welche Auswahl definieren?
  148. 148. © 121WATT - André Goldmann Wann sollten wir welche Auswahl definieren? • Art-Direction-basierte Bildauswahl
 (Bildausschnitt enorm wichtig, CTA muss sichtbar sein)
  149. 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. 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. 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)
  152. 152. © 121WATT - André Goldmann Auswirkungen
  153. 153. © 121WATT - André Goldmann Responsive Formulare Auch hier kann man vieles falsch machen.
  154. 154. © 121WATT - André Goldmann Regeln für responsive (mobile) Formulare
  155. 155. © 121WATT - André Goldmann Regeln für responsive (mobile) Formulare Keine wiederholenden Felder & Aktionen (Passwort wiederholen, E-Mail Adresse verifizieren)
  156. 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. 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. 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)
  159. 159. © 121WATT - André Goldmann HTML5 und Formulare
  160. 160. © 121WATT - André Goldmann HTML5 und Formulare Formulare auf dem Desktop machen in der Regel keinen Spaß - aber man muss ja…
  161. 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. 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. 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. 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. 165. © 121WATT - André Goldmann Input Typen von HTML5: number Beispiel-Code: <form> <input type="number" name="number"> </form>
  166. 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. 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. 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. 169. © 121WATT - André Goldmann Input Typen von HTML5: color Zur Eingabe von Farbwerten. Beispiel-Code: <form> <input type="color" name="favcolor"> </form>
  170. 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
  171. 171. © 121WATT - André Goldmann Adressen in Formularen
  172. 172. © 121WATT - André Goldmann Adressen in Formularen
  173. 173. © 121WATT - André Goldmann Adressen in Formularen
  174. 174. © 121WATT - André Goldmann Formulare auf Autopilot https://www.deutschepost.de/de/d/deutsche-post-direkt/datafactory.html
  175. 175. © 121WATT - André Goldmann Formular-Validierung
  176. 176. © 121WATT - André Goldmann „normale“ Validierung nach dem Abschicken https://www.youtube.com/watch?v=FWDDRG93puY
  177. 177. © 121WATT - André Goldmann Real-Time Validierung VOR dem Abschicken https://www.youtube.com/watch?v=hlU74LIPauo
  178. 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. 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. 180. © 121WATT - André Goldmann Responsive Testing Bildquelle: http://www.elezea.com/2013/11/rwd-content-modules/
  181. 181. © 121WATT - André Goldmann Responsive Testing Bildquelle: http://www.elezea.com/2013/11/rwd-content-modules/
  182. 182. © 121WATT - André Goldmann http://alphapixels.com/prepros/ Prepros App (Mac OS, Windows + alle Smartphones)
  183. 183. © 121WATT - André Goldmann http://incident57.com/codekit/ CodeKit (Mac OS + alle Smartphones)
  184. 184. © 121WATT - André Goldmann Wireframe Testing: Balsamiq (Windows, Linux, Mac OS) https://balsamiq.com/
  185. 185. © 121WATT - André Goldmann Wireframe Testing: JUSTINMIND (Windows, Linux, Mac OS) http://www.justinmind.com/
  186. 186. © 121WATT - André Goldmann https://creative.adobe.com/de/products/reflow Adobe Edge Reflow (Windows, Mac OS)
  187. 187. © 121WATT - André Goldmann http://macaw.co/ MACAW (Mac OS)
  188. 188. © 121WATT - André Goldmann Google Chrome Browser
  189. 189. © 121WATT - André Goldmann Google Chrome Browser
  190. 190. © 121WATT - André Goldmann Google Chrome Browser
  191. 191. © 121WATT - André Goldmann Google Chrome Browser
  192. 192. © 121WATT - André Goldmann Google Chrome Browser
  193. 193. © 121WATT - André Goldmann Firefox
  194. 194. © 121WATT - André Goldmann http://lab.maltewassermann.com/viewport-resizer/ Viewport Resizer - Breakpoint Tester
  195. 195. © 121WATT - André Goldmann http://lab.maltewassermann.com/viewport-resizer/ Viewport Resizer - Breakpoint Tester
  196. 196. © 121WATT - André Goldmann responsive.is http://responsive.is/
  197. 197. © 121WATT - André Goldmann responsive.is http://responsive.is/
  198. 198. © 121WATT - André Goldmann responsive.is http://responsive.is/
  199. 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. 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. 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. 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. 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. 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. 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. 206. © 121WATT - André Goldmann Network Link Conditioner (Mac OS, iOS) http://nshipster.com/network-link-conditioner/
  207. 207. © 121WATT - André Goldmann http://opendevicelab.com/ OpenDeviceLab
  208. 208. © 121WATT - André Goldmann https://creative.adobe.com/de/products/inspect Adobe Edge Inspect (Windows, Mac OS, Android, iOS, Windowsphone & Amazon Kindle Fire)
  209. 209. © 121WATT - André Goldmann Ghostlab http://vanamco.com/ghostlab/ Bild Quelle: http://www.html5rocks.com/en/tutorials/tooling/synchronized-cross-device-testing/
  210. 210. © 121WATT - André Goldmann Ghostlab http://vanam Bild Quelle: http://www.html5rocks.com/en/tutorials/tooling/synchronized-cross-device-testing/
  211. 211. © 121WATT - André Goldmann UX Recorder für iOS http://www.uxrecorder.com/
  212. 212. © 121WATT - André Goldmann Silverback App für Mac OS X (Usability Testing) http://silverbackapp.com/
  213. 213. © 121WATT - André Goldmann Image Testing: Skala Preview (Mac OS, iOS, Android) http://bjango.com/mac/skalapreview/
  214. 214. © 121WATT - André Goldmann http://typecast.com/ Typecast
  215. 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. 216. © 121WATT - André Goldmann Performance-Tool: Pingdom 120 tools.pingdom.com/fpt/
  217. 217. © 121WATT - André Goldmann Bonus: Responsive Produkte
  218. 218. © 121WATT - André Goldmann Ist mein Produkt mobil nicht verfügbar?
  219. 219. © 121WATT - André Goldmann Ist mein Produkt mobil nicht verfügbar?
  220. 220. © 121WATT - André Goldmann Mobile Konversion macht mobil keinen Sinn?
  221. 221. © 121WATT - André Goldmann Mobile Konversion macht mobil keinen Sinn?
  222. 222. © 121WATT - André Goldmann Ziel von RWD 124 Was Nutzer wollen Unser Ziel
  223. 223. © 121WATT - André Goldmann Ziel von RWD 124 Was Nutzer wollen Unser Ziel
  224. 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. 225. © 121WATT - André Goldmann Mit welcher Hand nutzen Sie Ihr Smartphone? …bitte mal Arm hoch.
  226. 226. © 121WATT - André Goldmann 126
  227. 227. © 121WATT - André Goldmann 126
  228. 228. © 121WATT - André Goldmann 126
  229. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 245. © 121WATT - André Goldmann 131 Anmelden & genauere Ergebnisse
  246. 246. © 121WATT - André Goldmann Ergebnis: Webdesign kann nicht überall gleich aussehen und funktionieren.
  247. 247. © 121WATT - André Goldmann Lohnt sich die Optimierung für Mobile und brauche ich RWD?
  248. 248. © 121WATT - André Goldmann https://www.google.com/analytics/web/#report/visitors-mobile-overview/
  249. 249. © 121WATT - André Goldmann Schlechte Beispiele …die man besser nicht wiederholt.
  250. 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.
  251. 251. © 121WATT - André Goldmann Mobile Fails
  252. 252. © 121WATT - André Goldmann Mobile Fails
  253. 253. © 121WATT - André Goldmann Mobile Fails Ist hier der Platz zum scrollen und für die Inhalte ausreichen?
  254. 254. © 121WATT - André Goldmann Mobile Fails Zu viel Inhalt der keinen Fokus zulässt
  255. 255. © 121WATT - André Goldmann Mobile Fails Zu viel Inhalt der keinen Fokus zulässt
  256. 256. © 121WATT - André Goldmann Mobile Fails CSS: position:absolute
  257. 257. © 121WATT - André Goldmann Mobile Fails Wer versteht das?
  258. 258. © 121WATT - André Goldmann Mobile Fails Ob ich Inhalte die ich nicht vollständig lesen kann, wirklich teilen möchte?
  259. 259. © 121WATT - André Goldmann Mobile Fails Mehr „Bars“ haben leider nicht ins Layout gepasst ^^
  260. 260. © 121WATT - André Goldmann Mobile Fails Mehr „Bars“ haben leider nicht ins Layout gepasst ^^
  261. 261. © 121WATT - André Goldmann Mobile Fails Schon einmal etwas von einer Weiterleitung gehört?
  262. 262. © 121WATT - André Goldmann Mobile Fails Ok = Yes Cancel = No
  263. 263. © 121WATT - André Goldmann Jetzt wird’s teuer.
  264. 264. © 121WATT - André Goldmann
  265. 265. © 121WATT - André Goldmann Mobile Fails
  266. 266. © 121WATT - André Goldmann Mobile Fails
  267. 267. © 121WATT - André Goldmann Mobile Fails
  268. 268. © 121WATT - André Goldmann Mobile Fails
  269. 269. © 121WATT - André Goldmann Mobile Fails
  270. 270. © 121WATT - André Goldmann Mobile Fails
  271. 271. © 121WATT - André Goldmann Besuchen Sie eigene Websites regelmässig!
  272. 272. © 121WATT - André Goldmann Besuchen Sie MIT DEM SMARTPHONE!
  273. 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. 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. 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. 276. © 121WATT - André Goldmann http://www.abookapart.com/products/responsive-web-design Buch-Tipp
  277. 277. © 121WATT - André Goldmann http://www.abookapart.com/products/mobile-first Buch-Tipp
  278. 278. © 121WATT - André Goldmann http://www.abookapart.com/products/content-strategy-for-mobile Buch-Tipp
  279. 279. © 121WATT - André Goldmann http://www.abookapart.com/products/designing-for-emotion Buch-Tipp

×