Responsive Design
Wer sich mit Webdesign auseinandersetzt, dem wird auch schon bald der Begriff Responsive Design um die Ohren fliegen. Responsivität ist mittlerweile nicht mehr wegzudenken und ist sogar am Erfolg einer Webseite beteiligt. Denn heutzutage besuchen mehr Menschen eine Webseite über ein mobiles Endgerät, z. B. ein Smartphone oder Tablet, wie über die traditionelle Desktop-Ansicht. Was Responsive Design ist, warum es unverzichtbar geworden ist und wie man es nutzt, erklären wir in diesem Artikel.
Was ist Responsive Design?
Responsive Design ist eine Art des Webdesigns und bedeutet, dass das Layout einer Webseite automatisch an die Größe des Ausgabemediums angepasst wird. Dadurch soll auf allen Endgeräten, egal ob es sich um ein Smartphone, ein Tablet, einen Laptop oder etwas anderes handelt, ein gutes Nutzererlebnis sichergestellt werden. Das ist nicht nur wichtig für die User Experience, sondern fördert auch die Kundenbindung und hat sogar Auswirkungen auf die Sichtbarkeit bei Google.
Definition und Ursprung von Responsive Design
Der Begriff Responsive Design wurde erstmals 2010 vom Webdesigner und -entwickler Ethan Marcotte geprägt. Responsive bedeutet auf Deutsch so viel wie “reagierend”, während das Design die Gestaltung ist. Beim Responsive Design reagiert die Gestaltung also. Im Falle von Webdesign reagiert sie auf das Endgerät, auf dem die Seite angezeigt wird. Dank der Responsivität passt sich die Seite immer der jeweiligen Bildschirmgröße an.
Eine responsive Webseite gehört mittlerweile zum guten Ton und ist nicht mehr wegzudenken. Starres Webdesign, also Seiten, die sich nicht an die Bildschirmgröße des Endgeräts anpassen, gibt es nur noch selten. Diese sind nämlich wesentlich weniger nutzerfreundlich und sorgen somit für eine schlechte Usability. Das wiederum hat einen schlechten Einfluss auf die User Experience, was zu einem schlechteren Ranking bei Google führen kann.
Responsive Design dank CSS, HTML, Media Queries und Breakpoints
Wie funktioniert Responsive Design nun genau? Dafür müssen wir uns das Layout einer Webseite einmal detaillierter anschauen. Jede Webseite bekommt als Layout ein Raster, ein sogenanntes Grid, in dem die Webseitenelemente platziert werden. Das Raster besteht aus vertikalen und horizontalen Linien und bildet damit Spalten und Reihen – wie eine Tabelle.
Mithilfe der HTML- und CSS-Sprache können wir das Grid beeinflussen und nach unseren Wünschen gestalten. Der HTML-Code ist dafür zuständig, der Website ihre Struktur zu geben, während CSS das Design “verwaltet”. Sowohl HTML als auch CSS werden auch für statische Webseiten genutzt. Damit unsere Webseite responsiv wird, benötigen wir deswegen sogenannte Media Queries und Breakpoints.
Media Queries werden in den Code der Webseite eingebaut und verraten, mit welchem Endgerät die Seite aufgerufen wird und wie die relativen Größenangaben verändert werden müssen, um auf dem Bildschirm der Besucher korrekt angezeigt zu werden. Jedes Endgerät hat verschiedene, definierte Grenzen – die sogenannten Breakpoints. Diese Grenzen geben an, ab welchem Wert eine neue Layoutansicht vorliegt. Die häufigsten responsiven Breakpoints für Smartphones, Tablets und PCs liegen bei 480, 800, 1024 und 1280 Pixel.
Vor Responsive Design haben statische Webseiten nur festgelegte Werte verwendet. Eine Seite war dann beispielsweise immer auf 1280 Pixel ausgelegt – egal ob sie auf einem PC-Monitor oder auf einem kleineren Bildschirm ausgespielt wurde. Vor 20 Jahren mag das noch nicht gravierend gewesen sein, schließlich surften die meisten Menschen mit ihren PCs im Internet.
Mit dem Aufkommen von Smartphones musste sich das aber dringend ändern, schließlich ist die Usability von solchen Seiten auf dem Handy grausig. Ständig verklickt man sich, muss stark auf die Seite zoomen, kann den Text anschließend nicht mehr ordentlich lesen oder muss ewig warten, bis riesige Bilder geladen sind. Bevor sich Kunden so etwas antun, schließen sie lieber die Seite und suchen sich eine andere.
Selbst auf großen Monitoren sind statische Webseiten nicht das Gelbe vom Ei. Denn nur weil der Bildschirm eine maximale Breite von 1280 Pixeln hat, bedeutet das ja nicht, dass die Nutzer auch die komplette Breite für eine Webseite nutzen. Verkleinert man das Fenster, wird die statische Webseite womöglich nicht mehr richtig angezeigt. Daher ist auch hier ein responsives Design sinnvoll.
Wann ist eine Webseite responsiv?
Eine Webseite ist statisch, wenn sie sich nicht an die Bildschirm- bzw. Browserfenster-Größen anpasst. Dementsprechend nutzt eine Webseite Responsive Design, wenn sie sich an jede Bildschirmgröße anpasst und auf jedem Ausgabegerät nutzbar ist. Testen kann man das ganz einfach, indem man die Webseite mit einem Smartphone aufruft oder das Browserfenster verkleinert. Um am PC sehen zu können, wie die Webseite auf anderen Endgeräten aussieht, gibt es auch diverse Apps und Extensions, auf die wir weiter unten näher eingehen.
Warum sollte man Responsive Design nutzen?
Responsive Design ist heutzutage eine Grundvoraussetzung, denn es ist wesentlich nutzerfreundlicher als starre Webseiten. Da mittlerweile ein Großteil der Seiten im Internet responsiv sind, fallen starre Webseiten sofort unangenehm auf. Besucher verbinden das Produkt oder den angebotenen Service mit der Webseite und stempeln dieses, in den meisten Fällen, als veraltet ab. Und wer möchte schon ein veraltetes Produkt kaufen?
Wer im Internet gefunden werden will, der muss sich bestmöglich bei Google platzieren. Das geschieht mithilfe von SEO – der Suchmaschinenoptimierung. Google hat unzählige Bewertungsfaktoren, die eine Seite einordnen und dann auf den jeweiligen Platz bei den Suchergebnissen einordnen. Das ist insofern auch wichtig für das Webdesign, da Google im Jahr 2015 den Faktor “mobile friendliness” aufgenommen hat. Wer seine Webseite für mobile Endgeräte optimiert hatte, also Responsive Design genutzt hat, bekam einen massiven Schub vonseiten Google und wurde überwiegend auf den ersten Suchergebnisplätzen ausgespielt.
Mittlerweile besitzt wohl der Großteil der Menschheit ein Smartphone und surft damit überwiegend im Internet. Wer mit seinem Handy dann eine statische Webseite aufruft, schließt diese in den meisten Fällen sofort wieder. Auch diesen Faktor bezieht Google mit der sogenannten Absprungrate in sein Ranking mit ein. Je höher die Absprungrate – also je mehr Menschen die Seite nach dem Aufruf sofort wieder verlassen – desto später wird die Webseite in den Suchergebnissen ausgespielt. Bleiben die Menschen dagegen für längere Zeit auf der Seite, zum Beispiel weil sie dank Responsive Design ansprechend gestaltet ist, wirkt sich das positiv auf das Google-Ranking aus.
Spätestens 2021 hat Google dann deutlich gemacht, dass Responsive Design keine Wahl mehr ist, sondern Pflicht. In diesem Jahr hat der Internetriese angekündigt, alle Webseiten auf die “Mobile First Indexierung” umzustellen. Das bedeutet, dass Google für alle Webseiten die mobile Version vorrangig für die Indexierung und das Ranking verwendet. Der Fokus liegt mit “mobile first” nun also vollends auf mobilen Endgeräten wie Smartphones und Tablets und nicht mehr auf PCs wie früher.
Aus diesem Grund ist es auch ratsam, immer Responsive Design für die eigene Webseite zu verwenden. Denn auch wenn der Großteil der Besucher über Desktop die Seite aufruft, z. B. weil es sich um eine B2B-Webseite handelt, fokussiert sich Google mit mobile first auf die mobile Ansicht und Nutzung der Seite. Tatsächlich spielt Google seit März 2021 Inhalte, die sich nur auf die Darstellung auf dem Desktop beschränken, nicht mehr in den Suchergebnissen aus. Wer bei Google gefunden werden will, braucht also in jedem Fall Responsive Design.
Responsive Design bei Webseiten-Relaunch
Heutzutage ist eigentlich jede gute Webseite im Responsive Design gestaltet. Nur in den wenigsten Fällen gibt es noch statische Seiten, die meistens bereits sehr alt sind und einfach nicht mehr gepflegt werden. Daher ist es leicht, Beispiele für gutes Responsive Design zu finden, denn eigentlich sollte jede Webseite eines besitzen.
Insbesondere seit Googles Mobile-First Updates ist es für Webseitenbetreiber und Unternehmen unerlässlich, auf eine fachgerechte und saubere, responsive Darstellung ihrer Website zu achten. Ohne diese wird es zwangsläufig passieren, dass sie in Google’s Ranking massiv abgestraft werden, Traffic verlieren und Umsätze einbüßen.
Responsive Webseite erstellen
Wenn man eine Webseite mit Responsive Design gestalten will, braucht man flexible Grids. Das Raster der Webseite ist also nicht starr und mit statischen Werten festgelegt, sondern nutzt relative Werte. Durch die relativen Werte können Inhalte bei veränderter Anzeigefläche prozentual angeglichen werden. So sieht die Webseite dann sowohl auf Smartphone als auch auf dem Desktop toll aus, denn der Inhalt wächst oder schrumpft mit der Größe des Anzeigefensters einfach mit.
Inhalte, egal ob es sich dabei um Grafiken, Buttons oder Text handelt, ändern im Responsive Design ihre absolute Größe. Eine Grafik könnte also beispielsweise so angelegt sein, dass sie bei einer Anzeigefläche von 1024 Pixeln mit einer Breite von 100 % ausgespielt wird. Beträgt die Breite des Endgeräts aber nur 480 Pixel, könnte die Grafik zu 50 % Breite angezeigt werden.
Anschaulich wird dieses Beispiel, wenn man einfach mal eine Webseite im Browser öffnet und das Anzeigefenster kleiner und wieder größer macht. Die Bilder, Texte und Inhalte wachsen oder schrumpfen, werden aber immer vollständig angezeigt. Dadurch verschiebt sich das Layout gegebenenfalls auch etwas, sodass Bilder auf dem Desktop nebeneinander, auf dem Smartphone aber untereinander angezeigt werden. Beim Designen muss man darauf achten, dass es hierbei zu keinen Überschneidungen kommt und alle Inhalte immer gut zugänglich und sichtbar sind.
Möchte man nun ein Responsive Design erstellen, ist das gar nicht so einfach. Der Prozess der Gestaltung einer statischen Webseite sah früher so aus:
- Konzeption der Seite
- Erstellung von Entwürfen
- Umsetzung des Wunschdesigns
- Technische Umsetzung
Bei Responsive Design funktioniert dieser Vorgang nur bedingt, denn man müsste etliche Entwürfe und Designs für jedes Format erstellen. Deswegen gilt heute der Ansatz “Content first”. Das bedeutet, dass die Inhalte zunächst wichtiger als das Design sind. Man stellt sich daher Fragen, wie: Welche Inhalte sollen die Besucher sehen? Wie soll die Seitenstruktur aufgebaut sein?
Anhand von diesen Fragen werden dann einige grobe Skizzen erstellt, bei denen die Breakpoints berücksichtigt werden, aber das Design von einzelnen Displaygrößen losgelöst ist. Mit einem agilen Prozess und regelmäßigen Rücksprachen entsteht dann eine responsive Webseite. Wichtig dabei sind immer drei Kernpunkte:
- Flexible Layout-Grids
- Flexible Schriftgrößen
- Flexible Bildgrößen
Alle Punkte müssen beim Responsive Design flexibel bleiben, daher sollten feste Größen unbedingt vermieden werden. Stattdessen bieten sich prozentuale Werte für die Angabe an, damit die Inhalte auf jedem Gerät korrekt dargestellt werden. Der Fokus muss zudem auf “mobile first” also auf mobile Endgeräte gelegt werden, da dies ein wichtiger Ranking-Faktor für Google ist. Die mobile Ansicht ist also die wichtigste, erst danach kommen die Ansichten für Desktop oder Tablet.
Checkliste: Ist die Webseite responsiv?
Um zu überprüfen, ob Ihre Webseite responsiv ist, gibt es unzählige Tools und Erweiterungen. Damit kann mit einem Klick ein anderes Endgerät ausgewählt werden und die Webseite wird dann auf diesem angezeigt. Fehler im Responsive Design fallen so schnell auf. Diese Tools sind hilfreiche Werkzeuge, um die Ansicht auf unterschiedlichen Geräten zu testen:
- Responsively
- Sizzy
- Viewport Resizer (Google Chrome Erweiterung)
Alternativ kann man die Webseite einfach auf verschiedenen Endgeräten testen, also die Seite manuell auf Desktop, Handy und Tablet und in verschiedenen Browsern aufrufen und testen. Natürlich kann man auch einfach mit der Größe des Browserfensters spielen. Die Anzeige im Browserfenster kann sich aber, trotz gleicher oder ähnlicher Größe, von der Ansicht auf einem Handy unterscheiden, daher sollten unbedingt verschiedene Endgeräte getestet werden.
Für Webdesigner lohnt es sich, die folgende Checkliste durchzugehen und alle Inhalte des Responsive Designs nochmal ausführlich zu testen:
- Wurden alle Inhalte getestet?
- Wurden verschiedene Geräte und Browser getestet?
- Sind die wichtigsten Inhalte vor den unwichtigeren?
- Wurde die Performance getestet?
- Wurde auf “mobile first” optimiert?
- Wurde auf Interaktivität getestet?
- Werden die Schriftarten auf verschiedenen Geräten korrekt angezeigt?
- Ist die Navigation intuitiv?
- Werden Pop-Ups korrekt dargestellt?
- Ist der Webseiten-Text auf allen Geräten und Browsern gut lesbar?
Nutzer besuchen die Webseite nicht nur auf unterschiedlichen Geräten, sondern nutzen beim Besuch auch verschiedene Werkzeuge. Egal, welches Werkzeug man benutzt – Maus, Tastatur, Finger oder Stifte – alle Inhalte sollten funktionieren. Zudem ist es wichtig, dass Pop-Ups keine wichtigen Inhalte, wie beispielsweise die Navigation, verdecken. Vor allem auf dem Smartphone kann es dabei zu Problemen und damit zu Frustration bei den Usern kommen.
Responsive Design – ein absolutes Muss für jede Webseite
Responsive Design ist heutzutage nicht mehr wegzudenken. Bereits in den 2010er Jahren ging der Trend zur flexiblen Gestaltung von Webseiten, spätestens seit der Einführung von “mobile first” ist es nun ein absolutes Muss.
Bei der Erstellung scheint Responsive Design aufwendiger zu sein als die Gestaltung einer statischen Seite. Allerdings spart man sich dafür in der Zukunft zahlreiche Arbeitsschritte, die eine statische Webseite bräuchte, um immer auf dem aktuellen Stand zu sein. Denn egal welches Bildschirmformat auf den Markt kommt – dank Responsive Design wird die Webseite immer korrekt angezeigt und bleibt damit up to date.
Wenn Sie Ihre Webseite nun im Responsive Design gestalten möchten, helfen wir Ihnen als Webdesign Agentur sehr gerne dabei. Wir beraten Sie zu möglichen Designs, überarbeiten Ihre bestehende Webseite oder entwerfen gerne auch ein neues Webdesign für Sie. Rufen Sie gerne an oder schreiben eine E-Mail – wir freuen uns auf Sie!