Dienstleistungen · Fachartikel
Responsive Webdesign
Responsive Webdesign ist die Disziplin, eine Webseite so zu gestalten, dass sie auf jedem Bildschirm funktioniert — vom 27-Zoll-Monitor bis zum schmalen Smartphone-Display. Der Begriff wurde 2010 von Ethan Marcotte geprägt und löste in den darauffolgenden Jahren das ältere Pattern „separate mobile.example.com-Subdomain" ab. Heute ist Responsive Default, kein Feature.
Wie es funktioniert
Drei Bausteine machen eine Webseite responsive: ein flexibles Layout-Grid (relative Breiten in Prozent oder modernen CSS-Grid-Einheiten statt fixer Pixel), flexible Bilder (Bilder, die ihre Größe der Umgebung anpassen) und Media-Queries (CSS-Regeln, die je nach Bildschirmbreite andere Layouts aktivieren). Zusammen ergeben die drei Bausteine eine Seite, die sich mit dem Viewport-Format mitskaliert.
Mobile-First als Strategie
Die heute übliche Reihenfolge im Entwurfsprozess ist Mobile-First: zuerst das mobile Layout entwerfen, dann durch progressive Enhancement Tablet- und Desktop-Layouts ergänzen. Der Grund ist pragmatisch — ein mobiles Layout zwingt zu klaren Hierarchien und reduzierten Inhalten. Ein für Mobile geplantes Layout funktioniert auf Desktop fast immer; umgekehrt entstehen häufig zerquetschte Mobile-Layouts.
Breakpoints — wo brechen Layouts
Typische Breakpoints in 2026 sind 640 Pixel (Mobile-Landscape und kleine Tablets), 768 Pixel (Tablets), 1024 Pixel (kleine Desktops und Laptops) und 1280 Pixel oder höher (große Monitore). Welche dieser Breakpoints konkret nötig sind, hängt am Inhalt — eine Lexikon-Page mit nur Text braucht oft nur einen Mobile-Breakpoint, eine Produkt-Übersicht mit Bilder-Grid drei oder mehr.
Was Performance betrifft
Responsive Design hat einen indirekten Performance-Effekt: schlecht umgesetzt werden mobile Nutzer mit Desktop-großen Bildern bedient, was Datenvolumen und Ladezeit kostet. Korrekt umgesetzt liefert die Seite über das HTML-Attribut srcset oder die Picture-Tag-Variante automatisch die jeweils passende Bildgröße. Bei einem 4G-mobilen Nutzer kann das 80–90 Prozent Datenvolumen sparen.