Responsive Webdesign: Geräte-Agnostik

Die „Kernkompetenz“ des responsive Webdesigns ist es, flexible CSS-Layouts, drücken wir es mal ganz vorsichtig aus: innerhalb bestimmter Umgebungen weiter anpassen zu können. Diese Technik sollte im Idealfall vollkommen agnostisch gegenüber dem zugreifenden Endgerät sein. Es geht nicht (zumindest nicht primär) darum, „optimierte“ Layouts für z.B. das iPhone auszugeben.

Aber worum geht es dann?

Basis des responsive Webdesign sind per definitionem flexible Layouts, streng genommen: flexible Grid-Layouts. Diese erledigen die Anpassung an verschiedene Viewports im Grunde bereits von Hause aus, werden jedoch durch Media-Queries im responsive Webdesign „aufgebohrt“. Media-Queries geben uns ein Werkzeug, an den Grenzen flexibler Layouts korrigierend einzugreifen.

Nehmen wir z.B. einen gängigen Zweispalter nach dem Goldenen Schnitt – Breite der Inhaltsspalte ca. 62%, Seitenleiste ca. 38%. Ab einer gewissen Viewport-Breite werden beide Spalten zu schmal, um noch lesbar nebeneinander angeordnet zu werden. Mittels Media-Queries kann man dafür sorgen, dass die Spalten in kleineren Viewports nicht mehr neben-, sondern untereinander ausgegeben werden:

@media only screen and (max-width: 640px) {
    #content,
    #sidebar {
        display: block;
        float: none;
        width: 100%;
    }
}

Dieses Media-Query greift bei Breiten unter 640 Pixeln – wohlgemerkt: unter 640 Pixeln Breite des Viewports und nicht nur der Bildschirmauflösung! Diesen kleinen, aber feinen Unterschied ermöglicht die Verwendung von max-width anstelle von max-device-width. Media-Queries werden damit unabhängig vom verwendeten Gerät und zielen stattdessen auf den Wert, der wirklich interessant ist: Die tatsächlich verfügbare Breite des Browserfensters, genauer: des Viewports.

Nebeneffekt dieser Technik: Sie deckt nicht nur Geräte ab, deren Bildschirm nur (in diesem konkreten Beispiel) maximal 640 Pixel Breite bietet, sondern auch Browserfenster, welche auf höher auflösenden Bildschirmen nicht maximiert sind. Damit werden die Bereiche, für die ein Layout korrigiert wird, unabhängig gemacht von den durch die Auflösung eines Bildschirms gesetzten Grenzen – man könnte sagen: Die Grenzen des Layouts definieren die Bereiche, in denen nachgebessert werden muss.

Macht das nicht mehr Arbeit?

Eigentlich eher weniger – durch die flexible Basis sollten bestimmte Auflösungen bereits hinreichend abgedeckt sein. Natürlich kommt es auf das Layout an: Ein schlichter Zweispalter mit Kopf- und Fußbereich erfordert naturgemäß weniger Nachbesserung als ein komplexes, verschachteltes Grid. Elemente mit einer flexiblen Breite haben jedoch einen gewissen Spielraum, innerhalb dessen sie „funktionieren“, was bei Elementen mit fixer Breite durchaus auch gegeben sein kann – allerdings ist der Spielraum dort deutlich geringer.