Responsive Webdesign

Definition

Responsive Webdesign leitet sich vom englischen Verb to respond für “antworten” oder “reagieren” ab. Entwickelt wurde es als Reaktion auf die Verbreitung vieler verschiedener Display-Größen, die sich immer mehr diversifizieren, seit es neben Standrechnern und Laptops auch Smartphones, Tablets und andere Mobilgeräte, aber auch Smart TVs gibt und diese für webbasierte Funktionen verwendet werden.

Es handelt sich um ein optimiertes Design von Websites, das sich automatisch der Bildschirmgröße anpasst, indem sich die unterschiedlichen Website-Elemente je nach Anzeige und Aktion wie Scrollen, Wischen oder Verändern der Browser-Fenstergröße reaktiv neu anordnen. Wenn sich also auf einem 16:9 Bildschirm mehrere unterschiedlich große Elemente wie ein Header, eine Sidebar und eine Contentbox in einer Reihe nebeneinander befinden, so werden sie auf einem Smartphone skaliert und eines oder mehrere der Elemente rutscht um eine Zeile nach unten.

Das Prinzip von Responsive Webdesign lässt sich mit dem Verhalten von Wasser vergleichen: Es passt in alle Behältnisse und Formen und stellt sich immer auf seine Umgebung ein, weshalb RWD sinnverwandt auch fluid, liquid oder dynamic Webdesign genannt wird.

Entstehung des Responsive Webdesigns

In den Anfängen der Webentwicklung seit den 1990er Jahren waren Websites relativ statisch aufgebaut und basierten auf einfachem HTML und CSS. Dies war nicht zuletzt der langsamen Surfgeschwindigkeit zu der Zeit geschuldet, die teilweise nur 50 kbit/s betrug, weshalb hauptsächlich unaufwändige Websites gebaut wurden, um Ladezeiten zu verringern. Zudem wurden sie nahezu ausschließlich auf Standrechnern, beispielsweise am PC zu Hause, abgerufen. Mit der Zeit wurden immer mehr Features entwickelt, die schließlich auch mit einer schneller werdenden Internetverbindung mehr und mehr unterstützt wurden. Damit stiegen aber gleichzeitig die Erwartungen an das Layout und Features von Websites.

Seit Entwicklung von smarten Technologien und internetfähigen Mobilgeräten haben sich auch der technische Aufbau und die optische Gestaltung von Websites stark gewandelt. Ein großer Faktor war die Erfindung des Smartphones. Im Jahre 1999 kam das Blackberry als erstes Telefon mit Browser auf den Markt, über das bereits Websites aufrufbar waren. Spätestens jedoch seit 2007, als das erste iPhone erschien und eine Smartphone-Welle auslöste, war es also nötig, Websites für alle Bildschirmgrößen zu optimieren. Diese wurden nämlich bislang einfach entsprechend der standardisierten Monitorgröße angezeigt, weshalb Darstellungen fehlerhaft, Schriften zu klein, Elemente versteckt oder verrutscht und die Oberflächen schlichtweg nicht bedienbar waren.

Mobilversion von Websites

Um dieses Problem zu umgehen, war die erste Lösung, bevor die nötigen Technologien für ein responsive Webdesign vorhanden waren, zusätzlich zur Desktop-Version einer Website eine Mobilversion zu entwickeln, auf die man automatisch oder nach Abfrage geleitet wurde, sobald man mit einem Mobilgerät surfte. Diese muss von Grund auf entwickelt werden, erhält ein eigenes Template und ist in keiner Weise mit der Desktop-Website verbunden, sodass Anpassungen separat vorgenommen werden müssen.

