Más contenido relacionado La actualidad más candente (12) Similar a Mobile Relaunch - Praxistipps zur Entwicklung einer mobilen Website (20) Mobile Relaunch - Praxistipps zur Entwicklung einer mobilen Website1. © 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.
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…
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/
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/
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…
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
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.
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
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)
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
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“ ;)