Webdesign · Grundlagen
Responsive Webdesign: Websites für jedes Gerät
Die meisten Besucher kommen heute mit dem Handy. Eine Website, die dort nicht funktioniert, verliert sie, bevor sie den ersten Satz gelesen haben. Was responsive Webdesign bedeutet und worauf es ankommt.
Kurz beantwortet
Responsive Webdesign bedeutet, dass sich eine Website automatisch an die Bildschirmgröße anpasst, vom Handy über das Tablet bis zum großen Monitor. Texte bleiben ohne Zoomen lesbar, Schaltflächen lassen sich mit dem Finger bedienen und nichts steht seitlich über. Google bewertet Websites nach ihrer mobilen Fassung, deshalb ist eine gute Handy-Darstellung auch für die Sichtbarkeit entscheidend.
Wie responsive Webdesign funktioniert
Eine responsive Website ist eine einzige Website, die sich je nach Bildschirm anders anordnet. Auf dem großen Monitor stehen Inhalte nebeneinander, auf dem Handy untereinander. Die Navigation wird auf kleinen Bildschirmen zum Menüknopf, Bilder werden kleiner geladen, Abstände angepasst.
Technisch geschieht das über flexible Raster, Bilder, die sich der verfügbaren Breite anpassen, und Regeln im CSS, die ab bestimmten Breiten greifen. Diese Schwellen heißen Breakpoints. Was HTML und CSS dabei leisten, erklärt der Artikel HTML und CSS für Auftraggeber.
Mobile First: vom kleinen Bildschirm aus denken
Mobile First heißt, eine Website zuerst für das Handy zu planen und dann für größere Bildschirme zu erweitern. Das zwingt zu Klarheit: Auf einem kleinen Bildschirm ist kein Platz für Nebensächliches. Was dort wichtig ist, ist meist auch auf dem Desktop das Wichtigste.
Für die Suchmaschine ist das nicht nur eine Designfrage. Google nutzt für die Bewertung die mobile Fassung einer Website. Fehlen dort Inhalte, die am Desktop sichtbar sind, zählen sie für das Ranking weniger. Mehr dazu im Artikel Technisches SEO.
Woran Sie eine gute Umsetzung erkennen
| Merkmal | Gut | Problematisch |
|---|---|---|
| Text | ohne Zoomen lesbar, angenehme Zeilenlänge | winzige Schrift oder Zeilen über die ganze Breite |
| Bedienung | Schaltflächen und Links groß genug für den Finger, mit Abstand | eng beieinander liegende kleine Links |
| Breite | nichts steht seitlich über, kein Wischen zur Seite nötig | Seite lässt sich seitlich verschieben |
| Kontakt | Telefonnummer antippbar, Formular kurz | lange Formulare mit vielen Pflichtfeldern |
| Tempo | Bilder in passender Größe, schnelle erste Anzeige | große Desktopbilder auf dem Handy |
| Störer | Hinweise, die sich leicht schließen lassen | Einblendungen, die den Inhalt verdecken |
So testen Sie Ihre Website
Auf echten Geräten
Die wichtigsten Seiten auf dem eigenen Handy durchklicken, im Hoch- und im Querformat. Ein verkleinertes Browserfenster zeigt nicht alles.
Mit dem Daumen
Lässt sich das Menü mit einer Hand bedienen? Trifft man jeden Link beim ersten Versuch?
Den Weg zur Anfrage
Vom Einstieg über eine Leistungsseite bis zum abgeschickten Formular. Jeder unnötige Schritt kostet Anfragen.
Die Ladezeit
PageSpeed Insights von Google zeigt für die mobile Fassung, was bremst.
Typische Fehler
- Desktop zuerst, Handy als Nachgedanke. Dann wirkt die mobile Fassung wie eine gequetschte Desktopseite.
- Versteckte Inhalte. Wichtige Informationen, die auf dem Handy ausgeblendet werden, fehlen dort auch für Google.
- Feste Breiten. Tabellen, Bilder oder Videos mit fester Breite lassen die Seite seitlich überstehen.
- Zu viele Einblendungen. Cookie-Hinweis, Newsletter und Chat gleichzeitig verdecken auf dem Handy den halben Bildschirm.
Wie KKM-Design responsiv prüft
Häufige Fragen
Brauche ich eine eigene mobile Website?
Nein. Eine responsive Website passt sich an alle Geräte an. Getrennte mobile Websites unter eigener Adresse sind veraltet und machen Pflege und Suchmaschinenoptimierung unnötig kompliziert.
Ist meine alte Website responsiv?
Rufen Sie sie auf dem Handy auf. Wenn Sie zoomen oder seitlich wischen müssen, um Text zu lesen, ist sie es nicht oder nur unzureichend.
Kostet responsives Design extra?
Bei einer professionellen neuen Website gehört es heute zum Standard. Wenn eine bestehende Website nachträglich angepasst werden muss, ist ein Neuaufbau oft sinnvoller als Flickwerk.
Kay Strack · Webdesigner und Cloud Engineer · KKM-Design