WAS IST RESPONSIVE WEBDESIGN? 

Responsive Webdesign stellt eine aktuelle Technik zur Verfügung, mit der Webseiten so angelegt werden, dass sie sowohl auf dem Computer-Desktop, Smartphone oder Tablet ohne entsprechenden Qualitäts- oder Informationsverlust dargestellt werden. Würde es keine responsive Websites geben, müsste man auf kleineren Endgeräten sowohl seitlich als auch nach oben oder unten scrollen, um den Inhalt vollständig lesen zu können, außer es wurde extra eine Webseite für kleinere Geräte erstellt, welches einen hohen Aufwand bedeutet. Eine responsive Website ist nun also eine Website, die sich entsprechend der Bildschirmgröße anpasst und trotzdem alle Inhalte erhalten bleiben. Eine solche Website besteht aus einem fluiden Layoutraster, anpassungsfähigen Inhalten und Layoutumbrüchen durch Media Queries (Medienabfragen), welche eine Liste an Kriterien beinhaltet, die das Ausgabemedium erfüllen muss. Der Begriff des Responsive Webdesign trat erstmals 2010 in einem Artikel von dem Designer und Entwickler Ethan Marcotte auf, der darin für ein neues Verständnis von Webdesign aufgrund der Zunahme von mobilen Endgeräten aufrief. Er stieß damit auf große Resonanz, da die Gestaltung solcher Webseiten ein bis dahin ungelöstes Problem darstellte, da der Anspruch an die Darstellung von Webseiten wuchs und weiterhin wächst - und das auf allen Endgeräten. Die ersten Webseiten im World Wide Web waren bereits flexibel und anpassungsfähig, da dort lediglich Text stand und noch kein Design vorhanden war. Mit der Zeit wurden die Ansprüche an Webseiten immer höher, die Seiten wurden komplexer. Die Layouts stießen aufgrund der Vielfalt an Bildschirmgrößen an ihre Grenzen, welche bis heute noch größer geworden ist. Das Ziel war es also, Webseiten wieder so flexibel zu gestalten wie in den Anfängen des Word Wide Web, ohne dabei aber auf die Vorzüge des Designs verzichten zu müssen. Beim responsive Webdesign ist es wichtig, zwischen einer tatsächlichen responsive Website und verschiedenen Versionen der Webseite für die verschiedene Bildschirmgrößen zu unterscheiden. Die Mobilversion einer Webseite beispielsweise ist eine extra neu erstellte Version der Webseite, die für kleine Bildschirme angepasst wurde, wenn die Original-Webseite eine Desktopversion ist. Hierbei sind die Inhalte der Mobilversion
und der Desktopversion nicht zwingend gleich. Hingegen gibt es bei einer responsive Website einen bestimmten Inhalt der Website, der auf allen Geräten gleich ist und lediglich anders dargestellt wird. Der Vorteil von responsive Websites ist, dass sie auf allen Bildschirmgrößen optimal aussieht. Des Weiteren ist der Aufwand der Wartung deutlich geringer als bei entsprechenden Mobilversionen der Webseiten, da der Inhalt sich bei den unterschiedlichen Versionen nicht unterscheidet. Ein Layout, welches nicht responsive ist, kann die Unterschiede zwischen der Displaygröße eines Smartphones und eines Desktops nicht abdecken. Daher ist es notwendig, dass das Layout flexibel und kontrollierbar ist. Es gibt grundlegend vier verschiedene Arten des Layouts bei der Gestaltung einer Webseite.
A. Fixed Layout
Zum einen gibt es das fixed Layout. Dies ist ein Layout, das auf festen Pixelgrößen basiert, welche sich auch beim Verändern der Bildschirmgröße nicht verändert. Dieses Layout hat den Vorteil, dass es leicht zu planen und ebenfalls leicht in der technischen Umsetzung ist. Es hat aber den Nachteil, dass es nur auf einem Viewport gut sichtbar ist und vor allem auf kleineren Geräten der Inhalt nicht mehr vollständig oder nur durch Scrollen lesbar ist.
B. Fluid Layout
Zum anderen gibt es das fluide Layout, welches auf flexiblen Pixelgrößen basiert. Somit passt sich der Inhalt der entsprechenden Bildschirmgröße an und der ganze Platz wird ausgenutzt. Hierbei gibt es aber einige Einschränkungen in der Gestaltung, da der komplette Inhalt der Webseite flexibel sein muss. Das fluide Layout ist somit ein Layout, bei dem sich die Dimensionen des Layouts verändern, sobald sich die Bildschirmgröße ändert, wobei Bilder und Texte in ihrer ursprünglichen Größe erhalten bleiben.

