Suche
Suche Menü

Warum „responsives Webdesign“ kein kurzweiliger Trend ist

Trends im Webdesign

Es gibt Trends, die kommen und gehen. Schlaghosen sind zum Beispiel immer wieder mal „angesagt“, Bubble-Tea war hingegen nur ein kurzer Trend, der (hoffentlich) nicht so schnell wiederkommt. Responsives Webdesign hingegen ist Ausdruck von geänderten Surfgewohnheiten.

Nicht nur in Mode und Alltag, auch bei Webseiten gibt es regelmäßig neue Trends. War es viele Jahre lang Usus bei der Webgestaltung Untergründe und Buttons mit Holz-, Metall- oder Papieroptik wie Gegenstände aus der realen Welt wirken zu lassen (genannt Skeuomorphismus), kam spätestens 2013 – als Apple „Flat-Design“ prominent einsetze – ein neuer Design-Trend auf: Hier wurde nun alles dreidimensionale, organisch aussehende weggelassen und auf klare Konturen und Farben gesetzt. Die Reduktion der Gestaltung auf das Wesentliche und die neue, sehr reduzierte Bildsprache trafen einen Nerv und veränderten in kurzer Zeit den typischen Look von Webseiten.

Warum eine Webseite nicht jeden Trend mitmachen sollte

Es entstehen im Bereich Webdesign ständig neue Trends – z.T. als Folge der technischen Weiterentwicklung der Programmiersprachen. Als mit einem Male abgerundete Ecken ein Trend wurden, war dies eine direkte Folge, dass dazu plötzlich ein neuer Eigenschaftsbefehl für die Programmierung existierte. Auch Parallax-Scrolling (ein Hintergrundbild scrollt leicht versetzt zu anderen Elementen mit) wurde eine Zeit lang auf vielen Seiten eingesetzt, ist mittlerweile aber ein überbeanspruchter Effekt.

Wer viel auf solche Designtrends setzt, muss daher auch häufig seine Webpräsenz anpassen, um stets „aktuell“ auszusehen.  Denn vergangene Trends, die man auf Webseiten findet, fallen sehr schnell unangenehm ins Auge und lassen den gesamten Auftritt „alt“ wirken.

Warum „responsiv“ KEIN Trend ist

Während Designtrends also kommen und (immer schneller) wieder gehen, ist eine Entwicklung nicht aufzuhalten: die immer stärkere Verbreitung von Smartphone und Tablets. War es vor ein paar Jahren ein nettes Gimmick Webseiten auch auf den Handy durch Ein- und Auszoomen betrachten zu können, so ist das Nutzerverhalten heute komplett anders. Laut einer Studie des Webanalysten Webtrekk surften Ende 2016 bereits rund die Hälfte der deutschen Internetuser per Tablet oder Smartphone. Und dieser Anteil wächst weiter. Kein Wunder: auf der Couch zuhause oder unterwegs in Bus und Bahn lässt es sich viel entspannter surfen, als am Schreibtisch hinter einem großen Monitor. Daher ist die optimale Darstellung einer Webseite auf allen diesen Geräten heute ein Muss.

Eine Zeit lang waren spezielle, für Handy-Displays angepasste Mobil-Varianten von Webseiten eine Lösung, doch das Einpflegen der Inhalte musste zusätzlich zur Desktop-Variante erfolgen, was einen spürbar höheren Arbeitsaufwand bedeutete. Erst durch die Einführung der responsiven Gestaltung in 2010 wurde es plötzlich möglich, eine Webseite auf allen Displaygrößen – vom XXL-Monitor bis zum kleinen Smartphone-Display – gleich gut darzustellen.

Was genau heißt responsiv?