Eine andere Möglichkeit, seinen Webauftritt für Mobilgeräte zu optimieren bzw. verfügbar zu machen, ist die Erstellung einer mobilen App. Diese enthält meist mehr Funktionen und ist von Grund auf interaktiver angelegt als eine Website. Sie bietet mehr Kommunikationsmöglichkeiten, sorgt für eine stärkere Kundenbindung und hat den Vorteil einer möglichen Offline-Nutzung. Durch Entwicklungsframeworks wie Cordova ist es möglich, Hybrid Apps zu entwickeln. Diese laufen dann über einen Container, in dem Websites aus Basis von Javascript ausgeführt werden. Mit Flutter oder React Native kann darüber hinaus ein universeller Code programmiert werden, der beim Kompilieren den Code für jeweilige Plattform erstellt, sodass die App-Entwicklung erleichtert wird. Nichtsdestotrotz bedeutet eine App auch einen Mehraufwand durch die separate Entwicklungsarbeit.

Responsive Webdesign für mobilfähige Websites

Mit Responsive Webdesign konnte die zusätzliche Entwicklungsarbeit einer zweiten Website oder einer App umgangen werden. Eine Zeit lang wurde sogar prognostiziert, dass Apps durch Responsive Webdesign überflüssig und schließlich abgelöst werden würden.

Die erste RWD-Seite wurde bereits 2001 von Audi gelauncht, der Begriff des Responsive Webdesigns tauchte jedoch erst im Jahre 2010 in einem Artikel von Ethan Marcotte im Online-Magazin A List Apart auf. Seinen Höhepunkt erreichte es etwa 2012 bis 2013 und gehört heute zu den Entwicklungsstandards.

Vorteile von Responsive Webdesign

Die mobile Internetnutzung steigt stetig an; Informationen müssen überall und zu jeder Zeit verfügbar sein. Deshalb ist eine mobilfähige Website heutzutage unabdingbar. Responsive Webdesign sorgt für den Nutzer eine bessere Bedien- und Lesbarkeit und reduziert die Website auf das Wesentliche.

Außerdem bedeutet es eine Arbeitserleichterung für Entwickler, da eine RWD-Website den gesamten Code enthält, sowohl für die Desktop- als auch für jegliche Mobilversionen, und die Programmierung somit weniger aufwändig und kostenintensiv ist. Zudem sind Anpassungen schnell gemacht und Änderungen leichter einzupflegen.

Ein weiterer Vorteil ist, dass responsive Websites ein besseres Ranking auf Google und anderen Suchmaschinen erhalten und somit besser auffindbar sind.

Tools für Responsive Webdesign

Um eine responsive Website zu erstellen, gibt es verschiedenste Möglichkeiten. Am geläufigsten sind Entwicklungsframeworks, vor allem solche, die speziell darauf ausgelegt sind, aber auch Software oder Layout-Modelle für CSS. Bei Letzteren ist zu beachten, dass Tools wie Breakpoints oder Liquid allein eine Website meist noch nicht responsiv machen, dafür aber eine Kombination der beiden.

Entwicklungsframeworks für Responsive Webdesign

Frameworks bieten unterschiedlichste Oberflächengestaltungselemente, wie unter anderem HTML- und CSS-Komponenten, Vorlagen und vorgefertigte Codes, Gestaltungsoptionen für Buttons, Typografie, Tabellen, Formulare, Navigationselemente und optionale JavaScript-Erweiterungen.

Auf die Entwicklung von RWD-Websites spezialisierte Frameworks sind Frontend-Frameworks, die auf CSS basieren. Die Darstellung erfolgt dabei über sogenannte Grids. Grids sind Raster, mit denen sich Gestaltungselemente anhand der auswählbaren Anzahl, Breite und Abstand der Spalten anordnen und organisieren lassen. Dabei gibt es Optionen für Smartphones, Tablets im Hoch- und Querformat und Widescreen-PCs in hoher und niedriger Auflösung. Die Frameworks erkennen die Display-Größe dabei automatisch.

Es gibt eine Vielzahl an Open Source, also kostenfreie Frameworks, für die RWD-Entwicklung bieten sich vor allem Bootstrap von Twitter, Foundation von ZURB oder Tailwind an.

Software für Responsive Webdesign

Convert to HTML/CSS

