SlideShare ist ein Scribd-Unternehmen logo
© 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 121WATT

Geschäftsinhaber bei Pixeldreher
• Seminare bei der 121WATT:



Mobile SEO

Technical SEO & OnPage 

WordPress Advanced
• Twitter: @pixeldreher

E-Mail: andre.goldmann@121watt.de
© 121WATT - André Goldmann
Privates Projekt: nageldesign-galerie.de
3
3.400.000 Sitzungen
25.300.000 Seitenaufrufe
1 TB Traffic im Monat
© 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
© 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
2007
© 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
© 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
© 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
© 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
© 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…
© 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
© 121WATT - André Goldmann
Das Umdenken der Anwender

kann schnell beginnen.
Zeit für RWD ;)
Bild Quelle: http://www.apple.com/iphone-6/apple-pay/
© 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 mindestens ein Formular
anzeigen können.
© 121WATT - André Goldmann
Mobile Fails
© 121WATT - André Goldmann
Mobile Fails
© 121WATT - André Goldmann
Mobile Fails
Ist hier der Platz zum scrollen
und für die Inhalte ausreichen?
© 121WATT - André Goldmann
Mobile Fails
Zu viel Inhalt der keinen Fokus zulässt
© 121WATT - André Goldmann
Mobile Fails
Zu viel Inhalt der keinen Fokus zulässt
© 121WATT - André Goldmann
Mobile Fails
CSS: position:absolute
© 121WATT - André Goldmann
Mobile Fails
Wer versteht das?
© 121WATT - André Goldmann
Mobile Fails
Ob ich Inhalte die ich nicht vollständig
lesen kann, wirklich teilen möchte?
© 121WATT - André Goldmann
Mobile Fails
Mehr „Bars“ haben leider
nicht ins Layout gepasst ^^
© 121WATT - André Goldmann
Mobile Fails
Mehr „Bars“ haben leider
nicht ins Layout gepasst ^^
© 121WATT - André Goldmann
Mobile Fails
Schon einmal etwas von
einer Weiterleitung gehört?
© 121WATT - André Goldmann
Mobile Fails
Ok = Yes
Cancel = No
© 121WATT - André Goldmann
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% mobile Traffic
© 121WATT - André Goldmann
Wie kann ich meinen Relaunch priorisieren?
36
Hotels:

40% mobile Traffic
Flüge:

20% mobile Traffic
Pauschalreisen:

35% mobile Traffic
© 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
© 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
© 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
© 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
© 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
© 121WATT - André Goldmann
Priorisierung von Teilbereichen
38
https://www.google.com/analytics/web/#report/content-drilldown/
© 121WATT - André Goldmann
Podcast zum Relaunch von Expedia
39
http://responsivewebdesign.com/podcast/expedia.html
http://responsivewebdesign.com/podcast/expedia-two.html
© 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.
Bildquelle: https://www.flickr.com/photos/lukew/10430507184/
© 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 Schnittmenge

auf beiden Seiten (Nutzer/Anbieter)
© 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 werden erstellt
© 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
© 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)
© 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
© 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
© 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
© 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
© 121WATT - André Goldmann
Wer erinnert sich noch an dieses Bild?
Mobile Design = Responsive Design?
53
Bildquelle: https://www.flickr.com/photos/lukew/10430507184/
© 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ü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
© 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
© 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 unterschiedlichen Situationen und Kontexten benutzt
© 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
© 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.)
© 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
© 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)
Sketch ⇢ Wireframes ⇢ Visuelles Design
⇢Prototype ⇢ Testing ↺
© 121WATT - André Goldmann
Webdesign Workflow bei RWD
Analyse + Planung
Inhalts- & Seitenarchitektur
(Contentstrategie)
Sketch ⇢ Wireframes ⇢ Visuelles Design
⇢Prototype ⇢ Testing ↺
RWD Prototype ⇢ Design im Browser
© 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-mobile-devices.php
© 121WATT - André Goldmann
Zeit für eine Studie
http://www.uxmatters.com/mt/archives/2013/02/how-do-users-really-hold-mobile-devices.php
Ein-Hand
Gehalten; Ein-Hand
Zwei-Händig
© 121WATT - André Goldmann
Zeit für eine Studie
http://www.uxmatters.com/mt/archives/2013/02/how-do-users-really-hold-mobile-devices.php
Ein-Hand
Gehalten; Ein-Hand
Zwei-Händig
49 %
© 121WATT - André Goldmann
Zeit für eine Studie
http://www.uxmatters.com/mt/archives/2013/02/how-do-users-really-hold-mobile-devices.php
Ein-Hand
Gehalten; Ein-Hand
Zwei-Händig
36 %
49 %
© 121WATT - André Goldmann
Zeit für eine Studie
http://www.uxmatters.com/mt/archives/2013/02/how-do-users-really-hold-mobile-devices.php
Ein-Hand
Gehalten; Ein-Hand
Zwei-Händig
15 %
36 %
49 %
© 121WATT - André Goldmann
Zeit für eine Studie: Ein-Hand
Bild Quelle: http://www.uxmatters.com/mt/archives/2013/02/how-do-users-really-hold-mobile-devices.php
© 121WATT - André Goldmann
Zeit für eine Studie: Ein-Hand
Bild Quelle: http://www.uxmatters.com/mt/archives/2013/02/how-do-users-really-hold-mobile-devices.php
• 67% mit dem rechten Daumen
© 121WATT - André Goldmann
Zeit für eine Studie: Ein-Hand
Bild Quelle: http://www.uxmatters.com/mt/archives/2013/02/how-do-users-really-hold-mobile-devices.php
• 67% mit dem rechten Daumen
• 33% mit dem linken Daumen
© 121WATT - André Goldmann
Zeit für eine Studie: Gehalten; Ein-Hand
Bild Quelle: http://www.uxmatters.com/mt/archives/2013/02/how-do-users-really-hold-mobile-devices.php
© 121WATT - André Goldmann
Zeit für eine Studie: Gehalten; Ein-Hand
Bild Quelle: http://www.uxmatters.com/mt/archives/2013/02/how-do-users-really-hold-mobile-devices.php
• 72% navigieren mit dem Daumen
© 121WATT - André Goldmann
Zeit für eine Studie: Gehalten; Ein-Hand
Bild Quelle: http://www.uxmatters.com/mt/archives/2013/02/how-do-users-really-hold-mobile-devices.php
• 72% navigieren mit dem Daumen
• 28% mit dem Zeigefinger
© 121WATT - André Goldmann
Zeit für eine Studie: Gehalten; Ein-Hand
Bild Quelle: http://www.uxmatters.com/mt/archives/2013/02/how-do-users-really-hold-mobile-devices.php
• 72% navigieren mit dem Daumen
• 28% mit dem Zeigefinger
• 79% halten mit der li. Hand
© 121WATT - André Goldmann
Zeit für eine Studie: Gehalten; Ein-Hand
Bild Quelle: http://www.uxmatters.com/mt/archives/2013/02/how-do-users-really-hold-mobile-devices.php
• 72% navigieren mit dem Daumen
• 28% mit dem Zeigefinger
• 79% halten mit der li. Hand
• 21% mit der re. Hand
© 121WATT - André Goldmann
Zeit für eine Studie: Zwei-Händig
Bild Quelle: http://www.uxmatters.com/mt/archives/2013/02/how-do-users-really-hold-mobile-devices.php
© 121WATT - André Goldmann
Zeit für eine Studie: Zwei-Händig
Bild Quelle: http://www.uxmatters.com/mt/archives/2013/02/how-do-users-really-hold-mobile-devices.php
• 90% im Portraitmodus
© 121WATT - André Goldmann
Zeit für eine Studie: Zwei-Händig
Bild Quelle: http://www.uxmatters.com/mt/archives/2013/02/how-do-users-really-hold-mobile-devices.php
• 90% im Portraitmodus
• 10% im Landscapemodus
© 121WATT - André Goldmann
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://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
© 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
• 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
© 121WATT - André Goldmann
RWD wird leichter zu entwickeln
© 121WATT - André Goldmann
Stichwort „Breakpoints“
Content & Funktionen bestimmen die Breakpoints und nicht mehr das
Layout der Website.
© 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 (Querformat)
101
© 121WATT - André Goldmann
„Aktuelle“ Breakpoints
320px – Smartphones Portrait (Hochformat)
480px – Smartphones Landscape (Querformat)
768px – Tablet Landscape
101
© 121WATT - André Goldmann
„Aktuelle“ Breakpoints
320px – Smartphones Portrait (Hochformat)
480px – Smartphones Landscape (Querformat)
768px – Tablet Landscape
1024px – div. Tablets, Notebooks, Desktop
101
© 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
© 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
© 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
© 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
© 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
© 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
© 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
© 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
© 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
© 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
© 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
}
if (document.documentElement.clientWidth < 900) {
// scripts
}
108
© 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/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
© 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
© 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
© 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
© 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
© 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
© 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
© 121WATT - André Goldmann
Network Link Conditioner (Mac OS, iOS)
http://nshipster.com/network-link-conditioner/
© 121WATT - André Goldmann
https://creative.adobe.com/de/products/inspect
Adobe Edge Inspect (Windows, Mac OS, Android, iOS,
Windowsphone & Amazon Kindle Fire)
© 121WATT - André Goldmann
http://www.browsersync.io/
BrowserSync
© 121WATT - André Goldmann
Ghostlab
http://vanamco.com/ghostlab/
Bild Quelle: http://www.html5rocks.com/en/tutorials/tooling/synchronized-cross-device-testing/
© 121WATT - André Goldmann
Ghostlab
http://vanam
Bild Quelle: http://www.html5rocks.com/en/tutorials/tooling/synchronized-cross-device-testing/
© 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 entfernen (gerade bei
Frameworks)
Performance Tipps
© 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
© 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
© 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
© 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
© 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
© 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; .png oder .gif für Layoutgrafiken; Alternativ auch .svg)
Performance Tipps für Bilder
© 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
© 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
© 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
© 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
© 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
© 121WATT - André Goldmann
User Experience, Browser- & Gerätekompatibilität &
Performance werden nicht erst am Ende geprüft!
Sie sind fester Bestandteil des Relaunch-Prozesses.
© 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=de
© 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 entwickelt werden
130
© 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
© 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
© 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
© 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
© 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
© 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
© 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 Queries
© 121WATT - André Goldmann
„Bullshit Bingo“ für die Wahl der richtigen Agentur
131
Breakpoints Adaptive Design Media Queries
Responsive E-Mail
Design
© 121WATT - André Goldmann
„Bullshit Bingo“ für die Wahl der richtigen Agentur
131
Breakpoints Adaptive Design Media Queries
Responsive E-Mail
Design
Feature Detection
© 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
© 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“
© 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
© 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
© 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
© 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
© 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
© 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
© 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
© 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
© 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
© 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
© 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)
© 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
© 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
© 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/
http://visualwebsiteoptimizer.com/
https://www.optimizely.com/
http://mouseflow.com/
© 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 wiederholen, E-Mail Adresse
verifizieren)
© 121WATT - André Goldmann
Regeln für responsive (mobile) Formulare
Keine wiederholenden Felder & Aktionen
(Passwort wiederholen, E-Mail Adresse
verifizieren)
Vor-Ausfüllung von Feldern ermöglichen

