fehler bei mobile- und responsive-webdesign vermeiden / conversion conference 2014
DESCRIPTION
Fast jedes Unternehmen unterschätzt Mobile. Aber die mobile Welt ist nicht mit der Desktopwelt zu vergleichen. Und doch werden Designs und Businesspraktiken von Computer zu Mobile übertragen. Das Resultat sind Erwartungen an Mobile Conversions, die meist gar nicht erfüllt werden können. Von Giganten wie Facebook bis hin zu kleinen Start Ups, alle Unternehmen lernen, dass der Übergang zu einer mobilen Welt nicht nur schwierig, sondern auch riskant ist. Welche Mobile-Standards erwartet der Nutzer auf seinen Devices und wie können wir als Anbieter darauf eingehen? Wie erhöht man die mobile Konversionrate durch responsives Bildmaterial? Worauf muss beim Einsatz von HTML5 bei Formularen geachtet werden?TRANSCRIPT
![Page 1: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/1.jpg)
© 121WATT - André Goldmann
Achtung Falle!Fehler bei Mobile- und Responsive-Webdesign (RWD) vermeiden
Berlin, 04.11. - 05.11.2014
![Page 2: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/2.jpg)
© 121WATT - André Goldmann
André Goldmann
‣ 26.03.1984, erster HTML-Code mit 15 Jahren
‣ Verheiratet, 1 Tochter
‣ Seit 2007 Selbständig bei Pixeldreher & ab 2012: Entwickler, SEO, Online Marketing-Spezi. Ab 2014 CTO & Referent bei der 121WATT
‣ Davor: Front-End Entwickler bei preisvergleich.de, ab-in-den-urlaub.de, kredite.de, auto.de & unister.de
‣ Hobbies: meine Familie, Eishockey, Reisen & Konzerte
‣ Betreute Kunden:
• CTO bei der 121WATTGeschäftsinhaber bei PixeldreherSeit 1996 Front-End Entwickler & Optimierer aus Leidenschaft
• Twitter: @pixeldreherE-Mail: [email protected]
![Page 3: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/3.jpg)
© 121WATT - André Goldmann
Ich arbeitete unter anderem für diese Kunden
![Page 4: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/4.jpg)
© 121WATT - André Goldmann
Privates Projekt
4
![Page 5: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/5.jpg)
© 121WATT - André Goldmann
Privates Projekt
4
> 374.000 Besucher
![Page 6: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/6.jpg)
© 121WATT - André Goldmann
Privates Projekt
4
> 374.000 Besucher
> 3.126.000 Seitenaufrufe
![Page 7: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/7.jpg)
© 121WATT - André Goldmann
Privates Projekt
4
> 374.000 Besucher
> 3.126.000 Seitenaufrufe
> 1 TB Traffic im Monat
![Page 8: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/8.jpg)
© 121WATT - André Goldmann
Privates Projekt
4
> 374.000 Besucher
> 3.126.000 Seitenaufrufe
> 1 TB Traffic im Monat80% Mobile-Traffic
![Page 9: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/9.jpg)
© 121WATT - André Goldmann
Privates Projekt
Seit März 2014 mit Apps für Android & iOS
![Page 10: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/10.jpg)
© 121WATT - André Goldmann
Konvertiert „mobile“ nicht?… oder kommt es auf meine Zielgruppe & den Kontext an?
![Page 11: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/11.jpg)
© 121WATT - André Goldmann
Kurze Fragerunde…
![Page 12: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/12.jpg)
© 121WATT - André Goldmann
Fragerunde…
Wer hat schon ein Bahnticket mit dem Handy gekauft?
![Page 13: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/13.jpg)
© 121WATT - André Goldmann
Fragerunde…
Schon mal Pizza, Döner oder Nudeln per App bestellt und bezahlt?
![Page 14: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/14.jpg)
© 121WATT - André Goldmann
Fragerunde…
Günstige Produkte, Angebote oder Schnäppchen mit dem Handy bestellt?
![Page 15: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/15.jpg)
© 121WATT - André Goldmann
Fragerunde…
Versicherung mit dem Handy abgeschlossen?
![Page 16: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/16.jpg)
© 121WATT - André Goldmann
Fragerunde…
Reise oder Kurzurlaub mit dem Smartphone gebucht?
![Page 17: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/17.jpg)
© 121WATT - André Goldmann
Fragerunde…
Produkte über 1.000,- € per Smartphone bestellt?
![Page 18: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/18.jpg)
© 121WATT - André Goldmann
Fragerunde…
Ticket für die ConversionConference mit dem Handy geordert?
![Page 19: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/19.jpg)
© 121WATT - André Goldmann
Fragerunde…
Ein Tool oder eine berufliche Dienstleistung per Smartphone gebucht?
![Page 20: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/20.jpg)
© 121WATT - André Goldmann
Jetzt nochmal im Kontext
![Page 21: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/21.jpg)
© 121WATT - André Goldmann
Fragerunde…
Wer hat schon ein Bahnticket mit dem Handy gekauft?
Unterwegs, schnell und privat
![Page 22: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/22.jpg)
© 121WATT - André Goldmann
Fragerunde…
Schon mal Pizza, Döner oder Nudeln per App bestellt und bezahlt?
Praktisch, schnell & „Alltagsproblemlöser“
![Page 23: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/23.jpg)
© 121WATT - André Goldmann
Fragerunde…
Günstige Produkte, Angebote oder Schnäppchen mit dem Handy bestellt?
Schnelligkeit, keine Gefahr & privat
![Page 24: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/24.jpg)
© 121WATT - André Goldmann
Fragerunde…
Versicherung mit dem Handy abgeschlossen?
Mit Ruhe und Bedacht, komplex & leseintensiv
![Page 25: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/25.jpg)
© 121WATT - André Goldmann
Fragerunde…
Reise oder Kurzurlaub mit dem Smartphone gebucht?
Preisvergleich, Visuell & keine einseitige Entscheidung
![Page 26: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/26.jpg)
© 121WATT - André Goldmann
Fragerunde…
Produkte über 1.000,- € per Smartphone bestellt?
Vertrauen, „mal eben 1.000,- €“
![Page 27: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/27.jpg)
© 121WATT - André Goldmann
Fragerunde…
Ticket für die ConversionConference mit dem Handy geordert?
Business, man sitzt eh vor dem Desktop, genug Zeit
![Page 28: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/28.jpg)
© 121WATT - André Goldmann
Fragerunde…
Ein Tool oder eine berufliche Dienstleistung per Smartphone gebucht?
Vergleich, Desktop-Tools, Auswahl, nicht-mobil Verfügbar
![Page 29: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/29.jpg)
© 121WATT - André Goldmann
Wie ging das alles eigentlich los?Können wir eigentlich Desktop mit „Mobile“ vergleichen?
![Page 30: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/30.jpg)
© 121WATT - André Goldmann
1993 - Kommerzielle Durchbruch
Bild Quelle: http://www.computerhistory.org/
![Page 31: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/31.jpg)
© 121WATT - André Goldmann
1999 - bin ich da schon drin’ oder was?
Bild Quelle: http://www.spiegel.de/
![Page 32: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/32.jpg)
© 121WATT - André Goldmann
90er - 2007.
Bild Quelle: https://www.youtube.com/
![Page 34: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/34.jpg)
© 121WATT - André Goldmann
Die Entwicklung des mobilen Internets
![Page 35: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/35.jpg)
© 121WATT - André Goldmann
Die Entwicklung des mobilen Internets
![Page 36: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/36.jpg)
© 121WATT - André Goldmann
Die Entwicklung des mobilen Internets
Mosaic
1993
![Page 37: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/37.jpg)
© 121WATT - André Goldmann
Die Entwicklung des mobilen Internets
Mosaic
1993
ISDN in DEU
1995
![Page 38: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/38.jpg)
© 121WATT - André Goldmann
Die Entwicklung des mobilen Internets
Mosaic
1993
ISDN in DEU
1995
Boris’ ;)
1999
![Page 39: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/39.jpg)
© 121WATT - André Goldmann
Die Entwicklung des mobilen Internets
Mosaic
1993
ISDN in DEU
1995
Boris’ ;)
1999
The iPhone
2007
![Page 40: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/40.jpg)
© 121WATT - André Goldmann
Die Entwicklung des mobilen Internets
Mosaic
1993
ISDN in DEU
1995
Boris’ ;)
1999
The iPhone
2007
RWD erstmalserwähnt
05/2010
![Page 41: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/41.jpg)
© 121WATT - André Goldmann
Die Entwicklung des mobilen Internets
Mosaic
1993
ISDN in DEU
1995
Boris’ ;)
1999
The iPhone
2007
RWD erstmalserwähnt
05/2010
Erste RWDin DEU
seit 2011
![Page 42: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/42.jpg)
© 121WATT - André Goldmann
Die Entwicklung des mobilen Internets
Mosaic
1993
ISDN in DEU
1995
Boris’ ;)
1999
The iPhone
2007
RWD erstmalserwähnt
05/2010
Erste RWDin DEU
seit 2011
![Page 43: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/43.jpg)
© 121WATT - André Goldmann
Die Entwicklung des mobilen Internets
Mosaic
1993
ISDN in DEU
1995
Boris’ ;)
1999
The iPhone
2007
RWD erstmalserwähnt
05/2010
Erste RWDin DEU
seit 2011
m.website.de vs. native Apps
![Page 44: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/44.jpg)
© 121WATT - André Goldmann
Die Entwicklung des mobilen Internets
Mosaic
1993
ISDN in DEU
1995
Boris’ ;)
1999
The iPhone
2007
RWD erstmalserwähnt
05/2010
Erste RWDin DEU
seit 2011
m.website.de vs. native Apps
Tablet-PCs…
![Page 45: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/45.jpg)
© 121WATT - André Goldmann
Die Entwicklung des mobilen Internets
Mosaic
1993
ISDN in DEU
1995
Boris’ ;)
1999
The iPhone
2007
RWD erstmalserwähnt
05/2010
Erste RWDin DEU
seit 2011
m.website.de vs. native Apps
Tablet-PCs…
18 Jahre vs. 3 Jahre
Gleicher Inhalt & Code
![Page 46: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/46.jpg)
© 121WATT - André Goldmann
Das Umdenken der Anwenderkann schnell beginnen.
Zeit für RWD ;)
Bild Quelle: http://www.apple.com/iphone-6/apple-pay/
![Page 47: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/47.jpg)
© 121WATT - André Goldmann
Was ist anders bei RWD?Workflows & Ansätze
![Page 48: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/48.jpg)
© 121WATT - André Goldmann
ALLES
![Page 49: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/49.jpg)
© 121WATT - André Goldmann
Flexibles Layout
Bildquelle: http://www.apple.com/de/
![Page 50: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/50.jpg)
© 121WATT - André Goldmann
Flexibles Layout
Bildquelle: http://www.apple.com/de
![Page 51: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/51.jpg)
© 121WATT - André Goldmann
Flexibles Layout
Bildquelle: http://www.apple.com/de
![Page 52: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/52.jpg)
© 121WATT - André Goldmann
Flexibles Layout
Bildquelle: http://www.apple.com/de
![Page 53: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/53.jpg)
© 121WATT - André Goldmann
Flexibles Layout
Bildquelle: http://www.apple.com/de
![Page 54: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/54.jpg)
© 121WATT - André Goldmann
Flexibles Layout
Bildquelle: http://www.apple.com/de
Auflösung von
5120 x 2880 Pixel
![Page 55: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/55.jpg)
© 121WATT - André Goldmann
Was erwarten Besucher?
![Page 56: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/56.jpg)
© 121WATT - André Goldmann
Studie von Google (2012)
![Page 57: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/57.jpg)
© 121WATT - André Goldmann
Studie von Google (2012)
• 69% der Teilnehmer würden auf einer mobilfähigen Website ein Produkt kaufen
![Page 58: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/58.jpg)
© 121WATT - André Goldmann
Studie von Google (2012)
• 69% der Teilnehmer würden auf einer mobilfähigen Website ein Produkt kaufen
• 61% der mobilen Teilnehmer verlassen eine Website wenn sie nicht sofort das finden, was sie ursprünglich gesucht haben
![Page 59: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/59.jpg)
© 121WATT - André Goldmann
Studie von Google (2012)
• 69% der Teilnehmer würden auf einer mobilfähigen Website ein Produkt kaufen
• 61% der mobilen Teilnehmer verlassen eine Website wenn sie nicht sofort das finden, was sie ursprünglich gesucht haben
• 50% der Teilnehmer würden ein Produkt nicht nutzen/kaufen, wenn der mobile Auftritt des Unternehmen „schlecht“ ist
![Page 60: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/60.jpg)
© 121WATT - André Goldmann
Studie von Google (2012)
• 69% der Teilnehmer würden auf einer mobilfähigen Website ein Produkt kaufen
• 61% der mobilen Teilnehmer verlassen eine Website wenn sie nicht sofort das finden, was sie ursprünglich gesucht haben
• 50% der Teilnehmer würden ein Produkt nicht nutzen/kaufen, wenn der mobile Auftritt des Unternehmen „schlecht“ ist
• Folgen: Frustrationen und Ärger bei den Besuchern/Kunden 52% sehen bei einem schlechten mobilen Auftritt auch Auswirkungen auf zukünftige Geschäfte mit dem Unternehmen (Image)48% sind der Meinung, dass solche Unternehmen sich nicht für sie als Kunden interessieren würden
![Page 61: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/61.jpg)
© 121WATT - André Goldmann
Studie von Google (2012)
• 69% der Teilnehmer würden auf einer mobilfähigen Website ein Produkt kaufen
• 61% der mobilen Teilnehmer verlassen eine Website wenn sie nicht sofort das finden, was sie ursprünglich gesucht haben
• 50% der Teilnehmer würden ein Produkt nicht nutzen/kaufen, wenn der mobile Auftritt des Unternehmen „schlecht“ ist
• Folgen: Frustrationen und Ärger bei den Besuchern/Kunden 52% sehen bei einem schlechten mobilen Auftritt auch Auswirkungen auf zukünftige Geschäfte mit dem Unternehmen (Image)48% sind der Meinung, dass solche Unternehmen sich nicht für sie als Kunden interessieren würden
https://www.thinkwithgoogle.com/research-studies/what-users-want-most-from-mobile-sites-today.html
![Page 62: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/62.jpg)
© 121WATT - André Goldmann
Standards: Android Design
http://developer.android.com/design/index.html
![Page 63: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/63.jpg)
© 121WATT - André Goldmann
Standards: iOS Human Interface Guidelines
https://developer.apple.com/library/ios/documentation/userexperience/conceptual/mobilehig/Anatomy.html
![Page 64: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/64.jpg)
© 121WATT - André Goldmann
Standards: iOS Human Interface Guidelines
https://developer.apple.com/library/ios/documentation/userexperience/conceptual/mobilehig/Anatomy.html
![Page 65: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/65.jpg)
© 121WATT - André Goldmann
Webdesign Workflow (früher)Als der Nachbar Websites „programmierte“…
![Page 66: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/66.jpg)
© 121WATT - André Goldmann
Webdesign Workflow (früher)
![Page 67: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/67.jpg)
© 121WATT - André Goldmann
Webdesign Workflow (früher)
• Planung
![Page 68: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/68.jpg)
© 121WATT - André Goldmann
Webdesign Workflow (früher)
• Planung
• Wireframes
![Page 69: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/69.jpg)
© 121WATT - André Goldmann
Webdesign Workflow (früher)
• Planung
• Wireframes
• Design mit Photoshop, Fireworks, „Illustrator“ & Co.
![Page 70: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/70.jpg)
© 121WATT - André Goldmann
Webdesign Workflow (früher)
• Planung
• Wireframes
• Design mit Photoshop, Fireworks, „Illustrator“ & Co.
• Entwicklung der Designs (Pixelgenau für 3 aktuelle Browser und 15 Zoll Röhren)
![Page 71: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/71.jpg)
© 121WATT - André Goldmann
Webdesign Workflow (früher)
• Planung
• Wireframes
• Design mit Photoshop, Fireworks, „Illustrator“ & Co.
• Entwicklung der Designs (Pixelgenau für 3 aktuelle Browser und 15 Zoll Röhren)
• Übergabe an den Kunden oder Server
![Page 72: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/72.jpg)
© 121WATT - André Goldmann
Webdesign Workflow (früher)
• Planung
• Wireframes
• Design mit Photoshop, Fireworks, „Illustrator“ & Co.
• Entwicklung der Designs (Pixelgenau für 3 aktuelle Browser und 15 Zoll Röhren)
• Übergabe an den Kunden oder Server
• Juhu - online
![Page 73: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/73.jpg)
© 121WATT - André Goldmann
Webdesign Workflow (früher)
• Planung
• Wireframes
• Design mit Photoshop, Fireworks, „Illustrator“ & Co.
• Entwicklung der Designs (Pixelgenau für 3 aktuelle Browser und 15 Zoll Röhren)
• Übergabe an den Kunden oder Server
• Juhu - online
• PUNKT
![Page 74: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/74.jpg)
© 121WATT - André Goldmann
RWD WorkflowPunkt 1 - 47…
![Page 75: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/75.jpg)
© 121WATT - André Goldmann
Probleme im Jahr 2014
![Page 76: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/76.jpg)
© 121WATT - André Goldmann
Probleme im Jahr 2014
• Unzählige Displaygrößen und Auflösungen
![Page 77: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/77.jpg)
© 121WATT - André Goldmann
Probleme im Jahr 2014
• Unzählige Displaygrößen und Auflösungen
• Webseiten werden in unterschiedlichen Situationen und Kontexten benutzt
![Page 78: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/78.jpg)
© 121WATT - André Goldmann
Probleme im Jahr 2014
• Unzählige Displaygrößen und Auflösungen
• Webseiten werden in unterschiedlichen Situationen und Kontexten benutzt
• Sehr viele Browser/Betriebssysteme
![Page 79: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/79.jpg)
© 121WATT - André Goldmann
Probleme im Jahr 2014
• Unzählige Displaygrößen und Auflösungen
• Webseiten werden in unterschiedlichen Situationen und Kontexten benutzt
• Sehr viele Browser/Betriebssysteme
• Webseiten sind dynamisch und reagieren auf Nutzerverhalten
![Page 80: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/80.jpg)
© 121WATT - André Goldmann
RWD Workflow
![Page 81: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/81.jpg)
© 121WATT - André Goldmann
RWD Workflow
• Planung
![Page 82: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/82.jpg)
© 121WATT - André Goldmann
RWD Workflow
• Planung
• Inhalte / Seitenarchitektur
![Page 83: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/83.jpg)
© 121WATT - André Goldmann
RWD Workflow
• Planung
• Inhalte / Seitenarchitektur
• Prototyp -> Testing <- Layout (in einer Schleife bis es „rund“ läuft)Gestaltung geschieht im Coding-Prozess & nicht mehr in einer PSD-Datei
![Page 84: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/84.jpg)
© 121WATT - André Goldmann
RWD Workflow
• Planung
• Inhalte / Seitenarchitektur
• Prototyp -> Testing <- Layout (in einer Schleife bis es „rund“ läuft)Gestaltung geschieht im Coding-Prozess & nicht mehr in einer PSD-Datei
• Live -> Optimierungsprozess am User beginnt
![Page 87: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/87.jpg)
© 121WATT - André Goldmann
RWD PerformanceWenn Sekunden zu Stunden werden!
![Page 88: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/88.jpg)
© 121WATT - André Goldmann
X
Warum Ladezeit-Optimierung?
![Page 89: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/89.jpg)
© 121WATT - André Goldmann
X
• Hohe Bouncerate
Warum Ladezeit-Optimierung?
![Page 90: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/90.jpg)
© 121WATT - André Goldmann
X
• Hohe Bouncerate
• schlechte User Experience
Warum Ladezeit-Optimierung?
![Page 91: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/91.jpg)
© 121WATT - André Goldmann
X
• Hohe Bouncerate
• schlechte User Experience
• könnte sich negativ für das Ranking bei Google & Co. auswirken
Warum Ladezeit-Optimierung?
![Page 92: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/92.jpg)
© 121WATT - André Goldmann
X
• Hohe Bouncerate
• schlechte User Experience
• könnte sich negativ für das Ranking bei Google & Co. auswirken
• < 800ms Idealwert - ab ca 1,5 beeinflusst die Ladezeit das Verhalten des Suchmaschinen Crawlers
Warum Ladezeit-Optimierung?
![Page 93: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/93.jpg)
© 121WATT - André Goldmann
X
• Hohe Bouncerate
• schlechte User Experience
• könnte sich negativ für das Ranking bei Google & Co. auswirken
• < 800ms Idealwert - ab ca 1,5 beeinflusst die Ladezeit das Verhalten des Suchmaschinen Crawlers
• Mobile Nutzer sind für jede Optimierung dankbar
Warum Ladezeit-Optimierung?
![Page 94: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/94.jpg)
© 121WATT - André Goldmann
Ladezeit-Optimierung - Tools
51
tools.pingdom.com/fpt/
![Page 95: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/95.jpg)
© 121WATT - André Goldmann
Ladezeit-Optimierung - Tools
52
![Page 96: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/96.jpg)
© 121WATT - André Goldmann
Ladezeit-Optimierung - Tools
X
https://www.google.com/analytics/web/#report/content-site-speed-suggestions/
![Page 97: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/97.jpg)
© 121WATT - André Goldmann
Ladezeit-Optimierung - Tools
53
http://developers.google.com/speed/pagespeed/insights/
![Page 98: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/98.jpg)
© 121WATT - André Goldmann
54
![Page 99: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/99.jpg)
© 121WATT - André Goldmann
55
![Page 100: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/100.jpg)
© 121WATT - André Goldmann
Ladezeit-Optimierung
Server:
56
![Page 101: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/101.jpg)
© 121WATT - André Goldmann
Ladezeit-Optimierung
Server:
• Caching- & Kompression aktivieren
56
![Page 102: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/102.jpg)
© 121WATT - André Goldmann
Ladezeit-Optimierung
Server:
• Caching- & Kompression aktivieren
• HTTP Requests reduzieren
56
![Page 103: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/103.jpg)
© 121WATT - André Goldmann
Ladezeit-Optimierung
Server:
• Caching- & Kompression aktivieren
• HTTP Requests reduzieren
• Weiterleitungen vermeiden & 404 Fehler (bei Bildern, Skripten & Co.) beseitigen
56
![Page 104: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/104.jpg)
© 121WATT - André Goldmann
Ladezeit-Optimierung
Server:
• Caching- & Kompression aktivieren
• HTTP Requests reduzieren
• Weiterleitungen vermeiden & 404 Fehler (bei Bildern, Skripten & Co.) beseitigen
• Weiterleitungsketten auseinandernehmen
56
![Page 105: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/105.jpg)
© 121WATT - André Goldmann
Ladezeit-Optimierung
Server:
• Caching- & Kompression aktivieren
• HTTP Requests reduzieren
• Weiterleitungen vermeiden & 404 Fehler (bei Bildern, Skripten & Co.) beseitigen
• Weiterleitungsketten auseinandernehmen
• Datenbanken optimieren
56
![Page 106: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/106.jpg)
© 121WATT - André Goldmann
Ladezeit-Optimierung
Server:
• Caching- & Kompression aktivieren
• HTTP Requests reduzieren
• Weiterleitungen vermeiden & 404 Fehler (bei Bildern, Skripten & Co.) beseitigen
• Weiterleitungsketten auseinandernehmen
• Datenbanken optimieren
• Keine (externen ) Frames einbauen
56
![Page 107: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/107.jpg)
© 121WATT - André Goldmann
Ladezeit-Optimierung
Server:
• Caching- & Kompression aktivieren
• HTTP Requests reduzieren
• Weiterleitungen vermeiden & 404 Fehler (bei Bildern, Skripten & Co.) beseitigen
• Weiterleitungsketten auseinandernehmen
• Datenbanken optimieren
• Keine (externen ) Frames einbauen
• Fertige Social Widgets (von Facebook & Co.) bitte nicht nutzen
56
![Page 109: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/109.jpg)
© 121WATT - André Goldmann
57
HTML:
• HTML Kommentare entfernen
Ladezeit-Optimierung
![Page 110: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/110.jpg)
© 121WATT - André Goldmann
57
HTML:
• HTML Kommentare entfernen
• HTML Code komprimieren & ungenutztes CSS entfernen
Ladezeit-Optimierung
![Page 111: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/111.jpg)
© 121WATT - André Goldmann
57
HTML:
• HTML Kommentare entfernen
• HTML Code komprimieren & ungenutztes CSS entfernen
• Inline CSS & JS entfernen und in Dateien ausführen (können gecached werden)
Ladezeit-Optimierung
![Page 112: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/112.jpg)
© 121WATT - André Goldmann
57
HTML:
• HTML Kommentare entfernen
• HTML Code komprimieren & ungenutztes CSS entfernen
• Inline CSS & JS entfernen und in Dateien ausführen (können gecached werden)
• CSS: Nicht per @import neue Dateien „nachladen“
Ladezeit-Optimierung
![Page 113: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/113.jpg)
© 121WATT - André Goldmann
57
HTML:
• HTML Kommentare entfernen
• HTML Code komprimieren & ungenutztes CSS entfernen
• Inline CSS & JS entfernen und in Dateien ausführen (können gecached werden)
• CSS: Nicht per @import neue Dateien „nachladen“
• CSS & JavaScript komprimieren und an der richtigen Stelle integrieren (am besten via CDN oder Subdomain)
Ladezeit-Optimierung
![Page 114: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/114.jpg)
© 121WATT - André Goldmann
57
HTML:
• HTML Kommentare entfernen
• HTML Code komprimieren & ungenutztes CSS entfernen
• Inline CSS & JS entfernen und in Dateien ausführen (können gecached werden)
• CSS: Nicht per @import neue Dateien „nachladen“
• CSS & JavaScript komprimieren und an der richtigen Stelle integrieren (am besten via CDN oder Subdomain)
• CSS3 statt Grafiken für Buttons und Co. nutzen (lässt sich auch besser testen ;-))
Ladezeit-Optimierung
![Page 115: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/115.jpg)
© 121WATT - André Goldmann
57
HTML:
• HTML Kommentare entfernen
• HTML Code komprimieren & ungenutztes CSS entfernen
• Inline CSS & JS entfernen und in Dateien ausführen (können gecached werden)
• CSS: Nicht per @import neue Dateien „nachladen“
• CSS & JavaScript komprimieren und an der richtigen Stelle integrieren (am besten via CDN oder Subdomain)
• CSS3 statt Grafiken für Buttons und Co. nutzen (lässt sich auch besser testen ;-))
• headjs.com <— kombiniert JS Dateien und lädt sie automatisch asynchron
Ladezeit-Optimierung
![Page 116: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/116.jpg)
© 121WATT - André Goldmann
57
HTML:
• HTML Kommentare entfernen
• HTML Code komprimieren & ungenutztes CSS entfernen
• Inline CSS & JS entfernen und in Dateien ausführen (können gecached werden)
• CSS: Nicht per @import neue Dateien „nachladen“
• CSS & JavaScript komprimieren und an der richtigen Stelle integrieren (am besten via CDN oder Subdomain)
• CSS3 statt Grafiken für Buttons und Co. nutzen (lässt sich auch besser testen ;-))
• headjs.com <— kombiniert JS Dateien und lädt sie automatisch asynchron
• Inhalte per AJAX nachladen (gerne auch das, was nicht im Sichtbereich der Nutzers ist) <— Lazy Load
Ladezeit-Optimierung
![Page 117: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/117.jpg)
© 121WATT - André Goldmann
X
Ladezeit-Optimierung: InstantClick
http://instantclick.io/
![Page 118: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/118.jpg)
© 121WATT - André Goldmann
X
Ladezeit-Optimierung: InstantClick
http://instantclick.io/
InstantClick tauscht lediglich den <title> und <body> Inhalt einer Website aus
Alle weiteren Elemente sind bereits im Browser-Cache vorhanden und werden genutzt.
![Page 120: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/120.jpg)
© 121WATT - André Goldmann
58
Bilder:
• Bildgrößen und Datei-Formate richtig wählen (.jpg für Fotos/Hintergrundgrafiken; .png oder .gif für Layoutgrafiken)
Ladezeit-Optimierung
![Page 121: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/121.jpg)
© 121WATT - André Goldmann
58
Bilder:
• Bildgrößen und Datei-Formate richtig wählen (.jpg für Fotos/Hintergrundgrafiken; .png oder .gif für Layoutgrafiken)
• Bildqualität reduzieren, EXIF- & Meta-Tags entfernen
Ladezeit-Optimierung
![Page 122: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/122.jpg)
© 121WATT - André Goldmann
58
Bilder:
• Bildgrößen und Datei-Formate richtig wählen (.jpg für Fotos/Hintergrundgrafiken; .png oder .gif für Layoutgrafiken)
• Bildqualität reduzieren, EXIF- & Meta-Tags entfernen
• Icons als Font laden (http://fontawesome.io/, http://fontello.com/)
Ladezeit-Optimierung
![Page 123: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/123.jpg)
© 121WATT - André Goldmann
58
Bilder:
• Bildgrößen und Datei-Formate richtig wählen (.jpg für Fotos/Hintergrundgrafiken; .png oder .gif für Layoutgrafiken)
• Bildqualität reduzieren, EXIF- & Meta-Tags entfernen
• Icons als Font laden (http://fontawesome.io/, http://fontello.com/)
• Responsive Bilder nutzen (http://adaptive-images.com/)
Ladezeit-Optimierung
![Page 124: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/124.jpg)
© 121WATT - André Goldmann
Icons als Fonts ausgeben
http://fontawesome.io/
http://fontello.com/
![Page 125: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/125.jpg)
© 121WATT - André Goldmann
Grafiken für alle Displays/Auflösungen
http://www.imgix.com/
http://adaptive-images.com/
![Page 126: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/126.jpg)
© 121WATT - André Goldmann
Nützliche Quellen
• Sitespeed.iohttp://www.sitespeed.io/
• PageSpeed Insights (by Google)https://chrome.google.com/webstore/detail/pagespeed-insights-by-goo/gplegfbjlmmehdoakndmohflojccocli
• PageSpeed Insights (extern)http://developers.google.com/speed/pagespeed/insights/
• PhantomJShttps://github.com/macbre/phantomas
• Pingdom Toolshttp://tools.pingdom.com/fpt/
• Google Analytics SiteSpeed Datenansicht https://www.google.com/analytics/web/#report/content-site-speed-suggestions/
• Automatische Bildoptimierunghttps://kraken.io/
61
![Page 127: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/127.jpg)
© 121WATT - André Goldmann
<picture>Responsive Bilder für unterschiedliche Anwendungsfälle
![Page 128: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/128.jpg)
© 121WATT - André Goldmann
Probleme bei von skalierten Bildern
![Page 129: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/129.jpg)
© 121WATT - André Goldmann
Probleme bei von skalierten Bildern
• kein Qualitätsverlust
• mehr Datenvolumen beim Nutzer
![Page 130: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/130.jpg)
© 121WATT - André Goldmann
Probleme bei von skalierten Bildern
• kein Qualitätsverlust
• mehr Datenvolumen beim Nutzer
• deutlicher Qualitätsverlust
• weniger Datenvolumen beim Nutzer
![Page 131: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/131.jpg)
© 121WATT - André Goldmann
Lösung: <picture>-Element
Bildquelle: http://www.apple.com/de/
Bildquelle: http://www.apple.com/de/
Picture Element übergibt, passend zum Endgerät/Auflösung die passende Bilddatei aus.
<picture>
<source media="(min-width: 650px)"srcset="images/kitten-stretching.png">
<source media="(min-width: 465px)“ srcset="images/kitten-sitting.png">
<img src="images/kitten-curled.png" alt="a cute kitten">
</picture>
![Page 132: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/132.jpg)
© 121WATT - André Goldmann
Lösung: <picture>-Element
Bildquelle: http://www.apple.com/de/
Bildquelle: http://www.apple.com/de/
Picture Element übergibt, passend zum Endgerät/Auflösung die passende Bilddatei aus.
<picture>
<source media="(min-width: 650px)"srcset="images/kitten-stretching.png">
<source media="(min-width: 465px)“ srcset="images/kitten-sitting.png">
<img src="images/kitten-curled.png" alt="a cute kitten">
</picture>
![Page 133: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/133.jpg)
© 121WATT - André Goldmann
Lösung: <picture>-Element
Bildquelle: http://www.apple.com/de/
Bildquelle: http://www.apple.com/de/
Picture Element übergibt, passend zum Endgerät/Auflösung die passende Bilddatei aus.
<picture>
<source media="(min-width: 650px)"srcset="images/kitten-stretching.png">
<source media="(min-width: 465px)“ srcset="images/kitten-sitting.png">
<img src="images/kitten-curled.png" alt="a cute kitten">
</picture>
![Page 134: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/134.jpg)
© 121WATT - André Goldmann
Einleitung <picture> Element
Durch das <picture> Element sind Entwickler/Designer flexibler im Bereich von:
• Art-Direction-basierte Bildauswahl
• Pixel-Dichten-basierte Bildauswahl
• Viewport-basierte Bildauswahl
• Bild-Dateiformat-basierte Bildauswahl (SVG, WebP)
![Page 135: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/135.jpg)
© 121WATT - André Goldmann
Beispiel: Zalando auf dem Desktop
![Page 136: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/136.jpg)
© 121WATT - André Goldmann
Beispiel: Zalando auf dem Smartphone
![Page 137: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/137.jpg)
© 121WATT - André Goldmann
Beispiel: Zalando auf dem Smartphone
![Page 138: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/138.jpg)
© 121WATT - André Goldmann
Einleitung <picture> Element
Durch das <picture> Element sind Entwickler/Designer flexibler im Bereich von:
• Art-Direction-basierte Bildauswahl
• Pixel-Dichten-basierte Bildauswahl
• Viewport-basierte Bildauswahl
• Bild-Dateiformat-basierte Bildauswahl (SVG, WebP)
![Page 139: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/139.jpg)
© 121WATT - André Goldmann
Pixeldichte-basierte Bildauswahl (Pixeldensity)
Für den Nutzer sichtbar:Bild 100x100 Pixel
für 2fach Pixeldichte (iPhone & Co.):Bild 200x200 Pixel
für 1,5fach Pixeldichte:Bild 150x150 Pixel
Das Bild selbst, wird jedoch immerin 100x100 Pixel per CSS ausgegeben
![Page 140: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/140.jpg)
© 121WATT - André Goldmann
Einleitung <picture> Element
Durch das <picture> Element sind Entwickler/Designer flexibler im Bereich von:
• Art-Direction-basierte Bildauswahl
• Pixel-Dichten-basierte Bildauswahl
• Viewport-basierte Bildauswahl
• Bild-Dateiformat-basierte Bildauswahl (SVG, WebP)
![Page 141: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/141.jpg)
© 121WATT - André Goldmann
Viewport-basierte Bildauswahl
Bild-Quelle: http://www.html5rocks.com/en/tutorials/responsive/picture-element/
![Page 142: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/142.jpg)
© 121WATT - André Goldmann
Einleitung <picture> Element
Durch das <picture> Element sind Entwickler/Designer flexibler im Bereich von:
• Art-Direction-basierte Bildauswahl
• Pixel-Dichten-basierte Bildauswahl
• Viewport-basierte Bildauswahl
• Bild-Dateiformat-basierte Bildauswahl (SVG, WebP)
![Page 143: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/143.jpg)
© 121WATT - André Goldmann
Aktueller Browser-Support (Stand 10/2014)
http://caniuse.com/#search=picture
![Page 144: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/144.jpg)
© 121WATT - André Goldmann
Lösungsansatz: <picture> & Picturefill
• JavaScript Lösung die das src Element im <img> mit dem jeweils definierten Bild
austauscht
• Download unter: http://scottjehl.github.io/picturefill/
![Page 145: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/145.jpg)
© 121WATT - André Goldmann
Aktueller Browser-Support (Stand 10/2014)
http://caniuse.com/#search=picture
![Page 146: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/146.jpg)
© 121WATT - André Goldmann
Aktueller Browser-Support (Stand 10/2014)
http://caniuse.com/#search=picture
![Page 147: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/147.jpg)
© 121WATT - André Goldmann
Wann sollten wir welche Auswahl definieren?
![Page 148: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/148.jpg)
© 121WATT - André Goldmann
Wann sollten wir welche Auswahl definieren?
• Art-Direction-basierte Bildauswahl(Bildausschnitt enorm wichtig, CTA muss sichtbar sein)
![Page 149: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/149.jpg)
© 121WATT - André Goldmann
Wann sollten wir welche Auswahl definieren?
• Art-Direction-basierte Bildauswahl(Bildausschnitt enorm wichtig, CTA muss sichtbar sein)
• Pixel-Dichten-basierte Bildauswahl(Zielgruppe ist im High-Resolution Bereich)
![Page 150: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/150.jpg)
© 121WATT - André Goldmann
Wann sollten wir welche Auswahl definieren?
• Art-Direction-basierte Bildauswahl(Bildausschnitt enorm wichtig, CTA muss sichtbar sein)
• Pixel-Dichten-basierte Bildauswahl(Zielgruppe ist im High-Resolution Bereich)
• Viewport-basierte Bildauswahl(Usergenerated Content, Performance, automatische Prozesse)
![Page 151: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/151.jpg)
© 121WATT - André Goldmann
Wann sollten wir welche Auswahl definieren?
• Art-Direction-basierte Bildauswahl(Bildausschnitt enorm wichtig, CTA muss sichtbar sein)
• Pixel-Dichten-basierte Bildauswahl(Zielgruppe ist im High-Resolution Bereich)
• Viewport-basierte Bildauswahl(Usergenerated Content, Performance, automatische Prozesse)
• Bild-Dateiformat-basierte Bildauswahl (SVG, WebP)(sollte eher über andere Lösungen geregelt werden. Fallbacks sind in der Regel eh vorhanden bzw. es wird bereits der beste Format genutzt)
![Page 152: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/152.jpg)
© 121WATT - André Goldmann
Auswirkungen
![Page 153: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/153.jpg)
© 121WATT - André Goldmann
Responsive FormulareAuch hier kann man vieles falsch machen.
![Page 154: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/154.jpg)
© 121WATT - André Goldmann
Regeln für responsive (mobile) Formulare
![Page 155: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/155.jpg)
© 121WATT - André Goldmann
Regeln für responsive (mobile) Formulare
Keine wiederholenden Felder & Aktionen (Passwort wiederholen, E-Mail Adresse verifizieren)
![Page 156: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/156.jpg)
© 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.)
![Page 157: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/157.jpg)
© 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)
![Page 158: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/158.jpg)
© 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)
![Page 159: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/159.jpg)
© 121WATT - André Goldmann
HTML5 und Formulare
![Page 160: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/160.jpg)
© 121WATT - André Goldmann
HTML5 und Formulare
Formulare auf dem Desktop machen in der Regel keinen Spaß - aber man muss ja…
![Page 161: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/161.jpg)
© 121WATT - André Goldmann
HTML5 und Formulare
Formulare auf dem Desktop machen in der Regel keinen Spaß - aber man muss ja…
Status Quo „Mobile Formulare“: Kleineres Display, Keyboard verdeckt Inhalte, schlechtere Internetverbindung.
![Page 162: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/162.jpg)
© 121WATT - André Goldmann
HTML5 und Formulare
Formulare auf dem Desktop machen in der Regel keinen Spaß - aber man muss ja…
Status Quo „Mobile Formulare“: Kleineres Display, Keyboard verdeckt Inhalte, schlechtere Internetverbindung.
HTML5 macht es uns durch neue Input Types und Attribute möglich, die Nutzererfahrung von Formularen zu verbessern!
![Page 163: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/163.jpg)
© 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>
![Page 164: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/164.jpg)
© 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>
![Page 165: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/165.jpg)
© 121WATT - André Goldmann
Input Typen von HTML5: number
Beispiel-Code:
<form>
<input type="number" name="number">
</form>
![Page 166: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/166.jpg)
© 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>
![Page 167: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/167.jpg)
© 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>
![Page 168: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/168.jpg)
© 121WATT - André Goldmann
Input Typen von HTML5: datetime-local
Zur Eingabe von Datum- & Zeitangaben.
Beispiel-Code:
<form>
<input type="datetime-local" name="bdaytime">
</form>
![Page 169: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/169.jpg)
© 121WATT - André Goldmann
Input Typen von HTML5: color
Zur Eingabe von Farbwerten.
Beispiel-Code:
<form>
<input type="color" name="favcolor">
</form>
![Page 170: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/170.jpg)
© 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
![Page 171: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/171.jpg)
© 121WATT - André Goldmann
Adressen in Formularen
![Page 172: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/172.jpg)
© 121WATT - André Goldmann
Adressen in Formularen
![Page 173: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/173.jpg)
© 121WATT - André Goldmann
Adressen in Formularen
![Page 174: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/174.jpg)
© 121WATT - André Goldmann
Formulare auf Autopilot
https://www.deutschepost.de/de/d/deutsche-post-direkt/datafactory.html
![Page 175: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/175.jpg)
© 121WATT - André Goldmann
Formular-Validierung
![Page 176: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/176.jpg)
© 121WATT - André Goldmann
„normale“ Validierung nach dem Abschicken
https://www.youtube.com/watch?v=FWDDRG93puY
![Page 177: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/177.jpg)
© 121WATT - André Goldmann
Real-Time Validierung VOR dem Abschicken
https://www.youtube.com/watch?v=hlU74LIPauo
![Page 178: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/178.jpg)
© 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-Time Validierung komplett ausgefüllt haben und die Dauer um 42% reduziert
werden konnte
![Page 179: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/179.jpg)
© 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:
![Page 180: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/180.jpg)
© 121WATT - André Goldmann
Responsive Testing
Bildquelle: http://www.elezea.com/2013/11/rwd-content-modules/
![Page 181: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/181.jpg)
© 121WATT - André Goldmann
Responsive Testing
Bildquelle: http://www.elezea.com/2013/11/rwd-content-modules/
![Page 182: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/182.jpg)
© 121WATT - André Goldmann
http://alphapixels.com/prepros/
Prepros App (Mac OS, Windows + alle Smartphones)
![Page 183: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/183.jpg)
© 121WATT - André Goldmann
http://incident57.com/codekit/
CodeKit (Mac OS + alle Smartphones)
![Page 184: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/184.jpg)
© 121WATT - André Goldmann
Wireframe Testing: Balsamiq (Windows, Linux, Mac OS)
https://balsamiq.com/
![Page 185: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/185.jpg)
© 121WATT - André Goldmann
Wireframe Testing: JUSTINMIND (Windows, Linux, Mac OS)
http://www.justinmind.com/
![Page 186: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/186.jpg)
© 121WATT - André Goldmann
https://creative.adobe.com/de/products/reflow
Adobe Edge Reflow (Windows, Mac OS)
![Page 188: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/188.jpg)
© 121WATT - André Goldmann
Google Chrome Browser
![Page 189: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/189.jpg)
© 121WATT - André Goldmann
Google Chrome Browser
![Page 190: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/190.jpg)
© 121WATT - André Goldmann
Google Chrome Browser
![Page 191: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/191.jpg)
© 121WATT - André Goldmann
Google Chrome Browser
![Page 192: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/192.jpg)
© 121WATT - André Goldmann
Google Chrome Browser
![Page 193: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/193.jpg)
© 121WATT - André Goldmann
Firefox
![Page 194: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/194.jpg)
© 121WATT - André Goldmann
http://lab.maltewassermann.com/viewport-resizer/
Viewport Resizer - Breakpoint Tester
![Page 195: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/195.jpg)
© 121WATT - André Goldmann
http://lab.maltewassermann.com/viewport-resizer/
Viewport Resizer - Breakpoint Tester
![Page 196: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/196.jpg)
© 121WATT - André Goldmann
responsive.is
http://responsive.is/
![Page 197: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/197.jpg)
© 121WATT - André Goldmann
responsive.is
http://responsive.is/
![Page 198: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/198.jpg)
© 121WATT - André Goldmann
responsive.is
http://responsive.is/
![Page 199: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/199.jpg)
© 121WATT - André Goldmann
Smartphone Simulatoren
iOS Simulatorhttps://developer.apple.com/library/ios/documentation/IDEs/Conceptual/iOS_Simulator_Guide/Introduction/Introduction.html
Android Simulatorhttp://developer.android.com/tools/devices/emulator.html
Windows Phone Simulatorhttp://msdn.microsoft.com/library/windows/apps/ff402563(v=vs.105).aspx
Opera Mini Simulatorhttps://dev.opera.com/articles/installing-opera-mini-on-your-computer/
Firefox OS Simulatorhttps://developer.mozilla.org/en-US/docs/Tools/Firefox_OS_1.1_Simulator
![Page 200: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/200.jpg)
© 121WATT - André Goldmann
Smartphone Simulatoren
iOS Simulatorhttps://developer.apple.com/library/ios/documentation/IDEs/Conceptual/iOS_Simulator_Guide/Introduction/Introduction.html
Android Simulatorhttp://developer.android.com/tools/devices/emulator.html
Windows Phone Simulatorhttp://msdn.microsoft.com/library/windows/apps/ff402563(v=vs.105).aspx
Opera Mini Simulatorhttps://dev.opera.com/articles/installing-opera-mini-on-your-computer/
Firefox OS Simulatorhttps://developer.mozilla.org/en-US/docs/Tools/Firefox_OS_1.1_Simulator
kein Touch
![Page 201: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/201.jpg)
© 121WATT - André Goldmann
Smartphone Simulatoren
iOS Simulatorhttps://developer.apple.com/library/ios/documentation/IDEs/Conceptual/iOS_Simulator_Guide/Introduction/Introduction.html
Android Simulatorhttp://developer.android.com/tools/devices/emulator.html
Windows Phone Simulatorhttp://msdn.microsoft.com/library/windows/apps/ff402563(v=vs.105).aspx
Opera Mini Simulatorhttps://dev.opera.com/articles/installing-opera-mini-on-your-computer/
Firefox OS Simulatorhttps://developer.mozilla.org/en-US/docs/Tools/Firefox_OS_1.1_Simulator
kein Touchkein Mobilfunknetz
![Page 202: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/202.jpg)
© 121WATT - André Goldmann
Smartphone Simulatoren
iOS Simulatorhttps://developer.apple.com/library/ios/documentation/IDEs/Conceptual/iOS_Simulator_Guide/Introduction/Introduction.html
Android Simulatorhttp://developer.android.com/tools/devices/emulator.html
Windows Phone Simulatorhttp://msdn.microsoft.com/library/windows/apps/ff402563(v=vs.105).aspx
Opera Mini Simulatorhttps://dev.opera.com/articles/installing-opera-mini-on-your-computer/
Firefox OS Simulatorhttps://developer.mozilla.org/en-US/docs/Tools/Firefox_OS_1.1_Simulator
kein Touchkein Mobilfunknetzkeine CPU vom Device
![Page 203: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/203.jpg)
© 121WATT - André Goldmann
Smartphone Simulatoren
iOS Simulatorhttps://developer.apple.com/library/ios/documentation/IDEs/Conceptual/iOS_Simulator_Guide/Introduction/Introduction.html
Android Simulatorhttp://developer.android.com/tools/devices/emulator.html
Windows Phone Simulatorhttp://msdn.microsoft.com/library/windows/apps/ff402563(v=vs.105).aspx
Opera Mini Simulatorhttps://dev.opera.com/articles/installing-opera-mini-on-your-computer/
Firefox OS Simulatorhttps://developer.mozilla.org/en-US/docs/Tools/Firefox_OS_1.1_Simulator
kein Touchkein Mobilfunknetzkeine CPU vom Deviceandere Auflösungen/Pixeldichte
![Page 204: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/204.jpg)
© 121WATT - André Goldmann
Smartphone Simulatoren
iOS Simulatorhttps://developer.apple.com/library/ios/documentation/IDEs/Conceptual/iOS_Simulator_Guide/Introduction/Introduction.html
Android Simulatorhttp://developer.android.com/tools/devices/emulator.html
Windows Phone Simulatorhttp://msdn.microsoft.com/library/windows/apps/ff402563(v=vs.105).aspx
Opera Mini Simulatorhttps://dev.opera.com/articles/installing-opera-mini-on-your-computer/
Firefox OS Simulatorhttps://developer.mozilla.org/en-US/docs/Tools/Firefox_OS_1.1_Simulator
kein Touchkein Mobilfunknetzkeine CPU vom Deviceandere Auflösungen/PixeldichteBetrachtungsabstand
![Page 205: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/205.jpg)
© 121WATT - André Goldmann
Smartphone Simulatoren
iOS Simulatorhttps://developer.apple.com/library/ios/documentation/IDEs/Conceptual/iOS_Simulator_Guide/Introduction/Introduction.html
Android Simulatorhttp://developer.android.com/tools/devices/emulator.html
Windows Phone Simulatorhttp://msdn.microsoft.com/library/windows/apps/ff402563(v=vs.105).aspx
Opera Mini Simulatorhttps://dev.opera.com/articles/installing-opera-mini-on-your-computer/
Firefox OS Simulatorhttps://developer.mozilla.org/en-US/docs/Tools/Firefox_OS_1.1_Simulator
kein Touchkein Mobilfunknetzkeine CPU vom Deviceandere Auflösungen/PixeldichteBetrachtungsabstandFehlerhafte Feature-Detection
![Page 206: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/206.jpg)
© 121WATT - André Goldmann
Network Link Conditioner (Mac OS, iOS)
http://nshipster.com/network-link-conditioner/
![Page 208: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/208.jpg)
© 121WATT - André Goldmann
https://creative.adobe.com/de/products/inspect
Adobe Edge Inspect (Windows, Mac OS, Android, iOS, Windowsphone & Amazon Kindle Fire)
![Page 209: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/209.jpg)
© 121WATT - André Goldmann
Ghostlab
http://vanamco.com/ghostlab/
Bild Quelle: http://www.html5rocks.com/en/tutorials/tooling/synchronized-cross-device-testing/
![Page 210: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/210.jpg)
© 121WATT - André Goldmann
Ghostlab
http://vanamco.com/ghostlab/
Bild Quelle: http://www.html5rocks.com/en/tutorials/tooling/synchronized-cross-device-testing/
![Page 211: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/211.jpg)
© 121WATT - André Goldmann
UX Recorder für iOS
http://www.uxrecorder.com/
![Page 212: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/212.jpg)
© 121WATT - André Goldmann
Silverback App für Mac OS X (Usability Testing)
http://silverbackapp.com/
![Page 213: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/213.jpg)
© 121WATT - André Goldmann
Image Testing: Skala Preview (Mac OS, iOS, Android)
http://bjango.com/mac/skalapreview/
![Page 215: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/215.jpg)
© 121WATT - André Goldmann
Mobile-Website Conversion Testing
https://www.clicktale.com/
http://www.crazyegg.com/
http://visualwebsiteoptimizer.com/
https://www.optimizely.com/
http://mouseflow.com/
![Page 216: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/216.jpg)
© 121WATT - André Goldmann
Performance-Tool: Pingdom
120
tools.pingdom.com/fpt/
![Page 217: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/217.jpg)
© 121WATT - André Goldmann
Bonus: Responsive Produkte
![Page 218: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/218.jpg)
© 121WATT - André Goldmann
Ist mein Produkt mobil nicht verfügbar?
![Page 219: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/219.jpg)
© 121WATT - André Goldmann
Ist mein Produkt mobil nicht verfügbar?
![Page 220: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/220.jpg)
© 121WATT - André Goldmann
Mobile Konversion macht mobil keinen Sinn?
![Page 221: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/221.jpg)
© 121WATT - André Goldmann
Mobile Konversion macht mobil keinen Sinn?
![Page 222: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/222.jpg)
© 121WATT - André Goldmann
Ziel von RWD
124
Was Nutzer wollen
Unser Ziel
![Page 223: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/223.jpg)
© 121WATT - André Goldmann
Ziel von RWD
124
Was Nutzer wollen
Unser Ziel
![Page 224: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/224.jpg)
© 121WATT - André Goldmann
Ziel von RWD
124
Was Nutzer wollen
Unser Ziel
Ziel von RWD ist eine hohe Schnittmengeauf beiden Seiten (Nutzer/Anbieter)
![Page 225: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/225.jpg)
© 121WATT - André Goldmann
Mit welcher Hand nutzen Sie Ihr Smartphone?
…bitte mal Arm hoch.
![Page 226: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/226.jpg)
© 121WATT - André Goldmann
126
![Page 227: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/227.jpg)
© 121WATT - André Goldmann
126
![Page 228: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/228.jpg)
© 121WATT - André Goldmann
126
![Page 229: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/229.jpg)
© 121WATT - André Goldmann
Zeit für eine Studie
http://www.uxmatters.com/mt/archives/2013/02/how-do-users-really-hold-mobile-devices.php
![Page 230: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/230.jpg)
© 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-HandGehalten; Ein-HandZwei-Händig
![Page 231: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/231.jpg)
© 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-HandGehalten; Ein-HandZwei-Händig
49 %
![Page 232: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/232.jpg)
© 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-HandGehalten; Ein-HandZwei-Händig
36 %
49 %
![Page 233: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/233.jpg)
© 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-HandGehalten; Ein-HandZwei-Händig
15 %
36 %
49 %
![Page 234: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/234.jpg)
© 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
![Page 235: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/235.jpg)
© 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
![Page 236: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/236.jpg)
© 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
![Page 237: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/237.jpg)
© 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
![Page 238: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/238.jpg)
© 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
![Page 239: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/239.jpg)
© 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
![Page 240: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/240.jpg)
© 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
![Page 241: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/241.jpg)
© 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
![Page 242: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/242.jpg)
© 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
![Page 243: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/243.jpg)
© 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
![Page 244: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/244.jpg)
© 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
![Page 245: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/245.jpg)
© 121WATT - André Goldmann
131
Anmelden & genauere Ergebnisse
![Page 246: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/246.jpg)
© 121WATT - André Goldmann
Ergebnis: Webdesign kann nicht überall gleich aussehen und funktionieren.
![Page 247: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/247.jpg)
© 121WATT - André Goldmann
Lohnt sich die Optimierung für Mobile und brauche ich RWD?
![Page 248: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/248.jpg)
© 121WATT - André Goldmann
https://www.google.com/analytics/web/#report/visitors-mobile-overview/
![Page 249: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/249.jpg)
© 121WATT - André Goldmann
Schlechte Beispiele…die man besser nicht wiederholt.
![Page 250: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/250.jpg)
© 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.
![Page 251: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/251.jpg)
© 121WATT - André Goldmann
Mobile Fails
![Page 252: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/252.jpg)
© 121WATT - André Goldmann
Mobile Fails
![Page 253: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/253.jpg)
© 121WATT - André Goldmann
Mobile Fails
Ist hier der Platz zum scrollen und für die Inhalte ausreichen?
![Page 254: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/254.jpg)
© 121WATT - André Goldmann
Mobile Fails
Zu viel Inhalt der keinen Fokus zulässt
![Page 255: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/255.jpg)
© 121WATT - André Goldmann
Mobile Fails
Zu viel Inhalt der keinen Fokus zulässt
![Page 256: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/256.jpg)
© 121WATT - André Goldmann
Mobile Fails
CSS: position:absolute
![Page 257: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/257.jpg)
© 121WATT - André Goldmann
Mobile Fails
Wer versteht das?
![Page 258: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/258.jpg)
© 121WATT - André Goldmann
Mobile Fails
Ob ich Inhalte die ich nicht vollständig lesen kann, wirklich teilen möchte?
![Page 259: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/259.jpg)
© 121WATT - André Goldmann
Mobile Fails
Mehr „Bars“ haben leider nicht ins Layout gepasst ^^
![Page 260: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/260.jpg)
© 121WATT - André Goldmann
Mobile Fails
Mehr „Bars“ haben leider nicht ins Layout gepasst ^^
![Page 261: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/261.jpg)
© 121WATT - André Goldmann
Mobile Fails
Schon einmal etwas von einer Weiterleitung gehört?
![Page 262: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/262.jpg)
© 121WATT - André Goldmann
Mobile Fails
Ok = Yes Cancel = No
![Page 263: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/263.jpg)
© 121WATT - André Goldmann
Jetzt wird’s teuer.
![Page 264: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/264.jpg)
© 121WATT - André Goldmann
![Page 265: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/265.jpg)
© 121WATT - André Goldmann
Mobile Fails
![Page 266: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/266.jpg)
© 121WATT - André Goldmann
Mobile Fails
![Page 267: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/267.jpg)
© 121WATT - André Goldmann
Mobile Fails
![Page 268: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/268.jpg)
© 121WATT - André Goldmann
Mobile Fails
![Page 269: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/269.jpg)
© 121WATT - André Goldmann
Mobile Fails
![Page 270: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/270.jpg)
© 121WATT - André Goldmann
Mobile Fails
![Page 271: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/271.jpg)
© 121WATT - André Goldmann
Besuchen Sie eigene Websites regelmässig!
![Page 272: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/272.jpg)
© 121WATT - André Goldmann
Besuchen Sie
MIT DEM SMARTPHONE!
![Page 273: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/273.jpg)
© 121WATT - André Goldmann
Fail 1 - Forgetting the mobile userhttp://www.webdesign.org/web-design-fails.22423.html
https://www.google.com/glass/start/
![Page 274: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/274.jpg)
© 121WATT - André Goldmann
Fail 1 - Forgetting the mobile userhttp://www.webdesign.org/web-design-fails.22423.html
https://www.google.com/glass/start/
![Page 275: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/275.jpg)
© 121WATT - André Goldmann
André [email protected]@pixeldreher
Xing: https://www.xing.com/profile/Andre_Goldmann4
121WATTLuise-Ullrich-Str. 20 80636 München
Tel.: 089 / 416 126 993
@121WATTT | [email protected]
![Page 276: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/276.jpg)
© 121WATT - André Goldmann
http://www.abookapart.com/products/responsive-web-design
Buch-Tipp
![Page 277: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/277.jpg)
© 121WATT - André Goldmann
http://www.abookapart.com/products/mobile-first
Buch-Tipp
![Page 278: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/278.jpg)
© 121WATT - André Goldmann
http://www.abookapart.com/products/content-strategy-for-mobile
Buch-Tipp
![Page 279: Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014](https://reader036.vdocuments.pub/reader036/viewer/2022062710/559b63791a28ab1f258b45e8/html5/thumbnails/279.jpg)
© 121WATT - André Goldmann
http://www.abookapart.com/products/designing-for-emotion
Buch-Tipp