Manche Softwarehersteller bieten Grafik-Programme an, mit denen man das Design grafisch entwerfen und hinterher die Photoshop-Dateien in HTML oder CSS konvertieren kann. Das Design wird ebenfalls visuell angepasst und z.B. mithilfe von Breakpoints responsiv gemacht, ein Beispiel dafür ist Adobe Edge Reflow.

CSS Layout-Modelle

Breakpoints

Breakpoints sind sogenannte “Sollbruchstellen”: Sie brechen das Layout an einer bestimmten Stelle auf, wenn beispielsweise aus zwei Spalten eine wird. Das Layout dazwischen bleibt aber weiterhin statisch. Per Definition machen Breakpoints eine Website also nicht responsive, sondern adaptive, was vor allem mit der Anzahl der Breakpoints zusammenhängt. Diese ist meist begrenzt, sodass eine Website nicht fluid wird.

Liquid

Bei Liquid bleibt die Anordnung der Layout-Elemente gleich, sie werden nur schmaler oder breiter und passen sich wie eine Flüssigkeit an. Hier werden also keine Breakpoints verwendet, sondern der Platz wird bei gleichem prozentualem Anteil anders genutzt. Dies geschieht nicht nur als Folge der Display-Größe, sondern auch bei Nutzeraktionen im selben Moment, wie zum Beispiel der Veränderung der Browserfenster-Größe.

Flexbox

Flexbox wird für das Layout von HTML-Seiten verwendet. Das Anordnen von Elementen wird durch die native Umgebung einfacher und eine Formanpassung erfolgt anhand der Ansichtsumgebung, bei der Darstellungsarten, wie beispielsweise ein Mosaik, direkt dabei sind. Durch Flexbox vergrößern oder verkleinern sich die Elemente; sie fangen sozusagen an zu “fließen”, wobei die Fließrichtung nicht festgelegt ist, sondern ausgewählt werden kann.

Floats

CSS Floats werden für die Positionierung und die Formatierung von Elementen verwendet. Dabei werden Elemente aneinandergereiht, für die unterschiedliche Prozentsätze festgelegt werden können. So kann bewirkt werden, dass zum Beispiel ein Text ein Bild “umfließt”.

Anzeigetools

Mit unterschiedlichen Anzeigetools erhält man als Entwickler eine Vorschau, wie die responsive Website auf den unterschiedlichen Geräten aussieht und wie sie sich verhält. Dafür muss nicht mal etwas heruntergeladen oder installiert werden; sogenannte Developer Tools sind in vielen Browsern bereits integriert. Zusätzliche Funktionen bietet beispielsweise Software wie Adobe Edge Inspect.

Vorab-Überlegungen zum Responsive Webdesign

Bei der Erstellung von responsiven Websites müssen verschiedene Aspekte bedacht werden. Ein wichtiger Punkt ist, dass RWD-Websites meistens eine Mobile-First-Herangehensweise haben, also der Aufruf über Mobilgeräte priorisiert wird. Diese verlangt aufgrund des geringen Platzes auf einem kleineren Bildschirm eine inhaltliche Fokussierung auf die wichtigsten Inhalte sowie ein schlankes, meist schlichtes Design.

Dabei werden große Elemente wie Menüleisten in kleineren, minimalistischen Icons zusammengefasst und sind per Drop-Down-Menü oder Off-Canvas-Menüs aufrufbar, sodass sie nicht bei der sonstigen Nutzung stören. Ein Beispiel dafür ist das Hamburger-Menü-Icon mit den drei waagerechten Strichen übereinander: ≡.

Ein weiterer Punkt sind Dateigrößen. Von unterwegs ruft man andere Inhalte ab als im heimischen WLAN. Wer mobil surft, hat meistens ein begrenztes Datenvolumen zur Verfügung, deshalb müssen multimediale Inhalte möglichst geringgehalten werden oder komprimiert sein. Doch auch dies kann beim RWD vorab festgelegt werden: wenn man mobil surft, werden die Bilder in der kleineren Auflösung geladen, sodass sich die Ladezeit beschleunigt und sie keine Belastung für das Durchschnittsdatenvolumen darstellt.

