Mobile Relaunch - Praxistipps zur Entwicklung einer mobilen Website

3,979 views

Published on

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

Mobile Relaunch - Praxistipps zur Entwicklung einer mobilen Website

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

×