(aktuelles Datum +/- geplante Rückreise etc.)
© 121WATT - André Goldmann
Regeln für responsive (mobile) Formulare
Keine wiederholenden Felder & Aktionen
(Passwort wiederholen, E-Mail Adresse
verifizieren)
Vor-Ausfüllung von Feldern ermöglichen

(aktuelles Datum +/- geplante Rückreise etc.)
„Wo bin ich grad“- Status-Balken integrieren

(Schritt 1-3 oder genaue Definition: Was, Wann)
© 121WATT - André Goldmann
Regeln für responsive (mobile) Formulare
Keine wiederholenden Felder & Aktionen
(Passwort wiederholen, E-Mail Adresse
verifizieren)
Vor-Ausfüllung von Feldern ermöglichen

(aktuelles Datum +/- geplante Rückreise etc.)
„Wo bin ich grad“- Status-Balken integrieren

(Schritt 1-3 oder genaue Definition: Was, Wann)
Datum? Visuelle Kalender sind am besten zu
benutzen und zeigen dem Nutzer genau, welchen
Tag/Datum er grad wählt - im Vergleich zu dem,
was in den kommenden Folien vorgestellt wird)
© 121WATT - André Goldmann
HTML5 und Formulare
© 121WATT - André Goldmann
HTML5 und Formulare
Formulare auf dem Desktop machen in der Regel
keinen Spaß - aber man muss ja…
© 121WATT - André Goldmann
HTML5 und Formulare
Formulare auf dem Desktop machen in der Regel
keinen Spaß - aber man muss ja…
„Mobile Formulare“: Kleineres Display, Keyboard
verdeckt Inhalte, schlechtere
Internetverbindung.
© 121WATT - André Goldmann
HTML5 und Formulare
Formulare auf dem Desktop machen in der Regel
keinen Spaß - aber man muss ja…
„Mobile Formulare“: Kleineres Display, Keyboard
verdeckt Inhalte, schlechtere
Internetverbindung.
HTML5 macht es uns durch neue Input Types
und Attribute möglich, die Nutzererfahrung von
Formularen zu verbessern!
© 121WATT - André Goldmann
Input Typen von HTML5: url
Um eine valide URL einzugeben, muss der Nutzer
zwingend mit http://, ftp:// oder mailto: beginnen.
Beispiel-Code:
<form>
<input type="url" name="homepage">
</form>
© 121WATT - André Goldmann
Input Typen von HTML5: tel
Beim tel-Typ wird automatisch die
Zahlentastatur ausgewählt und unnötiges hin
und her wechseln zwischen Zeichen und Zahlen
entfällt.
Beispiel-Code:
<form>
<input type="tel" name="usrtel">
</form>
© 121WATT - André Goldmann
Input Typen von HTML5: number
Beispiel-Code:
<form>
<input type="number"
name="number">
</form>
© 121WATT - André Goldmann
Input Typen von HTML5: email
Für E-Mail Eingaben wird das @-Zeichen und
der . direkt in der Standard-Tastatur integriert.
Beispiel-Code:
<form>
<input type="tel"
name="tel_number">
</form>
© 121WATT - André Goldmann
Input Typen von HTML5: date
Zur Eingabe von Datum-Angaben.
Wochentage werden nicht mit angezeigt, was
wiederum ein Problem werden kann, wenn der
Tag, für den Nutzer von Wichtigkeit ist. Beispiel:
Reisen, Flüge etc.
Beispiel-Code:
<form>
<input type="date" name="bday">
</form>
© 121WATT - André Goldmann
Input Typen von HTML5: datetime-local
Zur Eingabe von Datum- & Zeitangaben.
Beispiel-Code:
<form>
<input type="datetime-local"
name="bdaytime">
</form>
© 121WATT - André Goldmann
Input Typen von HTML5: color
Zur Eingabe von Farbwerten.
Beispiel-Code:
<form>
<input type="color"
name="favcolor">
</form>
© 121WATT - André Goldmann
Formulare auf Autopilot
Der Einsatz von HTML5 ermöglicht es uns,
bereits eingegeben Werte aus anderen
Formularen (auch aus der Vergangenheit) zu
übernehmen.
<input type="text" name="email"
id="email“ placeholder="E-Mail
Adresse" required
autocomplete="email">
https://developers.google.com/web/fundamentals/
input/form/label-and-name-inputs#use-metadata-
to-enable-auto-complete
© 121WATT - André Goldmann
Adressen in Formularen
© 121WATT - André Goldmann
Adressen in Formularen
© 121WATT - André Goldmann
Adressen in Formularen
© 121WATT - André Goldmann
Formulare auf Autopilot
https://www.deutschepost.de/de/d/deutsche-post-direkt/datafactory.html
© 121WATT - André Goldmann
„normale“ Validierung nach dem Abschicken
https://www.youtube.com/watch?v=FWDDRG93puY
© 121WATT - André Goldmann
Real-Time Validierung VOR dem Abschicken
https://www.youtube.com/watch?v=hlU74LIPauo
© 121WATT - André Goldmann
Studie zur Real-Time Validierung
http://alistapart.com/article/inline-validation-in-web-forms
Studie ergab das +22% das Formular mit
Real-TimeValidierung komplett ausgefüllt
haben und die Dauer um 42% reduziert
werden konnte
© 121WATT - André Goldmann
Formulare sich selbstständig validieren lassen
Einsatz von regulären Ausdrücken zur Vermeidung von Fehleingaben nutzen:
Pflichtfelder nicht mit Javascript validieren sondern direkt im Input Feld:
Platzhalter direkt im Input Feld definieren:
…oder den Autofocus auf das erste Feld setzen:
© 121WATT - André Goldmann
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.de

