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 121WATT 
Geschäftsinhaber bei Pixeldreher 
 
Seit 1996 Front-End Entwickler  
& Optimierer aus Leidenschaft
• Twitter: @pixeldreher 
E-Mail: andre.goldmann@121watt.de

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 Trafﬁc im Monat

Privates Projekt
4
> 374.000 Besucher
> 1 TB Trafﬁc im Monat
80% 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/

1999 - bin ich da schon drin’ oder was?
Bild Quelle: http://www.spiegel.de/

90er - 2007.
Bild Quelle: https://www.youtube.com/

2007.
Bild Quelle: 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 erstmals 
erwähnt
05/2010

Mosaic
1993
ISDN in DEU
1995
Boris’ ;)
1999
The iPhone
2007
RWD erstmals 
erwähnt
05/2010
Erste RWD 
in DEU
seit 2011

Mosaic
1993
ISDN in DEU
1995
Boris’ ;)
1999
The iPhone
2007
RWD erstmals 
erwähnt
05/2010
Erste RWD 
in DEU
seit 2011
m.website.de vs. native Apps

Mosaic
1993
ISDN in DEU
1995
Boris’ ;)
1999
The iPhone
2007
RWD erstmals 
erwähnt
05/2010
Erste RWD 
in DEU
seit 2011
Tablet-PCs…

Mosaic
1993
ISDN in DEU
1995
Boris’ ;)
1999
The iPhone
2007
RWD erstmals 
erwähnt
05/2010
Erste RWD 
in DEU
seit 2011
Tablet-PCs…
18 Jahre vs. 3 Jahre
Gleicher Inhalt & Code

Das Umdenken der Anwender 
kann schnell beginnen.
Zeit für RWD ;)
Bild Quelle: http://www.apple.com/iphone-6/apple-pay/

Was ist anders bei RWD?
Workﬂows & Ansätze

ALLES

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

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

Flexibles Layout
Bildquelle: http://www.apple.com/de
Auﬂö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
ﬁnden, 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

Standards: Android Design
http://developer.android.com/design/index.html

Standards: iOS Human Interface Guidelines
https://developer.apple.com/library/ios/documentation/userexperience/conceptual/mobilehig/Anatomy.html

Webdesign Workﬂow (früher)
Als der Nachbar Websites „programmierte“…

• 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 Workﬂow
Punkt 1 - 47…

Probleme im Jahr 2014

• Unzählige Displaygrößen und Auﬂö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 Workﬂow

RWD Workﬂow
• Planung

RWD Workﬂow
• Planung
• Inhalte / Seitenarchitektur

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

RWD Workﬂow
• 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/

styletil.es Beispiel
http://styletil.es/

RWD Performance
Wenn 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 beeinﬂusst die Ladezeit das Verhalten des
Suchmaschinen Crawlers

X
• Hohe Bouncerate
• < 800ms Idealwert - ab ca 1,5 beeinﬂusst 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:
beseitigen
• Weiterleitungsketten auseinandernehmen
56

Server:
beseitigen
• Datenbanken optimieren
56

Server:
beseitigen
• Keine (externen ) Frames einbauen
56

Server:
beseitigen
• Keine (externen ) Frames einbauen
• Fertige Social Widgets (von Facebook & Co.) bitte nicht nutzen
56

57
HTML:

57
HTML:
• HTML Kommentare entfernen

57
HTML:
• HTML Code komprimieren & ungenutztes CSS entfernen

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

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

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

57
HTML:
• CSS3 statt Graﬁken für Buttons und Co. nutzen (lässt sich auch besser testen ;-))

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

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

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:

58
Bilder:
• Bildgrößen und Datei-Formate richtig wählen (.jpg für Fotos/
Hintergrundgraﬁken; .png oder .gif für Layoutgraﬁken)

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/

Graﬁken für alle Displays/Auﬂösungen
http://www.imgix.com/
http://adaptive-images.com/

Nützliche Quellen
• Sitespeed.io 
http://www.sitespeed.io/
• PageSpeed Insights (by Google) 
https://chrome.google.com/webstore/detail/pagespeed-insights-by-goo/
gplegfbjlmmehdoakndmohﬂojccocli
• PageSpeed Insights (extern) 
http://developers.google.com/speed/pagespeed/insights/
• PhantomJS 
https://github.com/macbre/phantomas
• Pingdom Tools 
http://tools.pingdom.com/fpt/
• Google Analytics SiteSpeed Datenansicht 
https://www.google.com/analytics/web/#report/content-site-speed-suggestions/
• Automatische Bildoptimierung 
https://kraken.io/
61

<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/Auﬂö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>

Einleitung <picture> Element
Durch das <picture> Element sind Entwickler/Designer ﬂexibler 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

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 immer 
in 100x100 Pixel per CSS ausgegeben

Viewport-basierte Bildauswahl
Bild-Quelle: 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/

Wann sollten wir welche Auswahl deﬁnieren?

• 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 Formulare
Auch hier kann man vieles falsch machen.

Regeln für responsive (mobile) Formulare

Keine wiederholenden Felder & Aktionen
(Passwort wiederholen, E-Mail Adresse
veriﬁzieren)

veriﬁzieren)
Vor-Ausfüllung von Feldern ermöglichen 
(aktuelles Datum +/- geplante Rückreise etc.)

veriﬁzieren)
„Wo bin ich grad“- Status-Balken integrieren 
(Schritt 1-3 oder genaue Deﬁnition: Was, Wann)

