Responsive Design ist ein Gestaltungsansatz, bei dem sich eine Webseite automatisch an jede Bildschirmgröße anpasst, vom kleinen Smartphone bis zum großen Desktop-Monitor. Layout, Schriftgrößen und Bedienelemente ordnen sich dabei flexibel neu an, sodass die Seite überall gut lesbar und bedienbar bleibt.
Da der Großteil des Web-Traffics heute vom Smartphone kommt und Google vorrangig die mobile Fassung bewertet, ist Responsive Design längst kein Zusatz mehr, sondern die Grundlage jeder modernen Webseite. Bewährt hat sich der Ansatz „Mobile First“, bei dem der Entwurf bei der kleinen Ansicht beginnt und nach oben erweitert wird.
Was Responsive Design leistet
- Lesbare Texte ohne Zoomen auf jedem Gerät
- Gut erreichbare Schaltflächen für die Bedienung per Finger
- Bilder, die sich an den Viewport anpassen
Ein durchdachtes Responsive Design ist damit ein zentraler Baustein guter User Experience und nachhaltiger SEO.
Wie die Anpassung technisch gelingt
Grundlage sind flexible Breitenangaben statt fester Pixelwerte, dazu Umbruchpunkte, an denen sich das Layout neu ordnet. Aus drei Spalten auf dem Rechner wird auf dem Telefon eine einzige, und das Menü wandert in eine ausklappbare Schaltfläche. Die Angabe des Viewports im Kopfbereich der Seite teilt dem Browser mit, dass er die Darstellung an die Gerätebreite anpassen soll.
Verbreitet ist der Ansatz, zuerst für den kleinen Bildschirm zu gestalten und die Darstellung nach oben hin zu erweitern. Bedienelemente brauchen dabei genug Fläche für den Daumen, und Bilder werden in mehreren Größen ausgeliefert, damit ein Telefon nur die kleine Fassung lädt.