Responsive
Webdesign.

Responsive heißt nicht: alles wird kleiner

Ein häufiges Missverständnis: Responsive Design bedeutet, dass dieselben Elemente auf kleinen Bildschirmen einfach schrumpfen. Tatsächlich geht es um etwas anderes — nämlich darum, dass sich Anordnung, Priorität und Bedienlogik dem Kontext anpassen. Ein Nutzer am Smartphone hat eine andere Situation als einer am Schreibtisch: weniger Platz, weniger Zeit, einen Daumen statt einer Maus, oft schlechteres Netz.

Mobile First richtig verstanden

Mobile First heißt nicht, dass die Desktop-Version egal ist. Es heißt, dass ihr mit der stärksten Einschränkung anfangt: wenig Platz. Was auf 375 Pixel Breite noch sinnvoll ist, hat den Prioritätstest bestanden. Von dort nach oben zu erweitern ist einfach — der umgekehrte Weg zwingt euch, im Nachhinein wegzulassen, und dabei bleibt regelmäßig das Falsche liegen.

Breakpoints setzen

Breakpoints sollten sich am Inhalt orientieren, nicht an Gerätemodellen. Die Frage lautet nicht „wie breit ist ein iPad“, sondern „ab welcher Breite bricht mein Layout“. Trotzdem hilft ein grober Rahmen als Ausgangspunkt:

Der letzte Punkt wird oft vergessen: Ohne Maximalbreite werden Textzeilen auf großen Monitoren 200 Zeichen lang und damit unlesbar. Begrenzt Fließtext auf 60 bis 80 Zeichen pro Zeile, egal wie viel Platz vorhanden ist.

Touch-Bedienung

• Klickflächen mindestens 44 × 44 Pixel, mit ausreichend Abstand zueinander
• Wichtige Aktionen im unteren Bildschirmdrittel — dort reicht der Daumen ohne Umgreifen
• Keine Funktion darf ausschließlich per Hover erreichbar sein
• Formularfelder mit passendem Eingabetyp: type="tel" öffnet die Zifferntastatur, type="email" die passende Belegung
• Autofill zulassen und Autocomplete-Attribute setzen — spart auf dem Handy erheblich Tipparbeit
• Kein Zoom-Verbot: user-scalable=no ist eine Barriere und keine Designentscheidung

Inhalte priorisieren statt verstecken

Ein verbreiteter Fehler ist, auf Mobilgeräten Inhalte per CSS auszublenden. Das spart keine Ladezeit — die Inhalte werden weiterhin geladen — und Google bewertet die mobile Version als maßgeblich. Was mobil fehlt, fehlt damit faktisch ganz.

• Statt ausblenden: umsortieren, zusammenfassen oder in ein Akkordeon legen
• Bilderstrecken mobil reduzieren, indem weniger Bilder geladen werden, nicht indem sie versteckt werden
• Lange Tabellen in Kartenansicht überführen oder gezielt scrollbar machen — nie die ganze Seite scrollen lassen
• Sekundäre Navigation nach unten verlagern statt entfernen

Technische Umsetzung

• Viewport-Meta-Tag korrekt gesetzt, ohne Zoomsperre
• Relative Einheiten für Größen und Abstände, damit Systemeinstellungen respektiert werden
• Container Queries für Komponenten, die in verschiedenen Kontexten stehen — nicht alles über Viewport-Breite lösen
• srcset und sizes für Bilder, damit Mobilgeräte kleinere Dateien bekommen
• prefers-reduced-motion beachten: Animationen abschalten, wenn Nutzer das eingestellt haben
• Kein horizontales Überlaufen: overflow-x am Body ist ein Pflaster, kein Fix — die Ursache liegt meist bei einem zu breiten Element

Was auf dem Desktop niemand merkt

1. 1Ein zu breites Element erzeugt horizontales Scrollen auf der ganzen Seite
2. 2Fixierte Kopfzeile verdeckt beim Anspringen von Ankern die Überschrift
3. 3Der Absenden-Button liegt hinter der eingeblendeten Tastatur
4. 4Cookie-Banner überdeckt auf kleinen Displays die gesamte Seite und lässt sich kaum schließen
5. 5Telefonnummer ist kein Link — auf dem Smartphone der wichtigste Klick überhaupt
6. 6Hover-Menü klappt bei Berührung auf und lässt sich nicht mehr schließen
7. 7Bildunterschriften rutschen unter das falsche Bild, weil das Grid umbricht

Ein realistischer Testplan

Emulatoren reichen für den Grobcheck, ersetzen aber keine echten Geräte. Zwei Testgeräte im Büro kosten weniger als ein einziger nachträglicher Fix-Zyklus.