Was ist Responsives Webdesign?
Responsives Webdesign (RWD) ist ein gestalterischer und technischer Ansatz im Webdesign, bei dem sich das Layout einer Website automatisch an die Bildschirmgröße, Auflösung und Orientierung (Hoch- oder Querformat) des Endgeräts anpasst. Statt separater Websites für Mobilgeräte und Desktop-PCs nutzt RWD eine einzige HTML-Codebasis. Das Design reagiert flexibel auf den User und sorgt auf Smartphones, Tablets und Laptops gleichermaßen für eine optimale Darstellung und Bedienbarkeit.
Die drei technischen Kernkomponenten
Die flexible Anpassung einer responsiven Website stützt sich auf drei wesentliche Säulen:
- Flüssige Raster (Fluid Grids): Die Breite von Layout-Elementen wird nicht in starren Pixeln (px), sondern in relativen Prozentwerten definiert. Dadurch dehnen oder stauchen sich Spalten proportional zur Bildschirmgröße.
- Flexible Medien (Flexible Images & Media): Bilder, Grafiken und Videos werden per CSS so begrenzt, dass sie niemals breiter als ihr übergeordneter Container werden. Sie skalieren automatisch mit und brechen das Layout nicht auf.
- Media Queries: Diese CSS3-Anweisungen fragen die Eigenschaften des Endgeräts (wie die Displaybreite) ab. Erreicht der Bildschirm einen bestimmten Grenzwert (Breakpoint), ändern sich die Layout-Regeln – beispielsweise wechselt ein dreispaltiges Desktop-Design auf dem Smartphone in eine einspaltige Liste.
Instagram