@pixeldreher
121WATT

Luise-Ullrich-Str. 20

80636 München
Tel.: 089 / 416 126 993
@121WATTT | info@121watt.de

www.121watt.de
3fach „T“ ;)

Weitere ähnliche Inhalte

Was ist angesagt?

Prophylaxe statt Reparatur - Landingpage Probleme aufdecken und beseitigen
Prophylaxe statt Reparatur - Landingpage Probleme aufdecken und beseitigenProphylaxe statt Reparatur - Landingpage Probleme aufdecken und beseitigen
Prophylaxe statt Reparatur - Landingpage Probleme aufdecken und beseitigen
André Goldmann
 
Effizientes Arbeiten mit dem Screaming Frog SEO-Spider
Effizientes Arbeiten mit dem Screaming Frog SEO-SpiderEffizientes Arbeiten mit dem Screaming Frog SEO-Spider
Effizientes Arbeiten mit dem Screaming Frog SEO-Spider
André Goldmann
 
Performance-Optimierung für WordPress-Websites
Performance-Optimierung für WordPress-WebsitesPerformance-Optimierung für WordPress-Websites
Performance-Optimierung für WordPress-Websites
André Goldmann
 
Fehlende Workflows der Google Search Console (GSC) kompensieren
Fehlende Workflows der Google Search Console (GSC) kompensierenFehlende Workflows der Google Search Console (GSC) kompensieren
Fehlende Workflows der Google Search Console (GSC) kompensieren
André Goldmann
 
Mobile CRO – Performance Tuning & personalisierte Inhalte
Mobile CRO – Performance Tuning & personalisierte InhalteMobile CRO – Performance Tuning & personalisierte Inhalte
Mobile CRO – Performance Tuning & personalisierte Inhalte
André Goldmann
 
Website-Optimierung mit Google Optimize
Website-Optimierung mit Google OptimizeWebsite-Optimierung mit Google Optimize
Website-Optimierung mit Google Optimize
André Goldmann
 
Crawl-Budget-Booster für eine bessere Search Engine Experience
Crawl-Budget-Booster für eine bessere Search Engine ExperienceCrawl-Budget-Booster für eine bessere Search Engine Experience
Crawl-Budget-Booster für eine bessere Search Engine Experience
André Goldmann
 
Planung und Aufbau erfolgreicher Landingpages
Planung und Aufbau erfolgreicher LandingpagesPlanung und Aufbau erfolgreicher Landingpages
Planung und Aufbau erfolgreicher Landingpages
André Goldmann
 
Website-Optimierung mit Google Analytics
Website-Optimierung mit Google AnalyticsWebsite-Optimierung mit Google Analytics
Website-Optimierung mit Google Analytics
André Goldmann
 
Continuous Relaunch - Impulsvortrag auf der relaunch Konferenz 2014
Continuous Relaunch - Impulsvortrag auf der relaunch Konferenz 2014Continuous Relaunch - Impulsvortrag auf der relaunch Konferenz 2014
Continuous Relaunch - Impulsvortrag auf der relaunch Konferenz 2014
kernpunkt
 
Bilder für das Web optimieren
Bilder für das Web optimierenBilder für das Web optimieren
Bilder für das Web optimieren
André Goldmann
 
Wettbewerber analysieren bei Google AdWords
Wettbewerber analysieren bei Google AdWordsWettbewerber analysieren bei Google AdWords
Wettbewerber analysieren bei Google AdWords
121WATT GmbH
 

Was ist angesagt? (12)

Prophylaxe statt Reparatur - Landingpage Probleme aufdecken und beseitigen
Prophylaxe statt Reparatur - Landingpage Probleme aufdecken und beseitigenProphylaxe statt Reparatur - Landingpage Probleme aufdecken und beseitigen
Prophylaxe statt Reparatur - Landingpage Probleme aufdecken und beseitigen
 
Effizientes Arbeiten mit dem Screaming Frog SEO-Spider
Effizientes Arbeiten mit dem Screaming Frog SEO-SpiderEffizientes Arbeiten mit dem Screaming Frog SEO-Spider
Effizientes Arbeiten mit dem Screaming Frog SEO-Spider
 
Performance-Optimierung für WordPress-Websites
Performance-Optimierung für WordPress-WebsitesPerformance-Optimierung für WordPress-Websites
Performance-Optimierung für WordPress-Websites
 
Fehlende Workflows der Google Search Console (GSC) kompensieren
Fehlende Workflows der Google Search Console (GSC) kompensierenFehlende Workflows der Google Search Console (GSC) kompensieren
Fehlende Workflows der Google Search Console (GSC) kompensieren
 
Mobile CRO – Performance Tuning & personalisierte Inhalte
Mobile CRO – Performance Tuning & personalisierte InhalteMobile CRO – Performance Tuning & personalisierte Inhalte
Mobile CRO – Performance Tuning & personalisierte Inhalte
 
Website-Optimierung mit Google Optimize
Website-Optimierung mit Google OptimizeWebsite-Optimierung mit Google Optimize
Website-Optimierung mit Google Optimize
 
Crawl-Budget-Booster für eine bessere Search Engine Experience
Crawl-Budget-Booster für eine bessere Search Engine ExperienceCrawl-Budget-Booster für eine bessere Search Engine Experience
Crawl-Budget-Booster für eine bessere Search Engine Experience
 
Planung und Aufbau erfolgreicher Landingpages
Planung und Aufbau erfolgreicher LandingpagesPlanung und Aufbau erfolgreicher Landingpages
Planung und Aufbau erfolgreicher Landingpages
 
Website-Optimierung mit Google Analytics
Website-Optimierung mit Google AnalyticsWebsite-Optimierung mit Google Analytics
Website-Optimierung mit Google Analytics
 
Continuous Relaunch - Impulsvortrag auf der relaunch Konferenz 2014
Continuous Relaunch - Impulsvortrag auf der relaunch Konferenz 2014Continuous Relaunch - Impulsvortrag auf der relaunch Konferenz 2014
Continuous Relaunch - Impulsvortrag auf der relaunch Konferenz 2014
 
Bilder für das Web optimieren
Bilder für das Web optimierenBilder für das Web optimieren
Bilder für das Web optimieren
 
Wettbewerber analysieren bei Google AdWords
Wettbewerber analysieren bei Google AdWordsWettbewerber analysieren bei Google AdWords
Wettbewerber analysieren bei Google AdWords
 

Andere mochten auch

Social Media & SEO
Social Media & SEOSocial Media & SEO
Social Media & SEO
121WATT GmbH
 
Werbeplanung.at SUMMIT 15 - Die vielen Features von Advanced Remarketing - Ge...
Werbeplanung.at SUMMIT 15 - Die vielen Features von Advanced Remarketing - Ge...Werbeplanung.at SUMMIT 15 - Die vielen Features von Advanced Remarketing - Ge...
Werbeplanung.at SUMMIT 15 - Die vielen Features von Advanced Remarketing - Ge...
Werbeplanung.at Summit
 
Fünf Punkte für mehr Relevanz im Store
Fünf Punkte für mehr Relevanz im Store Fünf Punkte für mehr Relevanz im Store
Fünf Punkte für mehr Relevanz im Store
TWT
 
Hochschul-Websites: Konzeption und Management
Hochschul-Websites: Konzeption und ManagementHochschul-Websites: Konzeption und Management
Hochschul-Websites: Konzeption und Management
Mann beißt Hund Agentur für Kommunikation
 
Präsentation Kick-Off AM
Präsentation Kick-Off AMPräsentation Kick-Off AM
Präsentation Kick-Off AM
ETHWebRelaunch
 
Relaunch Prozess: Schritte und Erfolgsfaktoren für eine optimierte Conversion...
Relaunch Prozess: Schritte und Erfolgsfaktoren für eine optimierte Conversion...Relaunch Prozess: Schritte und Erfolgsfaktoren für eine optimierte Conversion...
Relaunch Prozess: Schritte und Erfolgsfaktoren für eine optimierte Conversion...
TWT
 
