Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014

© 121WATT - André Goldmann

Achtung Falle!Fehler bei Mobile- und Responsive-Webdesign (RWD) vermeiden

Berlin, 04.11. - 05.11.2014


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]


Ich arbeitete unter anderem für diese Kunden


Privates Projekt

4


Privates Projekt

4

> 374.000 Besucher


Privates Projekt

4

> 374.000 Besucher

> 3.126.000 Seitenaufrufe


Privates Projekt

4

> 374.000 Besucher


> 1 TB Traffic im Monat


Privates Projekt

4

> 374.000 Besucher


> 1 TB Traffic im Monat80% Mobile-Traffic


Privates Projekt

Seit März 2014 mit Apps für Android & iOS


Konvertiert „mobile“ nicht?… oder kommt es auf meine Zielgruppe & den Kontext an?


Kurze Fragerunde…


Fragerunde…

Wer hat schon ein Bahnticket mit dem Handy gekauft?


Fragerunde…

Schon mal Pizza, Döner oder Nudeln per App bestellt und bezahlt?


Fragerunde…

Günstige Produkte, Angebote oder Schnäppchen mit dem Handy bestellt?


Fragerunde…

Versicherung mit dem Handy abgeschlossen?


Fragerunde…

Reise oder Kurzurlaub mit dem Smartphone gebucht?


Fragerunde…

Produkte über 1.000,- € per Smartphone bestellt?


Fragerunde…

Ticket für die ConversionConference mit dem Handy geordert?


Fragerunde…

Ein Tool oder eine berufliche Dienstleistung per Smartphone gebucht?


Jetzt nochmal im Kontext


Fragerunde…

Wer hat schon ein Bahnticket mit dem Handy gekauft?

Unterwegs, schnell und privat


Fragerunde…

Schon mal Pizza, Döner oder Nudeln per App bestellt und bezahlt?

Praktisch, schnell & „Alltagsproblemlöser“


Fragerunde…

Günstige Produkte, Angebote oder Schnäppchen mit dem Handy bestellt?

Schnelligkeit, keine Gefahr & privat


Fragerunde…

Versicherung mit dem Handy abgeschlossen?

Mit Ruhe und Bedacht, komplex & leseintensiv


Fragerunde…

Reise oder Kurzurlaub mit dem Smartphone gebucht?

Preisvergleich, Visuell & keine einseitige Entscheidung


Fragerunde…

Produkte über 1.000,- € per Smartphone bestellt?

Vertrauen, „mal eben 1.000,- €“


Fragerunde…

Ticket für die ConversionConference mit dem Handy geordert?

Business, man sitzt eh vor dem Desktop, genug Zeit


Fragerunde…

Ein Tool oder eine berufliche Dienstleistung per Smartphone gebucht?

Vergleich, Desktop-Tools, Auswahl, nicht-mobil Verfügbar


Wie ging das alles eigentlich los?Können wir eigentlich Desktop mit „Mobile“ vergleichen?


1993 - Kommerzielle Durchbruch

Bild Quelle: http://www.computerhistory.org/

http://www.computerhistory.org/


1999 - bin ich da schon drin’ oder was?

Bild Quelle: http://www.spiegel.de/

http://www.spiegel.de/


90er - 2007.

Bild Quelle: https://www.youtube.com/

https://www.youtube.com/


2007.

Bild Quelle: http://www.chip.de/

http://www.chip.de/


Die Entwicklung des mobilen Internets





Mosaic

1993



Mosaic

1993

ISDN in DEU

1995



Mosaic

1993

ISDN in DEU

1995

Boris’ ;)

1999



Mosaic

1993

ISDN in DEU

1995

Boris’ ;)

1999

The iPhone

2007



Mosaic

1993

ISDN in DEU

1995

Boris’ ;)

1999

The iPhone

2007

RWD erstmalserwähnt

05/2010



Mosaic

1993

ISDN in DEU

1995

Boris’ ;)

1999

The iPhone

2007


05/2010

Erste RWDin DEU

seit 2011



Mosaic

1993

ISDN in DEU

1995

Boris’ ;)

1999

The iPhone

2007


05/2010

Erste RWDin DEU

seit 2011



Mosaic

1993

ISDN in DEU

1995

Boris’ ;)

1999

The iPhone

2007


05/2010

Erste RWDin DEU

seit 2011

m.website.de vs. native Apps



Mosaic

1993

ISDN in DEU

