Responsive Design.

Responsive Design bedeutet, dass sich eine Website an das Gerät anpasst, auf dem sie geöffnet wird. Auf dem Handy stehen Inhalte in einer Spalte untereinander, auf dem Tablet vielleicht in zwei, am Computer in drei oder vier. Zuerst beschrieben hat das Prinzip laut web.dev der Webdesigner Ethan Marcotte. Für deinen Betrieb ist das kein Extra: Google verwendet für Indexierung und Ranking die mobile Version deiner Seiten. Was am Handy fehlt oder schlecht funktioniert, fehlt also auch für Google.

So funktioniert Responsive Design

Alle Geräte bekommen denselben HTML-Code, nur die Darstellung ändert sich. Grundlage ist laut web.dev das Viewport-Meta-Tag im Kopf der Seite. Fehlt es, stellen Mobilbrowser die Seite so dar, als wäre der Bildschirm etwa 980 Pixel breit, und verkleinern sie dann. Der Text wird winzig, Besucher müssen zoomen.

Die eigentliche Anpassung übernehmen Media Queries im CSS, also Regeln wie „ab 600 Pixel Breite zwei Spalten". Die Stellen, an denen sich das Layout ändert, heißen Breakpoints. web.dev empfiehlt, sie nicht nach Gerätemodellen festzulegen, sondern klein anzufangen und dort umzubrechen, wo der Inhalt es verlangt. Google nennt drei Wege zu einer mobilfreundlichen Website und empfiehlt Responsive Design, weil es am einfachsten umzusetzen und zu pflegen ist.

Worauf du als Betrieb achten solltest

Prüf deine Website auf dem eigenen Handy, nicht nur am Schreibtisch. Die meisten Entwürfe entstehen am großen Bildschirm. In Projekten sehen wir oft, dass Kontaktknopf oder Preistabelle mobil erst nach langem Scrollen auftauchen oder seitlich abgeschnitten sind.

Mach die Telefonnummer antippbar. In unserem Kölner Handwerks-Website-Report war die Nummer nur bei 43 % der 734 Websites als tel:-Link hinterlegt. Am Handy ist ein Fingertipp der kürzeste Weg zur Anfrage.

Zeig mobil dieselben Inhalte wie am Computer. Laut Google darfst du mobil Inhalte in aufklappbare Bereiche oder Tabs packen. Der Hauptinhalt und die Überschriften sollten aber gleich bleiben, weil Google von der mobilen Fassung ausgeht.

Plane Schaltflächen groß genug für Finger. Die Richtlinien WCAG 2.2 verlangen auf Stufe AA für Klickziele mindestens 24 mal 24 CSS-Pixel oder genug Abstand zum nächsten Ziel, mit einigen Ausnahmen etwa für Links im Fließtext.

Häufige Fragen zu Responsive Design

Brauche ich eine eigene Handy-Version meiner Website? In aller Regel nicht. Google beschreibt neben Responsive Design zwar auch getrennte mobile Adressen und dynamische Auslieferung, empfiehlt aber Responsive Design. Getrennte Fassungen bedeuten doppelte Pflege.

Reicht es, wenn die Seite auf dem Handy einfach kleiner wird? Nein. Eine nur verkleinerte Desktopseite zwingt zum Zoomen. Laut web.dev sollten Inhalte wie Bilder nie breiter als der Bildschirm sein, sonst entsteht seitliches Scrollen.

Wie prüfe ich das schnell selbst? Öffne deine wichtigsten Seiten auf Handy und Tablet, im Hoch- und Querformat, und achte darauf, ob du irgendwo zoomen oder seitlich wischen musst. Eine strukturierte Einschätzung von Aufbau und Bedienbarkeit gibt dir der Design-Check.

Wenn deine Website mobil nicht überzeugt, gestalten wir sie im Webdesign von Anfang an für alle Bildschirmgrößen.