Agile Management - Best Practice Day der Deutschen Bahn am 17.10.2013
Agile Management - Best Practice Day der Deutschen Bahn am 17.10.2013Agile Management - Best Practice Day der Deutschen Bahn am 17.10.2013
Agile Management - Best Practice Day der Deutschen Bahn am 17.10.2013
AOE
 
TWT Casestudy: Relaunch der TROX Website
TWT Casestudy: Relaunch der TROX Website TWT Casestudy: Relaunch der TROX Website
TWT Casestudy: Relaunch der TROX Website
TWT
 
Traditionelles Projektmanagement und SCRUM
Traditionelles Projektmanagement und SCRUMTraditionelles Projektmanagement und SCRUM
Traditionelles Projektmanagement und SCRUM
Felix Ruessel
 
JP│KOM:Relaunch Corporate Website
JP│KOM:Relaunch Corporate WebsiteJP│KOM:Relaunch Corporate Website
JP│KOM:Relaunch Corporate Website
JP KOM GmbH
 
Relaunch Corporate Website: Arbeitsweise und Vorgehen JP│KOM
Relaunch Corporate Website: Arbeitsweise und Vorgehen JP│KOMRelaunch Corporate Website: Arbeitsweise und Vorgehen JP│KOM
Relaunch Corporate Website: Arbeitsweise und Vorgehen JP│KOM
JP KOM GmbH
 
Q-2 - Website Relaunch: Vom Entschluss bis zum Go-Live
Q-2 - Website Relaunch: Vom Entschluss bis zum Go-LiveQ-2 - Website Relaunch: Vom Entschluss bis zum Go-Live
Q-2 - Website Relaunch: Vom Entschluss bis zum Go-Live
Unic
 
Scrum im Marketing
Scrum im MarketingScrum im Marketing
Scrum im Marketing
Björn Schotte
 
Mit Videos im Salesfunnel Kunden verzaubern - SMX 2017 Präsentation
Mit Videos im Salesfunnel Kunden verzaubern - SMX 2017 PräsentationMit Videos im Salesfunnel Kunden verzaubern - SMX 2017 Präsentation
Mit Videos im Salesfunnel Kunden verzaubern - SMX 2017 Präsentation
netspirits Online Marketing
 
SMX München 2017: Bastian Grimm & Christian Paavo Spieker
SMX München 2017: Bastian Grimm & Christian Paavo Spieker SMX München 2017: Bastian Grimm & Christian Paavo Spieker
SMX München 2017: Bastian Grimm & Christian Paavo Spieker
One Advertising AG
 
Website-Relaunch: Eine unendliche SEO-Geschichte – SEO DAY
Website-Relaunch: Eine unendliche SEO-Geschichte – SEO DAYWebsite-Relaunch: Eine unendliche SEO-Geschichte – SEO DAY
Website-Relaunch: Eine unendliche SEO-Geschichte – SEO DAY
René Dhemant
 
Agile UX, Ideation and Scrum Workshop, ditact Nov 2013 (German)
Agile UX, Ideation and Scrum Workshop, ditact Nov 2013 (German)Agile UX, Ideation and Scrum Workshop, ditact Nov 2013 (German)
Agile UX, Ideation and Scrum Workshop, ditact Nov 2013 (German)
Renate Pinggera
 

Andere mochten auch (19)

Social Media & SEO
Social Media & SEOSocial Media & SEO
Social Media & SEO
 
Werbeplanung.at SUMMIT 15 - Die vielen Features von Advanced Remarketing - Ge...
Werbeplanung.at SUMMIT 15 - Die vielen Features von Advanced Remarketing - Ge...Werbeplanung.at SUMMIT 15 - Die vielen Features von Advanced Remarketing - Ge...
Werbeplanung.at SUMMIT 15 - Die vielen Features von Advanced Remarketing - Ge...
 
Fünf Punkte für mehr Relevanz im Store
Fünf Punkte für mehr Relevanz im Store Fünf Punkte für mehr Relevanz im Store
Fünf Punkte für mehr Relevanz im Store
 
Hochschul-Websites: Konzeption und Management
Hochschul-Websites: Konzeption und ManagementHochschul-Websites: Konzeption und Management
Hochschul-Websites: Konzeption und Management
 
Präsentation Kick-Off AM
Präsentation Kick-Off AMPräsentation Kick-Off AM
Präsentation Kick-Off AM
 
Relaunch Prozess: Schritte und Erfolgsfaktoren für eine optimierte Conversion...
Relaunch Prozess: Schritte und Erfolgsfaktoren für eine optimierte Conversion...Relaunch Prozess: Schritte und Erfolgsfaktoren für eine optimierte Conversion...
Relaunch Prozess: Schritte und Erfolgsfaktoren für eine optimierte Conversion...
 
Agile Management - Best Practice Day der Deutschen Bahn am 17.10.2013
Agile Management - Best Practice Day der Deutschen Bahn am 17.10.2013Agile Management - Best Practice Day der Deutschen Bahn am 17.10.2013
Agile Management - Best Practice Day der Deutschen Bahn am 17.10.2013
 
TWT Casestudy: Relaunch der TROX Website
TWT Casestudy: Relaunch der TROX Website TWT Casestudy: Relaunch der TROX Website
TWT Casestudy: Relaunch der TROX Website
 
Traditionelles Projektmanagement und SCRUM
Traditionelles Projektmanagement und SCRUMTraditionelles Projektmanagement und SCRUM
Traditionelles Projektmanagement und SCRUM
 
JP│KOM:Relaunch Corporate Website
JP│KOM:Relaunch Corporate WebsiteJP│KOM:Relaunch Corporate Website
JP│KOM:Relaunch Corporate Website
 
Relaunch Corporate Website: Arbeitsweise und Vorgehen JP│KOM
Relaunch Corporate Website: Arbeitsweise und Vorgehen JP│KOMRelaunch Corporate Website: Arbeitsweise und Vorgehen JP│KOM
Relaunch Corporate Website: Arbeitsweise und Vorgehen JP│KOM
 
Q-2 - Website Relaunch: Vom Entschluss bis zum Go-Live
Q-2 - Website Relaunch: Vom Entschluss bis zum Go-LiveQ-2 - Website Relaunch: Vom Entschluss bis zum Go-Live
Q-2 - Website Relaunch: Vom Entschluss bis zum Go-Live
 
Scrum im Marketing
Scrum im MarketingScrum im Marketing
Scrum im Marketing
 
Mit Videos im Salesfunnel Kunden verzaubern - SMX 2017 Präsentation
Mit Videos im Salesfunnel Kunden verzaubern - SMX 2017 PräsentationMit Videos im Salesfunnel Kunden verzaubern - SMX 2017 Präsentation
Mit Videos im Salesfunnel Kunden verzaubern - SMX 2017 Präsentation
 
Session bchh13
Session bchh13Session bchh13
Session bchh13
 
SMX München 2017: Bastian Grimm & Christian Paavo Spieker
SMX München 2017: Bastian Grimm & Christian Paavo Spieker SMX München 2017: Bastian Grimm & Christian Paavo Spieker
SMX München 2017: Bastian Grimm & Christian Paavo Spieker
 
YouTube-Ads
YouTube-AdsYouTube-Ads
YouTube-Ads
 
Website-Relaunch: Eine unendliche SEO-Geschichte – SEO DAY
Website-Relaunch: Eine unendliche SEO-Geschichte – SEO DAYWebsite-Relaunch: Eine unendliche SEO-Geschichte – SEO DAY
Website-Relaunch: Eine unendliche SEO-Geschichte – SEO DAY
 
Agile UX, Ideation and Scrum Workshop, ditact Nov 2013 (German)
Agile UX, Ideation and Scrum Workshop, ditact Nov 2013 (German)Agile UX, Ideation and Scrum Workshop, ditact Nov 2013 (German)
Agile UX, Ideation and Scrum Workshop, ditact Nov 2013 (German)
 

Ähnlich wie Mobile Relaunch - Praxistipps zur Entwicklung einer mobilen Website

Mobile SEO - Quo vadis?
Mobile SEO - Quo vadis?Mobile SEO - Quo vadis?
Mobile SEO - Quo vadis?
René Dhemant
 
Responsive Webdesign für Grafiker & Entscheider
Responsive Webdesign für Grafiker & EntscheiderResponsive Webdesign für Grafiker & Entscheider
Responsive Webdesign für Grafiker & Entscheider
typovision GmbH
 
