Responsive Webdesign verständlich planen

Grundlage

Die verfügbare Breite verändert die Darstellung einer Seite. Welche Informationen Besucher benötigen, ergibt sich jedoch aus ihrer Aufgabe und sollte nicht allein vom verwendeten Gerät abhängen.

Sammeln Sie zunächst die Aufgaben Ihrer Besucher. Möchten sie eine Leistung verstehen, Unterlagen finden, einen Termin anfragen oder eine Telefonnummer erreichen? Diese Wege müssen auch auf einem kleinen Bildschirm nachvollziehbar bleiben. Eine mobile Ansicht darf anders aufgebaut sein als die breite Fassung. Sie sollte aber keine wesentlichen Voraussetzungen, Einschränkungen oder Kontaktinformationen verlieren, nur damit die Seite kürzer wirkt.

Längere Inhalte lassen sich mit klaren Abschnitten ordnen. Zusätzliche Erklärungen können beispielsweise in bedienbaren Aufklappbereichen stehen. Wichtig ist, dass diese Informationen zugänglich bleiben und nicht erst durch eine unklare Geste entdeckt werden müssen. Eine einzelne große Schaltfläche ersetzt keine Erklärung des Angebots. Besucher sollen beurteilen können, ob die Leistung zu ihrer Anfrage passt, bevor sie persönliche Angaben übermitteln.

Prüfen Sie besonders Inhalte, die am großen Bildschirm nebeneinander stehen. Auf dem Smartphone können Karten untereinander erscheinen. Ihre Reihenfolge muss dann weiterhin verständlich sein. Ein Text wie „siehe rechts“ verliert seinen Sinn, wenn die betreffende Grafik darunter steht. Auch nummerierte Schritte brauchen eine logische Reihenfolge. Die Planung von Inhalten und Struktur schafft dafür eine Grundlage, die anschließend in mehreren Ansichten überprüft wird.

Der erste Bildschirm soll das Thema erklären und einen sinnvollen nächsten Schritt zeigen. Große Schrift, viel Leerraum und hohe Einstiegsbilder können zusammen den gesamten sichtbaren Bereich verbrauchen. Dann ist schwer erkennbar, dass darunter bereits nützliche Informationen beginnen. Prüfen Sie deshalb den tatsächlichen Einstieg einschließlich Kopfbereich, Schaltflächen und möglicher Hinweise. Einzelne Komponenten wirken im Entwurf häufig kleiner als in ihrer Kombination.

Die Schrift muss zum verfügbaren Raum passen. Eine Überschrift kann auf dem Smartphone mehrere Zeilen benötigen, obwohl sie am Rechner kurz erscheint. Kontrollieren Sie sinnvolle Umbrüche und ausreichende Zeilenabstände. Vermeiden Sie erzwungene Trennungen, die auf anderen Breiten unpassend werden. Auch Fließtexte brauchen ein ruhiges Maß. Sehr kleine Texte lösen ein Platzproblem optisch, erschweren aber das Lesen und sind keine gute Antwort auf lange Inhalte.

Verwenden Sie längere Namen, vollständige Kontaktangaben und realistische Schaltflächenbeschriftungen. Prüfen Sie außerdem die Zwischenbreiten. Eine Seite kann auf einem schmalen Smartphone und einem großen Monitor gut aussehen, während auf einem Tablet Navigation oder Karten ungünstig umbrechen. Die Anpassung wird deshalb am Inhalt ausgerichtet und nicht nur an wenigen bekannten Gerätenamen.

Umsetzung

Eine flexible Spaltenanordnung ist nur ein Teil der Arbeit. Menüs, Formulare und erklärende Abbildungen benötigen ebenfalls eine verständliche Darstellung und passende Bedienmöglichkeiten.

Öffnen und schließen Sie das mobile Menü mehrmals. Sind alle wichtigen Ziele erreichbar? Lässt sich ein Untermenü unabhängig von einem übergeordneten Link bedienen? Bleibt erkennbar, welche Seite gerade geöffnet ist? Testen Sie auch das Verhalten nach dem Wechsel der Ausrichtung oder Fensterbreite. Eine einmal korrekt geöffnete Navigation beweist noch nicht, dass die weiteren Zustände ebenfalls funktionieren.

Feste Kopfbereiche und schwebende Schaltflächen dürfen keine wichtigen Inhalte verdecken. Prüfen Sie Sprunglinks, aufklappbare Antworten und den unteren Seitenbereich. Dort können sich beispielsweise Cookie-Einstellungen, Kontaktangaben und eine Schaltfläche zum Seitenanfang gegenseitig überlagern. Für die Kontrolle wird bis zum tatsächlichen Ende der Seite gescrollt. Eine verkleinerte Gesamtaufnahme kann solche Probleme verdecken, weil die einzelnen Elemente darin kaum noch lesbar sind.

Kontaktwege werden bis zu ihrem Ergebnis geprüft. Eine Telefonnummer soll korrekt verknüpft sein. Ein Formular benötigt verständliche Feldbezeichnungen und Fehlermeldungen. Nach einer Auswahl oder Eingabe dürfen Angaben nicht unerwartet verschwinden. Testen Sie die Bedienung auch mit der Tastatur und achten Sie auf einen sichtbaren Fokus. Eine gute Berührungsbedienung macht diese Kontrolle nicht überflüssig, denn mobile Geräte können ebenfalls mit anderen Eingabemöglichkeiten genutzt werden.

