Responsive Webdesign - Was bedeutet Responsive?

Ein Webdesign responsiv zu gestalten, ist in dem heutigen Zeitalter schon fast ein Muss. Da viele Webseiten mittlerweile zum Großteil nur noch auf dem Smartphone oder Tablet aufgerufen werden, ist es wichtig, als Webseiteninhaber ein Responsive Design auf seiner Seite zu haben.

Doch was bedeutet „responsive” eigentlich? Wir erklären dir im folgenden Artikel, was ein Responsive Webdesign ist, wie du dein Webdesign Responsive machst und nennen dir einige Beispiele, wie du ein Webdesign Responsive aufbauen kannst.

Was versteht man unter Responsive Webdesign?

Responsive Webdesign bedeutet, dass sich das Webdesign einer Website auf jede Größe des Bildschirms anpasst. Das Design einer Seite wird demnach mit dem Responsive Webdesign geräteübergreifend gestaltet. Auf jedem Bildschirm muss jeglicher Inhalt optimal und ohne Probleme angezeigt werden. 

Hierbei sind sowohl die technischen als auch die medialen Werkzeuge wie Bilder, Videos oder Typografie gemeint. 

Bei der Erfindung des Internets im Jahre 1991 musste es Webseiten selbstverständlich nur für den Desktop geben. Als Smartphones wiederum auf den Markt kamen, mussten sich Webdesigner über die Darstellung ihrer Seiten auf kleineren Bildschirmen Gedanken machen.

Anfangs wurden noch zwei verschiedene Webseiten erstellt - eine Desktop-Version und eine mobile Version. Um diesen Mehraufwand zu verringern, stellte man dann im Jahr 2010 den Begriff Responsive Webdesign erstmals vor.

Somit müssen also keine zwei verschiedenen Versionen mehr von Webseiten entwickelt werden, sondern nur noch eine, die sich mithilfe von CSS und HTML den Gegebenheiten, sprich den unterschiedlichen Bildschirmgrößen, anpasst.

Was bedeutet responsive Verhalten?

„Responsive Verhalten” bedeutet übersetzt „reaktionsfähiges Verhalten”, das meint, dass ein Responsive gestaltetes Webdesign auf die gegebene Umgebung reagieren kann. Das Webdesign reagiert auf die Bildschirmgröße des Users und das Design, der Inhalt und die Medien werden entsprechend angepasst.

Welche Arten von responsivem Webdesign gibt es?

Generell gibt es zwei Arten von responsivem Webdesign: das Adaptive Layout und das Responsive Layout. Das Layout ist dann dementsprechend entweder anpassungsfähig oder reaktionsfähig, wobei auf ein fixes oder ein flexibles Rastersystem gesetzt wird.

Beim adaptiven Konzept gibt es ein fixes Rastersystem. Auf das Rastersystem wird unten noch einmal näher eingegangen. Dieses fixe Rastersystem wird dann im Vorhinein für verschiedene Bildschirmgrößen optimiert.

Beim Responsive Konzept hingegen geht man von einem flexiblen Rastersystem aus. Das heißt, dass der Inhalt und allgemein das Webdesign auf die Gegebenheiten, sprich auf die verschiedenen Auflösungen und Bildschirmgrößen, reagieren und sich an diese anpassen können.

Grundlegende Informationen zu diesem Thema erhältst du hier: Webdesign 

Wie erstelle ich eine Webseite Responsive?

Wenn du eine Webseite Responsive erstellen möchtest, musst du als Webdesigner vorab die Reihenfolge der Entwicklung dieser festlegen. Hierbei stehen dir zwei Möglichkeiten zur Verfügung: von Desktop zu Smartphone oder von Smartphone zu Desktop.

Von Desktop zu Smartphone (oder Tablet)

Wenn du dich dafür entscheidest, dein Webdesign in erster Linie für den Desktop-Bildschirm auszulegen, heißt das, dass du diese Version dann im Nachhinein für immer kleinere Bildschirme wie ein Smartphone oder Tablet optimieren musst. Die neuesten Designs und Technologien kommen hierbei zum Einsatz und kommen vor allem auf großen Bildschirmen wie auf einem Desktop oder Fernseher besonders zur Geltung.

Das bedeutet aber auch, dass diese neuesten Designs und Technologien auf kleineren Bildschirmen oder auch auf älteren Geräten Probleme bereiten könnten.

Von Smartphone (oder Tablet) zu Desktop

Genau das Gegenteil von diesem ist die Entwicklung einer Version, die hauptsächlich für das Smartphone oder Tablet angelegt wird, die dann später für größere Bildschirme optimiert wird. Hier geht es darum, eine Webseite für jedes Gerät, egal wie alt oder neu, zugänglich zu machen.

Danach wird das Webdesign progressiv für höhere Auflösungen und größere Bildschirme optimiert. Vielseitige Technologien oder Designs können an dieser Stelle immer noch hinzugefügt werden, jedoch sollte das Webdesign nicht auf diesen von Anfang an basieren.