1995

Boris’ ;)

1999

The iPhone

2007


05/2010

Erste RWDin DEU

seit 2011


Tablet-PCs…



Mosaic

1993

ISDN in DEU

1995

Boris’ ;)

1999

The iPhone

2007


05/2010

Erste RWDin DEU

seit 2011


Tablet-PCs…

18 Jahre vs. 3 Jahre

Gleicher Inhalt & Code


Das Umdenken der Anwenderkann schnell beginnen.

Zeit für RWD ;)

Bild Quelle: http://www.apple.com/iphone-6/apple-pay/


Was ist anders bei RWD?Workflows & Ansätze


ALLES


Flexibles Layout

Bildquelle: http://www.apple.com/de/

http://www.apple.com/de/


Flexibles Layout

Bildquelle: http://www.apple.com/de

http://www.apple.com/de/imac/


Flexibles Layout




Flexibles Layout




Flexibles Layout




Flexibles Layout


Auflösung von

5120 x 2880 Pixel



Was erwarten Besucher?


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






• 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

https://www.thinkwithgoogle.com/research-studies/what-users-want-most-from-mobile-sites-today.html


Standards: Android Design

http://developer.android.com/design/index.html

http://developer.android.com/design/index.html


Standards: iOS Human Interface Guidelines

https://developer.apple.com/library/ios/documentation/userexperience/conceptual/mobilehig/Anatomy.html



Standards: iOS Human Interface Guidelines




Webdesign Workflow (früher)Als der Nachbar Websites „programmierte“…


Webdesign Workflow (früher)



• Planung



• Planung

• Wireframes



• Planung

• Wireframes

• Design mit Photoshop, Fireworks, „Illustrator“ & Co.



• Planung

• Wireframes


• Entwicklung der Designs (Pixelgenau für 3 aktuelle Browser und 15 Zoll Röhren)



• Planung

• Wireframes



• Übergabe an den Kunden oder Server



• Planung

• Wireframes




• Juhu - online



• Planung

• Wireframes




• Juhu - online

• PUNKT


RWD WorkflowPunkt 1 - 47…


Probleme im Jahr 2014



• Unzählige Displaygrößen und Auflösungen




• Webseiten werden in unterschiedlichen Situationen und Kontexten benutzt





• Sehr viele Browser/Betriebssysteme





• Sehr viele Browser/Betriebssysteme

• Webseiten sind dynamisch und reagieren auf Nutzerverhalten


RWD Workflow


RWD Workflow

• Planung


RWD Workflow

• Planung

• Inhalte / Seitenarchitektur


RWD Workflow

• Planung


• Prototyp -> Testing <- Layout (in einer Schleife bis es „rund“ läuft)Gestaltung geschieht im Coding-Prozess & nicht mehr in einer PSD-Datei


RWD Workflow

• Planung


• 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


Styletil.es

http://styletil.es/

http://styletil.es/


styletil.es Beispiel

http://styletil.es/

http://styletil.es/


RWD PerformanceWenn Sekunden zu Stunden werden!


X

Warum Ladezeit-Optimierung?


X

• Hohe Bouncerate



X

• Hohe Bouncerate

• schlechte User Experience



X

• Hohe Bouncerate


• könnte sich negativ für das Ranking bei Google & Co. auswirken



X

• Hohe Bouncerate



• < 800ms Idealwert - ab ca 1,5 beeinflusst die Ladezeit das Verhalten des Suchmaschinen Crawlers



X

• Hohe Bouncerate



• < 800ms Idealwert - ab ca 1,5 beeinflusst die Ladezeit das Verhalten des Suchmaschinen Crawlers

• Mobile Nutzer sind für jede Optimierung dankbar



Ladezeit-Optimierung - Tools

51

tools.pingdom.com/fpt/



52



X

https://www.google.com/analytics/web/#report/content-site-speed-suggestions/



53

http://developers.google.com/speed/pagespeed/insights/


54


55


Ladezeit-Optimierung

Server:

56



Server:

• Caching- & Kompression aktivieren

56



Server:


• HTTP Requests reduzieren

56



Server:



• Weiterleitungen vermeiden & 404 Fehler (bei Bildern, Skripten & Co.) beseitigen

56



Server:




• Weiterleitungsketten auseinandernehmen

56



Server:





• Datenbanken optimieren

56



Server:






• Keine (externen ) Frames einbauen

56



Server:






