Responsive Webdesign – Der Webauftritt der Zukunft

rw-prime4you

Die rasante Entwicklung des Internets bringt nicht nur für Nutzer jährlich zahlreiche Neuerungen, sondern stellt besonders Programmierer und Anbieter webbasierter Inhalte vor immer komplexere Herausforderungen.

Innerhalb der letzten 25 Jahre hat sich der Onlinemarkt in kürzester Zeit verändert, was nicht nur auf eine höhere Leistungsfähigkeit des globalen Netzwerkes zurückzuführen ist.

So müssen sowohl Software als auch die Hardware immer gleichwohl angepasst werden, um auch in Zukunft bestehen zu können. Zu den noch relativ jungen Innovationen des Internets zählt das sogenannte Responsive Webdesign, dem eine extrem wichtige Bedeutung beigemessen wird.

Konkret geht es beim Responsive Webdesign darum, Webpages den unterschiedlichen Anforderungen von diversen Endgeräten anzupassen.

Die eigentliche Kunst besteht darin, das jeweilige Webdesign in beispielhafter Anlehnung sowohl für das 7 Zoll Smartphone, das 10 Zoll Tablet, den 17 Zoll Laptop, dem 22 Zoll PC-Bildschirm und auch für das 50 Zoll Smart-TV in optimierter Form zugänglich zu machen.

Responsive Webdesign stellt einen weiteren Fachbegriff im World Wide Web dar, dessen Zusammensetzung aus Responsive und Webdesign einmal genauer betrachtet werden soll.

Responsive und Webdesign – was hinter den Begriffen steckt


Der Begriff Responsive leitet sich vom lateinischen Wort „responsivus“ ab und ist mit dem im Deutschen gebräuchlichen Adjektiv „responsiv“ verwandt. Im engeren Verständnis bezieht sich der Begriff auf eine Reaktion, die in darstellender Art und Weise eine Antwort erbringt.

Um allerdings die im Kontext von Responsive gemeinte Bedeutung genauer zu beschreiben, bedarf es der Begriffsentnahme aus dem US-amerikanischen Raum. Aus dem Englischen übersetzt bedeutet Responsive etwa so viel wie „empfänglich“, „ansprechbar“, oder auch „zugänglich“. Für die Umsetzung von ansprechenden Designs im Internet sind Webdesigner zuständig. Als eigene Disziplin blickt das Webdesign auf eine noch junge Historie zurück.

Waren die ersten Webpages im Internet noch rein textbasiert, kam es für die Erstellung einer entsprechenden Seite vor allem auf die technische Umsetzung der Webentwicklung an. Von der zweiten Hälfte bis hin zum Ende der 1990er Jahre etablierten sich zunehmend verschiedene Webbrowser auf dem Markt. Diese Entwicklung wurde insbesondere durch die neuen Technologien von JavaScript und HTML ermöglicht, die auf bestimmte Formatvorlagen zurückgreifen konnten.

Flash, HTML, CSS und JavaScript stehen bis heute sinnbildlich für den Werdegang und die nach wie vor wachsende Bedeutung der Sparte Webdesign. In der Begriffskombination bezieht sich Responsive Webdesign grob genommen auf die technische Realisierung, um Webpages für die verschiedenen Empfangsgeräte zugänglich zu machen.

Responsive im Sinne einer Reaktion bedeutet hinsichtlich des Anwendungsbereiches aber auch, dass Webseiten entsprechend den Anforderungen selbstständig reagieren. Eine vielschichtige Interpretation zur Namensdeutung liefert also wichtige Details zum Verständnis von Responsive Webdesign.

Der Begriff selbst wurde durch den Autor Ethan Marcotte nachhaltig geprägt, der zuerst im Jahr 2010 in einem Artikel über das Thema schrieb. Durch sein Buch „Responsive Webdesign“ gelang es Marcotte, den Terminus noch bekannter zu machen, so dass die Entwicklung des Responsive Webdesign mittlerweile zu den wichtigsten Errungenschaften der jüngeren Internetgeschichte.

Webdesign im Wandel der Zeit

Noch vor wenigen Jahren wäre es nahezu undenkbar gewesen, dass sich Responsive Webdesign auf dem Markt etabliert. Webseiten wurden über die Bildschirme der heimischen PCs dargestellt und diese wiederum unterschieden sich kaum voneinander.

Die einzelnen Displaygrößen waren überschaubar und auch die neuere LCD-Technik änderte nichts an den Herausforderungen für das Webdesign. Die in Pixeln gemessene Darstellung variierte oftmals nur zwischen dem 4:3 und dem 16:9 Format, was ebenso für die tragbaren Laptops galt.

