22 Content Choreography

Content Choreography

Jonas Hellwig|kulturbanause®

18. März 2014, Mobile Tech Conference München

Jonas Hellwig

Webdesigner (Front End)

Dozent, Autor & Video-Trainer

Blogger @ blog.kulturbanause.de

Was erwartet euch in dieser Session?

Konzeptionelle & technische Hintergründe

Beispiele für Problembereiche

Lösungsansätze mit CSS

Tipps & Tools

Inhalt & Struktur
im Responsive Design

Adaptive, Responsive, RESS

RESS

= Responsive Design + Server Side Components

Robustes Responsive Design

Optimierte, ausgetauschte Inhalte durch serverseitige Abfrage

Adaptive Images / Retina Images

Schwammige Grenze zw. RWD / AWD

intentionjs.com

JavaScript zum Austauschen/Umstrukturieren von HTML-Inhalten

retina.js

JavaScript zum Austauschen von Grafiken für HiDPI-Displays

Was ist das Problem im RWD?

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

Das Markup bestimmt die Reihenfolge

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

Den Überblick behalten!

Alle Layout-Varianten aller Unterseiten scribbeln

Beispiel

Mandy Sims

Bisher: fehlende Layout-Modelle in CSS

In CSS existierte lange Zeit kein echtes Layout-Modell

Floats etc. wurden für die Layout-Struktur umfunktioniert

Beispiel

Was bedeuten fehlende Layout-Modelle?

Wir sind in der Anordnung von Inhalten eingeschränkt

Beispiel: Teaser auf microsoft.com

Semantik vs. Layout

Es ist schwierig Inhalte (auf Smartphones) anders
anzuordnen als sie im HTML-Code stehen

Beispiel: Siegerehrung

Mobile First

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

Content Choreography

Inhalte unabhängig vom HTML-Markup anordnen

Das Markup selbst bleibt unverändert

Sehr mächtig in Kombination mit RESS etc.

Und wofür brauchen wir das?

Wenn Inhalte auf Geräten unterschiedlich wichtig werden

Wenn die semantische Struktur optimiert werden soll

Wenn wir komplexe Layouts konstruieren möchten

Technische Lösungen

Klassische CSS-Positionierungen

Mobile Version = HTML-Struktur

Desktop-Version weicht optisch ab

Beispiel

Funktioniert in allen Browsern

display: table + caption-side

Table-Caption als Konstruktionshilfe

Beispiel

Browser-Support

CSS Columns

Teilt Inhalte auf Spalten auf

Schwer inhaltlich steuerbar

Zu lange/breite Spalten vermeiden

Beispiel: Responsive + mehrspaltig

Browsersupport: <= IE9 nicht kompatibel

Pinterest Style mit CSS Columns

Der Pinterest-Style ist spaltenbasiert

Versuch 1 – Floats

Versuch 2 – Floats + Clearfix

Versuch 3 – Manuelle Spalten

Versuch 4 – Multiple Columns

CSS Grid Layout Module

CSS Layout Modell

Arbeitet wie ein Gestaltungsraster mit Zeilen & Spalten

Inhalte werden Rasterzellen zugewiesen

Skizze   |   Beispiel   |   Beispiel RWD

Browsersupport: Nur IE10+

CSS Regions

Von Adobe entwickelt, beim W3C eingereicht

Arbeitet mit einem Inhalt und verschiedenen »Regions«

Vergleichbar mit Überhangtexten in InDesign

Beispiel 1   |   Beispiel 2

Browsersupport: IE10+, iOS / Safari 7+, Chrome fraglich

Polyfill verfügbar

Regions in Reflow

Adobe pushed die Funktion in den Edge Tools

Regions sinnvoll für print-ähnliche digitale Magazine

CSS Flexbox

CSS Layout Modell

Arbeitet mit Ausrichtungsachsen, Flexibilität & Reihenfolgen

Beispiele: 1   2   3   4   5   6   7

Browsersupport: <= IE9 nicht kompatibel

Flexbox Beispiele

Beispiel 1

Beispiel 2

Flexbox sinnvoll für die Anpassung der mobilen Version

Tools für Flexbox

Best Web Design Tools

SCSS Mixin

Link

Danke München

blog.kulturbanause.de

Steuerung über die Pfeiltasten.