Mobile First
Jonas Hellwig|kulturbanause®
2. Dezember 2013, Webinale München
Dozent: Jonas Hellwig
Webdesigner
Autor / Video-Trainer
Dozent
Blogger @ blog.kulturbanause.de
Was erwartet euch in diesem Workshop?
Zahlen, Fakten, Hintergründe
Inhalt & Konzeption
Technik
Design & Usability
Beispielprojekte
Einführung + Überblick
Mobile Website
Unabhängige Adresse (URL)
Doppelte Administration / Einrichtung
Abweichende Inhalte möglich
Kann leicht zu Problemen führen (Redirects, Double-Content etc.)
Negativbeispiel: Deutscher Bundestag
Responsive Website
Gleiche Adresse (URL)
Einmalige Einrichtung und zentrale Pflege
Identische Inhalte
Beispiel: tagesschau.de
Was ist RWD?
Mobile First
Überbegriff für verschiedene Themengebiete
Der Begriff geht auf das gleichnamige Buch zurück
Aktuell sehr populär – Google Trends
Marketingbegriff
Was bedeutet es?
Wir starten mit der Smartphone-Version der Website
(wird oft zu dogmatisch ausgelegt)
Was streckt drin?
Konzeptioneller/inhaltlicher Ansatz
Konzeptionelle/inhaltliche Fehler lassen sich schwer beheben
Technische Fehler sind einfacher zu korrigieren
Mobile Nutzung
Gründe für mobile Nutzung
Kommunikation
Dringender Informationsbedarf
Langeweile
Komfort
ToDo
…
Nutzungsverhalten
Ausführliche Google-Analyse: The new Multi-Screen-World
Smartphone morgens
Computer tagsüber
Tablet abends
Multi Device Experience
Achtung! Stark abhängig von der Zielgruppe!
Standortbasierte Nutzung
Aktionen die mit meinem aktuellen Ort in Verbindung stehen:
Adressen nachschlagen
Einkaufslisten lesen
Produktvergleiche im Geschäft
Check-Ins
…
Erzeugen & Editieren
Aktionen die Inhalte herstellen oder verändern
Fotos machen
Notizen machen
Kommentare schreiben
Statusmeldungen / Posts verfassen
…
Nichts verpassen
Newsticker
Blogs, Nachrichten
Social Networks
Auktionen
…
Informieren
Aktionen bei denen ich mich über ein Thema informieren
Artikel, Lexika etc.
Shopping
Nachrichten
…
Zeit vertreiben
Spielen
Surfen
…
Zahlen
Statistiken genau lesen!
Zahlen Deutschland 2012
Quelle: comScore.com
Welche Geräte wurden 2012 in DE genutzt?
51% der genutzten Mobiltelefone sind Smartphones
Smartphone-Nutzer: + 60% bei Frauen + 35% bei Männern
Die Anzahl der Nutzer die Tablet + Smartphone benutzen
stieg um 87% auf 4,4 Millionen
Die mobile Web-Nutzung stieg in 2012 um über 30%
DE unterdurchschnittlich für die EU
Seitenaufrufe in DE
5,6% via Smartphone
3,4% via Tablet
90,2% via Computer
0,8% Unbekannt
Achtung, Durchschnittswerte! Zielgruppe beachten!
Warum dann Mobile First?
Bereits 2012 kamen 10% der User nicht über Computer
Die Zahlen explodieren, Tablets werden enorm wichtig
User nutzen mehrere Geräte zu unterschiedlichen Zeiten
72% der User halten eine »mobile friedly« Website für wichtig
55% der User geben an, dass schlechte mobile Erfahrung den Marken-Eindruck verschlechtern
Vorteile von Mobile First
Zukunftssicher
Bessere Performance
Prägnantere Inhalte
Bessere Usability
→ Erfolgreichere Projekte
The simple guideline is whatever you are doing - do mobile first
Eric Schmidt, Google CEO 2009
Nachteile von Mobile First
Inhalte müssen beim Projektbeginn vorhanden sein
Umdenken erforderlich
Zeitintensive Konzeptionsphase
Websites laufen Gefahr »zu reduziert« zu sein
Workflow
Mobile First-Workflow
Besonders geeignet für: Inhalte, Struktur, Usability
Tablet First-Workflow
Wichtig u.a. für M-Commerce & Tourismus
Desktop First-Workflow
Besonders geeignet für Design & Effekte
Mobile First Content First
Die Inhalte stehen immer im Fokus
Alle Geräte und Displays im Blick haben
Den Workflow dem Projekt anpassen!
Tunnelblick vermeiden!
Progressive Enhancement
vs.
Graceful Degradation
Feature-Detection über Modernizr
Mobile First
+
Progressive Enhancement
Inhalt & Konzeption
Mobile Web?
Es existiert kein »mobiles Internet« und ein »normales Internet«
Es gibt ein Internet und verschiedene Geräte zum Betrachten
Gleicher Inhalt für alle Geräte
Fehlende Inhalte frustrieren den Anwender
Fehlende Inhalte sind oft negativ für Google
Steigende Zahl an sog. »Mobile Only«-Usern (25% in USA)
Negativbeispiel: 85broads.com
Content First Workflow
Texte werden für die Smartphone-Ansicht formuliert
Überflüssige oder fragwürdige Inhalte fallen weg
Notwendige Inhalte werden angezeigt
Diese Inhalte müssen priorisiert werden
lineare Inhaltsstrukturen auf Smartphones
Das Ergebnis
Prägnante, kurzweilige Inhalte
Logische Struktur
Weniger Probleme mit komplexen Inhalten
Das gilt für alle Geräteklassen
Die Priorisierung der Inhalte
ändert sich nicht wenn
mehr Platz zur Verfügung steht.
Beispiel: airberlin
Deutlich abweichende Inhalte
Beispiel: Emirates
Deutlich abweichende Inhalte
Beispiel: Nokia
Identische Inhalte
Navigation
Menüpunkte auf ein Minimum kürzen
Evtl. Konflikt mit Keyword-optimierten Landing-Pages
In der Priorisierung verliert die Navigation gegenüber dem Inhalt
Multi-Level-Navigationen gut planen
Beispiele
Layout-Struktur
Logikfehler vermeiden
Beispiel: mandysims.com
Beispiel: Sidebar unter Inhalt
Mit Skizzen arbeiten
Design und Entwicklung müssen eng zusammenarbeiten
Content Choreography
Technik
Start with the small screen first,
then expand until it looks like shit.
Time for a breakpoint!
CSS-Code umdrehen
Smartphone-Version zuerst
= Bessere Performance
Und der Internet Explorer?
Frameworks
Nach Funktionen auswählen
Mobile First Technik beachten
Evtl. zukünftige Projekte im Hinterkopf behalten
Funktionen übergeben
E-Mail-Links
Karten und Anfahrtsskizzen
Back to Top
Back in History
…
Performance
Sprites (nur in relevanten Breakpoints laden)
CSS3, SVG & Webfonts verwenden
Data URIs verwenden
Frameworks bzw. Overhead vermeiden
Scripte minimieren und komprimieren
Caching
Usability
Design für Touch-Screens
Elemente groß genug gestalten (7-10mm = 44px)
Touch-Gesten berücksichtigen
Achtung: Hybrid-Geräte
Achtung: iPad-Mini
Achtung: Touch-Gesten des OS
Bedienung
Ein- oder zweihändige Bedienung?
Rechts- oder Linkshänder?
Wir wissen es nicht.
Optimieren für die größte Wahrscheinlichkeit
Formulare
Korrekte Input-Typen verwenden
Formulare
Labels über die Input-Felder schreiben
Ausgeklappte Tastatur bedenken
Tabellen
Mobile First planen!
Design
Modulares Design
Einzelne Design-Elemente entwerfen
Typografie
Schriftgrößen anpassen!
Feine Schriften vermeiden!
Hi-DPI-Displays
Übersicht über Displays: screensiz.es
CSS, SVG und Webfonts sind automatisch optimiert
Probleme bei Pixelgrafiken und Data-URIs
Warum sehen Pixelgrafiken auf Hi-DPI-Displays schlechter aus?
Lösungen
Eine Grafik für alle Geräte
Grafiken austauschen
Eine Grafik für alle Geräte
Eine hochauflösende Grafik wird erstellt
Die Grafik wird per HTML/CSS skaliert
„Downsampling“ erhöht die Pixeldichte
Nachteile Downsampling
Grafiken müssen vorhanden sein
Es werden evtl. mehr Daten geladen
Grafiken evtl. unscharf
Grafiken austauschen
Optimierte Grafiken nur auf hochauflösenden Displays
Mehrere Dateien notwendig
Auflösung muss abgefragt werden
Beispiel: CSS + Media Queries
Beispiel: HTML + Script „Retina Images“
Beispiel: HTML + Script „retina.js“