Responsive Webdesign: Vorteile, Funktion und Kosten
Kategorie

Kategorie

UX- & UI-Design

Autor

Autor

Patrick Peeters

Veröffentlicht

Responsive Webdesign: Vorteile, Funktion und Kosten

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 Webdesign? 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 part 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).

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 Webdesign 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.

Neue responsive Webseite oder vorhandene mit RWD nachrüsten

Ja, auch die Umstellung auf Responsive Webdesign 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 Digitalagentur 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!

Weiterführende Informationen:

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

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

Statistik: Wieviele Menschen nutzen mobile Geräte zum Einkauf im Internet?
https://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:
https://de.statista.com/statistik/daten/studie/237753/umfrage/online-nutzung-in-deutschland-nach-geraetetyp/

Das könnte dich auch interessieren

Kundenbewertungen bei Google, Trusted Shops und Co.
Kundenbewertungen bei Google, Trusted Shops und Co.

Du hast vor kurzem ein neues Restaurant ausprobiert oder eines gegründet? Du suchst wegen Umzug eine neue vertrauenswürdige KFZ- Werkstatt? Oder möchtest du vor dem Kauf/Verkauf online wissen, wie der Artikel ankommt?

Corporate Design – von Notwendigkeit und Nutzen
Corporate Design – von Notwendigkeit und Nutzen

Für den Marktauftritt eines Unternehmens, sei es Mittelstand oder Großkonzern, ist ein konsistentes Corporate Design sehr wichtig. Worin aber liegt der Nutzen und was macht ein gutes Corporate Design aus?

Social Media Marketing: Vernetzung beherrschen 23. November 2016 Online-Marketing
Social Media Marketing: Vernetzung beherrschen 23. November 2016 Online-Marketing

Social Media Marketing eignet sich bestens dazu, um direkt auf Ihr Unternehmen aufmerksam zu machen. Ein großer Vorteil von Social Media Marketing sind die geringen Kosten, denn die Plattform für das Marketing sind soziale Netzwerke. So sprechen Sie Ihre Zielgruppe persönlicher an und binden Interessenten dadurch besser an Ihr Unternehmen. Außerdem bekommen Sie ein direktes Feedback und sehen, was der Community gefällt – und was nicht.