Responsive Design

Inspiriert vom WP-Meetup und der gestiegenen Tablet-Dichte dort ist diese Seite mal wieder um ein Buzzword reicher: sie hat Responsive Design.

Die Idee ist eigentlich recht einfach: Auf kleinen Displays ist mein dreispaltiges Layout unpassend, weil die Spalten zu schmal werden. Also soll in einem schmalen Browserfenster ein einfacheres, einspaltiges Layout angezeigt werden. Und weil ich konservativ bin möchte ich das ohne Javascript nur mit CSS machen.

Der Schlüssel dazu ist ein Media-Query im CSS. Die wirklich wichtigen Zeilen, die ich dafür eingefügt habe, sind:

@media (max-width : 800px) {
  #content {
    width: auto;
  }
}

Das bisherige Layout bleibt damit komplett gültig und als default bestehen, aber bei einer Fensterbreite ≤800px werden einfach noch zusätzliche CSS-Attribute verteilt, die ggf. die vorherigen überschreiben.

Für ein einfaches Layout mit einer Handvoll an Attributen reicht das völlig – bei größeren Änderungen kann man stattdessen auch über die HTML-Meta-Tags gehen und für verschiedene Media-Queries ganz verschiedene CSS-Dateien benutzen.

Einen Trick gibt’s aber noch: Tablet-Browser machen alles etwas anders, um vollständige Websites anzuzeigen tun sie so als hätten sie eine höhere Auflösung und lassen den User dann herum-zoomen und -scrollen. Dieses Verhalten lässt sich wiederum mit dem viewport Meta-Tag beeinflussen; um einfach nur die richtige Breite zu benutzen (aber Zoomen etc. trotzdem zuzulassen) setze ich im HTML-Header:

<meta name="viewport" content="width=device-width" />

Weil sich recht wenig ändert ist das jetzt quasi die kleinst-mögliche Variante von Responsive Design Layout, aber ich finde auf einem Tablet wird die Seite gleich viel lesbarer.

Nachtrag: The Responsinator ist ein schönes Tool um einen Eindruck von üblichen mobilen Display-Größen zu bekommen.

Comments are closed.