Im Laufe der letzten Jahre hat sich responsives Design als Standard längst durchgesetzt. Der besondere Vorteil gegenüber der bisherigen Art Webseiten zu erstellen: Das Design ist so angelegt, dass es sich automatisch an jede Größe des Smartphones oder Tablets anpasst. Dies bedeutet zum einen, dass z.B. Bilder auf einem Smartphone deutlich verkleinert werden, Texte aber ihre Größe behalten und damit gut lesbar bleiben. Zum anderen findet bei der responsiven Anpassung auch z.T. eine Neuanordnung von Elementen statt (das nennt man dann „adaptiv“), um auf allen Geräten den zur Verfügung stehenden Platz im Display optimal zu nutzen. Vereinfacht ausgedrückt: Eine responsiv erstellte Seite sieht auf jedem Gerät optimal aus und lässt sich vom User ähnlich gut bedienen.

Responsiv: Die Webseite passt sich automatisch an die Endgeräte an

Responsiv: Die Webseite passt sich automatisch an die Endgeräte an

Responsiv ist (arbeits)-intensiv

Die Erstellung einer responsiven Webseite ist mit der einer „klassischen“ Webseite kaum noch zu vergleichen. Hatte man früher schnell ein hübsches Photoshop-Layout mit seinem Kunden abgestimmt und dann programmiert, muss heute von Anfang an sehr strategisch gearbeitet werden. Schon in der Planungsphase muss genau durchdacht werden, wie unterschiedliche Elemente auf verschiedenen Endgeräten dargestellt werden können. Es gibt nicht mehr „das“ (feste) Layout, sondern vielmehr nur noch den generellen Look von Elementen. Die besondere Herausforderung dabei: Die Webseite soll sich nicht nur an verschiedene Displaygrößen flexibel anpassen können, sondern auch bei Optik und Nutzererlebnis keine Kompromisse machen. Hier muss der Designer also genau abwägen, wie groß oder klein, wie breit oder schmal, jedes Element werden darf, und wie die variable Anordnung von Elementen sinnvoll ist.

Bei der Abstimmung mit unseren Kunden kommen in den meisten Fällen zunächst Wireframes (Drahtgitter) zum Einsatz, d.h. in schwarz-weiß erstellte, schematische Ansichten des Webseiten-Aufbaus. Hier ist kein Design zu sehen, sondern nur die Struktur und Anordnung der Elemente einer Webseite und der folgenden Unterseiten. Im nächsten Schritt folgt dann ein interaktiver Prototyp, d.h. eine bereits anklick- und navigierbare Test-Webseite, die jedoch ohne Bilder, Texte und weitere Inhalte auskommt. Das visuelle Konzept der Seite wird dann über sogenannte „Style-Tiles“ abgestimmt, d.h. eine übersichtliche Zusammenstellung von Schriftarten, Farben und das Aussehen von Elementen.

Vom Wireframe zum Prototyp

Vom Wireframe zum Prototyp

Nachdem dann Struktur, responsives Verhalten und das visuelle Konzept abgestimmt sind, wird die Webseite mit konkreten Inhalten erstellt und kann dann gelauncht werden.

Zusammengefasst: Was sind die Vor- und Nachteile?

Zunächst einmal die schlechte Nachricht – durch den erhöhten Arbeitsaufwand sind auch die Kosten für die Erstellung einer responsiven Webseite höher. Je nach Umfang und Art der Webseite kann dies z.B. 30-40% höhere Kosten bedeuten. Dem gegenüber steht der deutlich geringere Pflegeaufwand, als wenn man eine klassische Seite und eine zusätzliche mobile Webseite betreiben würde. Auch für die Suchmaschinenoptimierung SEO ist eine responsive Seite ein erheblicher Vorteil und führt z.B. zu höheren Rankingplatzierungen bei der Google-Suche. Letztlich ist es aber vor allem ein logischer Schritt, die eigene Webseite seinen Kunden in bestmöglicher Art und Weise zu präsentieren, ganz egal ob diese am Schreibtisch, mit Tablet oder Smartphone vorbeisurfen.

Autor:

Gutes Design liegt mir am Herzen. Daher schreibe ich diesen Blog und informiere regelmäßig über Neuigkeiten und Wesentliches rund um das Thema Design. Wunschthema noch nicht dabei? Schreiben Sie mir eine Mail.