Responsive Webdesign - das steckt dahinter

Responsive Webdesign wird im Bereich der Onlinedarstellung als eine der wichtigsten Neuerungen des letzten Jahrzehnts bezeichnet. Doch woher kommt diese hohe Wichtigkeit? Worin liegen die Vorteile von RWD? Wie funktioniert es – und wie viel kostet eine Webseite mit Responsive Design? Wir klären diese Fragen im folgenden Beitrag.

Responsive Webdesign und seine Wichtigkeit

Mit Responsive Webdesign wird eine Webseite “reaktiv”. Sie reagiert auf die Größe und Bildschirmauflösung des Endgerätes, indem die Elemente der Seite passend angeordnet werden. Dank RWD spart man sich eine mobile Version der Webseite und umgeht viele Probleme, die bei anderen Designs existieren. Gerade wegen der Eignung für mobile Endgeräte ist RWD so wichtig: Immer mehr Menschen in Deutschland und weltweit nutzen mobile Endgeräte, allem voran das Smartphone. 2015 waren bereits knapp 30 % aller Endgeräte in Europa mobil (Smartphone und Tablet).

Eine steigende Entwicklung ist ohne Zweifel absehbar: In Deutschland beispielsweise lag der Anteil im selben Jahr bei 56 %, im Folgejahr 2016 waren es bereits 63 %.

Anteil mobiler Endgeräte an allen Seitenaufrufen Weltweit 2015

Wie funktioniert Responsive Webdesign?

Dank Responsive Webdesign passt sich das Design der Webseite flexibel der entsprechenden Bildschirmgröße an, dem sogenannte Viewport. Am einfachsten kann man sich die Funktion vorstellen, indem man sich den Bildschirm imaginär in ein mehrere Quadrate teilt, die mit Inhalten befüllt werden. Bei einem großen Bildschirm (Desktop, Fernseher, …) können beispielsweise 8 Quadrate nebeneinander angezeigt werden. Wohingegen es beim Smartphone vielleicht nur 2 sind, im Querformat vielleicht auch 4. Das RWD arbeitet mit diesen Quadraten in der Art, als dass es sie einfach nach vorgegebener Weise verschiebt, wenn sie nicht mehr nebeneinander passen. So stehen bei einem kleinen Display mehr Quadrate untereinander, als bei einem großen.

Einfaches Beispiel:

Wird eine Webseite auf dem Desktop-Rechnern 3-spaltig dargestellt, ändert sich die Darstellung auf dem Smartphone dann in zwei Spalten (Querformat). Im Hochformat wird die Webseite einspaltig angezeigt. Die entsprechenden Regeln sind im Responsive Design festgelegt. Auch die Bedienelemente passen sich der neuen Umgebung an. Buttons werden größer und Listen werden zu Menüs, damit man auf dem Smartphone ohne Zoom und Wischen intuitiv navigieren kann.

Übrigens beschränkt sich das Responsive Webdesign nicht alleine auf eine flexible Anpassung an die Bildschirmgröße: Auch die Eingabemethode (Maus, Touchscreen, Stift, …) wird bei der Anpassung berücksichtigt.

RWD: Abgrenzung zum mobilen, liquiden und adaptiven Webdesign

Ein Responsive Webdesign ist nicht das gleiche wie ein mobiles, liquides oder auch adaptives Webdesign. Zwar haben alle Designs dasselbe Primärziel, nämlich eine Webseite auf mobile Geräte hin zu optimieren, jedoch ist die Umsetzung eine andere:

Das mobile Design beschreibt eine zur Desktop Webseite koexistente Webseite inkl. eigener URL extra für mobile Geräte. Aus SEO Sicht ist das nicht optimal: Duplicate Content und Linkaufbau machen Probleme.

In der liquiden Webseite bzw. dem liquiden Webdesign besteht die größte Ähnlichkeit zum RWD: Auch hier werden die Elemente entsprechend dem Viewport verschoben, jedoch gibt es keine Breakpoints. Bilder oder andere Elemente werden mit kleinerem Bildschirm einfach immer proportional kleiner. Beim RWD werden sie bei einer bestimmten Minimalgröße einfach an eine andere Stelle verschoben.

Beim adaptiven Webdesign werden die Viewports vordefiniert. Entsprechend gibt es keine flüssige Anpassung an die Bildschirmgröße.

Neue responsive Webseite oder vorhandene mit RWD nachrüsten

