Responsives Design — eine Seite, die auf allen Bildschirmen funktioniert

Die Nutzer kommen mit allem von kleinen Telefonen bis zu großen Bildschirmen, und eine gute Seite muss auf allen funktionieren, ohne eine eigene Fassung für jedes Gerät. Das nennt man responsives Design: das Layout fließt und passt sich dem verfügbaren Platz an, statt auf eine feste Breite festgelegt zu sein.

Der Grundgedanke ist, Maße nach Möglichkeit nicht in Pixeln festzuschreiben. Stattdessen verwendet man relative Einheiten und lässt Elemente einen Anteil des verfügbaren Platzes einnehmen. Ein Bild, das höchstens die Breite seines Containers einnehmen darf, schrumpft auf einem kleinen Bildschirm sauber mit, statt über den Rand hinauszulaufen. Relative Schriftgrößen sorgen dafür, dass der Inhalt zusammenhängend skaliert.

Eine Media Query lässt CSS Eigenschaften des Bildschirms abfragen — typischerweise die Breite — und bestimmte Regeln nur dann anwenden, wenn die Bedingung erfüllt ist. So kann ein Menü auf einem breiten Bildschirm waagerecht liegen und auf einem schmalen zu einer Schaltfläche zusammengeklappt werden. Die Bildschirmbreiten, bei denen das Layout wechselt, heißen Breakpoints; wähle sie danach, wann der Inhalt anfängt, falsch auszusehen, nicht nach bestimmten Geräten.

Oft ist es am einfachsten, mit dem kleinen Bildschirm anzufangen und nach oben zu bauen. Wer mobile-first beginnt, ist gezwungen, zuerst die wichtigsten Inhalte zu priorisieren, und fügt dann zusätzliches Layout und weitere Spalten hinzu, sobald mehr Platz da ist. Der umgekehrte Weg — groß anfangen und hinterher versuchen, alles auf einen kleinen Bildschirm zu pressen — endet häufiger im Chaos.

• 01Verwende flexible Breiten und relative Einheiten statt fester Pixelwerte
• 02Lass Bilder und Medien mit ihrem Container skalieren
• 03Verwende Media Queries, um das Layout an sinnvollen Breakpoints zu ändern
• 04Wähle die Umbruchpunkte nach dem Inhalt, nicht nach bestimmten Geräten
• 05Baue Mobile-First und erweitere das Layout, wenn mehr Platz da ist

Die Entwicklerwerkzeuge des Browsers können verschiedene Bildschirmgrößen nachbilden, und das ist ein guter Anfang. Teste aber auch auf einem echten Telefon, wo Berührung, langsamere Verbindung und ein kleiner Bildschirm Dinge offenlegen, die auf einem Computer gut aussehen. Ein Layout, das für Finger und nicht nur für einen Mauszeiger funktioniert, gehört zum Handwerk.

“Bei responsivem Design geht es nicht darum, die Seite für jeden Bildschirm neu zu bauen — sondern darum, dieselbe Seite atmen und sich dem Platz anpassen zu lassen.”

— Gängige Faustregel in der Webentwicklung