Was ist ein responsive Webdesign?
Responsives Webdesign ist eine moderne Technik, die es ermöglicht, Websites so zu gestalten, dass sie sich flexibel an die visuellen und haptischen Eigenschaften deines Endgeräts und dessen Bildschirmgröße anpassen.
Im Grunde genommen bedeutet responsives Webdesign, dass eine Website auf verschiedene Geräte reagiert und sich automatisch optimiert, um eine bestmögliche Benutzererfahrung zu bieten.
Der Sinn und Zweck des responsiven Webdesigns
Die Nutzung des Internets hat sich seit der Einführung von Smartphones und Tablets stark verändert. Heutzutage werden über die Hälfte aller Suchanfragen bei Google über mobile Endgeräte durchgeführt. Wenn Nutzer auf eine nicht für mobile Geräte optimierte Website gelangen, verlassen sie diese oft schon nach wenigen Sekunden wieder. Der Grund dafür ist, dass die Bedienung umständlich ist und ähnliche Anbieter nur wenige Klicks entfernt sind. Viele Website Betreiber unterschätzen nach wie vor, wie viele potenzielle Kunden und somit Geschäftsmögichkeiten sie an dieser Stelle verlieren.
Mit der zunehmenden Verbreitung von mobilen Geräten wie Smartphones und Tablets steigt auch der Anspruch der Nutzer an die Zugänglichkeit von Inhalten und die intuitive Navigation auf Websites. Nutzer erwarten, dass sie jede Website von überall und von jedem Gerät aus aufrufen und einfach bedienen können. Nur wenn Website-Betreiber diesen Anforderungen gerecht werden können, profitieren sie weiterhin von zufriedenen Kunden und hohen Konversionsraten. Das erfordert jedoch ein Umdenken in der Gestaltung von Websites. Es reicht nicht mehr aus, das Layout für eine einzige Bildschirmgröße anzupassen. Stattdessen muss das Webdesign flexibel auf unterschiedliche Bildschirmgrößen und deren Verhalten reagieren können:
Starres Grid Layout vs. flexibles Grid Layout
Das Konzept des Grid Layouts:
Ein Grid Layout ist ein grundlegendes Gestaltungselement für Websites. Es besteht aus einem unsichtbaren Rastersystem, das zur Ausrichtung der verschiedenen Elemente einer Website verwendet wird. Durch die Verwendung eines solchen Layouts wirkt das Webdesign in der Regel strukturierter und ausgewogener.
Mehrsäulige Inhalte sind ein häufiges Beispiel für die Anwendung eines Grid Layouts auf einer Website.
Das starre Grid Layout
Vor einigen Jahren wurden Websites in der Regel für bestimmte Bildschirmgrößen entwickelt, ohne die Vielfalt heutiger Geräte zu berücksichtigen. Wenn man eine solche veraltete Webseite auf einem Smartphone betrachtet, fällt sofort das starre Grid Layout auf, das für größere Bildschirme optimiert wurde. Auf dem kleinen Smartphone Bildschirm wird das starre Layout über die Bildschirmränder hinaus vergrößert und erschwert die Erfassung aller Inhalte. Das Scrollen und Zoomen wird notwendig, um bestimmte Bereiche lesen zu können. Das Menü der Website ist auf einem kleinen Smartphone Bildschirm ebenfalls schwierig zu bedienen, insbesondere für Personen mit größeren Fingern. Die einfache Recherche von Öffnungszeiten eines Geschäfts kann somit zu einer Geduldsprobe werden. Nutzer möchten nicht, dass sie sich an eine Website anpassen müssen. Stattdessen erwarten sie, dass die Website flexibel auf ihre Bedürfnisse reagiert und nicht umgekehrt.
Flexibles Grid Layout
Um eine konsistente Benutzerfreundlichkeit auch auf kleinen Bildschirmen sicherzustellen, erfordert es ein Umdenken bei der Gestaltung von Websites, insbesondere im Hinblick auf das Gestaltungsraster. Anstatt das Layout starr über alle Bildschirmgrößen hinweg beizubehalten, muss es sich flexibel an die jeweilige Bildschirmgröße anpassen.
Ein flexibles Layout vermeidet weitgehend feste Pixelangaben und setzt stattdessen verstärkt auf relative Werte wie Prozentangaben. Wenn beispielsweise die Breite eines Bildes auf genau 1920px festgelegt wird, mag es auf einem großen Bildschirm optimal aussehen. Jedoch würde es auf einem kleinen Bildschirm mit einer Gesamtbreite von nur 480px um 1440px über das Anzeigefeld hinausragen. Durch den Einsatz von Prozentangaben im responsiven Webdesign kann dieses Problem vermieden werden, da sich das Bild relativ zur Bildschirmgröße oder zur verfügbaren Fläche ausrichtet.
Auch die Darstellung von Spalten muss sich flexibel an die Bildschirmgröße anpassen können. Auf einem großen Desktop PC können beispielsweise vier nebeneinander angeordnete Spalten gut aussehen. Auf einem kleineren Bildschirm hingegen würden die Spalten extrem schmal werden, wodurch vor allem lange Wörter schnell abgeschnitten oder überlappend angezeigt werden.
Um dieses Problem zu lösen, sollten sogenannte Breakpoints definiert werden. Bei kleinen Bildschirmen werden die Spalten dann nicht mehr nebeneinander, sondern untereinander dargestellt. Auf diese Weise sind die Inhalte innerhalb der Spalten für den Benutzer deutlich einfacher erfassbar.
Hier sind weitere Gestaltungsregeln, um aus einem starren Layout ein flexibles Layout zu machen:
Wie funktioniert die technische Umsetzung eines responsiven Webdesign?
Beim Laden einer Website werden zuerst unterschiedliche Daten mittels Media Queries abgerufen, wie z.B.:
Je nach Ergebnis der Abfrage werden die zuvor definierten Gestaltungsregeln mittels Media Queries abgerufen und angewendet. Dabei werden auch sogenannte Breakpoints innerhalb dieser Regeln festgelegt. Sobald die Geräteauflösung einen solchen Breakpoint überschreitet, erfolgt eine dynamische Anpassung des Website Layouts.
Einfaches Beispiel:
Ein simples Beispiel ist die Anpassung der Schriftgröße basierend auf der Bildschirmgröße. Wenn wir die Schriftgröße auf dem Smartphone etwas kleiner (18px) und auf dem Tablet (20px) haben möchten, können wir dies mithilfe von Media Queries problemlos erreichen. Media Queries sind Teil der CSS-Stylesprache und werden in einer Datei mit der Endung “.css” (z.B. style.css) definiert. Normalerweise werden Media Queries am Ende dieser Datei platziert, aber sie können auch in einer separaten CSS-Datei ausgelagert werden, die dann im Hauptdokument eingebunden werden muss.
Hier ist ein Beispiel für den entsprechenden Code im Responsive Webdesign in der Praxis:
Die Vorteile eines responsiven Webdesigns
Beim Website erstellen lassen ist es wichtig zu beachten, dass ein responsives Webdesign nicht nur eine nette Zusatzfunktion ist, sondern vielmehr eine unverzichtbare Notwendigkeit. Wenn das Ziel darin besteht, über die Website neue Kunden zu gewinnen, muss eine benutzerfreundliche Erfahrung auf allen Endgeräten gewährleistet werden.
Was ist der Ansatz “Mobile First” und ist es lohnenswert?
“Mobile First” bezieht sich auf einen Ansatz, bei dem eine Website durch responsives Webdesign zuerst für den mobilen Zugriff konzipiert und optimiert wird. Anschließend wird die Website entsprechend für größere Displays angepasst.
Dieses Konzept basiert auf der Annahme, dass es einfacher ist, ein mobiles Layout auf einen Desktop PC zu übertragen als umgekehrt. Das “Mobile First” Prinzip fördert auch eine stärkere Berücksichtigung von Inhalt und Struktur der Seite. Unternehmen erkennen beispielsweise, dass bestimmte Informationen überflüssig sind und weggelassen werden können. “Mobile First” hilft also dabei, wichtige Informationen von unwichtigen zu trennen und die Website nicht mit überflüssigen Informationen zu überladen. Die Idee, dass man mit der Konzeption einer mobilen Website eine perfekte Desktop Version quasi “gratis” erhält, hat in den letzten Jahren zu einem enormen Hype um den “Mobile First” Ansatz geführt.
Obwohl viele Webdesigner von diesem Prinzip überzeugt sind, sind wir der Meinung, dass “Mobile First” nicht für jeden Kunden und jedes Projekt angewendet werden muss oder sollte. Es kann sinnvoll sein, die mobile Version einer Seite auf die wichtigsten Elemente und Informationen zu reduzieren. Eine direkte Übertragung dieser Reduktion auf die Desktop-Version ist jedoch nicht unbedingt die optimale Lösung. Während die Benutzererfahrung auf mobilen Endgeräten häufig verbessert wird, kann die Nutzererfahrung auf Desktop-PCs darunter leiden.
Bei jedem Projekt sollte individuell entschieden werden, ob “Mobile First” der richtige Ansatz sein kann und welche konkreten Vorteile damit verbunden sind. Es ist sinnvoller, die verschiedenen Endgeräte und Nutzungssituationen einzeln und unabhängig voneinander zu betrachten. Es ist also nicht falsch, zuerst die Desktop-Version zu entwickeln und dann die mobile Version durch das Reduzieren von weniger relevanten Informationen anzupassen. Ein Benutzer, der gemütlich zu Hause vor dem PC sitzt, hat möglicherweise mehr Zeit, Ihre Inhalte zu lesen, als jemand, der unterwegs nur schnell die wichtigsten Informationen nachschlagen möchte.
Wie kannst du überprüfen, ob dein Webdesign responsive ist?
Es gibt verschiedene kostenlose Online Tools, mit denen du testen kannst, ob deine Website responsive ist. Ein Tool, das uns besonders gut gefallen hat, ist z.B. Am I responsive
Es ist jedoch wichtig zu beachten, dass Online Tools nicht immer zuverlässig sind. Verschiedene Plugins, insbesondere bei WordPress, definieren ihre responsiven Eigenschaften nicht unbedingt anhand der Bildschirmgröße, sondern am verwendeten Endgerät selbst. Die Eigenschaften werden also nur übernommen, wenn dein Gerät tatsächlich ein Smartphone ist.
Da Online Tools in der Regel von einem Desktop PC aus aufgerufen werden, greifen die speziell für Smartphones definierten Eigenschaften hier nicht.
Daher empfehle ich dir, Websites immer direkt von einem Smartphone oder Tablet aus zu überprüfen, um wirklich sicherzustellen, dass sie vollständig responsive sind. Auf diese Weise erhältst du eine zuverlässige Bewertung zu deiner responsiven Gestaltung.
