Smashing Workshop: CSS3 & responsive Webdesign

Kommentare 2
Blog
Workshop: CSS3 & responsive Webdesign

Noch vor der nächsten Smashing Conference im Herbst veranstalten die Herausgeber des Smashing Magazine bereits weitere Events. So unter anderem den von Andy Clarke gehaltenen Workshop »CSS3 & responsive Webdesign«. Dabei gab der Webdesigner einen Ausblick auf die Technologien, die uns in den nächsten Monaten zur Verfügung stehen werden – wenn die Browser mitspielen.

Die Vorbereitung

Um einen Einblick in die neuen effektiveren und zeitsparenderen Methoden zu bekommen, müssen erst einmal Browser-Versionen installiert werden, die ihrer Zeit voraus sind. Als adäquates Werkzeug empfiehlt Andy hier den »Google Chrome Canary« oder den »Opera Next«. Diese Browser unterstützen bereits Technologien, die derzeit noch nicht Einzug in die Standards des W3C gehalten haben. Hierzu müssen allerdings im Canary noch die »experimentellen Webkit-Funktionen« aktiviert werden. Dazu gibt man »chrome://flags« in die Adresszeile ein. Wurden die Funktionen aktiviert, muss der Browser neu gestartet werden.

Herausforderungen des responsiven Designs

Bei der Erstellung flexibler Designs stößt man als Gestalter immer wieder auf die verschiedensten Hürden. Dazu gehören:

  • komplizierte mathematische Rechnungen
  • vertikale Zentrierung
  • Fehler beim Einsatz von »float«
  • Container
  • Quelltext-Reihenfolge

Grundsätzlich rät Clarke von der Optimierung auf bestimmte Geräteklassen und Bildschirmgrößen ab. Stattdessen sollen die Designs auf die Inhalte der Website hin optimiert werden – also nicht »mobile first«, sondern »content first«. Als Beispiel dafür nimmt er die Website seines Webdesign Studios »Stuff & Nonsens«. Die sogenannten Breakpoints orientieren sich im Seitenkopf am Inhalt, nicht an den bekannten Displaygrößen.

Display Table

Die erste der gezeigten Methoden ist »display:table«. Vorteil dieses Ansatzes ist, dass man in einem Box-Modell einen Titel, eine Beschreibung, eine Fußzeile, Reihen und Zellen definieren kann. Das Modell verhält sich dann ähnlich einer Tabelle, ohne dabei die HTML-Syntax außer Acht zu lassen.
So kann innerhalb eines Box-Modells auch problemlos und ohne Rechenfehler mit mehreren Spalten gearbeitet werden. Diesen Spalten können die Abstände einheitlich zugewiesen und das Umbruchverhalten definiert werden. Das alles mit nur wenigen Zeilen Code.

Maßeinheiten

Als Einheit innerhalb des CSS empfiehlt Clarke zudem »rem«. Denn anders als »em« werden »rem« nicht in jeder Vererbung neu berechnet, sondern bleiben durchweg gleich. Ist die Textgröße also mit 100% definiert (was 16px entspricht), bleibt ein rem immer bei 16px.
Einen Schritt weiter als rem gehen die »vw«. Dies hat nichts mit der Automarke zu tun, sondern steht für »viewport-width«. 1 vw ist demnach 1% der Display-Breite. Gleiches gilt für »vh« (viewport-height). Zusätzlich gibt es noch »vmax« und »vmin«, die sich am kleineren bzw. größeren Wert von Höhe und Breite orientieren.

Flexible Box Layout (Flexbox)

