Responsive Webdesign für jede Bildschirmgröße

Wie es technisch funktioniert

Damit eine Seite auf allen Geräten funktioniert, arbeitet die Gestaltung mit flexiblen Breiten statt fester Pixelmaße, dazu kommen Regeln, die ab bestimmten Bildschirmbreiten greifen. Aus drei Spalten nebeneinander wird auf dem Telefon eine untereinander, eine Navigationsleiste wird zum Menü hinter einem Symbol, Bilder werden in mehreren Auflösungen bereitgestellt und der Browser wählt die passende.

Entscheidend ist, dass der Inhalt derselbe bleibt. Eine Zeit lang war es üblich, auf kleinen Bildschirmen Teile auszublenden. Das ist heute problematisch: Google bewertet in erster Linie die mobile Fassung, und was dort fehlt, existiert für die Bewertung praktisch nicht.

Warum Mobile First

Bei den meisten Unternehmensseiten kommt mehr als die Hälfte der Zugriffe vom Telefon, bei lokalen Dienstleistungen oft deutlich mehr. Wer mit der kleinen Ansicht beginnt, ist gezwungen, sich auf das Wesentliche zu beschränken. Wer umgekehrt vorgeht, quetscht am Ende ein überladenes Layout in eine schmale Spalte.

Ein Beispiel aus der Praxis

Auf der Website eines Handwerksbetriebs war die Telefonnummer nur in einer Grafik im Kopfbereich enthalten. Auf dem Desktop fiel das nicht auf, auf dem Telefon war sie nicht anwählbar, nicht kopierbar und für Screenreader unsichtbar. Nach der Umstellung auf einen echten Telefonlink stiegen die Anrufe messbar, ohne dass sich sonst irgendetwas geändert hätte.

Worauf zu achten ist

• Bedienelemente groß genug für einen Daumen, mit ausreichend Abstand
• Schriftgrößen, die ohne Zoomen lesbar sind
• Telefonnummern und Adressen als echte Links, nicht als Grafik
• Bilder in mehreren Größen, damit auf dem Telefon keine Desktopdatei geladen wird
• Formulare mit passenden Eingabetypen, damit die richtige Tastatur erscheint

Grenzen

Responsive Gestaltung löst das Layoutproblem, nicht das inhaltliche. Ein Text, der am Bildschirm zu lang ist, wird auf dem Telefon nicht besser. Und sehr komplexe Anwendungen wie umfangreiche Tabellen brauchen eine eigene Lösung, weil sie sich nicht sinnvoll auf eine schmale Spalte übertragen lassen.

Selbst testen

Es braucht kein Testlabor. Nehmen Sie Ihr eigenes Telefon, rufen Sie die Website im Mobilfunknetz auf statt im WLAN und versuchen Sie, die drei häufigsten Aufgaben zu erledigen: Kontakt aufnehmen, eine bestimmte Leistung finden, die Anfahrt nachsehen. Was dabei stört, stört auch Ihre Kunden. Ergänzend hilft ein Blick auf einem Tablet und mit vergrößerter Systemschrift, weil das viele Layouts überraschend schnell aus dem Tritt bringt.

Häufige Fragen zu Responsive Webdesign

Zurück zur Glossarübersicht