Responsive Web Design in der Praxis: Fluid Grids, flexible Bilder, Media Queries

Vor knapp zwei Jahren habe ich hier über einen Artikel geschrieben, der mich nicht mehr losgelassen hat: „Responsive Web Design“ von Ethan Marcotte, erschienen am 25. Mai 2010 bei A List Apart. Damals habe ich angekündigt, das „an einem kleinen, unwichtigen Projekt“ auszuprobieren. Das habe ich getan, mehrfach, und seit letztem Sommer liegt das Thema auch als Buch auf meinem Schreibtisch — Marcottes schmaler Band bei A Book Apart, erschienen im Juni 2011. Jetzt ist es so weit: Das erste echte Kundenprojekt wird responsive gebaut, und ich schreibe auf, wie ich die drei Bausteine konkret umsetze.

Warum gerade jetzt? Weil die Ausreden ausgehen. Seit September 2011 läuft die Website des Boston Globe komplett responsive — eine große Tageszeitung, nicht irgendein Portfolio. Und seit zwei Wochen steht das neue iPad mit 2048 × 1536 Pixeln in den Läden. Ein Gerät, auf dem eine 960 Pixel breite Seite mit festen Bildern einfach nur klein und unscharf aussieht.

1. Fluid Grid: Zielwert geteilt durch Kontext

Marcottes Kernformel ist unspektakulär, aber sie funktioniert: target ÷ context = result. Man nimmt das Pixelmaß aus dem Layout, teilt es durch die Breite des umgebenden Elements und erhält einen Prozentwert. Meine bisherigen Layouts waren alle 960 Pixel breit, also rechne ich die um. Die Inhaltsspalte hat 620 Pixel, die Seitenleiste 300, dazwischen liegen 40 Pixel Abstand:

#wrapper {
  max-width: 960px;      /* vorher: width: 960px */
  margin: 0 auto;
}
#inhalt {
  float: left;
  width: 64.583333%;     /* 620 / 960 */
}
#seitenleiste {
  float: right;
  width: 31.25%;         /* 300 / 960 */
}
#inhalt p {
  margin-bottom: 1.5em;  /* Abstände in em statt px */
}

Die vielen Nachkommastellen sehen albern aus, aber Marcotte rät ausdrücklich davon ab, sie zu runden — die Browser rechnen damit sauber, und gerundete Werte summieren sich schnell auf über 100 Prozent, dann rutscht die Seitenleiste unter den Inhalt. Ich habe das zweimal erlebt, bevor ich es geglaubt habe.

2. Flexible Bilder: eine Zeile CSS, mit Haken

img, object, embed {
  max-width: 100%;
  height: auto;
}
img {
  -ms-interpolation-mode: bicubic; /* IE 7: sonst matschige Skalierung */
}

Das Bild wird nie breiter als sein Container und behält sein Seitenverhältnis. Zwei Dinge muss man wissen: Der Internet Explorer 6 kennt max-width nicht, da bleibt nur ein Ausdruck in width über eine eigene Stylesheet-Datei im Conditional Comment — oder man ignoriert ihn, was bei meinen Kunden inzwischen vertretbar ist. Und: Die Datei bleibt so groß, wie sie hochgeladen wurde. Ein 1.200 Pixel breites Foto, das auf dem Handy auf 300 Pixel schrumpft, lädt trotzdem seine 400 Kilobyte. Darauf habe ich noch keine gute Antwort, dazu später einmal mehr.

3. Media Queries: das Layout an der Bildschirmbreite umschalten

Ohne diesen dritten Baustein wäre das Ganze nur ein flüssiges Layout, wie es sie schon vor zehn Jahren gab. Media Queries erlauben es, CSS-Regeln an Bedingungen zu knüpfen. Unter 600 Pixeln lasse ich die zwei Spalten untereinanderfallen und vergrößere die Links in der Navigation, damit man sie mit dem Daumen trifft:

@media screen and (max-width: 600px) {
  #inhalt,
  #seitenleiste {
    float: none;
    width: auto;
  }
  #navigation li {
    display: block;
  }
  #navigation a {
    display: block;
    padding: 0.8em 1em;
    border-bottom: 1px solid #ddd;
  }
}

Damit das auf dem iPhone überhaupt greift, braucht die Seite eine Zeile im head. Ohne sie tut Mobile Safari so, als wäre der Bildschirm 980 Pixel breit, und zoomt die komplette Desktop-Ansicht einfach heraus:

<meta name="viewport" content="width=device-width, initial-scale=1">

Der Haken heißt wieder Internet Explorer: Versionen bis 8 verstehen keine Media Queries. Erst der IE 9 vom März letzten Jahres kann das. Für die älteren gibt es das kleine Skript respond.js von Scott Jehl, das min-width und max-width nachrüstet. Ich binde es ein und nehme in Kauf, dass IE-6-Nutzer die einspaltige Variante sehen.

Was ich mir vorgenommen habe

Ich fange mit genau einem Breakpoint an und schaue, wo das Layout tatsächlich bricht, statt vorab für jedes bekannte Gerät eine Regel anzulegen. Marcotte beschreibt Responsive Design weniger als Technik denn als neue Art, über Gestaltung nachzudenken — beim Umrechnen der Pixel merke ich, was er meint. Man hört auf, eine Seite als festes Blatt zu denken, und fängt an, sie als Verhältnis zu denken. Ob der Kunde das am Ende genauso begeistert sieht wie ich, erfahre ich in sechs Wochen.