Für die ersten internetfähigen Handys gab es mobile Webversionen, die auch noch bis heute präsent sind. Der Tatsache geschuldet, dass immer mehr elektronische Geräte mit dem Internet verbunden sind und es eine steigende Tendenz in punkto Webpages gibt, steht nun auch das Webdesign vor einer neuen und bislang wenig beachteten Herausforderung.

Der Markt für mobile Endgeräte wächst seit Jahren und zum klassischen Laptop gesellen sich mittlerweile Produkte wie Tablets, E-Book Reader und Smartphones dazu, deren Displaygrößen durchaus immens variieren. Auch die deutlich größeren TV Geräte sind mittlerweile an das Internet angeschlossen, was die Anpassung dargestellter Inhalte zwingend nötig macht.

Kleine Smartphones sind bereits mit einer Displaygröße von 4 Zoll zu haben und bei einem neuen Fernseher sind Größen von über 50 Zoll keine Seltenheit mehr. So sehr sich die Geräte auch voneinander unterscheiden – eines bleibt gleich: Der Zugriff auf das Internet und der Anspruch, dass die darin enthaltenen Informationen und Darstellungsweisen für das jeweilige Endgerät aufrufbar, sprich zugänglich (engl. responsive ) sind.

Bei mobilen Geräten besteht zudem die Anforderung, dass diese Inhalte sowohl im Hoch- als auch im Querformat abgerufen und angezeigt werden können. Webseiten müssen also variabel sein und ebenso in verschiedenen Auflösungen agieren können, damit sie sich vonseiten des Webdesign tatsächlich als responsive erweisen.

Anders als bei einfachen mobilen Versionen gilt es, ein und dasselbe Ausgabeformat den Empfangsgeräten automatisch anzupassen.

Responsive Webdesign als technische Innovation

Mit dem Responsive Webdesign sind die Zeiten von statischen Webseiten wohl endgültig gezählt, deren Zahlen stark rückläufig sind. Zwar haben responsive Webseiten noch einen verhältnismäßig geringen Anteil auf dem globalen Markt, jedoch muss hierbei auch die noch sehr junge Geschichte in Anbetracht gezogen werden, mit der sich die Webdesign Technik immer stärker etabliert.

Im E-Commerce setzen Anbieter zunehmend auf Responsive Webdesign und liegen damit absolut im Trend. Noch etwas zögerlich verhalten sich gegenwärtig namhafte Vergleichs- und Medienportale, die häufig auf mobile Versionen wie etwa „m.beispiel.de“ verweisen und User automatisch dorthin weiterleiten. Responsive Relaunch ist hier ein weiterer Schlüsselbegriff, durch den Anbieter ihre klassischen Webauftritte an die gegenwärtigen Anforderungen anpassen, ohne dabei das Rad neu erfinden zu müssen.

Zu diesen Anforderungen zählen insbesondere die Variabilität der auf dem Webauftritt befindlichen Elemente. Dies können einzelne Navigationspunkte, Menüs und auch Blöcke sein, die nach einer bestimmten Anordnung platziert werden. Hinzu kommt auch noch, ob das Endgerät das Kippen des Displays zulässt. Ebenso von hoher Bedeutung sind die unterschiedlichen Eingabemöglichkeiten. Wird der heimische PC noch über Tastatur und Maus gesteuert, lassen sich mobile Endgeräte via Touchscreen vollkommen unabhängig von zusätzlichen Komponenten bedienen.

Ein weiteres Kriterium sind die Übertragungsraten, die bei einem festen Internetanschluss deutlich höher sind. Mobilgeräte hingegen sind, abgesehen von der W-Lan Fähigkeit, meist abhängig von netzgebundenen Bandbreiten, also dem Mobilfunknetz. Beim Responsive Webdesign müssen also auch die verschiedenen Übertragungsraten- und Geschwindigkeiten berücksichtigt werden, die bei den meisten Netzanbietern vertraglich begrenzt sind.

Als eines der Hauptziele des Responsive Webdesign ist ganz besonders die Benutzerfreundlichkeit zu nennen, die es jedem User unabhängig der technischen Merkmale des jeweiligen Empfangsgerätes ermöglichen soll, alle Informationen in einer vergleichsweise ähnlichen Qualität abzurufen. Responsive Internetseiten werden hierdurch also reaktionsfähig und die Größe und Darstellungsweise passt sich dem Display des Endgerätes an. Relativ einfach verhält sich dabei die Anpassung von Texten.

