Responsive Design

Was bedeutet Responsive Design?

Responsive Design bedeutet, dass eine Website ihr Layout an die verfügbare Breite anpasst. Statt einer festen Anordnung rutschen Spalten untereinander, Schriftgrößen ändern sich und Menüs klappen zusammen.

Technisch passiert das über flexible Raster und sogenannte Media Queries, die ab bestimmten Breiten andere Regeln greifen lassen. Es gibt also nicht zwei Websites, sondern eine, die sich unterschiedlich darstellt.

Weil die Mehrheit der Besucher mit dem Handy kommt und Google mobil zuerst bewertet, wird heute von klein nach groß entworfen. Was auf 360 Pixeln funktioniert, funktioniert auch auf 1920. Umgekehrt selten.

Typische Schwachstellen sind Tabellen, breite Grafiken und lange Wörter, die seitliches Scrollen erzwingen. Wie ich Websites aufbaue, steht unter Website erstellen lassen.

Wie es technisch funktioniert

Flexible Raster: Breiten werden nicht in festen Pixeln angegeben, sondern in Anteilen des verfügbaren Platzes. Ein Dreispalter wird so auf dem Tablet zum Zweispalter, ohne dass etwas doppelt gebaut werden muss.

Umbruchpunkte: Ab bestimmten Breiten greifen andere Gestaltungsregeln. Sinnvoll gesetzt werden sie dort, wo das Layout bricht, nicht an Gerätegrößen, denn die ändern sich jedes Jahr.

Flexible Bilder: Bilder bekommen eine Höchstbreite von hundert Prozent und über die Angabe mehrerer Bildgrößen die Möglichkeit, je nach Bildschirm die passende Datei zu laden. Das spart gleichzeitig Ladezeit.

Der Viewport-Hinweis im Kopfbereich teilt dem Browser mit, dass die Seite für die tatsächliche Gerätebreite gedacht ist. Fehlt er, zeigt das Handy die Desktopansicht verkleinert an.

Mobile First und wie geprüft wird

Google bewertet seit Jahren die mobile Fassung einer Seite. Was dort fehlt, existiert für die Bewertung nicht. Inhalte am Handy auszublenden, um Platz zu sparen, ist deshalb keine gute Idee.

Entworfen wird von klein nach groß. Die enge Ansicht zwingt dazu, das Wichtigste zuerst zu zeigen, und dieser Zwang verbessert die Seite auch am Rechner.

Geprüft wird in drei Stufen: im Browser mit den Entwicklerwerkzeugen bei 320, 390 und 768 Pixeln, danach auf einem echten Gerät, weil sich Tippflächen und Scrollverhalten nur dort beurteilen lassen, und schließlich in der Search Console, die Probleme mit der Nutzerfreundlichkeit meldet.

Worauf es ankommt

• Von klein nach groß entwerfen. Die engste Ansicht zwingt zu Prioritäten.
• Flächen zum Tippen groß genug. Etwa 44 mal 44 Pixel gelten als Mindestmaß.
• Bilder flexibel einbinden. Feste Pixelbreiten sind die häufigste Ursache für Überlauf.
• Bei 320 Pixeln testen. Dort zeigen sich Layoutfehler zuerst.

Häufige Fehler

• Zoomen sperren, um das Layout zu schützen. Das macht die Seite für viele Menschen unbenutzbar.
• Inhalte am Handy ausblenden statt sie anders anzuordnen.
• Nur im Browserfenster testen und nie auf einem echten Gerät.

Häufige Fragen

Verwandte Begriffe

Rouven Berz

Online-Marketing Freelancer aus dem Rhein-Main-Gebiet. Ich helfe Unternehmen dabei, sichtbar zu werden und aus Klicks Kunden zu machen.