Illustration: KI-generiert
Jede Website braucht heute ein Responsive Design, denn etwa die Hälfte aller Seitenaufrufe in Deutschland entfällt auf Smartphones. Die Seite passt sich dabei der Größe des Browserfensters an, in dem sie geöffnet wird.
Flexible Layouts im responsiven Webdesign
Ihre Texte und Bilder passen sich automatisch an den vorhandenen Platz an. Was am großen Monitor nebeneinander steht, etwa drei Leistungen in einer Reihe, erscheint auf dem Handy untereinander. Die Schrift behält dabei ihre Lesegröße, und jede Leistung nimmt die volle Breite des Displays ein.
Möglich wird das durch anteilige Größenangaben. Ein Bereich mit fest eingestellter Breite behält diese auch dann, wenn das Fenster schmaler ist, sodass Ihre Besucher seitlich schieben müssen. Ist seine Breite dagegen als Anteil angegeben, etwa als Hälfte des vorhandenen Platzes, wird er im schmalen Fenster von selbst schmaler.
Zwei Inhalte verlangen eine eigene Behandlung. Eine Preistabelle mit mehreren Werten je Zeile lässt sich auf dem Handy seitlich verschieben, während die übrige Seite stehen bleibt; ebenso kann aus jeder Tabellenzeile ein eigener Block mit Bezeichnung und Preis untereinander werden. Und bei einem Gruppenfoto verkleinern sich die Gesichter mit der Bildbreite, weshalb sich für kleine Bildschirme ein näherer Ausschnitt desselben Motivs hinterlegen lässt.
Angepasste Navigation auf dem Smartphone
Ihre Menüleiste verwandelt sich auf dem Smartphone in ein kompaktes Menü zum Aufklappen, meist das Hamburger-Menü mit den drei waagerechten Strichen. Dahinter stehen dieselben Einträge wie am Monitor, in derselben Reihenfolge und mit denselben Bezeichnungen.
Welche Einträge überhaupt in Ihr Menü gehören, entscheidet sich bei der Website-Struktur. Das Zusammenklappen hat allerdings seinen Preis. Untersuchungen zur Mobilnavigation zeigen, dass eine sichtbare Navigation deutlich häufiger angesteuert wird als eine, die hinter dem Symbol liegt; die Nielsen Norman Group wies zudem nach, dass Nutzer eine verborgene Navigation später als solche erkennen. Ihre wichtigste Handlung gehört deshalb zusätzlich als Schaltfläche neben das Symbol, beschriftet mit „Anfragen" oder „Anrufen". Eine Suche bietet den zweiten Zugang für alle, die ein bestimmtes Thema ansteuern.
Die Kopfzeile mit Logo, Menüsymbol und Schaltfläche wandert bei vielen Seiten beim Scrollen mit. Auf dem Handy belegt sie damit dauerhaft einen Streifen des ohnehin knappen Ausschnitts, weshalb sie dort schmaler ausfällt als am Monitor.
Die technische Grundlage: Media Queries und Prozentangaben
Für Ihre Seite nutzen Entwickler Programmierbefehle zur Erkennung der Bildschirmgröße, die sogenannten CSS Media Queries. Diese Befehle greifen an festgelegten Schwellen und weisen der Seite eine andere Aufteilung zu, etwa den Wechsel von zwei nebeneinanderliegenden Bereichen auf einen.
Wo diese Schwellen liegen, richtet sich nach Ihren Inhalten, denn die Maße einzelner Gerätemodelle verschieben sich mit jeder Generation. Dasselbe Telefon liefert zudem zwei Ansichten, je nachdem ob es hochkant oder quer gehalten wird, und die Seite folgt beiden ohne Nachladen. Zieht man das Browserfenster langsam schmaler, zeigt sich von selbst, wann eine Reihe zu eng steht. Zwischen den Schwellen sorgen flexible Prozentangaben anstelle fester Pixelwerte dafür, dass alles gleichmäßig mitwächst. Auch Schriftgrößen folgen diesem Prinzip, sodass eine Überschrift auf dem Handy lesbar bleibt und am Monitor ihre Wirkung entfaltet. Wie sich das auf Schriftwahl und Satzbild auswirkt, gehört zur Typografie.
Bessere Bedienbarkeit auf dem Handy
Ihre Besucher müssen auf dem Handy weder heranzoomen noch seitlich scrollen, um eine Zeile zu Ende zu lesen. Schaltflächen und Links lassen sich auf Anhieb treffen, weil sie großzügiger ausfallen als am Monitor und Abstand zueinander halten.
Formulare verlangen dabei die meiste Aufmerksamkeit. Die Felder laufen über die volle Breite, und ihre Beschriftung steht dauerhaft darüber, damit sie beim Ausfüllen sichtbar bleibt. Jedes zusätzliche Feld bedeutet Tippen auf einer eingeblendeten Tastatur, die den halben Ausschnitt einnimmt. Auf dem Handy brechen deshalb spürbar mehr Menschen das Ausfüllen ab als am Rechner, und in einer Auswertung von HubSpot stieg die Zahl der abgeschickten Formulare erheblich, nachdem die Felder von elf auf vier verringert worden waren. Für eine erste Anfrage genügen Name, Kontaktweg und Anliegen.
Dieselbe Großzügigkeit kommt der Barrierefreiheit zugute, die seit Juni 2025 für viele Angebote gesetzlich gefordert ist. Was dabei zu beachten ist, steht im Ratgeber zur barrierefreien Website.
Vorteil bei Google
Suchmaschinen bevorzugen Websites, die für Mobilgeräte eingerichtet sind, und Ihre Seiten profitieren davon in den Ergebnislisten. Google zieht für die Beurteilung einer Seite die mobile Fassung heran und bezieht deren Bedienbarkeit in die Bewertung ein. Daraus folgt, dass die Handy-Ansicht dieselben Texte, Überschriften und Bilder tragen sollte wie die große: Was dort fehlt, fehlt für die Bewertung ganz.
Dazu zählt auch die Ladezeit, denn im Mobilfunknetz dauert das Laden derselben Seite länger als über einen Festnetzanschluss. Komprimierte Bilder und sparsam eingebundene Schriften helfen hier, wie der Ratgeber zum Speed-Driven Webdesign zeigt.
Weniger Aufwand in der Pflege
Sie pflegen eine einzige Website für Computer und Handy gleichermaßen. Jede Änderung an einem Text, einem Preis oder einem Bild nehmen Sie an einer Stelle vor, und sie erscheint überall. Beim Einpflegen zeigen die gängigen Redaktionssysteme eine Vorschau für Handy und Monitor, sodass sich ein zu langer Titel oder ein ungünstiger Bildausschnitt sofort bemerkbar macht. Getrennte Fassungen wären dagegen bei jeder Anpassung doppelt zu bearbeiten, wobei Abweichungen zwischen beiden oft lange unbemerkt bleiben.
Fazit: Responsive Webdesign für alle Endgeräte
Responsives Webdesign gehört heute zur Grundausstattung jeder Website. Die Technik dahinter arbeitet selbsttätig, sobald sie eingerichtet ist. Ihre Aufmerksamkeit verlangen dagegen die inhaltlichen Entscheidungen: welche Leistung auf dem Handy zuerst erscheint, welche Handlung neben dem Menüsymbol sichtbar bleibt, wie viele Felder Ihr Formular verlangt und welcher Bildausschnitt auf kleinen Displays gezeigt wird.