C. Elastic Layout Und weiterhin gibt es das elastische Layout, wobei die Seitenelemente sowohl in der Höhe als auch in der Breite variabel sind. Hierbei skaliert das Design immer proportional zur Größe des Bildschirms und ist daher gut angepasst an alle unterschiedlichen Bildschirmgrößen. Der Nachteil von einem elastischen Layout ist allerdings, dass es in der Planung und technischen Umsetzung sehr komplex ist.
D. Responsive Layout Das responsive Layout ist eine Kombination aus einem adaptiven und einem fluiden Layout. Hierbei ist das adaptive Layout ein Layout, welches in mehreren Versionen für die unterschiedlichen Bildschirmgrößen existiert, wobei diese Versionen jeweils fest sind. Dieses ist also schon recht nah an einem responsive Layout dran. Das Problem bei dem adaptiven Layout ist aber, dass es auf den Zwischengrößen nicht optimal aussieht.
Das responsive Layout besitzt nun also wie das adaptive Layout Werte, ab denen sich das Layout verändert, aber dazwischen verhält es sich dann wie das fluide Layout. Somit wird es auf allen Bildschirmgrößen optimal dargestellt.
Für das Erstellen einer Webseite benötigt man zum einen HTML, um den Inhalt der Webseite zu erstellen, zum anderen CSS zum Erstellen des Layouts der Webseite und JavaScript, um das Verhalten der Webseite zu programmieren. HTML steht für Hypertext Markup Language und ist eine textbasierte Auszeichnungssprache zur Darstellung von Texten, Grafiken und weiteren Inhalten. Ein HTML-Dokument kann ebenfalls Informationen enthalten, die nicht im Dokument angezeigt werden, wie beispielsweise den Verfasser des Dokuments. Die neueste Version ist HTML5, welche neue Elemente für beispielsweise Video und Audio bietet. CSS steht für Cascading Style Sheets und ist eine Gestaltungssprache für elektronische Dokumente. Style Sheets steht hierbei für eine Sammlung von Formatvorlagen für HTML-Elemente. Man behandelt die Strukturierung und das Layout einer Webseite getrennt voneinander. Während HTMLElemente also dazu dienen, den Inhalt zu strukturieren, wird CSS für das Stylen verwendet. Der HTML-Code liegt hierbei in einer anderen Datei als der CSS-Code. Dies hat den Vorteil, dass das Layout auf allen Seiten zugleich verändert werden
kann, indem die CSS-Datei geändert wird. Die aktuelle Version ist CSS3. Weiterhin ist JavaScript die clientseitige Skriptsprache des Webbrowsers. Mit JavaScript können HTML und CSS um Benutzerinteraktionen erweitert werden, um beispielsweise Inhalte auszuwerten und dynamische Webseiten zu erstellen. Es wird also das HTML geschrieben und dann je nach den verschiedenen Parametern mit einem unterschiedlichem CSS ausgeliefert. Das Layout passt sich so den unterschiedlichen Umgebungen an. Diese verschiedenen Parameter werden mit Media Queries abgefragt. Media Queries sind Medienabfragen, welche jeweils aus einer Liste an Kriterien bestehen, die das entsprechende Ausgabemedium erfüllen muss, damit das Stylesheet eingebunden wird. Hierbei wird also unter anderem die entsprechende Größe des Bildschirms überprüft, aber auch die Auflösung und Farbfähigkeit. Insgesamt wird das Fundament einer responsive Website mit HTML gelegt, welches für die Struktur verantwortlich ist und in dem beispielsweise Überschriften und Texte definiert werden. Für die Formatierung und das Layout der Website ist CSS verantwortlich. Hierbei werden zum Beispiel Farben oder Schriften definiert. Während HTML also für die Inhalte der Website verantwortlich ist, definiert CSS das Aussehen dieser Inhalte. Um dann aus einer statischen Website eine dynamische Website zu gestalten, ist zusätzlich noch JavaScript nötig.
Bei der Erstellung des HTML, CSS und JavaScript für Webseiten gibt es mehrere mögliche Herangehensweisen: Eine Möglichkeit ist „Desktop First“. Hierbei beginnt man mit dem mehrspaltigen Layout für große Bildschirme. Danach wird es auf kleinere Bildschirme reduziert. Eine zweite Möglichkeit ist „Mobile First“, wobei erst mit der kleinsten Variante begonnen wird und danach für große Bildschirme erweitert wird. Für die Gestaltung und Erstellung von responsive Websites hat die Herangehensweise „Mobile First“ die Vorteile, indem beispielsweise eine platzsparende „Einklapp-Navigation“ eingebaut werden kann, die dann im Browser nebeneinander dargestellt wird.