Eine Einführung in responsive Webdesign
Hast du dich schon immer mal gefragt, was responsive Webdesign ist? Wenn ja, bist du hier genau richtig. Wenn nein, müsstest du dir vielleicht mal die Frage stellen, warum du überhaupt hier draufgeklickt hast. Responsive Webdesign ist irgendwie eins dieser Buzzwords, das im Kontext von Websites oft verwendet wird. Aber wissen wirklich alle, die das Wort verwenden, was damit gemeint ist? Eigentlich ist es nicht so schwer. Im Kern ist damit lediglich ein technischer und gestalterischer Grundsatz gemeint. Damit soll das Ziel erreicht werden, dass eine Website sich an die Gegebenheiten des jeweiligen Endgeräts anpasst. Dies umfasst hauptsächlich die Bildschirmgröße, aber auch andere Dinge, wie die Bedienweise (Maus vs. Touch), den Bildschirmabstand oder die Umgebung (ortsgebunden vs. mobil). Darüber hinaus meint es ebenso die Erwartungshaltung an Bedienelemente entsprechend anderer Websites und Apps auf den jeweiligen Geräten.
Diese Anpassungsfähigkeit ist inzwischen essentiell. Ein immer größerer Anteil der Websitebesuche wird nicht durch Desktops und Laptops getätigt, sondern durch mobile Endgeräte. Der Anteil der mobilen Zugriffe weltweit liegt inzwischen bei über 50%. Um Nutzer:innen und mögliche Kund:innen nicht zu verärgern, ist es notwendig auf allen Endgeräten ein gleichwertiges Nutzungserlebnis zu ermöglichen und deine Brand konsistent zu präsentieren. Es gibt kaum einen schlechteren ersten Eindruck, als auf einer Website zu landen, die nicht für die mobile Nutzung angepasst ist.
Im Normalfall werden drei verschiedene Größen als Maßstab genommen. Diese Dreiteilung umfasst Desktop, Tablet sowie Smartphone und orientiert sich an der Bildschirmgröße beziehungsweise an der Fenstergröße. Aufwendig ist der Prozess nicht nur, weil drei Größen betrachtet werden müssen, sondern zudem alle dazwischen, darunter oder darüber. Bildschirmgrößen von Endgeräten sind nun mal nicht genormt, auch wenn wir uns das als Webdesigner:in manchmal wünschen würden.
Sidenotes
Responsive Webdesign vs. Adaptives Design
Neben dem responsive Webdesign gibt es noch weitere Möglichkeiten, deine Website auf verschiedene Geräte anzupassen. Ein Beispiel dafür ist das adaptive Webdesign. Hierbei ändert sich die Website nicht dynamisch abhängig von der momentanen Bildschirmgröße oder wenn du das Browserfenster kleiner oder größer ziehst. Stattdessen existiert eine festgelegte Anzahl an Designs und Größen. Es wird einfach diejenige angezeigt, welche der eingestellten Größe am nächsten kommt. Meist gibt es dabei auch eine Dreiteilung und damit eine Unterscheidung zwischen Desktop, Tablet und Smartphone.
Wenn dabei eine komplette Trennung vorgenommen wurde, also nicht die gleichen Inhalte mit unterschiedlichem Aussehen angezeigt werden, kann es den Pflegeaufwand der Website erhöhen. Dabei stellt der Server abhängig vom Endgerät eine vollständig andere Website zur Verfügung. Beispielsweise muss beim Austauschen eines Bildes oder dem Anpassen eines Texts dies nicht an einer Stelle modifiziert werden, sondern an mehreren.
Mobile First vs. Desktop First
Bei der Designerstellung einer Website gibt es für den Arbeitsprozess im Wesentlichen zwei Ansätze. Es kann mit dem Design für die Desktopgröße begonnen werden und dieses wird im Anschluss für die anderen Größen optimiert. Anderenfalls kann das Design für Mobilgeräte zuerst erstellt werden und dieses entsprechend für die anderen Größen optimiert werden. Welcher Ansatz sinnvoller ist, kann von Projekt zu Projekt unterschiedlich sein und beispielsweise davon abhängig gemacht werden, für welche Endgeräte die meisten Zugriffe zu erwarten sind. Unabhängig vom gewählten Ansatz ist es essentiell, alle Endgeräte von Anfang an mitzudenken. Wir legen darauf besonderen Wert, da wir hiermit im weiteren Verlauf des Projekts viel Zeit und Aufwand sparen können. Zudem können wir so frühzeitig falschen Erwartungshaltungen zuvorkommen, damit wir nicht beispielsweise ein aufwendiges Design für Desktopgrößen erstellen und viele Elemente letztlich für die anderen Endgeräte nicht benutzen können.
Fluid Layout
Innerhalb unserer Projekte versuchen wir, uns weitestgehend an das sogenannte Fluid Layout zu halten. Hierbei stellt man möglichst viele der Größenangaben von Elementen sowie Abstände zwischen Elementen durch prozentuale Angaben und damit relativ ein. Anstatt die Breite eines Bildes absolut auf 250 Pixel festzulegen, wird eine Breite von beispielsweise 25% eingestellt. Damit nimmt das Bild immer ein Viertel der Bildschirm- beziehungsweise Fenstergröße ein, unabhängig davon wie viele Pixel dies im konkreten Fall sind. Der Vorteil davon ist, dass das erstellte Design der Website von sich aus wesentlich stabiler für verschiedene Größen funktioniert. Damit sind später weniger Anpassungen notwendig und es wird eine Flexibilität erreicht, welche mit absoluten Werten trotz Anpassungen kaum zu erreichen ist. Ausgenommen hiervon sind kleinere Abstände. Beispielsweise der Abstand zwischen einer Überschrift und dem darunter liegenden Text sollte eher von den gewählten Schriftgrößen abhängen als von der aktuellen Bildschirmhöhe. Hier eignet sich eine absolute Angabe.
Nachhaltigkeitsaspekte des responsive Webdesign
Auch innerhalb der responsiven Elemente von Webdesign gilt je kleiner die Website, desto weniger Ressourcen müssen geladen und übertragen werden. Eine kleinere Website verursacht weniger Emissionen. Eine unnötig hohe Websitegröße kann man mit klugem responsive Webdesign verhindern. Anpassungen der Abstände und Elemente auf die oben erwähnte Weise ergeben eine geringe Vergrößerung. Werden dagegen große Bereiche der Website für jedes Endgerät einzeln erstellt und auf den jeweils anderen ausgeblendet, also nicht sichtbar gemacht, werden die jeweils anderen trotzdem geladen, nur nicht angezeigt. Dies kann zu einer merklichen Vergrößerung der Website und damit erhöhten Emissionen führen, welche mit einem anderen Ansatz vermeidbar gewesen wären.
Zusammenfassend ist eine Anpassung einer Website auf verschiedene Endgeräte aus Nachhaltigkeitsaspekten sinnvoll. Ein angepasstes Design ist zielführender und resultiert damit in einer geringeren Verweildauer und einer kleineren Wahrscheinlichkeit für unnötige zusätzliche Seitenaufrufe.