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

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: andre.goldmann@121watt.de

Ich arbeitete unter anderem für diese Kunden

Privates Projekt

> 374.000 Besucher

Privates Projekt

> 374.000 Besucher

> 3.126.000 Seitenaufrufe

Privates Projekt

> 374.000 Besucher

> 1 TB Traffic im Monat

Privates Projekt

> 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/

1999 - bin ich da schon drin’ oder was?

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

90er - 2007.

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

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

Die Entwicklung des mobilen Internets

Mosaic

ISDN in DEU

Mosaic

ISDN in DEU

Boris’ ;)

Mosaic

ISDN in DEU

Boris’ ;)

The iPhone

Mosaic

ISDN in DEU

Boris’ ;)

The iPhone

RWD erstmalserwähnt

05/2010

Mosaic

ISDN in DEU

Boris’ ;)

The iPhone

05/2010

Erste RWDin DEU

seit 2011

Mosaic

ISDN in DEU

Boris’ ;)

The iPhone

05/2010

Erste RWDin DEU

seit 2011

Mosaic

ISDN in DEU

Boris’ ;)

The iPhone

05/2010

Erste RWDin DEU

seit 2011

m.website.de vs. native Apps

Mosaic

ISDN in DEU

Boris’ ;)

The iPhone

05/2010

Erste RWDin DEU

seit 2011

Tablet-PCs…

Mosaic

ISDN in DEU

Boris’ ;)

The iPhone

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

Flexibles Layout

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

Flexibles Layout

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

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

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

Standards: iOS Human Interface Guidelines

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

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

Webdesign Workflow (früher)

• 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

• Webseiten sind dynamisch und reagieren auf Nutzerverhalten

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/

styletil.es Beispiel

http://styletil.es/

RWD PerformanceWenn Sekunden zu Stunden werden!

Warum Ladezeit-Optimierung?

• Hohe Bouncerate

• schlechte User Experience

• Hohe Bouncerate

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

• Hohe Bouncerate

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

• 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

tools.pingdom.com/fpt/

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

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

Ladezeit-Optimierung

Server:

• Caching- & Kompression aktivieren

Server:

• HTTP Requests reduzieren

Server:

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

Server:

• Weiterleitungsketten auseinandernehmen

Server:

• Datenbanken optimieren

Server:

• Keine (externen ) Frames einbauen

Server:

• Keine (externen ) Frames einbauen

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

• 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: InstantClick

http://instantclick.io/

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.

Bilder:

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

Bilder:

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

Bilder:

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

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/

Grafiken für alle Displays/Auflösungen

http://www.imgix.com/

http://adaptive-images.com/

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/

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

</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

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/

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

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)

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

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>

</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>

</form>

Input Typen von HTML5: number

Beispiel-Code:

<form>

</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>

</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>

</form>

Input Typen von HTML5: datetime-local

Zur Eingabe von Datum- & Zeitangaben.

Beispiel-Code:

<form>

</form>

Input Typen von HTML5: color

Zur Eingabe von Farbwerten.

Beispiel-Code:

<form>

</form>

Formulare auf Autopilot

Der Einsatz von HTML5 ermöglicht es uns, bereits eingegeben Werte aus anderen Formularen (auch aus der Vergangenheit) zu übernehmen.

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-Time Validierung 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:

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/

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/reflow

Adobe Edge Reflow (Windows, Mac OS)

http://macaw.co/

MACAW (Mac OS)

Google Chrome Browser

Firefox

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

Viewport Resizer - Breakpoint Tester

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

Viewport Resizer - Breakpoint Tester

responsive.is

http://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

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/

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://vanamco.com/ghostlab/

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://mouseflow.com/

Performance-Tool: Pingdom

tools.pingdom.com/fpt/

Bonus: Responsive Produkte

Ist mein Produkt mobil nicht verfügbar?

Mobile Konversion macht mobil keinen Sinn?

Ziel von RWD

Was Nutzer wollen

Unser Ziel

Ziel von RWD

Was Nutzer wollen

Unser Ziel

Ziel von RWD

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.

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

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

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

• 72% navigieren mit dem Daumen

• 28% mit dem Zeigefinger

• 79% halten mit der li. Hand

• 21% mit der re. Hand

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

• 90% im Portraitmodus

• 10% im Landscapemodus

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

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

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/

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

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

André Goldmannandre.goldmann@121watt.de@pixeldreher

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

121WATTLuise-Ullrich-Str. 20 80636 München

Tel.: 089 / 416 126 993

@121WATTT | info@121watt.dewww.121watt.de

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

Buch-Tipp

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

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

Data & Analytics

Hallo! Wir sind€¦ · Packaging-Design Hamburger aus Hamburg 2 1 1 2. DER ONLINEAUFTRITT Webdesign und Webentwicklung Drupal CMS ... Responsive Webdesign und Webentwicklung Drupal

ZILLGENS, Christoph - Responsive Webdesign - [Hanser - 2013 - De]

U5 Responsive Webdesign - mediencommunity.de Responsive Webdesign_0.pdf · U5: Responsive Webdesign Vorteile - Mehr Usability - Mehrere Darstellungen auf versch. Endgeräten - Reichweite

Responsive Webdesign

Florence Maurice Mobile Webseiten Strategien, Techniken ...files.hanser.de/Files/Article/ARTK_STV_9783446432796_0001.pdf · Responsive Images 267 Responsive Webdesign 17, 19 ff.,

Responsive Webdesign: Prozess, Dialog, Qualität

Responsive Webdesign - Vom Smartphone bis zum Flat-TV, meine Webseite passt

Webinale 14: Responsive Webdesign verkaufen / Pluswerk

Responsive Webdesign in a Nutshell - webinale 2015

Gutes Webdesign – Form, Farbe, Typografie, Raster, User Experience Design, Simplicity, Responsive Web Design

Leseprobe Christoph Zillgens Responsive Webdesignresponsive-webdesign-buch.de/content/02-buch/0_Leseprobe.pdf · Leseprobe Christoph Zillgens Responsive Webdesign Reaktionsfähige

Softwareentwicklung - files.schoenberg.mobi · Responsive Web-design: Responsive Webdesign bezeichnet eine gestalterische und technische Art mit der Webseiten erstellt werden, die

€¦ · WEBDESIGN RUMMEL . studiowerbung. werbeagentur Responsive Webdesign Mobile Endgeräte werden immer kleiner, stationäre Bildschirme immer größer. Mit Responsive Webdesign

Responsive Webdesign verkaufen - MobileTech Conference 2014

Responsive Webdesign in a Nutshell

Responsive Tracking – Responsive Web Design und dynamisches Conversion-Tracking mit Google Analytics

Usability-Testing von Responsive Webdesign€¦ · 18 Usability-Testing von Responsive Webdesign Martin Beschnitt Managing Director & Senior UX-Consultant 040 36166-7981 martin.beschnitt@eresult.de

Responsive Webdesign Agentur Hamburg

Typografie im Responsive Webdesign

Unwissenheit ist ein Segen - Responsive webdesign