Responsive Design
Die meisten Internetuser sind mobil unterwegs. In den letzten Jahren ist die mobile Nutzung des Internets stetig gestiegen, bis man im Jahr 2022 schließlich laut statista 84 % mobile Internetnutzer und -nutzerinnen allein in Deutschland verzeichnen konnte. Das zeigt deutlich, dass Websites heutzutage vor allem auf die mobile Nutzung ausgelegt sein sollten, was sich auch deutlich in dem Leitprinzip „mobile first“ zeigt. Daher sollten Websites mit einem responsiven Design ausgestattet sein.
Was ist Responsive Design?
Responsive Design kommt aus dem Webdesign und bedeutet so viel wie „reagierende Gestaltung“. Dabei wird das Layout einer Seite auf das jeweilige Ausgabemedium angepasst, also responsive gestaltet. Hierbei wird in der Gestaltung mit relativen statt mit festen Pixeln gearbeitet.
Ist das Design responsiv, dann ist es vollkommen egal, mit welchem Gerät man eine Seite im Web ansteuert. Ob über Geräte wie Desktop, Tablet oder Handy, ob im Hoch- oder im Querformat – die Seite wird sich den jeweiligen Gegebenheiten anpassen. Das erspart das Erstellen einer extra mobilen Seite, denn von nun an werden mit einer einzigen Seite im Web alle Ausgabegeräte abgedeckt. Nicht nur der Text wird dann an die jeweilige Bildschirmgröße angepasst, sondern zum Beispiel auch ein Bild, das den Text begleitet.
Die Notwendigkeit von Responsive Design einer Website wird bei den stark unterschiedlich großen Geräten PC, Tablet und Smartphone deutlich, ist jedoch auch innerhalb dieser Gerätegruppen sinnvoll. Schließlich unterscheiden sich auf Computer, Laptops, Notebooks und weiteres in ihren Bildschirmgrößen. Der große Vorteil von Responsive Design: Der Nutzer muss die Webseite bzw. deren Inhalte nicht manuell größer oder kleiner stellen, beim Smartphone etwa durch Daumen und Zeigefinger, sondern kann den Content durch scrollen konsumieren, was bei der mobilen Nutzung des Web deutlich angenehmer für den Menschen ist.
Wie funktioniert Responsive Design?
Zunächst einmal wird das Layout einer Website erstellt. Dafür verwenden Layout-Designer und -Designerinnen sogenannte Grids, wobei alle Elemente einer Site in diesem Grid angeordnet werden. Das Grid besteht aus Spalten und Reihen. Mithilfe von HTML, CSS, Media Queries und Breakpoints werden in diesem Grid die einzelnen Elemente bearbeitet.
HTML gibt der Website eine Struktur. Mit CSS werden Webdesign und Layout der Elemente wie Text oder Bild bearbeitet. Media Queries werden in den Code integriert, damit Bildschirmgröße und Auflösung des Endgeräts beeinflusst werden können.
Breakpoints hingegen bezeichnen Pixelwerte und ab welcher Grenze eine neue Layoutansicht gilt.
Mit den in den 2010er Jahren aufkommenden Gadgets wie Smartphone und Tablet wurden schließlich Designs mit flexiblen, also responsive Grids erfunden. Diese arbeiten mit relativen Werten, sodass Grafiken entsprechend der Bildschirmgröße ausgespielt werden können. Das funktioniert zum Beispiel auch, wenn man das Browser-Fenster verkleinert. Versuchen Sie es doch mal mit dieser Seite – Sie werden sehen, dass sich die Anzeige dieser Seite entsprechend verkleinert, wenn Sie das Browserfenster verkleinern.
Responsive Design und die Bedeutung für die Suchmaschinenoptimierung
Nicht umsonst sagt man „mobile first“, denn das responsive Webdesign hat eine große Bedeutung für die Suchmaschinenoptimierung.
Responsive Design soll es dem Nutzer unabhängig vom Ausgabemedium ermöglichen, Inhalte und Angebote zu betrachten, zu nutzen und zu verwenden. Damit verbessert Responsive Design deutlich die Benutzerfreundlichkeit der Webseite gegenüber einer klassischen Browser-Darstellung in der mobilen Suche. Die Benutzerfreundlichkeit wiederum hängt mit dem Ranking in Suchmaschinen zusammen. Denn Suchmaschinen registrieren, wie lange Besucher auf Webseiten verweilen, welche Unterseiten sie besuchen oder wie oft sie klicken.
Da sich die Suchmaschine Google immer wieder bemüht, die Ergebnisse so benutzerfreundlich wie möglich zu gestalten, dauerte es nicht lange, bis sie Webmaster zur Erstellung einer mobilen Webseite aufforderte. Anfang 2015 wurde bekannt, dass Google ab April mobile Webseiten als Faktor für das Ranking berücksichtigt. Damit erhielt die mobile Suche ein eigenes Gerüst. Zuvor handelte es sich lediglich um ein Abbild der Desktop-Suche. So kann es nun vorkommen, dass Webseiten in der regulären und der mobilen Suche auf unterschiedlichen Positionen platziert sind. Konkret werden Seiten bevorzugt, die als „mobile friendly“ gelten.
Stellen wir uns zudem mal vor, wir würden eine Website über unser Smartphone aufrufen. Wenn diese nun aussieht, wie eine Desktopseite, die in einen kleinen Bildschirm gepresst wurde, dann vergeht die Lust am Surfen sehr schnell. Daher trägt eine mobile friendly Site auch zu einer guten User Experience bei. Der Besucher verweilt länger und findet Informationen schnell und übersichtlich.
Mit der Verwendung von Responsive Design kann man sich die Erstellung einer mobilen Webseite ersparen, denn die Inhalte werden automatisch angepasst. Der große Vorteil: Benutzer finden, egal über welches Endgerät, die gleiche Webseite vor – nur in anderer Darstellung. Eine mobile Webseite als Alternative würde nämlich meist einen reduzierten Umfang bedeuten. Das heißt, die mobile Version informiert meist nur über wenige Unterthemen und stellt nicht die gesamte Webseite dar.