Responsive Webdesign passt Webseiten auf das mobile Zeitalter an

Responsive Webdesign beschreibt den aktuellen technischen Standard bei der Erstellung von Webseiten in einer Webagentur. Anders als herkömmliche Webseiten die statisch erstellt wurden, können responsive Webseiten sich auf das Endgerät des Nutzers anpassen. Die stetige Zunahme von mobilen Endgeräten brachte Webentwickler dazu, diese neuartige Form des Webdesign verstärkt anzuwenden.

Die Ursprünge des Webdesign gehen zurück auf die Entwicklung der Hypertext Markup Language (HTML) Anfang der 1990er Jahre durch den Physiker Tim Berners-Lee. HTML ermöglichte die Erstellung von Webseiten und war ein entscheidendes Element für den Erfolg des Internets, das zum gleichen Zeitpunkt den Weg von den Universitäten in die allgemeine Öffentlichkeit fand. Die ersten Webseiten waren einfach strukturiert und bestanden zumeist aus Textabschnitten und Bildern. Der Anspruch der Nutzer an eine Webseite war pragmatisch. Die Inhalte mussten auf dem Bildschirm erkennbar sein. Erst im Laufe der Jahre entwickelten sich höhere Ansprüche bei Entwicklern und Nutzern nach einem individuell gestalteten Design.

Zusätzliche Elemente und Programmiersprachen fanden Einzug in den Bereich des Webdesign, darunter CSS (Cascading Style Sheets), verschiedene Medienformate für Bild und Audio wurden populärer und erste Animation wurden genutzt. Auf Seiten der Internetnutzer blieb die Darstellung der Webseiten immer relativ gleich. Computer oder Notebooks besaßen einen Monitor, der jede Webseite in etwa gleicher Größe darstellen konnte. Dies änderte sich mit dem Aufkommen mobiler Endgeräte und den sogenannten Smartphones. In den Jahren 2007 und 2008 brachten die Firmen Apple und Google neue Versionen der bereits existieren Mobiltelefone auf den Markt, mit denen Webseiten direkt auf dem Mobiltelefon angezeigt werden konnten.

Smartphones als Auslöser des responsive Webdesign

Dem Erfolg der Smartphones ist es zu verdanken, dass Webdesigner die Konzeption ihrer Arbeit überdenken mussten. Während zuvor alle Webseiten auf etwa gleich großen Bildschirmen angezeigt wurden, benötigten Smartphones und andere mobile Endgeräte eine neuartige Version von Webseiten, um perfekt auf den neuen Geräten betrachtet und genutzt zu werden. Der wachsende Marktanteil der Smartphones führte dazu, dass Nutzer und Webdesigner ab sofort gesteigerten Wert auf die sogenannte “responsiveness” legten, was auf Deutsch mit “Ansprechbarkeit” übersetzt werden kann. In der Praxis wird jedoch auch im deutschen Sprachraum der englische Begriff “responsive Webdesign” genutzt oder durch den Anglizismus “responsives Webdesign” ersetzt.

Unter responsive Webdesign versteht man die Anpassung der Webdesignprozesse in einer Webagentur an die Ansprüche unterschiedlicher Bildschirmformate mit Schwerpunkt auf mobilen Endgeräten. Das Ziel dabei ist, sich vom herkömmlichen statischen Design zu entfernen und sich einem flexiblen Design zuzuwenden, das sich automatisch an die entsprechenden Endgeräte anpasst. Ein wichtiger Schritt ist die Reduzierung der genutzten Codes und Programmiersprachen auf HTML und CSS. Andere Elemente wie Javascript wurden dabei aus dem Designprozess der Webseiten entfernt, um fehlerhafte Darstellungen in mobilen Browsern zu umgehen. Webseiten die responsiv erstellten werden, passen sich den Browsern der Endgeräte exakt an. Damit sind sie ursprünglichen Webseiten gegenüber im Vorteil, die zum Teil in mehrfacher Ausführung erstellt wurden, um auf verschiedenen Bildschirmen richtig angezeigt zu werden.

Zentrale Elemente des responsive Webdesign

Die Bezeichnung des responsive Webdesign wurde 2010 zum ersten Mal von einem Entwickler genutzt und fand anschließend seinen Weg in die Diskussionen um neue Darstellungsformen von Webinhalten. Flexibilität wurde zu einem entscheidenden Moment in jeder innovativ ausgerichteten Webagentur, was sich fortan auch in den Begrifflichkeiten der Entwicklerbranche widerspiegelte. Die drei im englischsprachigen Raum immer wieder zitierten Elemente sind seitdem “flexible grid layout”, “flexible media” und “flexible media queries”.

Flexible grid layout lässt sich mit flexiblem Gitter-Layout übersetzen. Gemeint ist damit eine bestimmte auf CSS basierende Struktur einer Webseite, die sich je nach Ansprüchen und Darstellung durch das Endgerät flexibel verschiebt. Die Idee dahinter ist vergleichbar mit Wasser, das sich je nachdem wie es abgefüllt wird seinem neuen Behältnis anpasst. Ein Glas Wasser, das in eine Flasche gegossen wird nimmt die Form der Flasche an. Ein flexibles CSS Layout nimmt die Form des Browsers im Endgerätes an. Nach einem ähnlichen Schema verhält sich auch die Gestaltung von Medieninhalten und Medienanfragen. Durch die Flexibilisierung dieser Elemente im responsive Webdesign wurde eine neue Form der Darstellung von Webseiten erschaffen, die vor allem Nutzern mobiler Endgeräte eine perfeke Anwendung von Webinhalten ermöglicht.