Responsive Webdesign
Beim Responsive Webdesign (RWD) reagiert das Layout auf die Bildschirmgröße des verwendeten Geräts. Hier wird eine Technik aus HTML und CSS angewandt, um eine Website flexibel zu gestalten, sodass sie sich an jedes Ausgabegerät, wie an ein Smartphone oder ein Tablet, anpasst. Hierbei bedient man sich eines flüssigen Rasters, bei dem die Breite der Website mit einem Prozentwert definiert ist. Damit bleibt die Usability bei jedem Gerät und jeder Auflösung gleich.
Form follows function
Form follows function bedeutet, dass Funktion, Gestaltung und Inhalt der jeweiligen Bildschirmauflösung des Smartphones, Tablet oder Desktop folgen. Das Responsive Webdesign folgt demnach dem Nutzer im Gegensatz zu früheren, starr umgesetzten Webdesigns, bei denen der User dem Design folgen musste.
Vorteile von Responsive Webdesign
Die Nutzung von Responsive Webdesign ist eine Reaktion auf den Trend der immer größer werdenden Nutzung des Internets mit mobilen Geräten. Bei einer Website mit flexiblem Layout erreicht man eine größere Bandbreite an Usern, da der Großteil aller Benutzer das Internet mit Ihrem Smartphone oder Tablet nutzen.
Zudem bietet das Responsive Webdesign einen geringeren redaktionellen Aufwand. Bei einer strikten Trennung der mobilen Version von der Desktop Version, also einer nicht responsive fähigen Website, entsteht ein erhöhter Pflegeaufwand des Inhalts. Zwar ist die Entwicklung einer Website im Responsive Webdesign aufwändiger, spart aber nachher Zeit bei der Pflege des Inhalts.
Breakpoints und Media Queries
Mit den sogenannten Breakpoints werden bestimmte Auflösungen bzw. Bildschirmbreiten definiert, bei denen sich das Layout verändert. Zum Beispiel, dass ein zweispaltiges Layout in einem schmaleren Display nun nur noch einspaltig angezeigt wird oder bestimmte Elemente ab einer bestimmten Breite verschwinden bzw. hinzukommen. Hier kommen nun auch die Media Queries ins Spiel. Sie fragen den Gerätetyp sowie die Eigenschaften des Geräts ab, um die Breakpoints richtig einsetzen zu können.
Arten der Nutzung des Responsive Webdesign
Für die Nutzung des Responsive Webdesign auf einer Website oder in einem Onlineshop gibt es zwei Wege:
Progressive Enhancement zur Usability Optimierung
Zum einen gibt es das mobile first Prinzip. Hier wird ein Webdesign als erstes für das kleinste Gerät erstellt und optimiert. Es werden nur wesentliche Elemente eingebaut, damit die Website übersichtlich bleibt und nicht überladen wirkt. Die mobile Version wird dann schrittweise nach und nach erweitert bis zur detaillierten Desktop Version mit allen Informationen, Bildern und Effekten, die auf kleineren Displays stören würden. Diese Methode eignet sich allerdings nicht für Projekte, bei denen schon ein Webauftritt vorhanden ist, da sie zu aufwändig wäre. Das Progressive Enhancement wird beispielsweise bei Redesigns zur Usability Optimierung eingesetzt.
Graceful Degradation – Würdevolle Herabstufung
Bei dieser Methode geht man den umgekehrten Weg. Sie wird eingesetzt, wenn es schon einen Webauftritt gibt. Beim Graceful Enhancement, was übersetzt würdevolle Herabstufung bedeutet, wird die ausführliche detaillierte Desktop-Version eines Webdesigns auf das wesentliche reduziert und heruntergebrochen, bis nur noch die wichtigsten Informationen und Elemente auf dem Smartphone oder dem Tablet zu sehen sind. Ziel ist es, die Benutzerfreundlichkeit auf allen Geräten zu erhalten.