App – und was nun - pioniere 2014 - olaf grüger - Go eCommerce
App – und was nun - pioniere 2014 - olaf grüger - Go eCommerceApp – und was nun - pioniere 2014 - olaf grüger - Go eCommerce
App – und was nun - pioniere 2014 - olaf grüger - Go eCommerce
Olaf Grueger
 
SEO Webinar "Alles mobile oder was? So funktioniert Googles Mobile First Index."
SEO Webinar "Alles mobile oder was? So funktioniert Googles Mobile First Index."SEO Webinar "Alles mobile oder was? So funktioniert Googles Mobile First Index."
SEO Webinar "Alles mobile oder was? So funktioniert Googles Mobile First Index."
Namics
 
Mobile Apps als Web Developer? Ja, mit Ionic!
Mobile Apps als Web Developer? Ja, mit Ionic!Mobile Apps als Web Developer? Ja, mit Ionic!
Mobile Apps als Web Developer? Ja, mit Ionic!
Simon Grimm
 
Arbeit 2.0 - Disruptive Innovation
Arbeit 2.0 - Disruptive InnovationArbeit 2.0 - Disruptive Innovation
Arbeit 2.0 - Disruptive Innovation
Herbert Wagger
 
WP Camp 2012 Mobile First & Wordpress
WP Camp 2012 Mobile First & WordpressWP Camp 2012 Mobile First & Wordpress
WP Camp 2012 Mobile First & Wordpress
KirstenSchelper
 
App-Retention Mobile-CRM Kundenbindung im Kontext Mobile Olaf Grüger Go eComm...
App-Retention Mobile-CRM Kundenbindung im Kontext Mobile Olaf Grüger Go eComm...App-Retention Mobile-CRM Kundenbindung im Kontext Mobile Olaf Grüger Go eComm...
App-Retention Mobile-CRM Kundenbindung im Kontext Mobile Olaf Grüger Go eComm...
Olaf Grueger
 