• Keine (externen ) Frames einbauen

• Fertige Social Widgets (von Facebook & Co.) bitte nicht nutzen

56


57

HTML:


http://headjs.com


57

HTML:

• HTML Kommentare entfernen


http://headjs.com


57

HTML:


• HTML Code komprimieren & ungenutztes CSS entfernen


http://headjs.com


57

HTML:



• Inline CSS & JS entfernen und in Dateien ausführen (können gecached werden)


http://headjs.com


57

HTML:




• CSS: Nicht per @import neue Dateien „nachladen“


http://headjs.com


57

HTML:





• CSS & JavaScript komprimieren und an der richtigen Stelle integrieren (am besten via CDN oder Subdomain)


http://headjs.com


57

HTML:






• CSS3 statt Grafiken für Buttons und Co. nutzen (lässt sich auch besser testen ;-))


http://headjs.com


57

HTML:







• headjs.com <— kombiniert JS Dateien und lädt sie automatisch asynchron


http://headjs.com


57

HTML:







• 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


http://headjs.com


X

Ladezeit-Optimierung: InstantClick

http://instantclick.io/


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.


58

Bilder:


http://adaptive-images.com/


58

Bilder:

• Bildgrößen und Datei-Formate richtig wählen (.jpg für Fotos/Hintergrundgrafiken; .png oder .gif für Layoutgrafiken)




58

Bilder:


• Bildqualität reduzieren, EXIF- & Meta-Tags entfernen




58

Bilder:



• Icons als Font laden (http://fontawesome.io/, http://fontello.com/)




58

Bilder:



• Icons als Font laden (http://fontawesome.io/, http://fontello.com/)

• Responsive Bilder nutzen (http://adaptive-images.com/)




Icons als Fonts ausgeben

http://fontawesome.io/

http://fontello.com/

http://www.imgix.com/

http://fontello.com/


Grafiken für alle Displays/Auflösungen






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

http://www.sitespeed.io/

https://chrome.google.com/webstore/detail/pagespeed-insights-by-goo/gplegfbjlmmehdoakndmohflojccocli

http://developers.google.com/speed/pagespeed/insights/

https://github.com/macbre/phantomas

http://tools.pingdom.com/fpt/

https://www.google.com/analytics/web/#report/content-site-speed-suggestions/

https://kraken.io/


<picture>Responsive Bilder für unterschiedliche Anwendungsfälle


Probleme bei von skalierten Bildern



• kein Qualitätsverlust

• mehr Datenvolumen beim Nutzer



• kein Qualitätsverlust

• mehr Datenvolumen beim Nutzer

• deutlicher Qualitätsverlust

• weniger Datenvolumen beim Nutzer


Lösung: <picture>-Element



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>








<picture>




</picture>








<picture>




</picture>




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)


Beispiel: Zalando auf dem Desktop


Beispiel: Zalando auf dem Smartphone


Beispiel: Zalando auf dem Smartphone









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









Viewport-basierte Bildauswahl

Bild-Quelle: http://www.html5rocks.com/en/tutorials/responsive/picture-element/

http://www.html5rocks.com/en/tutorials/responsive/picture-element/









Aktueller Browser-Support (Stand 10/2014)

http://caniuse.com/#search=picture



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/

http://scottjehl.github.io/picturefill/










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)





• 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)


Auswirkungen


Responsive FormulareAuch hier kann man vieles falsch machen.


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)





„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)


HTML5 und Formulare


HTML5 und Formulare

Formulare auf dem Desktop machen in der Regel keinen Spaß - aber man muss ja…


HTML5 und Formulare


Status Quo „Mobile Formulare“: Kleineres Display, Keyboard verdeckt Inhalte, schlechtere Internetverbindung.


HTML5 und Formulare


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!


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>


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>


Input Typen von HTML5: number

Beispiel-Code:

<form>

<input type="number" name="number">

</form>


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>


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>


Input Typen von HTML5: datetime-local

Zur Eingabe von Datum- & Zeitangaben.

Beispiel-Code:

<form>

<input type="datetime-local" name="bdaytime">

</form>


Input Typen von HTML5: color

Zur Eingabe von Farbwerten.

Beispiel-Code:

<form>

<input type="color" name="favcolor">

</form>


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

https://developers.google.com/web/fundamentals/input/form/label-and-name-inputs#use-metadata-to-enable-auto-complete


Adressen in Formularen






Formulare auf Autopilot

