22
Jonas Hellwig|kulturbanause®
18. März 2014, Mobile Tech Conference München
Webdesigner (Front End)
Dozent, Autor & Video-Trainer
Blogger @ blog.kulturbanause.de
Konzeptionelle & technische Hintergründe
Beispiele für Problembereiche
Lösungsansätze mit CSS
Tipps & Tools
= Responsive Design + Server Side Components
Robustes Responsive Design
Optimierte, ausgetauschte Inhalte durch serverseitige Abfrage
JavaScript zum Austauschen/Umstrukturieren von HTML-Inhalten
JavaScript zum Austauschen von Grafiken für HiDPI-Displays
Gleiche Inhalte/HTML-Struktur auf allen Geräten
Inhalte aus Platzgründen zu entfernen ist keine Lösung
(Mobile-Only, Multi-Screen)
Inhalte können ihre Gewichtung verändern
Das führt zu Problemen
Inhalte werden auf dem Smartphone »gestapelt«
Nur selten stehen Inhalte nebeneinander
Das Layout wird vom HTML-Markup bestimmt
Container-Elemente lassen sich schwer auflösen
Alle Layout-Varianten aller Unterseiten scribbeln
In CSS existierte lange Zeit kein echtes Layout-Modell
Floats etc. wurden für die Layout-Struktur umfunktioniert
Wir sind in der Anordnung von Inhalten eingeschränkt
Beispiel: Teaser auf microsoft.com
Es ist schwierig Inhalte (auf Smartphones) anders
anzuordnen als sie im HTML-Code stehen
Beispiel: Siegerehrung
Mobile First erleichtert die Priorisierung von Inhalten
Wir können prüfen ob die HTML-Struktur semantisch sinnvoll ist
Einziger Nachteil: unsere Sichtweise muss verändert werden
Inhalte unabhängig vom HTML-Markup anordnen
Das Markup selbst bleibt unverändert
Sehr mächtig in Kombination mit RESS etc.
Wenn Inhalte auf Geräten unterschiedlich wichtig werden
Wenn die semantische Struktur optimiert werden soll
Wenn wir komplexe Layouts konstruieren möchten
Mobile Version = HTML-Struktur
Desktop-Version weicht optisch ab
Funktioniert in allen Browsern
Table-Caption als Konstruktionshilfe
Teilt Inhalte auf Spalten auf
Schwer inhaltlich steuerbar
Zu lange/breite Spalten vermeiden
Beispiel: Responsive + mehrspaltig
Browsersupport: <= IE9 nicht kompatibel
Der Pinterest-Style ist spaltenbasiert
CSS Layout Modell
Arbeitet wie ein Gestaltungsraster mit Zeilen & Spalten
Inhalte werden Rasterzellen zugewiesen
Skizze | Beispiel | Beispiel RWD
Browsersupport: Nur IE10+
Von Adobe entwickelt, beim W3C eingereicht
Arbeitet mit einem Inhalt und verschiedenen »Regions«
Vergleichbar mit Überhangtexten in InDesign
Browsersupport: IE10+, iOS / Safari 7+, Chrome fraglich
Adobe pushed die Funktion in den Edge Tools
Regions sinnvoll für print-ähnliche digitale Magazine
CSS Layout Modell
Arbeitet mit Ausrichtungsachsen, Flexibilität & Reihenfolgen
Browsersupport: <= IE9 nicht kompatibel
Flexbox sinnvoll für die Anpassung der mobilen Version
blog.kulturbanause.de
Steuerung über die Pfeiltasten.