Responsive Design: eine Website für alle Bildschirme
Der Begriff klingt technisch, meint aber etwas Einfaches: Die Seite passt sich an das Gerät an, statt umgekehrt.
Responsive Design bezeichnet die Bauweise einer Website, bei der sich Layout, Schriftgrößen und Bilder automatisch an die Bildschirmbreite anpassen. Eine einzige Seite funktioniert dadurch auf Handy, Tablet und Rechner, ohne dass es separate Versionen braucht.
Warum das wichtiger ist, als es klingt
Bei den meisten Betrieben in der Region kommt die Mehrheit der Besucher vom Handy. Oft unterwegs, oft in Eile, oft mit mäßigem Empfang. Wer dort zoomen und schieben muss, um eine Telefonnummer zu finden, ruft nicht an.
Dazu kommt: Suchmaschinen bewerten inzwischen vor allem die mobile Fassung einer Seite. Eine Website, die nur am großen Bildschirm funktioniert, ist damit auch in der Suche im Nachteil.
Was dahintersteckt
Statt fester Breiten in Pixeln arbeitet man mit flexiblen Rastern, die sich strecken und stauchen. An bestimmten Punkten ändert sich das Layout, etwa wenn aus drei Spalten nebeneinander eine Spalte untereinander wird. Bilder werden in mehreren Größen bereitgestellt, damit ein Handy nicht ein riesiges Foto laden muss.
Wichtig ist die Reihenfolge beim Bauen. Wer zuerst die Handy-Ansicht entwirft und daraus die große Fassung ableitet, kommt zu klareren Seiten. Der umgekehrte Weg führt oft dazu, dass mobil einfach alles untereinandergeschoben wird.
Woran man schlechte Umsetzungen erkennt
- Man muss horizontal scrollen, weil ein Element zu breit ist
- Schaltflächen liegen so dicht, dass man mit dem Daumen daneben trifft
- Schrift ist so klein, dass man zoomen muss
- Tabellen ragen aus dem Bildschirm heraus
- Das Menü lässt sich mit einer Hand kaum bedienen
- Die mobile Version enthält weniger Inhalt als die große
Der letzte Punkt kommt bei alten Seiten häufiger vor, als man denkt. Wenn mobil Inhalte ausgeblendet werden, fehlen sie faktisch, auch für Suchmaschinen.
Ein Beispiel
Auf der Startseite eines Handwerksbetriebs steht rechts eine Spalte mit Kontaktdaten. Am Rechner ist sie immer sichtbar, auf dem Handy rutscht sie ans Seitenende, hinter fünf Bildschirmlängen Text.
In der responsiven Fassung wandert die Telefonnummer nach oben und wird anklickbar. Ein Fingertipp startet den Anruf. Diese einzige Änderung bringt bei vielen Betrieben mehr als jede gestalterische Verbesserung.
Abstände und Bedienung mit dem Daumen
Am Rechner klickt eine Maus punktgenau, am Handy trifft ein Daumen eine Fläche von etwa einem Zentimeter. Deshalb brauchen Schaltflächen und Links ausreichend Größe und Abstand zueinander.
Praktisch heißt das: Menüpunkte nicht dicht stapeln, Telefonnummern als große anklickbare Fläche gestalten, Formularfelder hoch genug machen. Auch die Position spielt eine Rolle, weil der untere Bildschirmbereich mit einer Hand leichter erreichbar ist als die obere Ecke.
Bilder auf kleinen Bildschirmen
Ein Bild, das am Rechner die halbe Breite füllt, kann auf dem Handy sinnlos werden, etwa ein breites Panoramafoto, auf dem dann nichts mehr zu erkennen ist. In solchen Fällen ist ein anderer Bildausschnitt sinnvoller als dasselbe Bild in klein.
Genauso wichtig ist die Dateigröße. Ein Handy im Mobilfunknetz soll nicht dieselbe Datei laden wie ein Rechner am Glasfaseranschluss. Moderne Formate und mehrere Größen pro Bild lösen das, ohne dass jemand etwas davon merkt.
Testen ohne Werkzeuge
Man braucht kein Programm dafür. Ruf deine Seite auf dem eigenen Handy auf, am besten unterwegs statt im Büro-WLAN, und versuche drei Dinge: die Öffnungszeiten finden, anrufen und das Kontaktformular ausfüllen. Wenn eines davon hakt, hast du dein Ergebnis.
Verwandte Begriffe
Diese Themen hängen mit dem Begriff zusammen und sind im Glossar ebenfalls einfach erklärt:
Wir kümmern uns darum
Alle unsere Websites werden zuerst für kleine Bildschirme gebaut. Wie das abläuft, steht unter Webdesign für Unternehmen aus Meckenheim.
Kurz nachgefragt
Brauche ich eine eigene mobile Website?
Nein. Getrennte mobile Seiten waren vor über zehn Jahren üblich und machen heute nur Arbeit. Eine responsive Seite deckt alles ab.
Kann man eine alte Seite nachträglich responsiv machen?
Manchmal ja, oft ist es aber aufwendiger als ein Neuaufbau, weil das Grundgerüst nicht dafür gedacht war.