Responsive Webdesign erklärt: Was deine Website auf dem Smartphone braucht

Viele Besucher öffnen deine Seite nicht am Schreibtisch, sondern mit dem Daumen auf dem Handy, nebenbei und mit wenig Geduld. Responsive Webdesign sorgt dafür, dass dieselbe Seite auf einem kleinen Display genauso brauchbar ist wie auf einem großen Monitor.

Was „responsive“ eigentlich heißt

Früher baute man oft zwei Websites: eine für den Computer und eine abgespeckte für mobile Geräte. Heute gibt es Handys, Tablets, Laptops, Fernseher und Fenster in jeder denkbaren Größe. Responsive bedeutet, dass sich eine einzige Seite ihrer Umgebung anpasst. Der Inhalt ist derselbe, das Layout ordnet sich um: Spalten rutschen untereinander, Menüs klappen zusammen, Bilder passen sich der Breite an.

Das Ganze beruht auf drei Zutaten, die du kennen solltest, auch wenn du sie nicht selbst programmierst. Erstens auf flexiblen Breiten statt fester Pixelmaße, zweitens auf sogenannten Media Queries, mit denen das Layout ab bestimmten Breiten umgestellt wird, und drittens auf Bildern, die sich mit ihrem Container mitbewegen, statt aus dem Bildschirm zu ragen.

Die Grundlage: der Viewport

Ohne eine kleine Angabe im Kopf der Seite tun Smartphones so, als wäre die Seite für einen breiten Desktop gebaut, und verkleinern alles auf Briefmarkengröße. Diese Angabe heißt Viewport-Meta-Tag. Moderne Baukästen und Vorlagen bringen sie meist mit. Wenn du eine ältere oder selbst gebaute Seite betreust, lohnt sich der Blick darauf: Fehlt sie, sieht die Seite mobil aus wie ein Foto des Desktops, das man mühsam mit zwei Fingern aufzieht.

Was auf dem Smartphone wirklich zählt

Ein Layout, das sich verkleinert, ist noch keine gute mobile Seite. Diese Punkte entscheiden im Alltag:

• Lesbare Schrift ohne Zoomen. Fließtext sollte auf dem Handy ohne Vergrößern lesbar sein. Bei sehr kleiner Schrift geben viele Besucher auf.
• Kein seitliches Scrollen. Wenn du nach rechts wischen musst, um einen Satz zu Ende zu lesen, ist irgendein Element zu breit. Die üblichen Verdächtigen sind Tabellen, große Bilder und eingebettete Inhalte.
• Große, gut treffbare Bedienelemente. Links und Schaltflächen brauchen Platz um sich herum. Zwei Links dicht untereinander in einer Liste sind auf dem Daumen ein Glücksspiel.
• Ein Menü, das man findet. Das bekannte „Hamburger“-Symbol ist inzwischen verbreitet genug, aber beschrifte es, wenn du kannst, und halte die Menüpunkte kurz.
• Kontakt mit einem Tipp. Telefonnummer, Adresse und Öffnungszeiten sollten schnell erreichbar sein, denn genau danach suchen mobile Besucher am häufigsten, etwa unterwegs bei Handwerk oder Praxis.
• Formulare, die sich ausfüllen lassen. Ein Feld pro Zeile, klare Beschriftungen, passende Tastaturen für E-Mail und Telefonnummer.

Bilder und Tempo

Bilder sind der häufigste Grund, warum Seiten mobil zäh laden. Ein Foto direkt aus der Kamera hat oft ein Vielfaches der nötigen Dateigröße. Für eine Website reicht meist eine Breite, die der größten tatsächlichen Darstellung entspricht, nicht die volle Kameraauflösung. Verkleinere Fotos vor dem Hochladen, und nimm für Fotos ein Format mit guter Kompression. Grafiken mit wenigen Farben und klaren Kanten, etwa Logos, gibt es als Vektorgrafik, die in jeder Größe scharf bleibt.

Wie viel Speicher so eine Datei belegt, ist übrigens genau das Thema, das wir in Vom Bit bis zum Yottabyte erklären. Auch der Hoster spielt eine Rolle: Eine überlastete Server-Umgebung bremst jede noch so schlanke Seite. Wenn du dir unsicher bist, schau dir die Hinweise im Beitrag Webhosting auswählen an.

So prüfst du deine Seite in zehn Minuten

Du brauchst dafür keine Spezialwerkzeuge. Nimm dein eigenes Smartphone und, falls vorhanden, noch ein zweites Gerät mit anderer Bildschirmgröße.

1. Öffne die Startseite und schau, ob du ohne Zoomen lesen kannst.
2. Wische von oben nach unten durch die Seite. Rutscht irgendwo etwas nach rechts heraus?
3. Öffne das Menü und tippe drei verschiedene Punkte an. Triffst du beim ersten Mal?
4. Drehe das Gerät ins Querformat und wieder zurück.
5. Öffne eine Seite mit Tabelle oder Formular und probiere sie aus.
6. Schau dir eine Unterseite mit vielen Bildern an und beobachte, wie lange sie braucht.
7. Am Computer kannst du außerdem das Browserfenster schmal ziehen. Die Seite sollte sich dabei sinnvoll umordnen, statt abgeschnitten zu werden.

Teste dabei am besten mit dem mobilen Datennetz statt mit dem heimischen WLAN. So merkst du, wie sich die Seite unterwegs anfühlt.

Typische Stolperfallen

Einige Fehler tauchen bei kleinen Seiten immer wieder auf. Tabellen mit vielen Spalten sind mobil kaum lesbar. Kürze sie oder wandle sie in eine Liste um. Eingebettete Inhalte mit fester Breite sprengen das Layout. Ein Pop-up, das auf dem Handy den halben Bildschirm füllt und sich schwer schließen lässt, vertreibt Besucher sofort. Text in Bildern, etwa ein Flyer als Foto, lässt sich mobil weder lesen noch vergrößern, ohne dass alles unscharf wird. Schreib solche Informationen als normalen Text auf die Seite und lege das Bild höchstens als Ergänzung daneben.

Prüfe außerdem nach jeder größeren Änderung noch einmal kurz mobil. Ein neues Element, das am Computer harmlos aussieht, kann auf dem Handy die ganze Seite verschieben.

Wenn deine Seite es nicht kann

Ist die Seite alt und nicht für kleine Bildschirme gebaut, hast du im Grunde zwei Wege. Manche Redaktionssysteme lassen sich durch eine moderne Vorlage nachrüsten, ohne dass der Inhalt verloren geht. Bei anderen ist ein Neuaufbau der ehrlichere Weg. Welche Systeme dafür infrage kommen und wo ihre Stärken liegen, erklärt der CMS-Vergleich.

Beim Neuaufbau gilt: Plane vom kleinen Bildschirm her. Was auf dem Handy in eine Spalte passt, lässt sich auf dem großen Monitor problemlos schöner anordnen. Umgekehrt zwängst du ein überladenes Desktop-Layout nur mühsam in ein Smartphone. Und streich mutig: Was mobil stört, war meistens auch am Computer unnötig.