Ein Foto kann meist innerhalb einer flexiblen Fläche dargestellt werden. Trotzdem muss sein Ausschnitt geprüft werden. Wird ein Gesicht angeschnitten oder ein für die Erklärung wichtiger Gegenstand ausgeblendet, braucht es eine andere Position oder ein anderes Format. Für passende Dateigrößen und Varianten wird bereits bei der Vorbereitung gesorgt. Eine große Originaldatei allein dadurch optisch klein anzuzeigen, reduziert ihre übertragene Datenmenge nicht automatisch.

Grafiken stellen andere Anforderungen. Eine breite Ablaufdarstellung mit mehreren Kästen kann beim einfachen Verkleinern unlesbar werden. Auf kleinen Bildschirmen ist häufig eine vertikale Fassung hilfreicher. Beschriftungen, Reihenfolge und Verbindungen müssen dabei erhalten bleiben. Pfeile sollen den Zusammenhang zeigen, ohne Text oder Karten zu berühren. Bei Vergleichen paralleler Möglichkeiten wären gerichtete Pfeile dagegen möglicherweise irreführend, weil sie einen zeitlichen Ablauf nahelegen.

Ergänzen Sie wichtige Zusammenhänge durch eine verständliche Textfassung. Ein Alternativtext kann den Zweck eines Bildes beschreiben, ersetzt aber nicht immer die ausführliche Erklärung einer komplexen Grafik. Beachten Sie auch Tabellen oder Karten, die eine besondere Anordnung benötigen. Falls ein eigener Bereich seitlich bewegt werden muss, sollte seine Bedienung erkennbar sein. Die übrige Seite sollte nicht wegen eines einzelnen zu breiten Elements horizontal verschoben werden müssen.

Entscheidung

Die Abnahme verbindet Sichtkontrolle mit funktionierenden Abläufen. Dokumentierte Befunde helfen, Änderungen gezielt umzusetzen und die korrigierte Fassung erneut zu prüfen.

Prüfen Sie mindestens eine schmale Ansicht, eine mittlere Breite und den großen Bildschirm. Gehen Sie die vollständige Seite durch. Achten Sie auf abgeschnittene Texte, unerwartete Leerflächen, überlagerte Bedienelemente und schwer lesbare Grafiken. Lange Bildschirmaufnahmen können durch feste Elemente oder nachgeladene Inhalte fehlerhaft zusammengesetzt werden. Auffällige Stellen werden deshalb zusätzlich direkt im Browser geprüft.

Auch vergrößerte Darstellung gehört zur Kontrolle. Inhalte sollen möglichst neu umbrechen, statt zum Lesen einzelner Zeilen ständig seitliche Bewegung zu verlangen. Die W3C-Erläuterung zur Neuanordnung beschreibt hierfür einen Prüfmaßstab von 320 CSS-Pixeln Breite und berücksichtigt notwendige Ausnahmen für zweidimensionale Inhalte. Dieser einzelne Test ist ein hilfreicher Baustein. Er stellt für sich noch keine vollständige Prüfung der Barrierefreiheit dar.

Erfassen Sie einen Fehler so, dass er erneut auffindbar ist. Notieren Sie Seite, Breite, betroffenen Abschnitt und die ausgeführte Handlung. Nach einer Korrektur wird derselbe Ablauf wiederholt. Wenn eine gemeinsame Gestaltungsvorgabe geändert wurde, müssen zusätzlich andere davon betroffene Seiten betrachtet werden. Der Umfang dieser Prüfung richtet sich nach der Änderung. Eine Korrektur am globalen Menü betrifft mehr Seiten als der Austausch einer einzelnen Bildunterschrift.

Die mobile Darstellung wird unter realistischen Bedingungen geprüft. Ein schneller Büroanschluss kann verdecken, dass große Bilder oder externe Einbindungen den Einstieg verzögern. Beobachten Sie, ob Texte und wichtige Bedienelemente früh nutzbar werden und ob nachgeladene Elemente den Inhalt unerwartet verschieben. Technische Messungen helfen bei der Einordnung. Der Ratgeber zu Ladezeiten im Webdesign vertieft die dafür relevanten Entscheidungen.

Google verwendet die mobile Fassung von Inhalten für Indexierung und Ranking. Deshalb müssen wichtige Inhalte und notwendige Ressourcen dort erreichbar bleiben. Daraus folgt jedoch keine feste Platzierung durch ein responsives Layout. Gestaltung, Zugänglichkeit und Auffindbarkeit haben mehrere Voraussetzungen. Eine angenehme Bedienung ist auch unabhängig von Suchmaschinen wichtig, weil Menschen die eigentliche Leistung verstehen und den vorgesehenen Kontaktweg nutzen können sollen.

Halten Sie nach der Abnahme fest, wie spätere Änderungen behandelt werden. Neue Texte, Bilder oder Erweiterungen können die Darstellung erneut beeinflussen. Technische Pflege, inhaltliche Ergänzungen und laufende Prüfungen werden im vereinbarten Umfang geplant. Ein einmal responsiv erstellter Auftritt ist keine Zusage, dass jede zukünftige Änderung automatisch auf allen Geräten funktioniert. Unser Bereich Webdesign beschreibt die gemeinsame Planung und Umsetzung solcher Anforderungen.