veriﬁzieren)
„Wo bin ich grad“- Status-Balken integrieren 
(Schritt 1-3 oder genaue Deﬁnition: 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

Adressen in Formularen

Formulare auf Autopilot
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

Real-Time Validierung VOR dem Abschicken
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-TimeValidierung komplett ausgefüllt
haben und die Dauer um 42% reduziert
werden konnte

Formulare sich selbstständig validieren lassen
Einsatz von regulären Ausdrücken zur Vermeidung von Fehleingaben nutzen:
Pﬂichtfelder nicht mit Javascript validieren sondern direkt im Input Feld:
Platzhalter direkt im Input Feld deﬁnieren:
…oder den Autofocus auf das erste Feld setzen:

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

http://alphapixels.com/prepros/
Prepros App (Mac OS, Windows + alle Smartphones)

http://incident57.com/codekit/
CodeKit (Mac OS + alle Smartphones)

Wireframe Testing: Balsamiq (Windows, Linux, Mac OS)
https://balsamiq.com/

Wireframe Testing: JUSTINMIND (Windows, Linux, Mac
OS)
http://www.justinmind.com/

https://creative.adobe.com/de/products/reﬂow
Adobe Edge Reﬂow (Windows, Mac OS)

http://macaw.co/
MACAW (Mac OS)

Google Chrome Browser

Firefox

http://lab.maltewassermann.com/viewport-resizer/
Viewport Resizer - Breakpoint Tester

responsive.is
http://responsive.is/

Smartphone Simulatoren
iOS Simulator 
https://developer.apple.com/library/ios/
documentation/IDEs/Conceptual/
iOS_Simulator_Guide/Introduction/
Introduction.html
Android Simulator 
http://developer.android.com/tools/devices/
emulator.html
Windows Phone Simulator 
http://msdn.microsoft.com/library/windows/apps/
ff402563(v=vs.105).aspx
Opera Mini Simulator 
https://dev.opera.com/articles/installing-opera-
mini-on-your-computer/
Firefox OS Simulator 
https://developer.mozilla.org/en-US/docs/Tools/
Firefox_OS_1.1_Simulator

iOS Simulator 
Introduction.html
emulator.html
ff402563(v=vs.105).aspx
kein Touch

iOS Simulator 
Introduction.html
emulator.html
ff402563(v=vs.105).aspx
kein Touch
kein Mobilfunknetz

iOS Simulator 
Introduction.html
emulator.html
ff402563(v=vs.105).aspx
kein Touch
kein Mobilfunknetz
keine CPU vom Device

iOS Simulator 
Introduction.html
emulator.html
ff402563(v=vs.105).aspx
kein Touch
kein Mobilfunknetz
andere Auflösungen/Pixeldichte

iOS Simulator 
Introduction.html
emulator.html
ff402563(v=vs.105).aspx
kein Touch
kein Mobilfunknetz
Betrachtungsabstand

iOS Simulator 
Introduction.html
emulator.html
ff402563(v=vs.105).aspx
kein Touch
kein Mobilfunknetz
Betrachtungsabstand
Fehlerhafte Feature-Detection

Network Link Conditioner (Mac OS, iOS)
http://nshipster.com/network-link-conditioner/

http://opendevicelab.com/
OpenDeviceLab

https://creative.adobe.com/de/products/inspect
Adobe Edge Inspect (Windows, Mac OS, Android, iOS,
Windowsphone & Amazon Kindle Fire)

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

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

UX Recorder für iOS
http://www.uxrecorder.com/

Silverback App für Mac OS X (Usability Testing)
http://silverbackapp.com/

Image Testing: Skala Preview (Mac OS, iOS, Android)
http://bjango.com/mac/skalapreview/

http://typecast.com/
Typecast

Mobile-Website Conversion Testing
https://www.clicktale.com/
http://www.crazyegg.com/
http://visualwebsiteoptimizer.com/
https://www.optimizely.com/
http://mouseﬂow.com/

Performance-Tool: Pingdom
120
tools.pingdom.com/fpt/

Bonus: Responsive Produkte

Ist mein Produkt mobil nicht verfügbar?

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 ist eine hohe Schnittmenge 
auf beiden Seiten (Nutzer/Anbieter)

Mit welcher Hand nutzen Sie Ihr
Smartphone?
…bitte mal Arm hoch.

126

Zeit für eine Studie
http://www.uxmatters.com/mt/archives/2013/02/how-do-users-really-hold-mobile-devices.php

Ein-Hand
Gehalten; Ein-Hand
Zwei-Händig

Ein-Hand
Gehalten; Ein-Hand
Zwei-Händig
49 %

Ein-Hand
Gehalten; Ein-Hand
Zwei-Händig
36 %
49 %

Ein-Hand
Gehalten; Ein-Hand
Zwei-Händig
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 Zeigeﬁnger

• 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
Ist hier der Platz zum scrollen
und für die Inhalte ausreichen?

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
Schon einmal etwas von
einer Weiterleitung gehört?

Mobile Fails
Ok = Yes
Cancel = No

Jetzt wird’s teuer.

Besuchen Sie eigene Websites regelmässig!

Besuchen Sie
MIT DEM SMARTPHONE!

Fail 1 - Forgetting the mobile user
http://www.webdesign.org/web-design-fails.22423.html
https://www.google.com/glass/start/

André Goldmann 
andre.goldmann@121watt.de 
@pixeldreher
Xing: https://www.xing.com/proﬁle/
Andre_Goldmann4
121WATT 
Luise-Ullrich-Str. 20 
80636 München
Tel.: 089 / 416 126 993
@121WATTT | info@121watt.de 
www.121watt.de

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

http://www.abookapart.com/products/mobile-ﬁrst
Buch-Tipp

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

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

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

Weitere ähnliche Inhalte

Was ist angesagt?

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

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