Media Queries sind jetzt Standard: Breakpoints, Viewport und die Sache mit dem Internet Explorer

Zwei Meldungen aus dem Juni, die für meine Arbeit mehr bedeuten als die meisten Produktvorstellungen dieses Jahres: Am 19. Juni hat das W3C die CSS3 Media Queries zur offiziellen Recommendation erklärt. Was ich seit März in Kundenprojekten einsetze, ist damit kein Entwurf mehr, sondern verabschiedeter Standard. Und am 6. Juni hat Google im Webmaster-Central-Blog erstmals ausdrücklich Responsive Web Design als empfohlene Konfiguration für Smartphone-Websites genannt: eine URL, ein HTML, die Darstellung regelt das CSS. Keine separate m.-Domain, keine Weiterleitung nach User-Agent.

Das zweite ist für Kundengespräche Gold wert. Bisher musste ich erklären, warum eine einzige, anpassungsfähige Website besser ist als eine „Handy-Version“. Jetzt kann ich sagen: Google sieht das genauso, und zwar aus Gründen, die den Kunden interessieren — ein Inhalt, eine Adresse, keine doppelten Seiten, die sich gegenseitig das Ranking streitig machen.

Breakpoints: nicht Geräte, sondern Inhalte

Mein erster Fehler im Frühjahr: Ich habe Breakpoints für Geräte angelegt. 320 Pixel fürs iPhone hochkant, 480 quer, 768 fürs iPad, 1024 für den Desktop. Dann kam im Mai das Galaxy S III mit 720 Pixeln Breite auf den Markt, und ich habe begriffen, dass diese Liste nie fertig sein wird. Inzwischen mache ich es andersherum: Ich ziehe das Browserfenster langsam schmaler und setze einen Breakpoint genau dort, wo das Layout anfängt, schlecht auszusehen — Zeilen zu lang, Navigation umgebrochen, Bild zu klein. Das sind bei meinen Layouts meist zwei bis drei Stellen, und keine davon liegt auf einem „offiziellen“ Gerätemaß.

Umgestellt habe ich auch die Richtung. Luke Wroblewski argumentiert in seinem Buch „Mobile First“ vom Oktober letzten Jahres, man solle mit dem kleinsten Bildschirm anfangen und nach oben erweitern. Für das CSS heißt das min-width statt max-width:

/* Grundlayout: eine Spalte, gilt überall */
#inhalt, #seitenleiste { width: auto; }

/* ab 640 px: zwei Spalten */
@media screen and (min-width: 40em) {
  #inhalt       { float: left;  width: 64.583333%; }
  #seitenleiste { float: right; width: 31.25%; }
}

/* ab 1000 px: mehr Luft, größere Schrift */
@media screen and (min-width: 62.5em) {
  body { font-size: 112.5%; }
}

Die Breakpoints stehen in em, nicht in Pixeln. Wenn ein Nutzer die Schrift im Browser vergrößert, wächst der Breakpoint mit, und das Layout kippt früher in die einspaltige Ansicht, statt winzige Spalten mit riesiger Schrift zu erzeugen. Das habe ich im April bei Lyza Gardner von Cloud Four gelesen und seitdem nicht mehr anders gemacht.

Der Viewport und zwei Fallen auf dem iPhone

Die Viewport-Zeile hatte ich schon im März erwähnt. Zwei Dinge habe ich seitdem dazugelernt. Erstens: In vielen Beispielen im Netz steht maximum-scale=1 oder user-scalable=no. Das verhindert, dass Nutzer die Seite mit zwei Fingern vergrößern können — für jemanden mit schlechten Augen eine Zumutung. Ich lasse es weg. Zweitens: Dreht man das iPhone vom Hochformat ins Querformat, vergrößert Mobile Safari den Text eigenmächtig, und das Layout springt. Dagegen hilft eine Zeile:

html { -webkit-text-size-adjust: 100%; }

Internet Explorer: drei Wege, keiner schön

Die Versionen 6 bis 8 ignorieren Media Queries komplett. Bei meinen Kunden liegt der Anteil dieser Browser je nach Zielgruppe zwischen fünf und zwanzig Prozent — bei Betrieben, deren Kunden aus Behörden und Großunternehmen kommen, eher am oberen Ende. Ich habe drei Varianten durchprobiert:

• respond.js rüstet min-width/max-width per JavaScript nach. Funktioniert gut, solange das CSS auf derselben Domain liegt und nicht zu groß ist. Mein Standard.
• Ein eigenes Stylesheet im Conditional Comment, das dem alten IE die Desktop-Breite fest zuweist. Robust, aber doppelte Pflege.
• Nichts tun und den IE 8 mit der einspaltigen Mobilansicht leben lassen. Geht bei Mobile First technisch, sieht auf einem 24-Zoll-Monitor aber traurig aus.

Testen: das Browserfenster lügt

Das Fenster schmaler zu ziehen zeigt, ob das Layout umbricht. Es zeigt nicht, ob man die Links mit dem Daumen trifft, ob der Text ohne Zoomen lesbar ist und wie lange die Seite über eine schlechte Mobilfunkverbindung lädt. Ich habe mir deshalb ein gebrauchtes Android-Telefon dazu gekauft, zum iPhone und zum iPad, und teste jede Seite auf allen dreien, bevor der Kunde sie sieht. Was mich dabei am meisten überrascht hat: Nicht das Layout macht die Probleme, sondern die Bilder. Das neue MacBook Pro mit Retina-Display, seit Juni im Handel, macht die Sache noch unübersichtlicher — plötzlich brauchen Bilder auf dem Desktop die doppelte Auflösung, auf dem Handy aber die halbe Dateigröße. Dafür gibt es bisher keine saubere Lösung, nur Behelfe. Das wird mein Thema für den Herbst.