Wichtig beim Responsive Webdesign ist allerdings nicht nur die responsive Darstellung, die technisch einigermaßen leicht umzusetzen ist, sondern auch eine geeignete Anordnung der einzelnen Elemente der Bedienoberfläche, die der Intuition der Nutzer folgt, was meist die größere Herausforderung darstellt. Nicht umsonst gibt es das Berufsbild des UX-Designers, der sich ausschließlich um die intuitive Gestaltung von digitalen und technischen Oberflächen kümmert.

Zielgruppe – Für wen ist Responsive Webdesign interessant?

Responsive Webdesign ist bei weitem keine neue Entwicklung mehr, sondern gehört schon seit Jahren zum heutigen Standard. Eine Seite, die nicht mobilfähig oder für die mobile Nutzung optimiert ist, wirkt veraltet, was einen direkten Einfluss auf die Außenwirkung des Websitebetreibers, also der Einzelperson, des Vereins, des Unternehmens oder Konzerns hat. RWD betrifft also alle, die eine Internetpräsenz haben oder in Zukunft haben möchten.

Die Zukunft des Responsive Webdesigns

Seit einigen Jahren geht der Trend zu Mobile First. Dies ist eine Prioritätsverschiebung: Während zuvor die Desktop-Version als erstes entwickelt wurde und die Mobilversion mehr eine Zugabe war, steht die Entwicklung einer mobilfähigen Website heute an erster Stelle, im Anschluss derer dann sukzessive Erweiterungen hinzukommen.

Der Nachteil daran ist, dass die Desktop-Version manchmal darunter leidet und sie aufgrund des minimalistischen Designs verloren und leer wirkt oder Elemente versteckt werden. Die Mobile-First-Bewegung führt ohnehin zu einer Reduktion der Inhalte, eine Weiterentwicklung davon nennt sich Content First, wobei die Inhalte im Vordergrund stehen und Grafiken diesen nur funktional unterstützen. Die Ausmaße dieses Trends werden vor allem ersichtlich, wenn man sich vor Augen führt, wie bunt und unruhig die ersten Websites in den 1990er Jahren waren.

Aktuelle Trends setzen einen starken Fokus auf den Benutzer: Mit Schlagworten wie User First bzw. Journey Driven wird das Nutzungsverhalten und der Kontext in den Vordergrund gerückt, was das User Experience Design immer wichtiger macht. Auf Grundlage von Analysen und Tests werden dabei möglichst intuitive Oberflächen gestaltet.

Im Rahmen des Internets der Dinge wird es in den nächsten Jahren zudem immer wichtiger, dass Geräte nicht nur mit dem Internet und dem Nutzer, sondern auch untereinander kommunizieren. Nutzer schließen ein und dieselbe Handlung über eine Vielzahl an Bildschirmgrößen ab und treten über sogenannte Touchpoints mit Unternehmen oder Anbietern in Kontakt. So ist ein mögliches Fallbeispiel, dass ein Nutzer eine E-Mail-Vorschau auf der Smartwatch bekommt, sie auf dem Smartphone liest, sich von unterwegs auf der Unternehmenswebsite einloggt und von zu Hause auf dem Desktop-PC auf die E-Mail antwortet. Ein wichtiger Aspekt des Responsive Webdesigns ist also eine plattformübergreifende Kompatibilität.

Responsive Webdesign bei TenMedia

TenMedia ist eine junge Webagentur im Herzen Berlins. Wir haben uns seit 2011 auf die Entwicklung von Apps und state-of-the-art Websites spezialisiert. Responsive Webdesign gehört zu unseren Spezialgebieten, wenn es um die Erstellung einer Homepage geht. Wir orientieren uns dabei an Best Practices und realisieren mithilfe von modernsten Technologien umfangreiche und individuelle Projekte, welche nicht nur auf alle Plattformen und Geräte, sondern auch genau auf die Wünsche und Vorstellungen unserer Kunden abgestimmt sind.