Responsive Design ist keine Zutat, die nach dem Entwurf hinzukommt, sondern die Grundbedingung. Der überwiegende Teil der Besucher kommt vom Telefon, und eine Seite, die am 27-Zoll-Bildschirm entstanden ist und dort geprüft wurde, hat mit hoher Wahrscheinlichkeit ein Problem.
Warum von der kleinen Breite aufwärts
Wer mit der kleinen Breite beginnt, muss entscheiden, was wirklich gebraucht wird. Auf 375 Pixel Breite ist kein Platz für drei Spalten, eine Seitenleiste, einen Slider und eine Kachelnavigation. Diese Beschränkung erzwingt Priorisierung.
Wer umgekehrt arbeitet, hat am Ende ein volles Layout und muss es zusammenfalten. Das führt zu den typischen Symptomen: Inhalte werden ausgeblendet statt umsortiert, eine Seitenleiste landet unten und wird nie gesehen, ein Menü mit zwölf Punkten wird zu einer sehr langen Liste.
Praktisch heißt es: Zuerst die Reihenfolge festlegen, in der Inhalte auf einer schmalen Spalte stehen sollen. Diese Reihenfolge ist die inhaltliche Priorität, und sie sollte auf jeder Breite erkennbar bleiben.
Breakpoints
Ein Breakpoint gehört dorthin, wo der Inhalt es verlangt, nicht auf die Maße eines Gerätemodells. Geräteabmessungen ändern sich, Inhalte nicht.
Ein brauchbarer Satz für die meisten Projekte:
| Ab Breite | Typische Änderung |
|---|---|
| Basis | eine Spalte, Drawer-Menü, gestapelte Karten |
| 640 Pixel | zweispaltige Karten, größere Abstände |
| 768 Pixel | zweispaltige Inhaltsbereiche, größere Überschriften |
| 1024 Pixel | Hauptnavigation sichtbar, Seitenleiste neben dem Inhalt, dreispaltige Raster |
| 1280 Pixel | maximale Inhaltsbreite erreicht, Ränder wachsen |
Wichtig bei der technischen Umsetzung: Wenn ein Werkzeug mit vorgegebenen Breakpoints verwendet wird und einzelne davon überschrieben werden, müssen alle in aufsteigender Reihenfolge deklariert sein. Sonst stehen die Medienabfragen im erzeugten Stylesheet in falscher Reihenfolge, und die Regel für die größere Breite verliert gegen die für die kleinere.
Umbau-Muster, die funktionieren
Raster von 1 auf 2 auf 3 Spalten. Das häufigste und robusteste Muster. Karten mit gleicher Struktur, die sich stapeln.
Navigation zu Drawer. Ab der kleinen Breite ein Menü, das von rechts einfährt. Wichtig: Es muss mit der Tastatur bedienbar und mit Escape schließbar sein, und die Schaltfläche braucht eine erkennbare Beschriftung. Siehe Tastaturbedienung.
Seitenleiste unter den Inhalt. Sinnvoll, wenn die Seitenleiste ergänzend ist. Enthält sie eine wichtige Handlungsaufforderung, gehört diese zusätzlich in den Inhaltsfluss.
Tabelle mit eigenem seitlichen Scrollbereich. Eine breite Tabelle wird in einen Bereich gelegt, der selbst seitwärts scrollt. Wichtig ist, dass die Seite dabei nicht mitscrollt, sonst entsteht der klassische horizontale Überlauf des ganzen Dokuments.
Zwei Zeilen statt einer. Eine Kopfzeile mit Logo, Navigation und Schaltfläche wird auf zwei Zeilen verteilt, statt alles zu verkleinern.
Bilder mit festem Seitenverhältnis. Damit das Layout beim Laden nicht verrutscht und der Zuschnitt auf allen Breiten funktioniert.
Was auf Telefonen typischerweise bricht
- Horizontaler Überlauf. Ursache ist fast immer ein einzelnes Element: eine breite Tabelle, ein Codeblock, ein Bild mit festgelegter Breite, ein sehr langes Wort ohne Umbruchmöglichkeit. Findbar, indem man in den Entwicklerwerkzeugen die Breite des Dokuments prüft.
- Zu kleine Klickflächen. Unter etwa 44 Pixel Höhe wird das Treffen zur Glückssache. Betrifft besonders Icon-Schaltflächen und Links, die direkt untereinander stehen.
- Feste Höhen. Ein Element mit fester Höhe, in dem auf schmaler Breite mehr Text steht, schneidet Inhalt ab.
- Text in Bildern. Bei Verkleinerung unleserlich, weil er nicht mitfließt.
- Überlagerungen mit Bildschirmhöhe. Ein Element mit 100 Prozent Viewporthöhe wird auf Telefonen durch die Adressleiste beschnitten.
- Menüs, die auf Überfahren reagieren. Auf Touchgeräten gibt es kein Überfahren; ein Untermenü, das nur so öffnet, ist unerreichbar.
- Formulare mit engen Feldern. Beim Fokussieren fährt die Bildschirmtastatur ein und verdeckt die Hälfte der Seite. Wichtige Elemente dürfen nicht unmittelbar unter dem Feld liegen.
- Bildschirmtastatur mit falschem Typ. Ein Telefonnummernfeld ohne passenden Eingabetyp zeigt die Buchstabentastatur.
Testen: der Ablauf
Erst im Browser, bei 360, 768, 1024 und 1440 Pixel Breite. Dabei nicht nur springen, sondern die Breite langsam ziehen: Die Zwischenbreiten sind die, in denen Layouts brechen, und niemand entwirft für sie.
Dann auf einem echten Telefon. Nicht die Vorschau eines Editors, sondern die veröffentlichte Seite. Dabei prüfen: Klickflächen tatsächlich treffen, Formular tatsächlich ausfüllen, Menü tatsächlich öffnen und schließen.
Mit vergrößerter Systemschrift. Auf beiden gängigen Systemen lässt sich die Schriftgröße systemweit erhöhen. Eine Seite, die feste Pixelwerte für alles nutzt, ignoriert diese Einstellung.
Bei 200 Prozent Zoom am Rechner. Das ist gleichzeitig ein Barrierefreiheitskriterium: Inhalte müssen lesbar und erreichbar bleiben.
Im Querformat. Wird selten geprüft und bricht bei Elementen mit voller Bildschirmhöhe regelmäßig.