Content Choreography

Jonas Hellwig|kulturbanause^®

2. Dezember 2013, Webinale München

Jonas Hellwig

Webdesigner

Autor / Video-Trainer

Dozent

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

Was ist das Problem?

Gleiche Inhalte/HTML-Struktur auf allen Geräten

Inhalte aus Platzgründen zu entfernen ist keine Alternative

Inhalte können ihre Gewichtung verändern

Das führt zu Problemen

RESS

= Responsive Design + Server Side Components

Robustes Responsive Design

Optimierte, ausgetauschte Inhalte durch serverseitige Abfrage

Adaptive Images / Retina Images

intention.js

JavaScript zum Austauschen/Umstrukturieren von HTML-Inhalten

intentionjs.com

Das Markup bestimmt die Reihenfolge

Inhalte werden auf dem Smartphone »gestapelt«

Nur selten stehen Inhalte nebeneinander

Das Layout wird vom HTML-Markup bestimmt

Fehlende Layout-Modelle in CSS

In CSS existierte lange Zeit kein echtes Layout-Modell

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

Das schränkt uns in der Anordnung von Inhalten ein

Beispiel: Teaser auf microsoft.com

Semantik vs. Layout

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

Beispiel: Siegerehrung

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

CSS Columns

Teilt Inhalte auf Spalten auf

Schwer inhaltlich steuerbar

Zu lange/breite Spalten vermeiden

Beispiel: Responsive + mehrspaltig

Browsersupport: <= IE9 nicht kompatibel

CSS Flexbox

CSS Layout Modell

Arbeitet mit Ausrichtungsachsen, Flexibilität & Reihenfolgen

Beispiele: 1   2   3   4   5   6   7

Tools für Flexbox

Browsersupport: <= IE9 nicht kompatibel

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

Browsersupport: IE10+, iOS / Safari 7+, Chrome 19+ (deaktiviert)

Polyfill verfügbar