© 121WATT - André Goldmann
Mobile Relaunch
Früher an später denken.
München, 17.03. - 18.03.2015
© 121WATT - André Goldmann
André Goldmann
• Seit 1996 Front-End Entwickler 

& Optimierer aus Leidenschaft
• CTO bei der 1...
© 121WATT - André Goldmann
Privates Projekt: nageldesign-galerie.de
3
3.400.000 Sitzungen
25.300.000 Seitenaufrufe
1 TB Tr...
© 121WATT - André Goldmann
Privates Projekt: nageldesign-galerie.de
3
3.400.000 Sitzungen
25.300.000 Seitenaufrufe
1 TB Tr...
© 121WATT - André Goldmann
Mobile SEO Session gestern verpasst?
© 121WATT - André Goldmann
Mobile SEO Grundlagen
5
http://www.slideshare.net/icecrack84/mobile-seo-grundlagen
© 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
Schlechte Beispiele
…die man besser nicht nachmachen sollte.
© 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
Solch ein Fehler kann teuer werden.
Wurde in diesem Beispiel jedoch „bereits“ behoben…
© 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
Lohnt sich die Optimierung für Mobile?
© 121WATT - André Goldmann
https://www.google.com/analytics/web/#report/visitors-mobile-overview/
© 121WATT - André Goldmann
Wie kann ich meinen Relaunch priorisieren?
36
© 121WATT - André Goldmann
Wie kann ich meinen Relaunch priorisieren?
36
Pauschalreisen:

35% mobile Traffic
© 121WATT - André Goldmann
Wie kann ich meinen Relaunch priorisieren?
36
Hotels:

40% mobile Traffic
Pauschalreisen:

35% m...
© 121WATT - André Goldmann
Wie kann ich meinen Relaunch priorisieren?
36
Hotels:

40% mobile Traffic
Flüge:

20% mobile Tra...
© 121WATT - André Goldmann
Wie kann ich meinen Relaunch priorisieren?
36
Hotels:

40% mobile Traffic
Flüge:

20% mobile Tra...
© 121WATT - André Goldmann
Wie kann ich meinen Relaunch priorisieren?
36
Hotels:

40% mobile Traffic
Flüge:

20% mobile Tra...
© 121WATT - André Goldmann
Wie kann ich meinen Relaunch priorisieren?
36
Hotels:

40% mobile Traffic
Flüge:

20% mobile Tra...
© 121WATT - André Goldmann
Wie kann ich meinen Relaunch priorisieren?
37
Hotels:

40% mobile Traffic
Flüge:

20% mobile Tra...
© 121WATT - André Goldmann
Wie kann ich meinen Relaunch priorisieren?
37
Hotels:

40% mobile Traffic
Flüge:

20% mobile Tra...
© 121WATT - André Goldmann
Priorisierung von Teilbereichen
38
https://www.google.com/analytics/web/#report/content-drilldo...
© 121WATT - André Goldmann
Podcast zum Relaunch von Expedia
39
http://responsivewebdesign.com/podcast/expedia.html
http://...
© 121WATT - André Goldmann
Mobile Design = Responsive Design?
Nein. RWD ist Design für alle Geräte!
© 121WATT - André Goldmann
Responsive Webdesign ist ein flexibles und
geräteunabhängiges Design für das Internet.
Bildquell...
© 121WATT - André Goldmann
Was macht RWD aus?
© 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
Ziel von Mobile oder responsiven Webdesign
48
Was Nutzer
wollen
Unser Ziel
© 121WATT - André Goldmann
Ziel von Mobile oder responsiven Webdesign
48
Was Nutzer
wollen
Unser Ziel
Ziel ist eine hohe S...
© 121WATT - André Goldmann
Relaunch Workflow
Strategien, Konflikte & Lösungen für einen RWD Relaunch
© 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)
Meetings + Planungen für die neue Website
© 121WATT - André Goldmann
Webdesign Workflow (früher)
Meetings + Planungen für die neue Website
Wireframes oder Mockups we...
© 121WATT - André Goldmann
Webdesign Workflow (früher)
Meetings + Planungen für die neue Website
Wireframes oder Mockups we...
© 121WATT - André Goldmann
Webdesign Workflow (früher)
Meetings + Planungen für die neue Website
Wireframes oder Mockups we...
© 121WATT - André Goldmann
Webdesign Workflow (früher)
Meetings + Planungen für die neue Website
Wireframes oder Mockups we...
© 121WATT - André Goldmann
Webdesign Workflow (früher)
Meetings + Planungen für die neue Website
Wireframes oder Mockups we...
© 121WATT - André Goldmann
Webdesign Workflow (früher)
Meetings + Planungen für die neue Website
Wireframes oder Mockups we...
© 121WATT - André Goldmann
Webdesign Workflow (früher)
Meetings + Planungen für die neue Website
Wireframes oder Mockups we...
© 121WATT - André Goldmann
Wer erinnert sich noch an dieses Bild?
Mobile Design = Responsive Design?
53
Bildquelle: https:...
© 121WATT - André Goldmann
© 121WATT - André Goldmann
Jetzt mal alle Hände hoch, wer…
© 121WATT - André Goldmann
…für all diese Geräte ein Design entwerfen will ^^
Jetzt mal alle Hände hoch, wer…
© 121WATT - André Goldmann
Was können Website Prints nicht abbilden?
Was macht außerdem beachten sollte:
© 121WATT - André Goldmann
Touch Experience & Interactions
(Hover, Animationen & Bewegungen)
© 121WATT - André Goldmann
Mobiles (responsives) Webdesign erfordert ein
radikales Umdenken bei allen Verantwortlichen!
© 121WATT - André Goldmann
Geschäftsführer & Projektmanager
• Wollen wir jedes Gerät für die Zukunft und heute unterstütze...
© 121WATT - André Goldmann
Frontend-Designer
• Können wir Photoshop, Illustrator & Co. aus unseren Prozessen entfernen bzw...
© 121WATT - André Goldmann
RWD Workflow
Punkt 1 - 47…
© 121WATT - André Goldmann
Probleme im Jahr 2015
© 121WATT - André Goldmann
Probleme im Jahr 2015
• Unzählige Displaygrößen und Auflösungen
© 121WATT - André Goldmann
Probleme im Jahr 2015
• Unzählige Displaygrößen und Auflösungen
• Webseiten werden in unterschie...
© 121WATT - André Goldmann
Probleme im Jahr 2015
• Unzählige Displaygrößen und Auflösungen
• Webseiten werden in unterschie...
© 121WATT - André Goldmann
Probleme im Jahr 2015
• Unzählige Displaygrößen und Auflösungen
• Webseiten werden in unterschie...
© 121WATT - André Goldmann
Probleme im Jahr 2015
• Unzählige Displaygrößen und Auflösungen
• Webseiten werden in unterschie...
© 121WATT - André Goldmann
Webdesign Workflow bei RWD
© 121WATT - André Goldmann
Webdesign Workflow bei RWD
Analyse + Planung
© 121WATT - André Goldmann
Webdesign Workflow bei RWD
Analyse + Planung
Inhalts- & Seitenarchitektur
(Contentstrategie)
© 121WATT - André Goldmann
Webdesign Workflow bei RWD
Analyse + Planung
Inhalts- & Seitenarchitektur
(Contentstrategie)
Ske...
© 121WATT - André Goldmann
Webdesign Workflow bei RWD
Analyse + Planung
Inhalts- & Seitenarchitektur
(Contentstrategie)
Ske...
© 121WATT - André Goldmann
Mit welcher Hand nutzen Sie Ihr
Smartphone?
…bitte mal Arm hoch.
© 121WATT - André Goldmann
Lust auf einen kleinen Test?
www.google.de
© 121WATT - André Goldmann
65
© 121WATT - André Goldmann
65
© 121WATT - André Goldmann
65
© 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
Ergebnis: Webdesign kann nicht überall gleich
aussehen und funktionieren.
© 121WATT - André Goldmann
71
© 121WATT - André Goldmann
71
© 121WATT - André Goldmann
72
© 121WATT - André Goldmann
72
© 121WATT - André Goldmann
73
© 121WATT - André Goldmann
73
© 121WATT - André Goldmann
74
© 121WATT - André Goldmann
74
© 121WATT - André Goldmann
74
© 121WATT - André Goldmann
75
© 121WATT - André Goldmann
75
© 121WATT - André Goldmann
76
© 121WATT - André Goldmann
76
© 121WATT - André Goldmann
76
© 121WATT - André Goldmann
77
© 121WATT - André Goldmann
77
© 121WATT - André Goldmann
78
© 121WATT - André Goldmann
78
© 121WATT - André Goldmann
78
© 121WATT - André Goldmann
Stichwort:
Wireframes & Prototypen
© 121WATT - André Goldmann
Planung vom mobilen Interface
© 121WATT - André Goldmann
Planung vom mobilen Interface
© 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
Frameworks für schnelles Prototyping
Foundation – http://foundation.zurb.com/
Bootstrap – http:...
© 121WATT - André Goldmann
http://pingendo.com/
Pingendo (Windows, Mac OS & Linux)
© 121WATT - André Goldmann
http://pingendo.com/
Pingendo (Windows, Mac OS & Linux)
© 121WATT - André Goldmann
Stichwort:

