Was bedeutet responsives Webdesign?

Responsives Webdesign passt das Layout an Bildschirmgröße und verfügbaren Platz an. Derselbe Inhalt kann auf Smartphone, Tablet und großem Monitor anders angeordnet werden, damit er überall lesbar und bedienbar bleibt.

Mehr als eine verkleinerte Desktopseite

Eine feste Breite kann auf Mobilgeräten winzige Texte, horizontales Scrollen oder ständiges Zoomen verursachen. In einem flexiblen System ordnen sich Spalten neu, Bilder behalten ihre Proportionen und Schaltflächen bleiben per Berührung erreichbar. Eine separate mobile Website kann in bestimmten Fällen sinnvoll sein, erfordert jedoch zusätzliche Pflege und sorgfältige Inhaltsabstimmung. Für die meisten Unternehmenswebsites ist eine gemeinsame responsive Version praktischer.

Auf echten Geräten prüfen

Teste Menü, lange Überschriften und Formulare auf kleinen Displays im Hoch- und Querformat. Prüfe auch Tastaturbedienung und vergrößerten Text. PageSpeed Insights liefert hilfreiche Leistungsdaten, ersetzt aber keine Nutzbarkeitsprüfung; ein einzelner Punktwert erklärt auch nicht die Besucherzahl. Ziel ist eine gleichermaßen gute Erfahrung, nicht ein millimetergenau identisches Bild auf jedem Gerät.

• Großer Bildschirm: Nebeneinanderliegende Spalten sind möglich, solange die Textbreite gut verwendbar bleibt.
• Zwischenbreite: Beziehungen müssen auch zwischen den beiden Extremgrößen zum Inhalt passen.
• Mobil: Spalten können untereinander stehen; Lesereihenfolge und wichtige Aktionen bleiben erreichbar.

Breakpoints am Inhalt ausrichten

Ein Breakpoint bezeichnet keinen bestimmten Telefontyp, sondern den Moment, in dem eine Anordnung nicht mehr bequem funktioniert. Zwei Spalten können nebeneinander bleiben, solange Text und Bild brauchbare Größen behalten. Wird der Absatz zu schmal oder passt der Button nicht mehr, sollte die Komposition umgestellt werden. Längere deutsche Texte oder größere Schrift können diesen Punkt früher erreichen. Responsive Gestaltung lässt sich deshalb nicht auf einige bekannte Displaymaße reduzieren. Auch Zwischenbreiten müssen geprüft werden. Die Aufgabe besteht darin, Inhalte unter wechselnden Bedingungen nutzbar zu halten, nicht nur einige ausgewählte Screenshots passend aussehen zu lassen.

Das Wesentliche im Bild erhalten

Ein breites Hero-Bild kann mobil einen anderen Ausschnitt benötigen. Wähle den Fokus so, dass Gesicht, Produkt oder wichtiger grafischer Teil erhalten bleiben. Proportionaler Zuschnitt und vollständige proportionale Anzeige sind unterschiedliche Entscheidungen. Bei einem Dokument ist möglicherweise der gesamte Inhalt wichtig, bei einem atmosphärischen Hintergrund die gefüllte Fläche. Enthält das Bild lesbare Schrift, prüfe diese besonders in kleinen Größen. Geeignete Bildvarianten und vernünftige Dateigrößen unterstützen das mobile Erlebnis, während große Monitore trotzdem eine scharfe Darstellung erhalten. Bildwahl und Layout sollten daher gemeinsam beurteilt werden, nicht als unabhängige Aufgaben.

Bildzuschnitt passend zum Inhalt.

• Breite Ansicht: Bild und Text erhalten ausreichend Platz.
• Mobile Ansicht: Der wichtige Bildausschnitt bleibt sichtbar.
• Dokumentbild: Vollständiger Inhalt kann wichtiger als Flächenfüllung sein.

Mehr als die Breite verändert sich

Bedienleisten des mobilen Browsers, Bildschirmtastatur und Querformat beeinflussen den verfügbaren Raum. Ein bildschirmfüllendes Panel darf längere Texte oder das Formularende nicht abschneiden. Mindesthöhe und natürliches Scrollen sind häufig besser als eine starre Höhe. Teste wichtige Aufgaben mit tatsächlicher Eingabe. Das aktive Feld soll sichtbar bleiben, der Button erreichbar sein und eine Fehlermeldung nicht außerhalb des Displays erscheinen. Besonders bei Formularen zeigt sich, ob eine schöne Anordnung unter echten Bedingungen funktioniert. Der Platzbedarf entsteht nicht nur durch die ursprüngliche Seitenhöhe, sondern auch durch die jeweilige Interaktion.

Mit einem kurzen Ablauf testen

Öffne die Startseite, finde eine Leistung, lies eine Referenz und sende ein Testformular. Wiederhole den Ablauf auf kleinem Telefon, mittlerem Bildschirm und großem Monitor. Prüfe Tastaturfokus, vergrößerte Schrift und reduzierte Bewegung. Wenn Spalten untereinander stehen, muss die Inhaltsreihenfolge sinnvoll bleiben. Wichtige Informationen auf Mobilgeräten einfach auszublenden ist keine überzeugende responsive Lösung. Die Umstellung soll Zugang bewahren statt problematische Inhalte verstecken. Ein solcher Aufgabenvergleich zeigt häufig mehr als eine reine Prüfung von Bildschirmbreiten, weil dabei Navigation, Lesen und tatsächliche Bedienung gemeinsam bewertet werden.

Weiterlesen

Website-Gestaltung: vom ersten Eindruck zum nutzbaren Erlebnis

MDN · Responsive design