Responsive Webdesign

Ein großer Teil der Besuche kommt vom Smartphone. Wer dort winzige Schrift sieht, seitlich scrollen muss oder den Anrufbutton mit dem Daumen nicht trifft, ist schnell wieder weg. Bei einer responsiven Seite passiert das nicht, weil sich das Layout an jede Breite anpasst.

Auch Google schaut zuerst auf die mobile Fassung einer Seite und bewertet danach (Mobile-First-Indexierung). Fehlen dort Inhalte, die nur am Desktop sichtbar sind, zählen sie für die Suche kaum.

Technisch steckt dahinter CSS, das mit der Bildschirmbreite rechnet:

• Flexible Raster: Spalten haben keine feste Breite in Pixeln, sie nehmen einen Anteil der verfügbaren Fläche ein.
• Flexible Bilder: Fotos und Grafiken skalieren mit und laden auf kleinen Bildschirmen in kleinerer Auflösung.
• Media Queries: CSS-Regeln, die ab einer bestimmten Breite greifen. Diese Schwellen heißen Breakpoints, typisch sind Smartphone, Tablet und Desktop.

Bei „Mobile First“ wird zuerst die schmale Fassung geplant und dann für größere Bildschirme erweitert. So fällt früh auf, was wirklich auf die Seite muss, denn auf 375 Pixel Breite bleibt für Nebensachen wenig Platz.

Früher hatten viele Firmen eine zweite, abgespeckte Seite unter einer Adresse wie m.firma.de. Das bedeutete doppelte Pflege und oft veraltete Inhalte auf dem Handy. Adaptives Design liefert dagegen je nach Gerät eine von mehreren fest gebauten Fassungen aus. Responsive Webdesign kommt mit einer Fassung aus, die fließend mitwächst, und hat sich deshalb durchgesetzt.

• Texte sind auf dem Smartphone ohne Zoomen lesbar.
• Buttons und Links sind groß genug für den Daumen und liegen nicht zu dicht beieinander.
• Telefonnummer und Kontakt sind mobil mit einem Tipp erreichbar.
• Tabellen, Formulare und Bildergalerien funktionieren auch hochkant.
• Die Seite lädt mobil schnell, auch im Mobilfunknetz.

Prüfen kannst du das selbst: Öffne deine Website am Handy und versuche, in einer Minute eine Anfrage abzuschicken. Jede Stelle, an der du stockst, kostet dich auch bei Besuchern Anfragen.

Jede Website, die wir bauen, ist responsiv. Wir bauen in WordPress mit Elementor oder WPBakery und prüfen jede Seite vor dem Launch auf Smartphone, Tablet und Desktop (Webdesign). Schon im Wireframe überlegen wir, in welcher Reihenfolge die Inhalte mobil erscheinen.

Verwandte Begriffe: Wireframe · Ladezeit · UX-Design