Flexibles Layout 

Beim flexiblen Layout geht es darum, dass sich dieses an die jeweilige Bildschirmgröße und -auflösung anpassen kann, weshalb es flexibel sein muss. Hierfür musst du den Inhalt in Abschnitte unterteilen, die bei einem Webdesign, das Responsive aufgebaut ist, jedoch keinesfalls statisch sein dürfen. 

Aus diesem Grund werden die Abschnitte auf ein 12-spaltiges Rastersystem wie in einer Zeitung oder einem Magazin aufgeteilt. Somit wird die flexible Form auf allen Bildschirmgrößen ermöglicht, da der Inhalt in diesem Raster wahllos angeordnet werden kann und es beliebig viele Variationen dieser Spalten gibt.

Zur Erstellung dieses Rastersystems gibt es verschiedene Anwendungen wie zum Beispiel „bootstrap” oder „responsive grid system”.

CSS Media Queries

Um das Webdesign und die Struktur der Webseite nun aber Responsive zu machen, müssen sich diese Spalten aber selbstständig an den Bildschirm anpassen und somit verändern können. Hier kommen die Media Queries ins Spiel, die sogenannte Breakpoints festlegen. 

Breakpoints bestimmen, an welchen Stellen der Inhalt „gebrochen” werden kann, um an die Größe des Bildschirms angepasst zu werden.

Jede Bildschirmgröße erhält einen eigenen Code, der die Spalten und den Inhalt flexibel und Responsive machen soll.

Was sind Beispiele für ein Responsive Webdesign?

Responsive Navigation

Möchtest du, dass User sich gut auf deiner Webseite zurechtfinden, musst du als Webdesigner die Navigation so benutzerfreundlich wie möglich gestalten. Diese Navigation sieht auf der Desktop-Version anders aus als auf der mobilen Version.

Was auf Desktop Webseiten eine Menüleiste am oberen Rand des Bildschirms ist, ist auf Smartphones und Tablets ein sogenanntes Hamburger-Icon. Dieses erkennt man an den drei horizontalen, übereinander liegenden Strichen. 

Auf mobilen Webseiten wird die Menüleiste komplett ausgeblendet und das Menü erscheint erst, wenn man auf dieses Hamburger-Icon klickt. Dann öffnet sich das Menü und wird auf dem gesamten Smartphone- oder Tablet-Bildschirm angezeigt.

So solltest du es auch mit deiner Responsive Gestaltung beim Webdesign handhaben. Wie du dein Menü innerhalb dieser Menüleiste oder des Hamburger-Icons gestaltest, ist dir überlassen.

Responsive Content

Natürlich solltest du auch deinen Content Responsive aufbauen, das bedeutet, dass du durch die festgelegten Breakpoints bestimmst, wo dein Content „gebrochen” werden darf und wo nicht. Du kannst natürlich ebenfalls von Anfang an festlegen, wie dein Webdesign auf Smartphones oder Tablets und wie auf einem Desktop angezeigt werden soll (adaptive vs. responsive). 

Auch die Reihenfolge deines Contents darfst du auf der mobilen Seite zum Beispiel anders ausarbeiten als auf der Desktop-Version.

Achte auch darauf, dass der User auf kleineren Bildschirmen nicht vom Inhalt erschlagen wird und überlege, ob vielleicht einige Inhalte ausgeblendet werden können, damit dein Content leichter zu lesen ist.

Responsive Typografie 

Auch bei der Typografie gibt es entweder eine adaptive oder eine responsive Anpassung. Je kleiner der Bildschirm ist, desto mehr muss natürlich auch auf eine angemessene und angenehm zu lesende Typografie geachtet werden.

Eine adaptive Anpassung der Typografie wäre zum Beispiel das Ändern der Schriftgröße bei verschiedenen Bildschirmgrößen, die im Vorhinein festgelegt werden. Eine responsive Anpassung wäre, wenn sich die Schriftgröße eigenständig entsprechend der Bildschirmgröße anpasst.

Fazit

Wenn du dein Webdesign Responsive ausarbeiten möchtest, musst du als Webdesigner einige Dinge beachten, die auf der mobilen Version vielleicht anders aussehen (müssen) als auf der Desktop-Version.

Lege zuerst die Reihenfolge fest, in der du dein Responsive gestaltetes Webdesign aufbauen möchtest: Mobil oder Desktop First? 

Baue dann darauf auf und optimiere dann die einzelnen Elemente angepasst an und optimiert für größere bzw. kleinere Bildschirme. Ob du dich für adaptive oder responsive Elemente entscheidest, ist dir überlassen.

Stehen noch Fragen offen oder möchtest du weitere Informationen über das Thema Responsive Webdesign erhalten, dann kontaktiere uns gerne über unsere Webseite - wir helfen dir gerne weiter.