https://www.deutschepost.de/de/d/deutsche-post-direkt/datafactory.html

https://www.deutschepost.de/de/d/deutsche-post-direkt/datafactory.html


Formular-Validierung


„normale“ Validierung nach dem Abschicken

https://www.youtube.com/watch?v=FWDDRG93puY

https://www.youtube.com/watch?v=FWDDRG93puY


Real-Time Validierung VOR dem Abschicken

https://www.youtube.com/watch?v=hlU74LIPauo

https://www.youtube.com/watch?v=hlU74LIPauo


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

http://alistapart.com/article/inline-validation-in-web-forms


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:


Responsive Testing

Bildquelle: http://www.elezea.com/2013/11/rwd-content-modules/

http://www.elezea.com/2013/11/rwd-content-modules/


Responsive Testing

Bildquelle: http://www.elezea.com/2013/11/rwd-content-modules/

http://www.elezea.com/2013/11/rwd-content-modules/


http://alphapixels.com/prepros/

Prepros App (Mac OS, Windows + alle Smartphones)

http://alphapixels.com/prepros/


http://incident57.com/codekit/

CodeKit (Mac OS + alle Smartphones)

http://incident57.com/codekit/


Wireframe Testing: Balsamiq (Windows, Linux, Mac OS)

https://balsamiq.com/

https://balsamiq.com/


Wireframe Testing: JUSTINMIND (Windows, Linux, Mac OS)

http://www.justinmind.com/

http://www.justinmind.com/


https://creative.adobe.com/de/products/reflow

Adobe Edge Reflow (Windows, Mac OS)

https://creative.adobe.com/de/products/reflow


http://macaw.co/

MACAW (Mac OS)

http://macaw.co/


Google Chrome Browser










Firefox


http://lab.maltewassermann.com/viewport-resizer/

Viewport Resizer - Breakpoint Tester




Viewport Resizer - Breakpoint Tester



responsive.is

http://responsive.is/


responsive.is



responsive.is



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

https://developer.apple.com/library/ios/documentation/IDEs/Conceptual/iOS_Simulator_Guide/Introduction/Introduction.html

http://developer.android.com/tools/devices/emulator.html

http://msdn.microsoft.com/library/windows/apps/ff402563(v=vs.105).aspx

https://dev.opera.com/articles/installing-opera-mini-on-your-computer/

https://developer.mozilla.org/en-US/docs/Tools/Firefox_OS_1.1_Simulator








kein Touch













kein Touchkein Mobilfunknetz













kein Touchkein Mobilfunknetzkeine CPU vom Device













kein Touchkein Mobilfunknetzkeine CPU vom Deviceandere Auflösungen/Pixeldichte













kein Touchkein Mobilfunknetzkeine CPU vom Deviceandere Auflösungen/PixeldichteBetrachtungsabstand













kein Touchkein Mobilfunknetzkeine CPU vom Deviceandere Auflösungen/PixeldichteBetrachtungsabstandFehlerhafte Feature-Detection







Network Link Conditioner (Mac OS, iOS)

http://nshipster.com/network-link-conditioner/

© 121WATT - André Goldmannhttp://opendevicelab.com/

OpenDeviceLab

http://opendevicelab.com/


https://creative.adobe.com/de/products/inspect

Adobe Edge Inspect (Windows, Mac OS, Android, iOS, Windowsphone & Amazon Kindle Fire)

https://creative.adobe.com/de/products/inspect


Ghostlab

http://vanamco.com/ghostlab/

Bild Quelle: http://www.html5rocks.com/en/tutorials/tooling/synchronized-cross-device-testing/

http://www.html5rocks.com/en/tutorials/tooling/synchronized-cross-device-testing/


Ghostlab

http://vanamco.com/ghostlab/

Bild Quelle: http://www.html5rocks.com/en/tutorials/tooling/synchronized-cross-device-testing/

http://www.html5rocks.com/en/tutorials/tooling/synchronized-cross-device-testing/


UX Recorder für iOS

http://www.uxrecorder.com/

http://www.uxrecorder.com/


Silverback App für Mac OS X (Usability Testing)

http://silverbackapp.com/

http://silverbackapp.com/


Image Testing: Skala Preview (Mac OS, iOS, Android)

http://bjango.com/mac/skalapreview/


http://typecast.com/

Typecast

http://typecast.com/


Mobile-Website Conversion Testing