Diese werden automatisch zugunsten der Lesbarkeit dargestellt und variieren bei Textumbrüchen äußerst flexibel, um eine entsprechend für den Leser angemessene Textgröße zu ermöglichen. Etwas komplexer gestaltet sich der Umgang mit Blockelementen, wobei das Webdesign aber gute Lösungsmöglichkeiten bietet.

Blöcke und Spalten passen sich automatisch dem sogenannten Viewport, also dem Display des Empfängers an und positionieren sich je nach Ausrichtung unter- oder nebeneinander. Hinter dem Hamburger-Menü-Icon können geschickt Menüs und Unterpunkte versteckt werden, die sich erst beim Klick darauf dem Rezipienten offerieren und nicht als fester Bestandteil den Sichtbereich blockieren. Automatisch werden auch Bilder und Logos dem Empfangsgerät angepasst und dem Textbild entsprechend angeglichen. Das schont zugleich das Datenvolumen und erhöht die Übertragungsgeschwindigkeit, da auch große Bilddateien vorab verkleinert werden.

Eine Internetseite gilt bereits als responsive, wenn reduzierende Elemente wie etwa das Hamburger-Menü-Icon eingebaut sind, um auf diesem Wege Navigationsmenüs kompakter zu gestalten. Mit in der Fachsprache bezeichneten Media Queries werden für das responsive Design einer Webseite wichtige Voraussetzungen erfüllt, mit denen sich das Webdesign an den Möglichkeiten des Ausgangsmediums orientiert und speziell hierfür anpasst.

Als gängige Kriterien der optimalen Darstellung zählt so zum Beispiel die Höhe und Breite des Browserfensters. Dieses wiederum ist natürlich abhängig von der jeweiligen Displaygröße des betroffenen Gerätes. Hierbei kommt ebenso der Bildschirmauflösung eine übergeordnete Rolle zu, die in einer Symbiose zur Orientierung im Quer- oder Hochformatmodus steht. Als weiteres Kriterium werden die Eingabemöglichkeiten des Endgerätes hinzugezogen, ob es via Touchscreen oder Tastatur und Maus bedient wird.

Responsive Seiten können HTML basiert oder mithilfe von CSS realisiert werden. Bei einem solchen Webdesign bietet es sich in den meisten Fällen aber an, aus CSS frameworks zurückzugreifen, da diese eine hohe Funktionsdichte für die unterschiedlichen Auflösungen und Bildschirmgrößen beinhalten.

Responsive Webdesign: Willkommen in der Zukunft

In Anbetracht der Tatsache, dass der Markt für mobile und damit immer kompakter werdenden Empfangsgeräte stetig wächst, steigt auch die Zahl unterschiedlicher Bildschirmgrößen und Anwendungsbereiche und der Wunsch nach einem Responsive Webdesign rückt zunehmend in den Fokus, um Internetseiten zukunftsfähig zu gestalten.

Mobile Seiten haben sich als Subdomains zwar im World Wide Web durchgesetzt, doch sind sie eher als eine Art Übergangslösung zu betrachten. Responsive Webgestaltungen bieten auch in Zukunft eine praktische Lösung, mit der klassische Internetseiten den gegenwärtigen Standards angepasst werden. Der florierende Absatzmarkt wird immer wieder neue technische Innovationen hervorrufen und insbesondere die Sparte Webdesign herausfordern. Dank Responsive Webdesign ist es aber schon heute möglich, der Zukunft Nachhaltigkeit zu verleihen.

Die responsive Ausrichtung ermöglicht den Betreibern von Webauftritten, ihre Inhalte unabhängig von den technischen Entwicklungen für alle Empfangsgeräte zugänglich zu machen und dem gewählten Webdesign einen langen Bestand zu ermöglichen.

Matthias Böhm

Gründer und Inhaber von prime4you. Herausgeber mehrerer Online-Marketing Blogs. Marketing-Berater, Seminar-Leiter und Redner mit Schwerpunkt Online-Marketing, Online-Strategie, Lead-Generierung, SEO/SEA, Website-Optimierung und E-Mail-Marketing.

Was können wir für Sie tun?

Haben Sie Fragen oder können wir Ihnen bei der Entscheidung helfen?
Zögern Sie nicht und rufen Sie uns an:

Montag - Freitag 9:00 Uhr - 18:00 Uhr

0176 - 34048903

Rückruf-Service

030 - 20005707

24h Anrufbeantworter hinterlassen Sie eine Nachricht wir werden Sie zurückrufen

Kontaktformular

Gerne können Sie uns eine E-Mail schreiben. Wir werden uns schnellstmöglich mit Ihnen in Verbindung setzen.

Felder mit einem * müssen ausgefüllt werden

Archive

Mehr aus unserem Blog