Mobile UX: Interaktions- und Designmuster auf Android und iOS (Linuxtag 2013,...
Mobile UX: Interaktions- und Designmuster auf Android und iOS (Linuxtag 2013,...Mobile UX: Interaktions- und Designmuster auf Android und iOS (Linuxtag 2013,...
Mobile UX: Interaktions- und Designmuster auf Android und iOS (Linuxtag 2013,...
philippkumar
 
Webinar: Mobile Shop Optimierung - was wirklich wichtig ist
Webinar: Mobile Shop Optimierung - was wirklich wichtig istWebinar: Mobile Shop Optimierung - was wirklich wichtig ist
Webinar: Mobile Shop Optimierung - was wirklich wichtig ist
wasmitweb GmbH
 
From Mobile Hype to Mobile Business
From Mobile Hype to Mobile BusinessFrom Mobile Hype to Mobile Business
From Mobile Hype to Mobile Business
eBusiness-Lotse Potsdam
 
Mobile SEO: IWWB Herbstworkshop 2015
Mobile SEO: IWWB Herbstworkshop 2015Mobile SEO: IWWB Herbstworkshop 2015
Mobile SEO: IWWB Herbstworkshop 2015
takevalue Consulting GmbH
 
App retention - mobile crm - mobile customer retention - olaf grueger - go e ...
App retention - mobile crm - mobile customer retention - olaf grueger - go e ...App retention - mobile crm - mobile customer retention - olaf grueger - go e ...
App retention - mobile crm - mobile customer retention - olaf grueger - go e ...
Olaf Grueger
 
Banking 2.0 / Arbeit 2.0
Banking 2.0 / Arbeit 2.0Banking 2.0 / Arbeit 2.0
Banking 2.0 / Arbeit 2.0
Herbert Wagger
 
Responsive Webdesign verkaufen
Responsive Webdesign verkaufenResponsive Webdesign verkaufen
Responsive Webdesign verkaufen
die.agilen GmbH
 
Mobile Websites
Mobile WebsitesMobile Websites
Mobile Websites
Goldbach Group AG
 
Cloud Computing - „Entscheidungshilfe für den Datenschutzbeauftragten“
Cloud Computing - „Entscheidungshilfe für den Datenschutzbeauftragten“Cloud Computing - „Entscheidungshilfe für den Datenschutzbeauftragten“
Cloud Computing - „Entscheidungshilfe für den Datenschutzbeauftragten“
Rene Buest
 
vi knallgrau Mobile Nutzung: Website vs. App
vi knallgrau Mobile Nutzung: Website vs. Appvi knallgrau Mobile Nutzung: Website vs. App
vi knallgrau Mobile Nutzung: Website vs. App
vi knallgrau
 
afterbuyBBQ 2014 - Mobiloptimierung - So rüsten Sie Ihre Geschäfte für mobile...
afterbuyBBQ 2014 - Mobiloptimierung - So rüsten Sie Ihre Geschäfte für mobile...afterbuyBBQ 2014 - Mobiloptimierung - So rüsten Sie Ihre Geschäfte für mobile...
afterbuyBBQ 2014 - Mobiloptimierung - So rüsten Sie Ihre Geschäfte für mobile...
Carsten Lambrecht
 

Ähnlich wie Mobile Relaunch - Praxistipps zur Entwicklung einer mobilen Website (20)

Mobile SEO - Quo vadis?
Mobile SEO - Quo vadis?Mobile SEO - Quo vadis?
Mobile SEO - Quo vadis?
 
Responsive Webdesign für Grafiker & Entscheider
Responsive Webdesign für Grafiker & EntscheiderResponsive Webdesign für Grafiker & Entscheider
Responsive Webdesign für Grafiker & Entscheider
 
App – und was nun - pioniere 2014 - olaf grüger - Go eCommerce
App – und was nun - pioniere 2014 - olaf grüger - Go eCommerceApp – und was nun - pioniere 2014 - olaf grüger - Go eCommerce
App – und was nun - pioniere 2014 - olaf grüger - Go eCommerce
 
SEO Webinar "Alles mobile oder was? So funktioniert Googles Mobile First Index."
SEO Webinar "Alles mobile oder was? So funktioniert Googles Mobile First Index."SEO Webinar "Alles mobile oder was? So funktioniert Googles Mobile First Index."
SEO Webinar "Alles mobile oder was? So funktioniert Googles Mobile First Index."
 
Mobile Apps als Web Developer? Ja, mit Ionic!
Mobile Apps als Web Developer? Ja, mit Ionic!Mobile Apps als Web Developer? Ja, mit Ionic!
Mobile Apps als Web Developer? Ja, mit Ionic!
 
Arbeit 2.0 - Disruptive Innovation
Arbeit 2.0 - Disruptive InnovationArbeit 2.0 - Disruptive Innovation
Arbeit 2.0 - Disruptive Innovation
 
WP Camp 2012 Mobile First & Wordpress
WP Camp 2012 Mobile First & WordpressWP Camp 2012 Mobile First & Wordpress
WP Camp 2012 Mobile First & Wordpress
 
App-Retention Mobile-CRM Kundenbindung im Kontext Mobile Olaf Grüger Go eComm...
App-Retention Mobile-CRM Kundenbindung im Kontext Mobile Olaf Grüger Go eComm...App-Retention Mobile-CRM Kundenbindung im Kontext Mobile Olaf Grüger Go eComm...
App-Retention Mobile-CRM Kundenbindung im Kontext Mobile Olaf Grüger Go eComm...
 
Mobile UX: Interaktions- und Designmuster auf Android und iOS (Linuxtag 2013,...
Mobile UX: Interaktions- und Designmuster auf Android und iOS (Linuxtag 2013,...Mobile UX: Interaktions- und Designmuster auf Android und iOS (Linuxtag 2013,...
Mobile UX: Interaktions- und Designmuster auf Android und iOS (Linuxtag 2013,...
 
Webinar: Mobile Shop Optimierung - was wirklich wichtig ist
Webinar: Mobile Shop Optimierung - was wirklich wichtig istWebinar: Mobile Shop Optimierung - was wirklich wichtig ist
Webinar: Mobile Shop Optimierung - was wirklich wichtig ist
 
From Mobile Hype to Mobile Business
From Mobile Hype to Mobile BusinessFrom Mobile Hype to Mobile Business
From Mobile Hype to Mobile Business
 
Mobile SEO: IWWB Herbstworkshop 2015
Mobile SEO: IWWB Herbstworkshop 2015Mobile SEO: IWWB Herbstworkshop 2015
Mobile SEO: IWWB Herbstworkshop 2015
 
App retention - mobile crm - mobile customer retention - olaf grueger - go e ...
App retention - mobile crm - mobile customer retention - olaf grueger - go e ...App retention - mobile crm - mobile customer retention - olaf grueger - go e ...
App retention - mobile crm - mobile customer retention - olaf grueger - go e ...
 
Banking 2.0 / Arbeit 2.0
Banking 2.0 / Arbeit 2.0Banking 2.0 / Arbeit 2.0
Banking 2.0 / Arbeit 2.0
 
Responsive Webdesign verkaufen
Responsive Webdesign verkaufenResponsive Webdesign verkaufen
Responsive Webdesign verkaufen
 
Mobile Websites
Mobile WebsitesMobile Websites
Mobile Websites
 
Cloud Computing - „Entscheidungshilfe für den Datenschutzbeauftragten“
Cloud Computing - „Entscheidungshilfe für den Datenschutzbeauftragten“Cloud Computing - „Entscheidungshilfe für den Datenschutzbeauftragten“
Cloud Computing - „Entscheidungshilfe für den Datenschutzbeauftragten“
 
vi knallgrau Mobile Nutzung: Website vs. App
vi knallgrau Mobile Nutzung: Website vs. Appvi knallgrau Mobile Nutzung: Website vs. App
vi knallgrau Mobile Nutzung: Website vs. App
 
Meet the PadMan
Meet the PadManMeet the PadMan
Meet the PadMan
 
afterbuyBBQ 2014 - Mobiloptimierung - So rüsten Sie Ihre Geschäfte für mobile...
afterbuyBBQ 2014 - Mobiloptimierung - So rüsten Sie Ihre Geschäfte für mobile...afterbuyBBQ 2014 - Mobiloptimierung - So rüsten Sie Ihre Geschäfte für mobile...
afterbuyBBQ 2014 - Mobiloptimierung - So rüsten Sie Ihre Geschäfte für mobile...
 

Mobile Relaunch - Praxistipps zur Entwicklung einer mobilen Website

  • 1. © 121WATT - André Goldmann Mobile Relaunch Früher an später denken. München, 17.03. - 18.03.2015
  • 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. © 121WATT - André Goldmann Privates Projekt: nageldesign-galerie.de 3 3.400.000 Sitzungen 25.300.000 Seitenaufrufe 1 TB Traffic im Monat
  • 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. © 121WATT - André Goldmann Mobile SEO Session gestern verpasst?
  • 6. © 121WATT - André Goldmann Mobile SEO Grundlagen 5 http://www.slideshare.net/icecrack84/mobile-seo-grundlagen
  • 7. © 121WATT - André Goldmann Wie ging das alles eigentlich los? Können wir eigentlich Desktop mit „Mobile“ vergleichen?
  • 8. © 121WATT - André Goldmann 1993 - Kommerzielle Durchbruch Bild Quelle: http://www.computerhistory.org/
  • 9. © 121WATT - André Goldmann 1999 - bin ich da schon drin’ oder was? Bild Quelle: http://www.spiegel.de/
  • 10. © 121WATT - André Goldmann 90er - 2007. Bild Quelle: https://www.youtube.com/
  • 11. © 121WATT - André Goldmann 2007. Bild Quelle: http://www.chip.de/
  • 12. © 121WATT - André Goldmann Die Entwicklung des mobilen Internets
  • 13. © 121WATT - André Goldmann Die Entwicklung des mobilen Internets
  • 14. © 121WATT - André Goldmann Die Entwicklung des mobilen Internets Mosaic 1993
  • 15. © 121WATT - André Goldmann Die Entwicklung des mobilen Internets Mosaic 1993 ISDN in DEU 1995
  • 16. © 121WATT - André Goldmann Die Entwicklung des mobilen Internets Mosaic 1993 ISDN in DEU 1995 Boris’ ;) 1999
  • 17. © 121WATT - André Goldmann Die Entwicklung des mobilen Internets Mosaic 1993 ISDN in DEU 1995 Boris’ ;) 1999 The iPhone 2007
  • 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. © 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. © 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. © 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. © 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. © 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. © 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. © 121WATT - André Goldmann Schlechte Beispiele …die man besser nicht nachmachen sollte.
  • 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. © 121WATT - André Goldmann Mobile Fails
  • 28. © 121WATT - André Goldmann Mobile Fails
  • 29. © 121WATT - André Goldmann Mobile Fails Ist hier der Platz zum scrollen und für die Inhalte ausreichen?
  • 30. © 121WATT - André Goldmann Mobile Fails Zu viel Inhalt der keinen Fokus zulässt
  • 31. © 121WATT - André Goldmann Mobile Fails Zu viel Inhalt der keinen Fokus zulässt
  • 32. © 121WATT - André Goldmann Mobile Fails CSS: position:absolute
  • 33. © 121WATT - André Goldmann Mobile Fails Wer versteht das?
  • 34. © 121WATT - André Goldmann Mobile Fails Ob ich Inhalte die ich nicht vollständig lesen kann, wirklich teilen möchte?
  • 35. © 121WATT - André Goldmann Mobile Fails Mehr „Bars“ haben leider nicht ins Layout gepasst ^^
  • 36. © 121WATT - André Goldmann Mobile Fails Mehr „Bars“ haben leider nicht ins Layout gepasst ^^
  • 37. © 121WATT - André Goldmann Mobile Fails Schon einmal etwas von einer Weiterleitung gehört?
  • 38. © 121WATT - André Goldmann Mobile Fails Ok = Yes Cancel = No
  • 39. © 121WATT - André Goldmann Solch ein Fehler kann teuer werden. Wurde in diesem Beispiel jedoch „bereits“ behoben…
  • 40. © 121WATT - André Goldmann
  • 41. © 121WATT - André Goldmann Mobile Fails
  • 42. © 121WATT - André Goldmann Mobile Fails
  • 43. © 121WATT - André Goldmann Mobile Fails
  • 44. © 121WATT - André Goldmann Mobile Fails
  • 45. © 121WATT - André Goldmann Mobile Fails
  • 46. © 121WATT - André Goldmann Mobile Fails
  • 47. © 121WATT - André Goldmann Besuchen Sie eigene Websites regelmässig!
  • 48. © 121WATT - André Goldmann Besuchen Sie MIT DEM SMARTPHONE!
  • 49. © 121WATT - André Goldmann Lohnt sich die Optimierung für Mobile?
  • 50. © 121WATT - André Goldmann https://www.google.com/analytics/web/#report/visitors-mobile-overview/
  • 51. © 121WATT - André Goldmann Wie kann ich meinen Relaunch priorisieren? 36
  • 52. © 121WATT - André Goldmann Wie kann ich meinen Relaunch priorisieren? 36 Pauschalreisen:
 35% mobile Traffic
  • 53. © 121WATT - André Goldmann Wie kann ich meinen Relaunch priorisieren? 36 Hotels:
 40% mobile Traffic Pauschalreisen:
 35% mobile Traffic
  • 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. © 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. © 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. © 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. © 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. © 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. © 121WATT - André Goldmann Priorisierung von Teilbereichen 38 https://www.google.com/analytics/web/#report/content-drilldown/
  • 61. © 121WATT - André Goldmann Podcast zum Relaunch von Expedia 39 http://responsivewebdesign.com/podcast/expedia.html http://responsivewebdesign.com/podcast/expedia-two.html
  • 62. © 121WATT - André Goldmann Mobile Design = Responsive Design? Nein. RWD ist Design für alle Geräte!
  • 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. © 121WATT - André Goldmann Was macht RWD aus?
  • 65. © 121WATT - André Goldmann Flexibles Layout Bildquelle: http://www.apple.com/de/
  • 66. © 121WATT - André Goldmann Flexibles Layout Bildquelle: http://www.apple.com/de
  • 67. © 121WATT - André Goldmann Flexibles Layout Bildquelle: http://www.apple.com/de
  • 68. © 121WATT - André Goldmann Flexibles Layout Bildquelle: http://www.apple.com/de
  • 69. © 121WATT - André Goldmann Flexibles Layout Bildquelle: http://www.apple.com/de
  • 70. © 121WATT - André Goldmann Flexibles Layout Bildquelle: http://www.apple.com/de Auflösung von 5120 x 2880 Pixel
  • 71. © 121WATT - André Goldmann Ziel von Mobile oder responsiven Webdesign 48 Was Nutzer wollen Unser Ziel
  • 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. © 121WATT - André Goldmann Relaunch Workflow Strategien, Konflikte & Lösungen für einen RWD Relaunch
  • 74. © 121WATT - André Goldmann Webdesign Workflow (früher) Als der Nachbar Websites „programmierte“…
  • 75. © 121WATT - André Goldmann Webdesign Workflow (früher)
  • 76. © 121WATT - André Goldmann Webdesign Workflow (früher) Meetings + Planungen für die neue Website
  • 77. © 121WATT - André Goldmann Webdesign Workflow (früher) Meetings + Planungen für die neue Website Wireframes oder Mockups werden erstellt
  • 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. © 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. © 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. © 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. © 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. © 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. © 121WATT - André Goldmann Wer erinnert sich noch an dieses Bild? Mobile Design = Responsive Design? 53 Bildquelle: https://www.flickr.com/photos/lukew/10430507184/
  • 85. © 121WATT - André Goldmann
  • 86. © 121WATT - André Goldmann Jetzt mal alle Hände hoch, wer…
  • 87. © 121WATT - André Goldmann …für all diese Geräte ein Design entwerfen will ^^ Jetzt mal alle Hände hoch, wer…
  • 88. © 121WATT - André Goldmann Was können Website Prints nicht abbilden? Was macht außerdem beachten sollte:
  • 89. © 121WATT - André Goldmann Touch Experience & Interactions (Hover, Animationen & Bewegungen)
  • 90. © 121WATT - André Goldmann Mobiles (responsives) Webdesign erfordert ein radikales Umdenken bei allen Verantwortlichen!
  • 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. © 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. © 121WATT - André Goldmann RWD Workflow Punkt 1 - 47…
  • 94. © 121WATT - André Goldmann Probleme im Jahr 2015
  • 95. © 121WATT - André Goldmann Probleme im Jahr 2015 • Unzählige Displaygrößen und Auflösungen
  • 96. © 121WATT - André Goldmann Probleme im Jahr 2015 • Unzählige Displaygrößen und Auflösungen • Webseiten werden in unterschiedlichen Situationen und Kontexten benutzt
  • 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. © 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. © 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. © 121WATT - André Goldmann Webdesign Workflow bei RWD
  • 101. © 121WATT - André Goldmann Webdesign Workflow bei RWD Analyse + Planung
  • 102. © 121WATT - André Goldmann Webdesign Workflow bei RWD Analyse + Planung Inhalts- & Seitenarchitektur (Contentstrategie)
  • 103. © 121WATT - André Goldmann Webdesign Workflow bei RWD Analyse + Planung Inhalts- & Seitenarchitektur (Contentstrategie) Sketch ⇢ Wireframes ⇢ Visuelles Design ⇢Prototype ⇢ Testing ↺
  • 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. © 121WATT - André Goldmann Mit welcher Hand nutzen Sie Ihr Smartphone? …bitte mal Arm hoch.
  • 106. © 121WATT - André Goldmann Lust auf einen kleinen Test? www.google.de
  • 107. © 121WATT - André Goldmann 65
  • 108. © 121WATT - André Goldmann 65
  • 109. © 121WATT - André Goldmann 65
  • 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. © 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. © 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. © 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. © 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. © 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. © 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. © 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. © 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. © 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. © 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. © 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. © 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. © 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. © 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. © 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. © 121WATT - André Goldmann Ergebnis: Webdesign kann nicht überall gleich aussehen und funktionieren.
  • 127. © 121WATT - André Goldmann 71
  • 128. © 121WATT - André Goldmann 71
  • 129. © 121WATT - André Goldmann 72
  • 130. © 121WATT - André Goldmann 72
  • 131. © 121WATT - André Goldmann 73
  • 132. © 121WATT - André Goldmann 73
  • 133. © 121WATT - André Goldmann 74
  • 134. © 121WATT - André Goldmann 74
  • 135. © 121WATT - André Goldmann 74
  • 136. © 121WATT - André Goldmann 75
  • 137. © 121WATT - André Goldmann 75
  • 138. © 121WATT - André Goldmann 76
  • 139. © 121WATT - André Goldmann 76
  • 140. © 121WATT - André Goldmann 76
  • 141. © 121WATT - André Goldmann 77
  • 142. © 121WATT - André Goldmann 77
  • 143. © 121WATT - André Goldmann 78
  • 144. © 121WATT - André Goldmann 78
  • 145. © 121WATT - André Goldmann 78
  • 146. © 121WATT - André Goldmann Stichwort: Wireframes & Prototypen
  • 147. © 121WATT - André Goldmann Planung vom mobilen Interface
  • 148. © 121WATT - André Goldmann Planung vom mobilen Interface
  • 149. © 121WATT - André Goldmann Wireframe Testing: Balsamiq (Windows, Linux, Mac OS) https://balsamiq.com/
  • 150. © 121WATT - André Goldmann Wireframe Testing: JUSTINMIND (Windows, Linux, Mac OS) http://www.justinmind.com/
  • 151. © 121WATT - André Goldmann https://creative.adobe.com/de/products/reflow Adobe Edge Reflow (Windows, Mac OS)
  • 152. © 121WATT - André Goldmann http://macaw.co/ MACAW (Mac OS)
  • 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. © 121WATT - André Goldmann http://pingendo.com/ Pingendo (Windows, Mac OS & Linux)
  • 155. © 121WATT - André Goldmann http://pingendo.com/ Pingendo (Windows, Mac OS & Linux)
  • 156. © 121WATT - André Goldmann Stichwort:
 (Design)prozess im Browser
  • 157. © 121WATT - André Goldmann Warum?
  • 158. © 121WATT - André Goldmann Es spart viiiiiel Zeit
  • 159. © 121WATT - André Goldmann Problem von früher: Layouts & Slices in Photoshop 90
  • 160. © 121WATT - André Goldmann http://incident57.com/codekit/ CodeKit (Mac OSX + alle Smartphones)
  • 161. © 121WATT - André Goldmann http://koala-app.com/ Koala (Mac OSX, Windows, Linux)
  • 162. © 121WATT - André Goldmann Veränderungen sind schnell erledigt
  • 163. © 121WATT - André Goldmann Content steht im Fokus & nicht das Design der Website
  • 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. © 121WATT - André Goldmann RWD wird leichter zu entwickeln
  • 166. © 121WATT - André Goldmann Stichwort „Breakpoints“ Content & Funktionen bestimmen die Breakpoints und nicht mehr das Layout der Website.
  • 167. © 121WATT - André Goldmann Was sind Breakpoints und wie erkenne ich sie?
  • 168. © 121WATT - André Goldmann Was sind Breakpoints und wie erkenne ich sie?
  • 169. © 121WATT - André Goldmann Was sind Breakpoints und wie erkenne ich sie?
  • 170. © 121WATT - André Goldmann Was sind Breakpoints und wie erkenne ich sie?
  • 171. © 121WATT - André Goldmann Was sind Breakpoints und wie erkenne ich sie?
  • 172. © 121WATT - André Goldmann „Aktuelle“ Breakpoints 101
  • 173. © 121WATT - André Goldmann „Aktuelle“ Breakpoints 320px – Smartphones Portrait (Hochformat) 101
  • 174. © 121WATT - André Goldmann „Aktuelle“ Breakpoints 320px – Smartphones Portrait (Hochformat) 480px – Smartphones Landscape (Querformat) 101
  • 175. © 121WATT - André Goldmann „Aktuelle“ Breakpoints 320px – Smartphones Portrait (Hochformat) 480px – Smartphones Landscape (Querformat) 768px – Tablet Landscape 101
  • 176. © 121WATT - André Goldmann „Aktuelle“ Breakpoints 320px – Smartphones Portrait (Hochformat) 480px – Smartphones Landscape (Querformat) 768px – Tablet Landscape 1024px – div. Tablets, Notebooks, Desktop 101
  • 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. © 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. © 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. © 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. © 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. © 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. © 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. © 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. © 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. © 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. © 121WATT - André Goldmann Breakpoints der „Zukunft“ 102
  • 188. © 121WATT - André Goldmann Breakpoints der „Zukunft“ 102 320 x 290
  • 189. © 121WATT - André Goldmann Breakpoints der „Zukunft“ 102 320 x 290 38mm 340 x 272 42mm 390 x 312
  • 190. © 121WATT - André Goldmann Grenzen von RWD. Oder der Technik? 103
  • 191. © 121WATT - André Goldmann Breakpoint Test: Google Chrome Browser
  • 192. © 121WATT - André Goldmann Breakpoint Test: Google Chrome Browser
  • 193. © 121WATT - André Goldmann Breakpoint Test: Google Chrome Browser
  • 194. © 121WATT - André Goldmann Breakpoint Test: Google Chrome Browser
  • 195. © 121WATT - André Goldmann Breakpoint Test: Google Chrome Browser
  • 196. © 121WATT - André Goldmann Breakpoint Test: Firefox
  • 197. © 121WATT - André Goldmann Conditional Loading Was für Layout gilt, sollte auch für Funktionen genutzt werden.
  • 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. © 121WATT - André Goldmann caniuse.com – Browser-Support 109 http://caniuse.com/#search=media%20queries
  • 200. © 121WATT - André Goldmann Browser- und Geräte-Tests
  • 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. © 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. © 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. © 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. © 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. © 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. © 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. © 121WATT - André Goldmann Network Link Conditioner (Mac OS, iOS) http://nshipster.com/network-link-conditioner/
  • 209. © 121WATT - André Goldmann https://creative.adobe.com/de/products/inspect Adobe Edge Inspect (Windows, Mac OS, Android, iOS, Windowsphone & Amazon Kindle Fire)
  • 210. © 121WATT - André Goldmann http://www.browsersync.io/ BrowserSync
  • 211. © 121WATT - André Goldmann Ghostlab http://vanamco.com/ghostlab/ Bild Quelle: http://www.html5rocks.com/en/tutorials/tooling/synchronized-cross-device-testing/
  • 212. © 121WATT - André Goldmann Ghostlab http://vanam Bild Quelle: http://www.html5rocks.com/en/tutorials/tooling/synchronized-cross-device-testing/
  • 213. © 121WATT - André Goldmann http://opendevicelab.com/ OpenDeviceLab
  • 214. © 121WATT - André Goldmann Nicht nur Layout sondern bitte auch
 Funktionen & Performance testen!
  • 215. © 121WATT - André Goldmann Performance in Echtzeit
  • 216. © 121WATT - André Goldmann Performance Tests bei der Entwicklung 119
  • 217. © 121WATT - André Goldmann Website Speed Test: Pingdom Tools 120 tools.pingdom.com/fpt/
  • 218. © 121WATT - André Goldmann „Performance Killer“ frühzeitig beseitigen
  • 219. © 121WATT - André Goldmann 122 Keine HTML Kommentare im Quelltext nutzen Performance Tipps
  • 220. © 121WATT - André Goldmann 122 Keine HTML Kommentare im Quelltext nutzen HTML Code komprimiert launchen & ungenutztes CSS entfernen (gerade bei Frameworks) Performance Tipps
  • 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. © 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. © 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. © 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. © 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. © 121WATT - André Goldmann 123 Bilder: Performance Tipps für Bilder
  • 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. © 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. © 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. © 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. © 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. © 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. © 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. © 121WATT - André Goldmann Entscheidungen sollten im Browser getroffen werden.
  • 235. © 121WATT - André Goldmann Strukturierte Daten für (mobilen) Content
  • 236. © 121WATT - André Goldmann Strukturierte Daten für (mobilen) Content
  • 237. © 121WATT - André Goldmann Strukturierte Daten für (mobilen) Content
  • 238. © 121WATT - André Goldmann Strukturierte Daten für (mobilen) Content https://support.google.com/webmasters/answer/99170?hl=de
  • 239. © 121WATT - André Goldmann Strukturierte Daten für (mobilen) Content http://schema.org/
  • 240. © 121WATT - André Goldmann Worauf sollte ich bei der Wahl der Agentur achten? 130
  • 241. © 121WATT - André Goldmann Worauf sollte ich bei der Wahl der Agentur achten? Statt „fertige Layouts“, sollten Styleguides entwickelt werden 130
  • 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. © 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. © 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. © 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. © 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. © 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. © 121WATT - André Goldmann „Bullshit Bingo“ für die Wahl der richtigen Agentur 131
  • 249. © 121WATT - André Goldmann „Bullshit Bingo“ für die Wahl der richtigen Agentur 131 Breakpoints
  • 250. © 121WATT - André Goldmann „Bullshit Bingo“ für die Wahl der richtigen Agentur 131 Breakpoints Adaptive Design
  • 251. © 121WATT - André Goldmann „Bullshit Bingo“ für die Wahl der richtigen Agentur 131 Breakpoints Adaptive Design Media Queries
  • 252. © 121WATT - André Goldmann „Bullshit Bingo“ für die Wahl der richtigen Agentur 131 Breakpoints Adaptive Design Media Queries Responsive E-Mail Design
  • 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. © 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. © 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. © 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. © 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. © 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. © 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. © 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. © 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. © 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. © 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. © 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. © 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. © 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. © 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. © 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. © 121WATT - André Goldmann Relaunch- & Testing-Tools
  • 270. © 121WATT - André Goldmann Screaming Frog SEO Spider http://www.screamingfrog.co.uk/seo-spider/
  • 271. © 121WATT - André Goldmann Uservoice https://www.uservoice.com/
  • 272. © 121WATT - André Goldmann Qualaroo https://qualaroo.com/
  • 273. © 121WATT - André Goldmann Google Analytics google.com/analytics/web/
  • 274. © 121WATT - André Goldmann User Testing http://www.usertesting.com/
  • 275. © 121WATT - André Goldmann Silverback App für Mac OSX (Usability Testing) http://silverbackapp.com/
  • 276. © 121WATT - André Goldmann UX Recorder für iOS http://www.uxrecorder.com/
  • 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. © 121WATT - André Goldmann http://www.abookapart.com/products/responsive-web-design Buch-Tipp
  • 279. © 121WATT - André Goldmann http://www.abookapart.com/products/mobile-first Buch-Tipp
  • 280. © 121WATT - André Goldmann http://www.abookapart.com/products/content-strategy-for-mobile Buch-Tipp
  • 281. © 121WATT - André Goldmann http://www.abookapart.com/products/designing-for-emotion Buch-Tipp
  • 282. © 121WATT - André Goldmann http://pxdr.de/moblaunch @pixeldreher Folien Folgen
  • 283. © 121WATT - André Goldmann Bonus: Mobile Formulare Bitte SOFORT mit erledigen!!
  • 284. © 121WATT - André Goldmann Regeln für responsive (mobile) Formulare
  • 285. © 121WATT - André Goldmann Regeln für responsive (mobile) Formulare Keine wiederholenden Felder & Aktionen (Passwort wiederholen, E-Mail Adresse verifizieren)
  • 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. © 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. © 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. © 121WATT - André Goldmann HTML5 und Formulare
  • 290. © 121WATT - André Goldmann HTML5 und Formulare Formulare auf dem Desktop machen in der Regel keinen Spaß - aber man muss ja…
  • 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. © 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. © 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. © 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. © 121WATT - André Goldmann Input Typen von HTML5: number Beispiel-Code: <form> <input type="number" name="number"> </form>
  • 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. © 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. © 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. © 121WATT - André Goldmann Input Typen von HTML5: color Zur Eingabe von Farbwerten. Beispiel-Code: <form> <input type="color" name="favcolor"> </form>
  • 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. © 121WATT - André Goldmann Adressen in Formularen
  • 302. © 121WATT - André Goldmann Adressen in Formularen
  • 303. © 121WATT - André Goldmann Adressen in Formularen
  • 304. © 121WATT - André Goldmann Formulare auf Autopilot https://www.deutschepost.de/de/d/deutsche-post-direkt/datafactory.html
  • 305. © 121WATT - André Goldmann „normale“ Validierung nach dem Abschicken https://www.youtube.com/watch?v=FWDDRG93puY
  • 306. © 121WATT - André Goldmann Real-Time Validierung VOR dem Abschicken https://www.youtube.com/watch?v=hlU74LIPauo
  • 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. © 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. © 121WATT - André Goldmann http://pxdr.de/moblaunch @pixeldreher Folien Folgen
  • 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“ ;)