(Design)prozess im Browser
© 121WATT - André Goldmann
Warum?
© 121WATT - André Goldmann
Es spart viiiiiel Zeit
© 121WATT - André Goldmann
Problem von früher: Layouts & Slices in Photoshop
90
© 121WATT - André Goldmann
http://incident57.com/codekit/
CodeKit (Mac OSX + alle Smartphones)
© 121WATT - André Goldmann
http://koala-app.com/
Koala (Mac OSX, Windows, Linux)
© 121WATT - André Goldmann
Veränderungen sind schnell erledigt
© 121WATT - André Goldmann
Content steht im Fokus & nicht das
Design der Website
© 121WATT - André Goldmann
Content- bzw. Mobile-First Ansatz
• Konzentration auf wesentliche Funktionen meiner Website
• C...
© 121WATT - André Goldmann
RWD wird leichter zu entwickeln
© 121WATT - André Goldmann
Stichwort „Breakpoints“
Content & Funktionen bestimmen die Breakpoints und nicht mehr das
Layou...
© 121WATT - André Goldmann
Was sind Breakpoints und wie erkenne ich sie?
© 121WATT - André Goldmann
Was sind Breakpoints und wie erkenne ich sie?
© 121WATT - André Goldmann
Was sind Breakpoints und wie erkenne ich sie?
© 121WATT - André Goldmann
Was sind Breakpoints und wie erkenne ich sie?
© 121WATT - André Goldmann
Was sind Breakpoints und wie erkenne ich sie?
© 121WATT - André Goldmann
„Aktuelle“ Breakpoints
101
© 121WATT - André Goldmann
„Aktuelle“ Breakpoints
320px – Smartphones Portrait (Hochformat)
101
© 121WATT - André Goldmann
„Aktuelle“ Breakpoints
320px – Smartphones Portrait (Hochformat)
480px – Smartphones Landscape ...
© 121WATT - André Goldmann
„Aktuelle“ Breakpoints
320px – Smartphones Portrait (Hochformat)
480px – Smartphones Landscape ...
© 121WATT - André Goldmann
„Aktuelle“ Breakpoints
320px – Smartphones Portrait (Hochformat)
480px – Smartphones Landscape ...
© 121WATT - André Goldmann
„Aktuelle“ Breakpoints
320px – Smartphones Portrait (Hochformat)
480px – Smartphones Landscape ...
© 121WATT - André Goldmann
„Aktuelle“ Breakpoints
320px – Smartphones Portrait (Hochformat)
480px – Smartphones Landscape ...
© 121WATT - André Goldmann
„Aktuelle“ Breakpoints
320px – Smartphones Portrait (Hochformat)
480px – Smartphones Landscape ...
© 121WATT - André Goldmann
„Aktuelle“ Breakpoints
320px – Smartphones Portrait (Hochformat)
480px – Smartphones Landscape ...
© 121WATT - André Goldmann
„Aktuelle“ Breakpoints
320px – Smartphones Portrait (Hochformat)
480px – Smartphones Landscape ...
© 121WATT - André Goldmann
„Aktuelle“ Breakpoints
320px – Smartphones Portrait (Hochformat)
480px – Smartphones Landscape ...
© 121WATT - André Goldmann
„Aktuelle“ Breakpoints
320px – Smartphones Portrait (Hochformat)
480px – Smartphones Landscape ...
© 121WATT - André Goldmann
„Aktuelle“ Breakpoints
320px – Smartphones Portrait (Hochformat)
480px – Smartphones Landscape ...
© 121WATT - André Goldmann
„Aktuelle“ Breakpoints
320px – Smartphones Portrait (Hochformat)
480px – Smartphones Landscape ...
© 121WATT - André Goldmann
„Aktuelle“ Breakpoints
320px – Smartphones Portrait (Hochformat)
480px – Smartphones Landscape ...
© 121WATT - André Goldmann
Breakpoints der „Zukunft“
102
© 121WATT - André Goldmann
Breakpoints der „Zukunft“
102
320 x 290
© 121WATT - André Goldmann
Breakpoints der „Zukunft“
102
320 x 290
38mm
340 x 272
42mm
390 x 312
© 121WATT - André Goldmann
Grenzen von RWD. Oder der Technik?
103
© 121WATT - André Goldmann
Breakpoint Test: Google Chrome Browser
© 121WATT - André Goldmann
Breakpoint Test: Google Chrome Browser
© 121WATT - André Goldmann
Breakpoint Test: Google Chrome Browser
© 121WATT - André Goldmann
Breakpoint Test: Google Chrome Browser
© 121WATT - André Goldmann
Breakpoint Test: Google Chrome Browser
© 121WATT - André Goldmann
Breakpoint Test: Firefox
© 121WATT - André Goldmann
Conditional Loading
Was für Layout gilt, sollte auch für Funktionen genutzt werden.
© 121WATT - André Goldmann
Conditional Loading am Beispiel des Viewports
@media all and (max-width: 900px) {
// styles
}
i...
© 121WATT - André Goldmann
caniuse.com – Browser-Support
109
http://caniuse.com/#search=media%20queries
© 121WATT - André Goldmann
Browser- und Geräte-Tests
© 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
https://creative.adobe.com/de/products/inspect
Adobe Edge Inspect (Windows, Mac OS, Android, iO...
© 121WATT - André Goldmann
http://www.browsersync.io/
BrowserSync
© 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
http://opendevicelab.com/
OpenDeviceLab
© 121WATT - André Goldmann
Nicht nur Layout sondern bitte auch

Funktionen & Performance testen!
© 121WATT - André Goldmann
Performance in Echtzeit
© 121WATT - André Goldmann
Performance Tests bei der Entwicklung
119
© 121WATT - André Goldmann
Website Speed Test: Pingdom Tools
120
tools.pingdom.com/fpt/
© 121WATT - André Goldmann
„Performance Killer“ frühzeitig beseitigen
© 121WATT - André Goldmann
122
Keine HTML Kommentare im Quelltext nutzen
Performance Tipps
© 121WATT - André Goldmann
122
Keine HTML Kommentare im Quelltext nutzen
HTML Code komprimiert launchen & ungenutztes CSS ...
© 121WATT - André Goldmann
122
Keine HTML Kommentare im Quelltext nutzen
HTML Code komprimiert launchen & ungenutztes CSS ...
© 121WATT - André Goldmann
122
Keine HTML Kommentare im Quelltext nutzen
HTML Code komprimiert launchen & ungenutztes CSS ...
© 121WATT - André Goldmann
122
Keine HTML Kommentare im Quelltext nutzen
HTML Code komprimiert launchen & ungenutztes CSS ...
© 121WATT - André Goldmann
122
Keine HTML Kommentare im Quelltext nutzen
HTML Code komprimiert launchen & ungenutztes CSS ...
© 121WATT - André Goldmann
122
Keine HTML Kommentare im Quelltext nutzen
HTML Code komprimiert launchen & ungenutztes CSS ...
© 121WATT - André Goldmann
123
Bilder:
Performance Tipps für Bilder
© 121WATT - André Goldmann
123
Bilder:
Bildgrößen und Datei-Formate richtig wählen (.jpg für Fotos/
Hintergrundgrafiken; .p...
© 121WATT - André Goldmann
123
Bilder:
Bildgrößen und Datei-Formate richtig wählen (.jpg für Fotos/
Hintergrundgrafiken; .p...
© 121WATT - André Goldmann
123
Bilder:
Bildgrößen und Datei-Formate richtig wählen (.jpg für Fotos/
Hintergrundgrafiken; .p...
© 121WATT - André Goldmann
123
Bilder:
Bildgrößen und Datei-Formate richtig wählen (.jpg für Fotos/
Hintergrundgrafiken; .p...
© 121WATT - André Goldmann
123
Bilder:
Bildgrößen und Datei-Formate richtig wählen (.jpg für Fotos/
Hintergrundgrafiken; .p...
© 121WATT - André Goldmann
123
Bilder:
Bildgrößen und Datei-Formate richtig wählen (.jpg für Fotos/
Hintergrundgrafiken; .p...
© 121WATT - André Goldmann
User Experience, Browser- & Gerätekompatibilität &
Performance werden nicht erst am Ende geprüf...
© 121WATT - André Goldmann
Entscheidungen sollten im Browser getroffen werden.
© 121WATT - André Goldmann
Strukturierte Daten für (mobilen) Content
© 121WATT - André Goldmann
Strukturierte Daten für (mobilen) Content
© 121WATT - André Goldmann
Strukturierte Daten für (mobilen) Content
© 121WATT - André Goldmann
Strukturierte Daten für (mobilen) Content
https://support.google.com/webmasters/answer/99170?hl...
© 121WATT - André Goldmann
Strukturierte Daten für (mobilen) Content
http://schema.org/
© 121WATT - André Goldmann
Worauf sollte ich bei der Wahl der Agentur achten?
130
© 121WATT - André Goldmann
Worauf sollte ich bei der Wahl der Agentur achten?
Statt „fertige Layouts“, sollten Styleguides...
© 121WATT - André Goldmann
Worauf sollte ich bei der Wahl der Agentur achten?
Statt „fertige Layouts“, sollten Styleguides...
© 121WATT - André Goldmann
Worauf sollte ich bei der Wahl der Agentur achten?
Statt „fertige Layouts“, sollten Styleguides...
© 121WATT - André Goldmann
Worauf sollte ich bei der Wahl der Agentur achten?
Statt „fertige Layouts“, sollten Styleguides...
© 121WATT - André Goldmann
Worauf sollte ich bei der Wahl der Agentur achten?
Statt „fertige Layouts“, sollten Styleguides...
© 121WATT - André Goldmann
Worauf sollte ich bei der Wahl der Agentur achten?
Statt „fertige Layouts“, sollten Styleguides...
© 121WATT - André Goldmann
Worauf sollte ich bei der Wahl der Agentur achten?
Statt „fertige Layouts“, sollten Styleguides...
© 121WATT - André Goldmann
„Bullshit Bingo“ für die Wahl der richtigen Agentur
131
© 121WATT - André Goldmann
„Bullshit Bingo“ für die Wahl der richtigen Agentur
131
Breakpoints
© 121WATT - André Goldmann
„Bullshit Bingo“ für die Wahl der richtigen Agentur
131
Breakpoints Adaptive Design
© 121WATT - André Goldmann
„Bullshit Bingo“ für die Wahl der richtigen Agentur
131
Breakpoints Adaptive Design Media Queri...
© 121WATT - André Goldmann
„Bullshit Bingo“ für die Wahl der richtigen Agentur
131
Breakpoints Adaptive Design Media Queri...
© 121WATT - André Goldmann
„Bullshit Bingo“ für die Wahl der richtigen Agentur
131
Breakpoints Adaptive Design Media Queri...
© 121WATT - André Goldmann
„Bullshit Bingo“ für die Wahl der richtigen Agentur
131
Breakpoints Adaptive Design Media Queri...
© 121WATT - André Goldmann
„Bullshit Bingo“ für die Wahl der richtigen Agentur
131
Breakpoints Adaptive Design Media Queri...
© 121WATT - André Goldmann
„Bullshit Bingo“ für die Wahl der richtigen Agentur
131
Breakpoints Adaptive Design Media Queri...
© 121WATT - André Goldmann
„Bullshit Bingo“ für die Wahl der richtigen Agentur
131
Breakpoints Adaptive Design Media Queri...
© 121WATT - André Goldmann
„Bullshit Bingo“ für die Wahl der richtigen Agentur
131
Breakpoints Adaptive Design Media Queri...
© 121WATT - André Goldmann
„Bullshit Bingo“ für die Wahl der richtigen Agentur
131
Breakpoints Adaptive Design Media Queri...
© 121WATT - André Goldmann
„Bullshit Bingo“ für die Wahl der richtigen Agentur
131
Breakpoints Adaptive Design Media Queri...
© 121WATT - André Goldmann
„Bullshit Bingo“ für die Wahl der richtigen Agentur
131
Breakpoints Adaptive Design Media Queri...
© 121WATT - André Goldmann
„Bullshit Bingo“ für die Wahl der richtigen Agentur
131
Breakpoints Adaptive Design Media Queri...
© 121WATT - André Goldmann
„Bullshit Bingo“ für die Wahl der richtigen Agentur
131
Breakpoints Adaptive Design Media Queri...
© 121WATT - André Goldmann
„Bullshit Bingo“ für die Wahl der richtigen Agentur
131
Breakpoints Adaptive Design Media Queri...
© 121WATT - André Goldmann
„Bullshit Bingo“ für die Wahl der richtigen Agentur
131
Breakpoints Adaptive Design Media Queri...
© 121WATT - André Goldmann
„Bullshit Bingo“ für die Wahl der richtigen Agentur
131
Breakpoints Adaptive Design Media Queri...
© 121WATT - André Goldmann
„Bullshit Bingo“ für die Wahl der richtigen Agentur
131
Breakpoints Adaptive Design Media Queri...
© 121WATT - André Goldmann
„Bullshit Bingo“ für die Wahl der richtigen Agentur
131
Breakpoints Adaptive Design Media Queri...
© 121WATT - André Goldmann
Relaunch- & Testing-Tools
© 121WATT - André Goldmann
Screaming Frog SEO Spider
http://www.screamingfrog.co.uk/seo-spider/
© 121WATT - André Goldmann
Uservoice
https://www.uservoice.com/
© 121WATT - André Goldmann
Qualaroo
https://qualaroo.com/
© 121WATT - André Goldmann
Google Analytics
google.com/analytics/web/
© 121WATT - André Goldmann
User Testing
http://www.usertesting.com/
© 121WATT - André Goldmann
Silverback App für Mac OSX (Usability Testing)
http://silverbackapp.com/
© 121WATT - André Goldmann
UX Recorder für iOS
http://www.uxrecorder.com/
© 121WATT - André Goldmann
Mobile-Website Conversion- User-Testing
https://www.clicktale.com/
http://www.crazyegg.com/
htt...
© 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
© 121WATT - André Goldmann
http://pxdr.de/moblaunch
@pixeldreher
Folien
Folgen
© 121WATT - André Goldmann
Bonus: Mobile Formulare
Bitte SOFORT mit erledigen!!
© 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
„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
http://pxdr.de/moblaunch
@pixeldreher
Folien
Folgen
© 121WATT - André Goldmann
Fragen zu Mobile SEO und Technical SEO jederzeit an:
166
André Goldmann

andre.goldmann@121watt...
Nächste SlideShare
Wird geladen in …5
×

Mobile Relaunch - Praxistipps zur Entwicklung einer mobilen Website

3.704 Aufrufe

Veröffentlicht am

In dieser Präsentation lernen Sie die technischen Herausforderungen eines mobilen Website-Relaunches kennen und bekommen Strategien zur Planung und operativen Umsetzung Ihrer neuen Website an die Hand – erprobt und praxisnah demonstriert. Lernen Sie außerdem den Vorteil von „Mobile first“ und responsiven Webdesigns sowie aktuellen Trackinglösungen zur Konversionmessung kennen.

Veröffentlicht in: Präsentationen & Vorträge
0 Kommentare
11 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

Keine Downloads
Aufrufe
Aufrufe insgesamt
3.704
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
56
Aktionen
Geteilt
0
Downloads
0
Kommentare
0
Gefällt mir
11
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

Mobile Relaunch - Praxistipps zur Entwicklung einer mobilen Website

  1. 1. © 121WATT - André Goldmann Mobile Relaunch Früher an später denken. München, 17.03. - 18.03.2015
  2. 2. © 121WATT - André Goldmann André Goldmann • Seit 1996 Front-End Entwickler 
 & Optimierer aus Leidenschaft • CTO bei der 121WATT
 Geschäftsinhaber bei Pixeldreher • Seminare bei der 121WATT:
 
 Mobile SEO
 Technical SEO & OnPage 
 WordPress Advanced • Twitter: @pixeldreher
 E-Mail: andre.goldmann@121watt.de
  3. 3. © 121WATT - André Goldmann Privates Projekt: nageldesign-galerie.de 3 3.400.000 Sitzungen 25.300.000 Seitenaufrufe 1 TB Traffic im Monat
  4. 4. © 121WATT - André Goldmann Privates Projekt: nageldesign-galerie.de 3 3.400.000 Sitzungen 25.300.000 Seitenaufrufe 1 TB Traffic im Monat 80% Mobile-Traffic
  5. 5. © 121WATT - André Goldmann Mobile SEO Session gestern verpasst?
  6. 6. © 121WATT - André Goldmann Mobile SEO Grundlagen 5 http://www.slideshare.net/icecrack84/mobile-seo-grundlagen
  7. 7. © 121WATT - André Goldmann Wie ging das alles eigentlich los? Können wir eigentlich Desktop mit „Mobile“ vergleichen?
  8. 8. © 121WATT - André Goldmann 1993 - Kommerzielle Durchbruch Bild Quelle: http://www.computerhistory.org/
  9. 9. © 121WATT - André Goldmann 1999 - bin ich da schon drin’ oder was? Bild Quelle: http://www.spiegel.de/
  10. 10. © 121WATT - André Goldmann 90er - 2007. Bild Quelle: https://www.youtube.com/
  11. 11. © 121WATT - André Goldmann 2007. Bild Quelle: http://www.chip.de/
  12. 12. © 121WATT - André Goldmann Die Entwicklung des mobilen Internets
  13. 13. © 121WATT - André Goldmann Die Entwicklung des mobilen Internets
  14. 14. © 121WATT - André Goldmann Die Entwicklung des mobilen Internets Mosaic 1993
  15. 15. © 121WATT - André Goldmann Die Entwicklung des mobilen Internets Mosaic 1993 ISDN in DEU 1995
  16. 16. © 121WATT - André Goldmann Die Entwicklung des mobilen Internets Mosaic 1993 ISDN in DEU 1995 Boris’ ;) 1999
  17. 17. © 121WATT - André Goldmann Die Entwicklung des mobilen Internets Mosaic 1993 ISDN in DEU 1995 Boris’ ;) 1999 The iPhone 2007
  18. 18. © 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
  19. 19. © 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
  20. 20. © 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
  21. 21. © 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
  22. 22. © 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…
  23. 23. © 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… Nutzererfahrung:
 18 Jahre vs. 3 Jahre Gleicher Inhalt & Code
  24. 24. © 121WATT - André Goldmann Das Umdenken der Anwender
 kann schnell beginnen. Zeit für RWD ;) Bild Quelle: http://www.apple.com/iphone-6/apple-pay/
  25. 25. © 121WATT - André Goldmann Schlechte Beispiele …die man besser nicht nachmachen sollte.
  26. 26. © 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.
  27. 27. © 121WATT - André Goldmann Mobile Fails
  28. 28. © 121WATT - André Goldmann Mobile Fails
  29. 29. © 121WATT - André Goldmann Mobile Fails Ist hier der Platz zum scrollen und für die Inhalte ausreichen?
  30. 30. © 121WATT - André Goldmann Mobile Fails Zu viel Inhalt der keinen Fokus zulässt
  31. 31. © 121WATT - André Goldmann Mobile Fails Zu viel Inhalt der keinen Fokus zulässt
  32. 32. © 121WATT - André Goldmann Mobile Fails CSS: position:absolute
  33. 33. © 121WATT - André Goldmann Mobile Fails Wer versteht das?
  34. 34. © 121WATT - André Goldmann Mobile Fails Ob ich Inhalte die ich nicht vollständig lesen kann, wirklich teilen möchte?
  35. 35. © 121WATT - André Goldmann Mobile Fails Mehr „Bars“ haben leider nicht ins Layout gepasst ^^
  36. 36. © 121WATT - André Goldmann Mobile Fails Mehr „Bars“ haben leider nicht ins Layout gepasst ^^
  37. 37. © 121WATT - André Goldmann Mobile Fails Schon einmal etwas von einer Weiterleitung gehört?
  38. 38. © 121WATT - André Goldmann Mobile Fails Ok = Yes Cancel = No
  39. 39. © 121WATT - André Goldmann Solch ein Fehler kann teuer werden. Wurde in diesem Beispiel jedoch „bereits“ behoben…
  40. 40. © 121WATT - André Goldmann
  41. 41. © 121WATT - André Goldmann Mobile Fails
  42. 42. © 121WATT - André Goldmann Mobile Fails
  43. 43. © 121WATT - André Goldmann Mobile Fails
  44. 44. © 121WATT - André Goldmann Mobile Fails
  45. 45. © 121WATT - André Goldmann Mobile Fails
  46. 46. © 121WATT - André Goldmann Mobile Fails
  47. 47. © 121WATT - André Goldmann Besuchen Sie eigene Websites regelmässig!
  48. 48. © 121WATT - André Goldmann Besuchen Sie MIT DEM SMARTPHONE!
  49. 49. © 121WATT - André Goldmann Lohnt sich die Optimierung für Mobile?
  50. 50. © 121WATT - André Goldmann https://www.google.com/analytics/web/#report/visitors-mobile-overview/
  51. 51. © 121WATT - André Goldmann Wie kann ich meinen Relaunch priorisieren? 36
  52. 52. © 121WATT - André Goldmann Wie kann ich meinen Relaunch priorisieren? 36 Pauschalreisen:
 35% mobile Traffic
  53. 53. © 121WATT - André Goldmann Wie kann ich meinen Relaunch priorisieren? 36 Hotels:
 40% mobile Traffic Pauschalreisen:
 35% mobile Traffic
  54. 54. © 121WATT - André Goldmann Wie kann ich meinen Relaunch priorisieren? 36 Hotels:
 40% mobile Traffic Flüge:
 20% mobile Traffic Pauschalreisen:
 35% mobile Traffic
  55. 55. © 121WATT - André Goldmann Wie kann ich meinen Relaunch priorisieren? 36 Hotels:
 40% mobile Traffic Flüge:
 20% mobile Traffic Pauschalreisen:
 35% mobile Traffic Mietwagen:
 70% mobile Traffic
  56. 56. © 121WATT - André Goldmann Wie kann ich meinen Relaunch priorisieren? 36 Hotels:
 40% mobile Traffic Flüge:
 20% mobile Traffic Pauschalreisen:
 35% mobile Traffic Mietwagen:
 70% mobile Traffic Ferienwohnungen:
 35% mobile Traffic
  57. 57. © 121WATT - André Goldmann Wie kann ich meinen Relaunch priorisieren? 36 Hotels:
 40% mobile Traffic Flüge:
 20% mobile Traffic Pauschalreisen:
 35% mobile Traffic Last-Minute:
 55% mobile Traffic Mietwagen:
 70% mobile Traffic Ferienwohnungen:
 35% mobile Traffic
  58. 58. © 121WATT - André Goldmann Wie kann ich meinen Relaunch priorisieren? 37 Hotels:
 40% mobile Traffic Flüge:
 20% mobile Traffic Pauschalreisen:
 35% mobile Traffic Last-Minute:
 55% mobile Traffic Mietwagen:
 70% mobile Traffic Ferienwohnungen:
 35% mobile Traffic
  59. 59. © 121WATT - André Goldmann Wie kann ich meinen Relaunch priorisieren? 37 Hotels:
 40% mobile Traffic Flüge:
 20% mobile Traffic Pauschalreisen:
 35% mobile Traffic Last-Minute:
 55% mobile Traffic Mietwagen:
 70% mobile Traffic Ferienwohnungen:
 35% mobile Traffic
  60. 60. © 121WATT - André Goldmann Priorisierung von Teilbereichen 38 https://www.google.com/analytics/web/#report/content-drilldown/
  61. 61. © 121WATT - André Goldmann Podcast zum Relaunch von Expedia 39 http://responsivewebdesign.com/podcast/expedia.html http://responsivewebdesign.com/podcast/expedia-two.html
  62. 62. © 121WATT - André Goldmann Mobile Design = Responsive Design? Nein. RWD ist Design für alle Geräte!
  63. 63. © 121WATT - André Goldmann Responsive Webdesign ist ein flexibles und geräteunabhängiges Design für das Internet. Bildquelle: https://www.flickr.com/photos/lukew/10430507184/
  64. 64. © 121WATT - André Goldmann Was macht RWD aus?
  65. 65. © 121WATT - André Goldmann Flexibles Layout Bildquelle: http://www.apple.com/de/
  66. 66. © 121WATT - André Goldmann Flexibles Layout Bildquelle: http://www.apple.com/de
  67. 67. © 121WATT - André Goldmann Flexibles Layout Bildquelle: http://www.apple.com/de
  68. 68. © 121WATT - André Goldmann Flexibles Layout Bildquelle: http://www.apple.com/de
  69. 69. © 121WATT - André Goldmann Flexibles Layout Bildquelle: http://www.apple.com/de
  70. 70. © 121WATT - André Goldmann Flexibles Layout Bildquelle: http://www.apple.com/de Auflösung von 5120 x 2880 Pixel
  71. 71. © 121WATT - André Goldmann Ziel von Mobile oder responsiven Webdesign 48 Was Nutzer wollen Unser Ziel
  72. 72. © 121WATT - André Goldmann Ziel von Mobile oder responsiven Webdesign 48 Was Nutzer wollen Unser Ziel Ziel ist eine hohe Schnittmenge
 auf beiden Seiten (Nutzer/Anbieter)
  73. 73. © 121WATT - André Goldmann Relaunch Workflow Strategien, Konflikte & Lösungen für einen RWD Relaunch
  74. 74. © 121WATT - André Goldmann Webdesign Workflow (früher) Als der Nachbar Websites „programmierte“…
  75. 75. © 121WATT - André Goldmann Webdesign Workflow (früher)
  76. 76. © 121WATT - André Goldmann Webdesign Workflow (früher) Meetings + Planungen für die neue Website
  77. 77. © 121WATT - André Goldmann Webdesign Workflow (früher) Meetings + Planungen für die neue Website Wireframes oder Mockups werden erstellt
  78. 78. © 121WATT - André Goldmann Webdesign Workflow (früher) Meetings + Planungen für die neue Website Wireframes oder Mockups werden erstellt Design mit Photoshop oder ähnlicher Software
  79. 79. © 121WATT - André Goldmann Webdesign Workflow (früher) Meetings + Planungen für die neue Website Wireframes oder Mockups werden erstellt Design mit Photoshop oder ähnlicher Software Entwicklung der Designs (Pixelperfect)
  80. 80. © 121WATT - André Goldmann Webdesign Workflow (früher) Meetings + Planungen für die neue Website Wireframes oder Mockups werden erstellt Design mit Photoshop oder ähnlicher Software Entwicklung der Designs (Pixelperfect) Abnahme vom PM oder Kunden → Online
  81. 81. © 121WATT - André Goldmann Webdesign Workflow (früher) Meetings + Planungen für die neue Website Wireframes oder Mockups werden erstellt Design mit Photoshop oder ähnlicher Software Entwicklung der Designs (Pixelperfect) Abnahme vom PM oder Kunden → Online
  82. 82. © 121WATT - André Goldmann Webdesign Workflow (früher) Meetings + Planungen für die neue Website Wireframes oder Mockups werden erstellt Design mit Photoshop oder ähnlicher Software Entwicklung der Designs (Pixelperfect) Abnahme vom PM oder Kunden → Online
  83. 83. © 121WATT - André Goldmann Webdesign Workflow (früher) Meetings + Planungen für die neue Website Wireframes oder Mockups werden erstellt Design mit Photoshop oder ähnlicher Software Entwicklung der Designs (Pixelperfect) Abnahme vom PM oder Kunden → Online Design mit Photoshop oder ähnlicher Software
  84. 84. © 121WATT - André Goldmann Wer erinnert sich noch an dieses Bild? Mobile Design = Responsive Design? 53 Bildquelle: https://www.flickr.com/photos/lukew/10430507184/
  85. 85. © 121WATT - André Goldmann
  86. 86. © 121WATT - André Goldmann Jetzt mal alle Hände hoch, wer…
  87. 87. © 121WATT - André Goldmann …für all diese Geräte ein Design entwerfen will ^^ Jetzt mal alle Hände hoch, wer…
  88. 88. © 121WATT - André Goldmann Was können Website Prints nicht abbilden? Was macht außerdem beachten sollte:
  89. 89. © 121WATT - André Goldmann Touch Experience & Interactions (Hover, Animationen & Bewegungen)
  90. 90. © 121WATT - André Goldmann Mobiles (responsives) Webdesign erfordert ein radikales Umdenken bei allen Verantwortlichen!
  91. 91. © 121WATT - André Goldmann Geschäftsführer & Projektmanager • Wollen wir jedes Gerät für die Zukunft und heute unterstützen? • Können wir von vorhandenen Prozessen grundlegend verändern? • Haben wir das notwendige Budget und die Zeit alle Team-Mitglieder weiterzubilden? • Wo können uns vorhandene Systeme im Weg stehen und wie beseitigen wir diese „Altlasten“? 58
  92. 92. © 121WATT - André Goldmann Frontend-Designer • Können wir Photoshop, Illustrator & Co. aus unseren Prozessen entfernen bzw. unsere Workflows entsprechend anpassen? • Kenne ich das Medium für das ich ein Layout plane? (Android, iOS, Windows, Mac OSX, Chrome OS usw.) • Bin ich offen für Veränderung? 59
  93. 93. © 121WATT - André Goldmann RWD Workflow Punkt 1 - 47…
  94. 94. © 121WATT - André Goldmann Probleme im Jahr 2015
  95. 95. © 121WATT - André Goldmann Probleme im Jahr 2015 • Unzählige Displaygrößen und Auflösungen
  96. 96. © 121WATT - André Goldmann Probleme im Jahr 2015 • Unzählige Displaygrößen und Auflösungen • Webseiten werden in unterschiedlichen Situationen und Kontexten benutzt
  97. 97. © 121WATT - André Goldmann Probleme im Jahr 2015 • Unzählige Displaygrößen und Auflösungen • Webseiten werden in unterschiedlichen Situationen und Kontexten benutzt • Sehr viele Browser/Betriebssysteme
  98. 98. © 121WATT - André Goldmann Probleme im Jahr 2015 • Unzählige Displaygrößen und Auflösungen • Webseiten werden in unterschiedlichen Situationen und Kontexten benutzt • Sehr viele Browser/Betriebssysteme • Unterschiedliche Interaktionen (Betriebsystemabhängig etc.)
  99. 99. © 121WATT - André Goldmann Probleme im Jahr 2015 • Unzählige Displaygrößen und Auflösungen • Webseiten werden in unterschiedlichen Situationen und Kontexten benutzt • Sehr viele Browser/Betriebssysteme • Unterschiedliche Interaktionen (Betriebsystemabhängig etc.) • Webseiten sind dynamisch und reagieren auf Nutzerverhalten
  100. 100. © 121WATT - André Goldmann Webdesign Workflow bei RWD
  101. 101. © 121WATT - André Goldmann Webdesign Workflow bei RWD Analyse + Planung
  102. 102. © 121WATT - André Goldmann Webdesign Workflow bei RWD Analyse + Planung Inhalts- & Seitenarchitektur (Contentstrategie)
  103. 103. © 121WATT - André Goldmann Webdesign Workflow bei RWD Analyse + Planung Inhalts- & Seitenarchitektur (Contentstrategie) Sketch ⇢ Wireframes ⇢ Visuelles Design ⇢Prototype ⇢ Testing ↺
  104. 104. © 121WATT - André Goldmann Webdesign Workflow bei RWD Analyse + Planung Inhalts- & Seitenarchitektur (Contentstrategie) Sketch ⇢ Wireframes ⇢ Visuelles Design ⇢Prototype ⇢ Testing ↺ RWD Prototype ⇢ Design im Browser
  105. 105. © 121WATT - André Goldmann Mit welcher Hand nutzen Sie Ihr Smartphone? …bitte mal Arm hoch.
  106. 106. © 121WATT - André Goldmann Lust auf einen kleinen Test? www.google.de
  107. 107. © 121WATT - André Goldmann 65
  108. 108. © 121WATT - André Goldmann 65
  109. 109. © 121WATT - André Goldmann 65
  110. 110. © 121WATT - André Goldmann Zeit für eine Studie http://www.uxmatters.com/mt/archives/2013/02/how-do-users-really-hold-mobile-devices.php
  111. 111. © 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
  112. 112. © 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 %
  113. 113. © 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 %
  114. 114. © 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 %
  115. 115. © 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
  116. 116. © 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
  117. 117. © 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
  118. 118. © 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
  119. 119. © 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
  120. 120. © 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
  121. 121. © 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
  122. 122. © 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
  123. 123. © 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
  124. 124. © 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
  125. 125. © 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
  126. 126. © 121WATT - André Goldmann Ergebnis: Webdesign kann nicht überall gleich aussehen und funktionieren.
  127. 127. © 121WATT - André Goldmann 71
  128. 128. © 121WATT - André Goldmann 71
  129. 129. © 121WATT - André Goldmann 72
  130. 130. © 121WATT - André Goldmann 72
  131. 131. © 121WATT - André Goldmann 73
  132. 132. © 121WATT - André Goldmann 73
  133. 133. © 121WATT - André Goldmann 74
  134. 134. © 121WATT - André Goldmann 74
  135. 135. © 121WATT - André Goldmann 74
  136. 136. © 121WATT - André Goldmann 75
  137. 137. © 121WATT - André Goldmann 75
  138. 138. © 121WATT - André Goldmann 76
  139. 139. © 121WATT - André Goldmann 76
  140. 140. © 121WATT - André Goldmann 76
  141. 141. © 121WATT - André Goldmann 77
  142. 142. © 121WATT - André Goldmann 77
  143. 143. © 121WATT - André Goldmann 78
  144. 144. © 121WATT - André Goldmann 78
  145. 145. © 121WATT - André Goldmann 78
  146. 146. © 121WATT - André Goldmann Stichwort: Wireframes & Prototypen
  147. 147. © 121WATT - André Goldmann Planung vom mobilen Interface
  148. 148. © 121WATT - André Goldmann Planung vom mobilen Interface
  149. 149. © 121WATT - André Goldmann Wireframe Testing: Balsamiq (Windows, Linux, Mac OS) https://balsamiq.com/
  150. 150. © 121WATT - André Goldmann Wireframe Testing: JUSTINMIND (Windows, Linux, Mac OS) http://www.justinmind.com/
  151. 151. © 121WATT - André Goldmann https://creative.adobe.com/de/products/reflow Adobe Edge Reflow (Windows, Mac OS)
  152. 152. © 121WATT - André Goldmann http://macaw.co/ MACAW (Mac OS)
  153. 153. © 121WATT - André Goldmann Frameworks für schnelles Prototyping Foundation – http://foundation.zurb.com/ Bootstrap – http://getbootstrap.com/ YAML – http://www.yaml.de/ Vorsicht: Nur für Prototypen verwenden! Die Frameworks sind oft überfrachtet mit Funktionen und CSS Definitionen die nicht verwendet werden. Modulare Varianten sind davon nicht betroffen! 85
  154. 154. © 121WATT - André Goldmann http://pingendo.com/ Pingendo (Windows, Mac OS & Linux)
  155. 155. © 121WATT - André Goldmann http://pingendo.com/ Pingendo (Windows, Mac OS & Linux)
  156. 156. © 121WATT - André Goldmann Stichwort:
 (Design)prozess im Browser
  157. 157. © 121WATT - André Goldmann Warum?
  158. 158. © 121WATT - André Goldmann Es spart viiiiiel Zeit
  159. 159. © 121WATT - André Goldmann Problem von früher: Layouts & Slices in Photoshop 90
  160. 160. © 121WATT - André Goldmann http://incident57.com/codekit/ CodeKit (Mac OSX + alle Smartphones)
  161. 161. © 121WATT - André Goldmann http://koala-app.com/ Koala (Mac OSX, Windows, Linux)
  162. 162. © 121WATT - André Goldmann Veränderungen sind schnell erledigt
  163. 163. © 121WATT - André Goldmann Content steht im Fokus & nicht das Design der Website
  164. 164. © 121WATT - André Goldmann Content- bzw. Mobile-First Ansatz • Konzentration auf wesentliche Funktionen meiner Website • Content Strategie: Konzeption und Planung mit Fokus auf mobile Geräte • Entwicklung findet von klein (Smartphone) nach groß (Desktop) statt. Stichwort: Progressive Enhancement 95 Bildquelle: http://alistapart.com/article/understandingprogressiveenhancement
  165. 165. © 121WATT - André Goldmann RWD wird leichter zu entwickeln
  166. 166. © 121WATT - André Goldmann Stichwort „Breakpoints“ Content & Funktionen bestimmen die Breakpoints und nicht mehr das Layout der Website.
  167. 167. © 121WATT - André Goldmann Was sind Breakpoints und wie erkenne ich sie?
  168. 168. © 121WATT - André Goldmann Was sind Breakpoints und wie erkenne ich sie?
  169. 169. © 121WATT - André Goldmann Was sind Breakpoints und wie erkenne ich sie?
  170. 170. © 121WATT - André Goldmann Was sind Breakpoints und wie erkenne ich sie?
  171. 171. © 121WATT - André Goldmann Was sind Breakpoints und wie erkenne ich sie?
  172. 172. © 121WATT - André Goldmann „Aktuelle“ Breakpoints 101
  173. 173. © 121WATT - André Goldmann „Aktuelle“ Breakpoints 320px – Smartphones Portrait (Hochformat) 101
  174. 174. © 121WATT - André Goldmann „Aktuelle“ Breakpoints 320px – Smartphones Portrait (Hochformat) 480px – Smartphones Landscape (Querformat) 101
  175. 175. © 121WATT - André Goldmann „Aktuelle“ Breakpoints 320px – Smartphones Portrait (Hochformat) 480px – Smartphones Landscape (Querformat) 768px – Tablet Landscape 101
  176. 176. © 121WATT - André Goldmann „Aktuelle“ Breakpoints 320px – Smartphones Portrait (Hochformat) 480px – Smartphones Landscape (Querformat) 768px – Tablet Landscape 1024px – div. Tablets, Notebooks, Desktop 101
  177. 177. © 121WATT - André Goldmann „Aktuelle“ Breakpoints 320px – Smartphones Portrait (Hochformat) 480px – Smartphones Landscape (Querformat) 768px – Tablet Landscape 1024px – div. Tablets, Notebooks, Desktop > 1600px größere Bildschirme 101
  178. 178. © 121WATT - André Goldmann „Aktuelle“ Breakpoints 320px – Smartphones Portrait (Hochformat) 480px – Smartphones Landscape (Querformat) 768px – Tablet Landscape 1024px – div. Tablets, Notebooks, Desktop > 1600px größere Bildschirme 101
  179. 179. © 121WATT - André Goldmann „Aktuelle“ Breakpoints 320px – Smartphones Portrait (Hochformat) 480px – Smartphones Landscape (Querformat) 768px – Tablet Landscape 1024px – div. Tablets, Notebooks, Desktop > 1600px größere Bildschirme Cool… das ist ja einfach! Das wars? 101
  180. 180. © 121WATT - André Goldmann „Aktuelle“ Breakpoints 320px – Smartphones Portrait (Hochformat) 480px – Smartphones Landscape (Querformat) 768px – Tablet Landscape 1024px – div. Tablets, Notebooks, Desktop > 1600px größere Bildschirme Cool… das ist ja einfach! Das wars? 101
  181. 181. © 121WATT - André Goldmann „Aktuelle“ Breakpoints 320px – Smartphones Portrait (Hochformat) 480px – Smartphones Landscape (Querformat) 768px – Tablet Landscape 1024px – div. Tablets, Notebooks, Desktop > 1600px größere Bildschirme Cool… das ist ja einfach! Das wars? 360px – viele Androiden 101
  182. 182. © 121WATT - André Goldmann „Aktuelle“ Breakpoints 320px – Smartphones Portrait (Hochformat) 480px – Smartphones Landscape (Querformat) 768px – Tablet Landscape 1024px – div. Tablets, Notebooks, Desktop > 1600px größere Bildschirme Cool… das ist ja einfach! Das wars? 360px – viele Androiden 600px – kleinere Tablets 101
  183. 183. © 121WATT - André Goldmann „Aktuelle“ Breakpoints 320px – Smartphones Portrait (Hochformat) 480px – Smartphones Landscape (Querformat) 768px – Tablet Landscape 1024px – div. Tablets, Notebooks, Desktop > 1600px größere Bildschirme Cool… das ist ja einfach! Das wars? 360px – viele Androiden 600px – kleinere Tablets > 1920px – Full HD Monitore & TVs 101
  184. 184. © 121WATT - André Goldmann „Aktuelle“ Breakpoints 320px – Smartphones Portrait (Hochformat) 480px – Smartphones Landscape (Querformat) 768px – Tablet Landscape 1024px – div. Tablets, Notebooks, Desktop > 1600px größere Bildschirme Cool… das ist ja einfach! Das wars? 360px – viele Androiden 600px – kleinere Tablets > 1920px – Full HD Monitore & TVs 568px – iPhone 5 - 6 101
  185. 185. © 121WATT - André Goldmann „Aktuelle“ Breakpoints 320px – Smartphones Portrait (Hochformat) 480px – Smartphones Landscape (Querformat) 768px – Tablet Landscape 1024px – div. Tablets, Notebooks, Desktop > 1600px größere Bildschirme Cool… das ist ja einfach! Das wars? 360px – viele Androiden 600px – kleinere Tablets > 1920px – Full HD Monitore & TVs 568px – iPhone 5 - 6 383px – z.B. Nexus 4 101
  186. 186. © 121WATT - André Goldmann „Aktuelle“ Breakpoints 320px – Smartphones Portrait (Hochformat) 480px – Smartphones Landscape (Querformat) 768px – Tablet Landscape 1024px – div. Tablets, Notebooks, Desktop > 1600px größere Bildschirme Cool… das ist ja einfach! Das wars? 360px – viele Androiden 600px – kleinere Tablets > 1920px – Full HD Monitore & TVs 568px – iPhone 5 - 6 383px – z.B. Nexus 4 ??? px – iPad Air Version XY, Kindle Fire HD Version XY usw. 101
  187. 187. © 121WATT - André Goldmann Breakpoints der „Zukunft“ 102
  188. 188. © 121WATT - André Goldmann Breakpoints der „Zukunft“ 102 320 x 290
  189. 189. © 121WATT - André Goldmann Breakpoints der „Zukunft“ 102 320 x 290 38mm 340 x 272 42mm 390 x 312
  190. 190. © 121WATT - André Goldmann Grenzen von RWD. Oder der Technik? 103
  191. 191. © 121WATT - André Goldmann Breakpoint Test: Google Chrome Browser
  192. 192. © 121WATT - André Goldmann Breakpoint Test: Google Chrome Browser
  193. 193. © 121WATT - André Goldmann Breakpoint Test: Google Chrome Browser
  194. 194. © 121WATT - André Goldmann Breakpoint Test: Google Chrome Browser
  195. 195. © 121WATT - André Goldmann Breakpoint Test: Google Chrome Browser
  196. 196. © 121WATT - André Goldmann Breakpoint Test: Firefox
  197. 197. © 121WATT - André Goldmann Conditional Loading Was für Layout gilt, sollte auch für Funktionen genutzt werden.
  198. 198. © 121WATT - André Goldmann Conditional Loading am Beispiel des Viewports @media all and (max-width: 900px) { // styles } if (document.documentElement.clientWidth < 900) { // scripts } 108
  199. 199. © 121WATT - André Goldmann caniuse.com – Browser-Support 109 http://caniuse.com/#search=media%20queries
  200. 200. © 121WATT - André Goldmann Browser- und Geräte-Tests
  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
  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
  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
  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
  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
  206. 206. © 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
  207. 207. © 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
  208. 208. © 121WATT - André Goldmann Network Link Conditioner (Mac OS, iOS) http://nshipster.com/network-link-conditioner/
  209. 209. © 121WATT - André Goldmann https://creative.adobe.com/de/products/inspect Adobe Edge Inspect (Windows, Mac OS, Android, iOS, Windowsphone & Amazon Kindle Fire)
  210. 210. © 121WATT - André Goldmann http://www.browsersync.io/ BrowserSync
  211. 211. © 121WATT - André Goldmann Ghostlab http://vanamco.com/ghostlab/ Bild Quelle: http://www.html5rocks.com/en/tutorials/tooling/synchronized-cross-device-testing/
  212. 212. © 121WATT - André Goldmann Ghostlab http://vanam Bild Quelle: http://www.html5rocks.com/en/tutorials/tooling/synchronized-cross-device-testing/
  213. 213. © 121WATT - André Goldmann http://opendevicelab.com/ OpenDeviceLab
  214. 214. © 121WATT - André Goldmann Nicht nur Layout sondern bitte auch
 Funktionen & Performance testen!
  215. 215. © 121WATT - André Goldmann Performance in Echtzeit
  216. 216. © 121WATT - André Goldmann Performance Tests bei der Entwicklung 119
  217. 217. © 121WATT - André Goldmann Website Speed Test: Pingdom Tools 120 tools.pingdom.com/fpt/
  218. 218. © 121WATT - André Goldmann „Performance Killer“ frühzeitig beseitigen
  219. 219. © 121WATT - André Goldmann 122 Keine HTML Kommentare im Quelltext nutzen Performance Tipps
  220. 220. © 121WATT - André Goldmann 122 Keine HTML Kommentare im Quelltext nutzen HTML Code komprimiert launchen & ungenutztes CSS entfernen (gerade bei Frameworks) Performance Tipps
  221. 221. © 121WATT - André Goldmann 122 Keine HTML Kommentare im Quelltext nutzen HTML Code komprimiert launchen & ungenutztes CSS entfernen (gerade bei Frameworks) Kein Inline-CSS & JS nutzen sondern in Dateien ausführen Performance Tipps
  222. 222. © 121WATT - André Goldmann 122 Keine HTML Kommentare im Quelltext nutzen HTML Code komprimiert launchen & ungenutztes CSS entfernen (gerade bei Frameworks) Kein Inline-CSS & JS nutzen sondern in Dateien ausführen CSS & JavaScript komprimieren und an der richtigen Stelle im Quellcode integrieren (betrifft nicht die Entwicklungsumgebung) Performance Tipps
  223. 223. © 121WATT - André Goldmann 122 Keine HTML Kommentare im Quelltext nutzen HTML Code komprimiert launchen & ungenutztes CSS entfernen (gerade bei Frameworks) Kein Inline-CSS & JS nutzen sondern in Dateien ausführen CSS & JavaScript komprimieren und an der richtigen Stelle im Quellcode integrieren (betrifft nicht die Entwicklungsumgebung) CSS3 statt Grafiken für Buttons, Navigationen & Co. nutzen Performance Tipps
  224. 224. © 121WATT - André Goldmann 122 Keine HTML Kommentare im Quelltext nutzen HTML Code komprimiert launchen & ungenutztes CSS entfernen (gerade bei Frameworks) Kein Inline-CSS & JS nutzen sondern in Dateien ausführen CSS & JavaScript komprimieren und an der richtigen Stelle im Quellcode integrieren (betrifft nicht die Entwicklungsumgebung) CSS3 statt Grafiken für Buttons, Navigationen & Co. nutzen HTTP Requests bereits zu Beginn im Auge behalten Performance Tipps
  225. 225. © 121WATT - André Goldmann 122 Keine HTML Kommentare im Quelltext nutzen HTML Code komprimiert launchen & ungenutztes CSS entfernen (gerade bei Frameworks) Kein Inline-CSS & JS nutzen sondern in Dateien ausführen CSS & JavaScript komprimieren und an der richtigen Stelle im Quellcode integrieren (betrifft nicht die Entwicklungsumgebung) CSS3 statt Grafiken für Buttons, Navigationen & Co. nutzen HTTP Requests bereits zu Beginn im Auge behalten Fertige Social Widgets (von Facebook & Co.) bitte nicht nutzen ;) Performance Tipps
  226. 226. © 121WATT - André Goldmann 123 Bilder: Performance Tipps für Bilder
  227. 227. © 121WATT - André Goldmann 123 Bilder: Bildgrößen und Datei-Formate richtig wählen (.jpg für Fotos/ Hintergrundgrafiken; .png oder .gif für Layoutgrafiken; Alternativ auch .svg) Performance Tipps für Bilder
  228. 228. © 121WATT - André Goldmann 123 Bilder: Bildgrößen und Datei-Formate richtig wählen (.jpg für Fotos/ Hintergrundgrafiken; .png oder .gif für Layoutgrafiken; Alternativ auch .svg) Bilder nicht durch CSS- oder HTML-Angaben skalieren Performance Tipps für Bilder
  229. 229. © 121WATT - André Goldmann 123 Bilder: Bildgrößen und Datei-Formate richtig wählen (.jpg für Fotos/ Hintergrundgrafiken; .png oder .gif für Layoutgrafiken; Alternativ auch .svg) Bilder nicht durch CSS- oder HTML-Angaben skalieren Bildqualität reduzieren Performance Tipps für Bilder
  230. 230. © 121WATT - André Goldmann 123 Bilder: Bildgrößen und Datei-Formate richtig wählen (.jpg für Fotos/ Hintergrundgrafiken; .png oder .gif für Layoutgrafiken; Alternativ auch .svg) Bilder nicht durch CSS- oder HTML-Angaben skalieren Bildqualität reduzieren Icons als Font laden (http://fontawesome.io/, http://fontello.com/) Performance Tipps für Bilder
  231. 231. © 121WATT - André Goldmann 123 Bilder: Bildgrößen und Datei-Formate richtig wählen (.jpg für Fotos/ Hintergrundgrafiken; .png oder .gif für Layoutgrafiken; Alternativ auch .svg) Bilder nicht durch CSS- oder HTML-Angaben skalieren Bildqualität reduzieren Icons als Font laden (http://fontawesome.io/, http://fontello.com/) Einsatz vom <picture>-Element überdenken Performance Tipps für Bilder
  232. 232. © 121WATT - André Goldmann 123 Bilder: Bildgrößen und Datei-Formate richtig wählen (.jpg für Fotos/ Hintergrundgrafiken; .png oder .gif für Layoutgrafiken; Alternativ auch .svg) Bilder nicht durch CSS- oder HTML-Angaben skalieren Bildqualität reduzieren Icons als Font laden (http://fontawesome.io/, http://fontello.com/) Einsatz vom <picture>-Element überdenken Bilder per CDN laden Performance Tipps für Bilder
  233. 233. © 121WATT - André Goldmann User Experience, Browser- & Gerätekompatibilität & Performance werden nicht erst am Ende geprüft! Sie sind fester Bestandteil des Relaunch-Prozesses.
  234. 234. © 121WATT - André Goldmann Entscheidungen sollten im Browser getroffen werden.
  235. 235. © 121WATT - André Goldmann Strukturierte Daten für (mobilen) Content
  236. 236. © 121WATT - André Goldmann Strukturierte Daten für (mobilen) Content
  237. 237. © 121WATT - André Goldmann Strukturierte Daten für (mobilen) Content
  238. 238. © 121WATT - André Goldmann Strukturierte Daten für (mobilen) Content https://support.google.com/webmasters/answer/99170?hl=de
  239. 239. © 121WATT - André Goldmann Strukturierte Daten für (mobilen) Content http://schema.org/
  240. 240. © 121WATT - André Goldmann Worauf sollte ich bei der Wahl der Agentur achten? 130
  241. 241. © 121WATT - André Goldmann Worauf sollte ich bei der Wahl der Agentur achten? Statt „fertige Layouts“, sollten Styleguides entwickelt werden 130
  242. 242. © 121WATT - André Goldmann Worauf sollte ich bei der Wahl der Agentur achten? Statt „fertige Layouts“, sollten Styleguides entwickelt werden 360° Agenturen sollten mein Projekt nicht über Extern entwickeln lassen (genau prüfen!), sondern alle Abteilungen idealerweise in einem Raum haben 130
  243. 243. © 121WATT - André Goldmann Worauf sollte ich bei der Wahl der Agentur achten? Statt „fertige Layouts“, sollten Styleguides entwickelt werden 360° Agenturen sollten mein Projekt nicht über Extern entwickeln lassen (genau prüfen!), sondern alle Abteilungen idealerweise in einem Raum haben Wie wird entwickelt? Kann ich den aktuellen Stand jederzeit einsehen? 130
  244. 244. © 121WATT - André Goldmann Worauf sollte ich bei der Wahl der Agentur achten? Statt „fertige Layouts“, sollten Styleguides entwickelt werden 360° Agenturen sollten mein Projekt nicht über Extern entwickeln lassen (genau prüfen!), sondern alle Abteilungen idealerweise in einem Raum haben Wie wird entwickelt? Kann ich den aktuellen Stand jederzeit einsehen? Arbeitet die Agentur mit versioniertem Code? (SVN oder Git) 130
  245. 245. © 121WATT - André Goldmann Worauf sollte ich bei der Wahl der Agentur achten? Statt „fertige Layouts“, sollten Styleguides entwickelt werden 360° Agenturen sollten mein Projekt nicht über Extern entwickeln lassen (genau prüfen!), sondern alle Abteilungen idealerweise in einem Raum haben Wie wird entwickelt? Kann ich den aktuellen Stand jederzeit einsehen? Arbeitet die Agentur mit versioniertem Code? (SVN oder Git) Mein Projekt ist nicht das „mobile Referenzprodukt“ – Referenzen überprüfen 130
  246. 246. © 121WATT - André Goldmann Worauf sollte ich bei der Wahl der Agentur achten? Statt „fertige Layouts“, sollten Styleguides entwickelt werden 360° Agenturen sollten mein Projekt nicht über Extern entwickeln lassen (genau prüfen!), sondern alle Abteilungen idealerweise in einem Raum haben Wie wird entwickelt? Kann ich den aktuellen Stand jederzeit einsehen? Arbeitet die Agentur mit versioniertem Code? (SVN oder Git) Mein Projekt ist nicht das „mobile Referenzprodukt“ – Referenzen überprüfen Es werden keine Pappen der Website gezeigt (oft bei klassischen Werbeagenturen der Fall) 130
  247. 247. © 121WATT - André Goldmann Worauf sollte ich bei der Wahl der Agentur achten? Statt „fertige Layouts“, sollten Styleguides entwickelt werden 360° Agenturen sollten mein Projekt nicht über Extern entwickeln lassen (genau prüfen!), sondern alle Abteilungen idealerweise in einem Raum haben Wie wird entwickelt? Kann ich den aktuellen Stand jederzeit einsehen? Arbeitet die Agentur mit versioniertem Code? (SVN oder Git) Mein Projekt ist nicht das „mobile Referenzprodukt“ – Referenzen überprüfen Es werden keine Pappen der Website gezeigt (oft bei klassischen Werbeagenturen der Fall) Folgende Begriffe sind keine Fremdwörter… 130
  248. 248. © 121WATT - André Goldmann „Bullshit Bingo“ für die Wahl der richtigen Agentur 131
  249. 249. © 121WATT - André Goldmann „Bullshit Bingo“ für die Wahl der richtigen Agentur 131 Breakpoints
  250. 250. © 121WATT - André Goldmann „Bullshit Bingo“ für die Wahl der richtigen Agentur 131 Breakpoints Adaptive Design
  251. 251. © 121WATT - André Goldmann „Bullshit Bingo“ für die Wahl der richtigen Agentur 131 Breakpoints Adaptive Design Media Queries
  252. 252. © 121WATT - André Goldmann „Bullshit Bingo“ für die Wahl der richtigen Agentur 131 Breakpoints Adaptive Design Media Queries Responsive E-Mail Design
  253. 253. © 121WATT - André Goldmann „Bullshit Bingo“ für die Wahl der richtigen Agentur 131 Breakpoints Adaptive Design Media Queries Responsive E-Mail Design Feature Detection
  254. 254. © 121WATT - André Goldmann „Bullshit Bingo“ für die Wahl der richtigen Agentur 131 Breakpoints Adaptive Design Media Queries Responsive E-Mail Design Feature Detection Mobile first
  255. 255. © 121WATT - André Goldmann „Bullshit Bingo“ für die Wahl der richtigen Agentur 131 Breakpoints Adaptive Design Media Queries Responsive E-Mail Design Feature Detection Mobile first rel=„alternate“
  256. 256. © 121WATT - André Goldmann „Bullshit Bingo“ für die Wahl der richtigen Agentur 131 Breakpoints Adaptive Design Media Queries Responsive E-Mail Design Feature Detection Mobile first rel=„alternate“ Progressive Enhancement
  257. 257. © 121WATT - André Goldmann „Bullshit Bingo“ für die Wahl der richtigen Agentur 131 Breakpoints Adaptive Design Media Queries Responsive E-Mail Design Feature Detection Mobile first rel=„alternate“ Progressive Enhancement Responsive Images
  258. 258. © 121WATT - André Goldmann „Bullshit Bingo“ für die Wahl der richtigen Agentur 131 Breakpoints Adaptive Design Media Queries Responsive E-Mail Design Feature Detection Mobile first rel=„alternate“ Progressive Enhancement Responsive Images Conditional Loading
  259. 259. © 121WATT - André Goldmann „Bullshit Bingo“ für die Wahl der richtigen Agentur 131 Breakpoints Adaptive Design Media Queries Responsive E-Mail Design Feature Detection Mobile first rel=„alternate“ Progressive Enhancement Responsive Images Conditional Loading Retina Display
  260. 260. © 121WATT - André Goldmann „Bullshit Bingo“ für die Wahl der richtigen Agentur 131 Breakpoints Adaptive Design Media Queries Responsive E-Mail Design Feature Detection Mobile first rel=„alternate“ Progressive Enhancement Responsive Images Conditional Loading Retina Display SVN oder Git
  261. 261. © 121WATT - André Goldmann „Bullshit Bingo“ für die Wahl der richtigen Agentur 131 Breakpoints Adaptive Design Media Queries Responsive E-Mail Design Feature Detection Mobile first rel=„alternate“ Progressive Enhancement Responsive Images Conditional Loading Retina Display SVN oder Git Flexible Grid
  262. 262. © 121WATT - André Goldmann „Bullshit Bingo“ für die Wahl der richtigen Agentur 131 Breakpoints Adaptive Design Media Queries Responsive E-Mail Design Feature Detection Mobile first rel=„alternate“ Progressive Enhancement Responsive Images Conditional Loading Retina Display SVN oder Git Flexible Grid Flexible Images
  263. 263. © 121WATT - André Goldmann „Bullshit Bingo“ für die Wahl der richtigen Agentur 131 Breakpoints Adaptive Design Media Queries Responsive E-Mail Design Feature Detection Mobile first rel=„alternate“ Progressive Enhancement Responsive Images Conditional Loading Retina Display SVN oder Git Flexible Grid Flexible Images SASS oder LESS
  264. 264. © 121WATT - André Goldmann „Bullshit Bingo“ für die Wahl der richtigen Agentur 131 Breakpoints Adaptive Design Media Queries Responsive E-Mail Design Feature Detection Mobile first rel=„alternate“ Progressive Enhancement Responsive Images Conditional Loading Retina Display SVN oder Git Flexible Grid Flexible Images SASS oder LESS HTML5
  265. 265. © 121WATT - André Goldmann „Bullshit Bingo“ für die Wahl der richtigen Agentur 131 Breakpoints Adaptive Design Media Queries Responsive E-Mail Design Feature Detection Mobile first rel=„alternate“ Progressive Enhancement Responsive Images Conditional Loading Retina Display SVN oder Git Flexible Grid Flexible Images SASS oder LESS HTML5 CSS3
  266. 266. © 121WATT - André Goldmann „Bullshit Bingo“ für die Wahl der richtigen Agentur 131 Breakpoints Adaptive Design Media Queries Responsive E-Mail Design Feature Detection Mobile first rel=„alternate“ Progressive Enhancement Responsive Images Conditional Loading Retina Display SVN oder Git Flexible Grid Flexible Images SASS oder LESS HTML5 CSS3 Content Strategy
 (für Mobile)
  267. 267. © 121WATT - André Goldmann „Bullshit Bingo“ für die Wahl der richtigen Agentur 131 Breakpoints Adaptive Design Media Queries Responsive E-Mail Design Feature Detection Mobile first rel=„alternate“ Progressive Enhancement Responsive Images Conditional Loading Retina Display SVN oder Git Flexible Grid Flexible Images SASS oder LESS HTML5 CSS3 Content Strategy
 (für Mobile) User Experience
  268. 268. © 121WATT - André Goldmann „Bullshit Bingo“ für die Wahl der richtigen Agentur 131 Breakpoints Adaptive Design Media Queries Responsive E-Mail Design Feature Detection Mobile first rel=„alternate“ Progressive Enhancement Responsive Images Conditional Loading Retina Display SVN oder Git Flexible Grid Flexible Images SASS oder LESS HTML5 CSS3 Content Strategy
 (für Mobile) User Experience Boxmodel
  269. 269. © 121WATT - André Goldmann Relaunch- & Testing-Tools
  270. 270. © 121WATT - André Goldmann Screaming Frog SEO Spider http://www.screamingfrog.co.uk/seo-spider/
  271. 271. © 121WATT - André Goldmann Uservoice https://www.uservoice.com/
  272. 272. © 121WATT - André Goldmann Qualaroo https://qualaroo.com/
  273. 273. © 121WATT - André Goldmann Google Analytics google.com/analytics/web/
  274. 274. © 121WATT - André Goldmann User Testing http://www.usertesting.com/
  275. 275. © 121WATT - André Goldmann Silverback App für Mac OSX (Usability Testing) http://silverbackapp.com/
  276. 276. © 121WATT - André Goldmann UX Recorder für iOS http://www.uxrecorder.com/
  277. 277. © 121WATT - André Goldmann Mobile-Website Conversion- User-Testing https://www.clicktale.com/ http://www.crazyegg.com/ http://visualwebsiteoptimizer.com/ https://www.optimizely.com/ http://mouseflow.com/
  278. 278. © 121WATT - André Goldmann http://www.abookapart.com/products/responsive-web-design Buch-Tipp
  279. 279. © 121WATT - André Goldmann http://www.abookapart.com/products/mobile-first Buch-Tipp
  280. 280. © 121WATT - André Goldmann http://www.abookapart.com/products/content-strategy-for-mobile Buch-Tipp
  281. 281. © 121WATT - André Goldmann http://www.abookapart.com/products/designing-for-emotion Buch-Tipp
  282. 282. © 121WATT - André Goldmann http://pxdr.de/moblaunch @pixeldreher Folien Folgen
  283. 283. © 121WATT - André Goldmann Bonus: Mobile Formulare Bitte SOFORT mit erledigen!!
  284. 284. © 121WATT - André Goldmann Regeln für responsive (mobile) Formulare
  285. 285. © 121WATT - André Goldmann Regeln für responsive (mobile) Formulare Keine wiederholenden Felder & Aktionen (Passwort wiederholen, E-Mail Adresse verifizieren)
  286. 286. © 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.)
  287. 287. © 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)
  288. 288. © 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)
  289. 289. © 121WATT - André Goldmann HTML5 und Formulare
  290. 290. © 121WATT - André Goldmann HTML5 und Formulare Formulare auf dem Desktop machen in der Regel keinen Spaß - aber man muss ja…
  291. 291. © 121WATT - André Goldmann HTML5 und Formulare Formulare auf dem Desktop machen in der Regel keinen Spaß - aber man muss ja… „Mobile Formulare“: Kleineres Display, Keyboard verdeckt Inhalte, schlechtere Internetverbindung.
  292. 292. © 121WATT - André Goldmann HTML5 und Formulare Formulare auf dem Desktop machen in der Regel keinen Spaß - aber man muss ja… „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!
  293. 293. © 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>
  294. 294. © 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>
  295. 295. © 121WATT - André Goldmann Input Typen von HTML5: number Beispiel-Code: <form> <input type="number" name="number"> </form>
  296. 296. © 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>
  297. 297. © 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>
  298. 298. © 121WATT - André Goldmann Input Typen von HTML5: datetime-local Zur Eingabe von Datum- & Zeitangaben. Beispiel-Code: <form> <input type="datetime-local" name="bdaytime"> </form>
  299. 299. © 121WATT - André Goldmann Input Typen von HTML5: color Zur Eingabe von Farbwerten. Beispiel-Code: <form> <input type="color" name="favcolor"> </form>
  300. 300. © 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
  301. 301. © 121WATT - André Goldmann Adressen in Formularen
  302. 302. © 121WATT - André Goldmann Adressen in Formularen
  303. 303. © 121WATT - André Goldmann Adressen in Formularen
  304. 304. © 121WATT - André Goldmann Formulare auf Autopilot https://www.deutschepost.de/de/d/deutsche-post-direkt/datafactory.html
  305. 305. © 121WATT - André Goldmann „normale“ Validierung nach dem Abschicken https://www.youtube.com/watch?v=FWDDRG93puY
  306. 306. © 121WATT - André Goldmann Real-Time Validierung VOR dem Abschicken https://www.youtube.com/watch?v=hlU74LIPauo
  307. 307. © 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
  308. 308. © 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:
  309. 309. © 121WATT - André Goldmann http://pxdr.de/moblaunch @pixeldreher Folien Folgen
  310. 310. © 121WATT - André Goldmann Fragen zu Mobile SEO und Technical SEO jederzeit an: 166 André Goldmann
 andre.goldmann@121watt.de
 @pixeldreher 121WATT
 Luise-Ullrich-Str. 20
 80636 München Tel.: 089 / 416 126 993 @121WATTT | info@121watt.de
 www.121watt.de 3fach „T“ ;)

×