Erstmals erschienen im April 2019, im Oktober 2026 neu geschrieben.
Responsives Design heisst: Eine Website passt sich dem Bildschirm an, auf dem sie gerade angezeigt wird. Eine einzige Fassung ordnet sich selbst um, statt je eine fürs Handy und eine für den Computer.
Auf dem Handy stehen die Inhalte untereinander, auf dem grossen Bildschirm nebeneinander. Das Menü klappt zusammen, Bilder werden kleiner, die Schrift bleibt lesbar. Inhalt und Adresse sind überall dieselben.
Warum das heute der Normalfall ist
2019 musste man responsives Design noch begründen. Heute ist es umgekehrt: Eine Website, die auf dem Handy nicht funktioniert, gilt als kaputt.
Dafür gibt es zwei Gründe. Viele Leute sehen deine Website zuerst oder nur auf dem Handy. Und Google beurteilt Websites anhand der Handy-Ansicht. Was dort fehlt oder nicht lesbar ist, zählt für die Suche nicht.
Wie es funktioniert
Drei Bausteine tragen das Ganze, und sie sind seit Jahren dieselben:
- Ein flexibles Raster. Breiten werden im Verhältnis zum verfügbaren Platz angegeben, nicht in festen Pixeln.
- Flexible Bilder. Ein Bild wird nie breiter als der Platz, den es hat. Gute Websites liefern zudem je nach Bildschirm eine kleinere oder grössere Datei aus, damit das Handy nicht ein Bild für den Kinobildschirm laden muss.
- Umbruchpunkte. Ab einer bestimmten Breite ordnet sich das Layout neu: drei Spalten werden zu zwei, zwei zu einer. In der Fachsprache heissen die Regeln dafür Media Queries.
Was seit 2019 dazugekommen ist
Bausteine, die sich selbst anpassen. Früher richtete sich alles nach der Breite des Bildschirms. Heute kann sich ein einzelner Baustein, etwa eine Karte mit Bild und Text, nach dem Platz richten, den er gerade hat. Dieselbe Karte sieht in einer schmalen Seitenspalte anders aus als im breiten Hauptbereich. Das heisst Container Queries und funktioniert seit 2023 in allen gängigen Browsern.
Fliessende Schriftgrössen. Statt an jedem Umbruchpunkt zu springen, wächst die Schrift stufenlos mit dem Bildschirm, innerhalb einer Unter- und einer Obergrenze.
Einstellungen der Nutzer. Eine Website kann darauf reagieren, ob jemand den dunklen Modus eingeschaltet hat, grössere Schrift braucht oder Animationen reduziert haben möchte. Die Anpassung richtet sich also nicht mehr allein nach der Breite.
Finger statt Maus. Ein Finger trifft weniger genau als ein Mauszeiger, und er kann nicht über etwas schweben. Schaltflächen brauchen genug Fläche und Abstand, und ein Menü, das nur beim Darüberfahren aufgeht, funktioniert auf dem Handy nicht.
Responsiv ist nicht gleich gut
Technisch responsiv ist heute fast jede Website, weil jedes aktuelle WordPress-Theme das mitbringt. Das heisst noch nicht, dass sie auf dem Handy gut zu benutzen ist. Typische Stellen, an denen es hakt:
- Tabellen, die seitlich aus dem Bildschirm laufen
- ein Titelbild, das den ganzen ersten Bildschirm füllt, bevor ein Wort kommt
- Cookie-Banner und Chat-Fenster, die zusammen den halben Bildschirm verdecken
- Telefonnummern, die man nicht antippen kann
- Formulare mit winzigen Feldern
Was ein Layout darüber hinaus für den Text leisten muss, steht im Beitrag Kommunikation auf Internetseiten.
Deine Seite in fünf Minuten prüfen
- Öffne die Startseite auf dem Handy. Kannst du alles lesen, ohne zu zoomen?
- Lässt sich die Seite seitlich verschieben? Dann ragt irgendwo etwas über den Rand.
- Tippe mit dem Daumen auf Menü, Telefonnummer und die wichtigste Schaltfläche. Triffst du sie beim ersten Mal?
- Fülle das Kontaktformular auf dem Handy aus. Erscheint bei der E-Mail-Adresse die passende Tastatur?
- Am Computer: Ziehe das Browserfenster langsam schmaler. Das Layout soll sich an jeder Stelle sauber umordnen, nicht nur bei den Breiten gängiger Geräte.