Was ist Responsive Design?

Früher gab es für viele Websites eine eigene, separate Version für Handys, oft an einer eigenen Adresse mit einem „m." davor. Heute passt sich eine gut gebaute Website selbst an: dieselbe Seite, dieselben Inhalte, aber ein Aufbau, der sich je nach Bildschirmbreite verändert. Ein Menü, das am Computer waagrecht sichtbar ist, wird am Handy zu einem Symbol, hinter dem sich die Punkte verbergen. Spalten, die am Computer nebeneinanderstehen, rutschen am Handy untereinander.

Für deine Besucherinnen ist responsive Design normalerweise unsichtbar, solange es funktioniert. Sichtbar wird es erst, wenn es fehlt: Texte, die winzig klein sind und zum Zoomen zwingen, Bilder, die abgeschnitten wirken, oder Buttons, die sich mit dem Finger kaum treffen lassen.

Ein Beispiel aus dem Alltag: Eine Yogalehrerin hat eine Website, die am Computer gut aussieht, aber am Handy nicht richtig angepasst ist. Der Text ist winzig, die Kursübersicht rutscht ineinander, und wer auf dem Handy nach dem nächsten Termin sucht, muss sich mühsam durchzoomen. Die meisten ihrer Besucherinnen öffnen die Seite vermutlich unterwegs am Handy, genau dort verliert sie sie am ehesten wieder.

Deshalb prüfe ich jede Website, bevor sie online geht, getrennt am Handy und am Computer, statt nur einmal am großen Bildschirm im Büro. Tabellen, Bilder und Buttons müssen an beiden Stellen gleichermaßen sauber funktionieren.

Am zuverlässigsten prüfst du eine Seite, indem du sie auf einem echten Handy öffnest, statt nur in der kleinen Vorschau am Computer. Manche Probleme, etwa zu kleine Buttons oder ein Bild, das am Rand abgeschnitten wird, fallen erst auf, wenn tatsächlich mit dem Finger statt mit der Maus navigiert wird. Ich gehe deshalb jede fertige Seite am Handy und am Computer getrennt durch, bevor sie online geht, statt mich auf die Ansicht im Bauprogramm zu verlassen.

Deine Website muss am Handy genauso gut funktionieren wie am Computer, weil ein großer Teil deiner Besucherinnen sie dort zuerst öffnet. Ich baue jede Seite von Anfang an für beide Ansichten und prüfe sie vor dem Livegang getrennt am Handy und am Computer. So verlierst du keine Anfrage nur deshalb, weil jemand unterwegs war.