Ja, auch die Umstellung auf Responsive Design bei einer vorhandenen Seite ist möglich. In der Regel muss die Website dabei keinen Relaunch durchlaufen. Mit SEO Tools von Google (Mobile-Friendly Test) kann man die eigene Seite auf RWD hin prüfen. Wir stehen dir in beiden Fällen zur Seite: Ganz gleich ob die bestehende Webpräsenz auf RWD umgestellt oder eine komplett neue Website gebaut werden soll. Als kreative und innovative Werbeagentur ist Webdesign bzw. digitale Kommunikation nur eine unserer Fähigkeiten. Falls gewünscht sind wir auch bei der strategischen Beratung oder dem Corporate Design Ihr Kooperationspartner!

Sie fragen sich, wann man noch ohne Responsive Webdesign auskommt?

Es gibt spezielle Fälle, in denen auf RWD verzichtet werden kann. Beispielsweise bei Webseiten, die nur von Desktop-Rechnern aus ausgerufen werden. Oftmals ist das im Intranet bei Unternehmen der Fall. Webseiten, die praktisch nie aktualisiert werden, benötigen ebenfalls kein RWD – man kommt hier mit separaten Webseiten für mobile Endgeräte günstiger weg.

Responsive Webdesign wäre unter den bis hierhin betrachteten Umständen zwar nicht nötig, aber dennoch sinnvoll: Seiten im Intranet eines Unternehmens werden ebenfalls zunehmend von mobilen Endgeräten aus aufgerufen und Webseiten im Internet werden mit einem besseren Ranking belohnt.

Doch gibt es tatsächlich Seiten bzw. Inhalte, bei denen RWD wenig Sinn macht: Beispielsweise Webseiten, die einfach mit der Maus bedient werden sollten, weil es ansonsten keinen Spaß macht wie z.B. animierte Webseiten. Auch Newsseiten oder andere Webseiten mit vielen Inhalten können von einer mobilen Version oder einer AMP Version mit bestimmten Meldungen durch kürzere Ladezeiten profitieren – das ist schließlich auch SEO-relevant.

Warum die Mehrkosten von Responsive Webdesign keine sind

RWD-Websites haben beim Erstellen des Designs initial einen höheren Entwicklungsaufwand. Daher sind die Investitionskosten etwa 40% höher, als bei konventionellen Webseiten.

Jedoch benötigt die Pflege viel weniger Zeit: Anstatt mehrere Seiten für mobile und stationäre Endgeräte zu pflegen (konventionell), muss bei einer Aktualisierung dank responsivem Webdesign nur eine Seite bearbeitet werden. Es ist jedoch nicht nur diese Zeitersparnis, die im gewerblichen Bereich dafür sorgt, dass eine Website mit RWD letztendlich weniger kostet, als eine konventionelle Webseite. Auch die geringere Absprungrate und die höhere Conversion Rate tragen zur Amortisation der Investitionskosten bei.

Wir kennen uns mit Responsive Webdesign aus - und können noch viel mehr!

Als Teil der digitalen Kommunikation ist responsive Webdesign ein Kernfaktor für zeitgemäße und moderne Internetauftritte. Für uns ist RWD ein Werkzeug, um unser Know-How im Webdesign umzusetzen: Wir stellen Ihre Inhalte auf sämtlichen Endgeräten optimal dar und sorgen dabei für maximale Benutzerfreundlichkeit!

Das alleine ist jedoch nur eine Zutat für den Betrieb einer Webseite. Weitere Aspekte wie Webhosting und alle damit zusammenhängenden Kernfragen wie Bandbreite, Architektur, Serverstandort(e) und vieles mehr sind zu klären. Diese Belange gehören als Teil der digitalen Kommunikation zu unseren Kernkompetenzen!

Jetzt kontaktieren!
Weiterführende Informationen:

Offizieller Google-Artikel zum Thema „mobile friendly“: http://googlewebmastercentral.blogspot.de/2015/02/finding-more-mobile-friendly-search.html

Infografik zu den Marktanteilen der Suchmaschinen weltweit (nach Kontinenten): http://de.statista.com/infografik/230/weltweite-marktanteile-der-suchmaschinen

Statistik: Wieviele Menschen nutzen mobile Geräte zum Einkauf im Internet? http://de.statista.com/statistik/daten/studie/311650/umfrage/nutzung-von-smartphone-und-tablet-zum-mobilen-einkauf/

Desktop, Smartphone oder Tablet? Statistik zur Gerätenutzung der Deutschen: http://de.statista.com/statistik/daten/studie/237753/umfrage/online-nutzung-in-deutschland-nach-geraetetyp/

Referenzen aus dem Bereich Responsive Webdesign