Wie der Name schon sagt, ermöglicht die Flexbox-Methode flexiblere Layouts. So können unabhängig von der Reihenfolge im Quelltext die Boxen frei geordnet werden. Außerdem kann der Achsenfluss der Boxen von horizontal auf vertikal umgestellt werden. Projiziert man dieses Verhalten auf den Einsatz von Breakpoints, so kann mit nur wenigen Zeilen der Boxenfluss von einem Desktop auf beispielsweise ein Smartphone optimiert werden. Auch die Ausrichtung auf den Achsen kann definiert werden (Anfang, Zentrum, Ende etc.). Durch den Verzicht auf Definitionen wie »links« oder »rechts« kann die Umstellung des Achsenfluss problemlos durchgeführt werden.
Für viele Layouts sicherlich eine unschlagbare Eigenschaft ist der Befehl »align-items«. Die verwendeten Boxen können mit »flex-start«, »flex-end« und »center« positioniert werden. Standardwert ist hier »stretch«, der alle Boxen unabhängig von ihrem Inhalt auf die gleiche Höhe festschreibt.
Bringt man zusätzlich noch den Befehl »order« zum Einsatz, kann man die verwendeten Boxen beliebig sortieren. Ohne die HTML-Quelle umschreiben zu müssen, kann so der Inhalt optimal sortiert werden. Möchte man auf einem mobilen Gerät zum Beispiel eine Navigation lieber am Seitenende anzeigen, ist das im Flexbox-Modell mit einer einzigen Zeile Code realisierbar.

Verzichtet werden kann bei Flexbox auf Werte wie Pixel oder Prozente. Mit »flex:2;« kann einem einzelnen Container die doppelte Breite aller anderen Container zugewiesen werden, mit »flex:3;« die dreifache und so weiter. Das Flexbox-Modell weißt den zur Verfügung stehenden Platz automatisch den vorhandenen Inhaltselementen zu. Aufwendige Mathematik fällt in diesem Fall vollständig weg.

Arbeitet man dann noch mit CSS-Transitions, können diese Boxen auch noch ohne großen Aufwand ansprechend animiert werden.

CSS Regions, Shapes & Exclusions

Mit CSS Regions wird bald eine Gestaltungsmöglichkeit Einzug halten, die sich Gestalter schon seit Jahren sehnlichst wünschen, nämlich die Verwendung von mehreren Containern, auf die sich der Text dynamisch verteilen kann. Ändert sich die Schriftgröße oder die Textlänge, so kann der Text sich auf sämtliche Boxen verteilen, die ihm per »flow-into«-Befehl zugewiesen werden. Wo diese Boxen sich dann befinden ist für den Text unerheblich, da die Zugehörigkeit ebenfalls per CSS definiert wird.

Ebenfalls neu in CSS3 ist die Verwendung von Shapes und Exclusions. Hiermit bricht das Boxen-Modell aus seinen rechteckigen Formen aus und kann beliebige Maße annehmen. Zum Rechteck kommen neben dem Kreis auch Polygone hinzu. Mit x- und y-Werten können für ein Polygon beliebig viele Eckpunkte definiert werden. Der Text, der sich dann in dieser »Polygon-Box« befindet, orientiert sich an dessen Form und bricht entsprechend um. Das gleiche lässt sich für Elemente definieren, die um die Polygone herum fließen.

Fazit

Neben den eben angerissenen Themen sprach Andy Clarke auch noch über CSS Transforms, Transitions, Border Image und Filter. Es war also ein gut gefüllter Workshop. Einige, der vorgestellten Funktionen und Methoden werden von älteren Browsern zwar nicht unterstützt, doch diese Browser werden nicht ewig unter uns bleiben. Es ist also mehr als Zeit in die Zukunft zu blicken. Dank der aktuellen Update-Politik der Browserhersteller und der hohen Entwicklungsgeschwindigkeit im mobilen Bereich werden die neuen CSS-Funktionen bald an allen Ecken und Enden zu finden sein.

Der Autor

Unterstützt seit über 10 Jahren SaaS-Teams dabei fachliche und zwischenmenschliche Herausforderungen lösungsorientiert zu bewältigen.

2 Kommentare

Schreibe einen Kommentar zu Sebastian Eiweleit Antworten abbrechen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert