Responsive Webdesign
Responsive Webdesign gestaltet eine Website so, dass sich Layout, Schrift und Bedienelemente automatisch an die Bildschirmgröße anpassen, vom Smartphone bis zum großen Monitor.
Ausführliche Erklärung
Die Seite wird einmal gebaut und passt sich dem verfügbaren Platz an. Ein dreispaltiges Layout am Desktop wird am Smartphone zu einer Spalte.
Bausteine
- Flexible Raster: Breiten in Prozent oder Raster statt fester Pixel
- Breakpoints: Bildschirmbreiten, ab denen sich das Layout ändert (per CSS Media Queries)
- Skalierbare Bilder: mehrere Größen, damit mobile Geräte keine unnötig großen Dateien laden
- Mobile First: Zuerst wird die kleine Ansicht geplant, dann erweitert
Warum es zählt
Google nutzt vorrangig die mobile Fassung einer Seite zur Indexierung (Mobile-First-Indexing). Zu kleine Tippflächen und horizontales Scrollen sind Bedienfehler, die Besucher vertreiben. Verschobene Elemente schlagen sich zusätzlich im CLS der Core Web Vitals nieder.
Testen
Richtwerte: Tippflächen von mindestens 44 mal 44 Pixeln (Empfehlung nach WCAG 2.5.5 und Apple HIG) und eine gut lesbare Schriftgröße ohne Zoomen. Praktisch testet man in den Entwicklerwerkzeugen des Browsers mit der Geräteansicht, mit Lighthouse und auf echten Smartphones.
Softwareentwicklung
Ihr Vorhaben technisch einordnen
Im kostenlosen Erstgespräch von 30 Minuten schildern Sie Ihr Vorhaben. Wir sagen, welche Technik passt und wie wir Umsetzung und Betrieb angehen.