https://www.clicktale.com/

http://www.crazyegg.com/

http://visualwebsiteoptimizer.com/

https://www.optimizely.com/

http://mouseflow.com/

https://www.clicktale.com/

http://www.crazyegg.com/

http://visualwebsiteoptimizer.com/

https://www.optimizely.com/

http://mouseflow.com/


Performance-Tool: Pingdom

120

tools.pingdom.com/fpt/


Bonus: Responsive Produkte


Ist mein Produkt mobil nicht verfügbar?


Ist mein Produkt mobil nicht verfügbar?


Mobile Konversion macht mobil keinen Sinn?


Mobile Konversion macht mobil keinen Sinn?


Ziel von RWD

124

Was Nutzer wollen

Unser Ziel


Ziel von RWD

124

Was Nutzer wollen

Unser Ziel


Ziel von RWD

124

Was Nutzer wollen

Unser Ziel

Ziel von RWD ist eine hohe Schnittmengeauf beiden Seiten (Nutzer/Anbieter)


Mit welcher Hand nutzen Sie Ihr Smartphone?

…bitte mal Arm hoch.


126


126


126


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 %





36 %

49 %





15 %

36 %

49 %


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





• 67% mit dem rechten Daumen

• 33% mit dem linken Daumen



Zeit für eine Studie: Gehalten; Ein-Hand






• 72% navigieren mit dem Daumen






• 28% mit dem Zeigefinger







• 79% halten mit der li. Hand







• 79% halten mit der li. Hand

• 21% mit der re. Hand



Zeit für eine Studie: Zwei-Händig






• 90% im Portraitmodus





• 90% im Portraitmodus

• 10% im Landscapemodus



131

Anmelden & genauere Ergebnisse


Ergebnis: Webdesign kann nicht überall gleich aussehen und funktionieren.


Lohnt sich die Optimierung für Mobile und brauche ich RWD?


https://www.google.com/analytics/web/#report/visitors-mobile-overview/


Schlechte Beispiele…die man besser nicht wiederholt.


Mobile Fails

Schade eigentlich. Man hätte, wenn schon dieser Hinweis mit der E-Mail kommt, aber mindestens ein Formular anzeigen können.


Mobile Fails


Mobile Fails


Mobile Fails

Ist hier der Platz zum scrollen und für die Inhalte ausreichen?


Mobile Fails

Zu viel Inhalt der keinen Fokus zulässt


Mobile Fails

Zu viel Inhalt der keinen Fokus zulässt


Mobile Fails

CSS: position:absolute


Mobile Fails

Wer versteht das?


Mobile Fails

Ob ich Inhalte die ich nicht vollständig lesen kann, wirklich teilen möchte?


Mobile Fails

Mehr „Bars“ haben leider nicht ins Layout gepasst ^^


Mobile Fails

Mehr „Bars“ haben leider nicht ins Layout gepasst ^^


Mobile Fails

Schon einmal etwas von einer Weiterleitung gehört?


Mobile Fails

Ok = Yes Cancel = No


Jetzt wird’s teuer.



Mobile Fails


Mobile Fails


Mobile Fails


Mobile Fails


Mobile Fails


Mobile Fails


Besuchen Sie eigene Websites regelmässig!


Besuchen Sie

MIT DEM SMARTPHONE!


Fail 1 - Forgetting the mobile userhttp://www.webdesign.org/web-design-fails.22423.html

https://www.google.com/glass/start/

http://www.webdesign.org/web-design-fails.22423.html


Fail 1 - Forgetting the mobile userhttp://www.webdesign.org/web-design-fails.22423.html

https://www.google.com/glass/start/

http://www.webdesign.org/web-design-fails.22423.html


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]

https://www.xing.com/profile/Andre_Goldmann4

http://www.121watt.de


http://www.abookapart.com/products/responsive-web-design

Buch-Tipp

http://www.abookapart.com/products/responsive-web-design


http://www.abookapart.com/products/mobile-first

Buch-Tipp

http://www.abookapart.com/products/mobile-first


http://www.abookapart.com/products/content-strategy-for-mobile

Buch-Tipp

http://www.abookapart.com/products/content-strategy-for-mobile


http://www.abookapart.com/products/designing-for-emotion

Buch-Tipp

http://www.abookapart.com/products/designing-for-emotion

Data & Analytics

Fehler bei Mobile- und Responsive-Webdesign vermeiden / Conversion Conference 2014