Mit Responsive Design (deutsch: reagierende Gestaltung) wird gewährleistet, dass eine Webseite auch auf unterschiedlichen Endgeräten (Desktop-PC, Tablet, Handy, usw.) durch bestimmte Anpassungen so dargestellt werden kann, dass die Benutzerfreundlichkeit dadurch nicht eingeschränkt wird. Ausschlaggebend für die Entwicklung eines responsiven Designs war die Einführung von internetfähigen Handys bzw. Smartphones/Tablets, deren Displays deutlich kleiner sind. Um die Benutzerfreundlichkeit einer Webseite bei kleinen Displays auch im Vergleich zu großen Displays zu wahren, muss sich der Aufbau der Webseite beim Responsive Design immer an das jeweilige Endgerät anpassen. Hierunter fallen insbesondere Elemente wie z. B. die Navigation einer Webseite. Unterliegt eine Webseite keinem Responsive Design und man betrachtet eine Webseite beispielsweise mit einem Smartphone, kann eine Webseite mitunter schwer bis gar nicht zu lesen sein.
Zu früheren Zeiten, als Gedanken weder an Smartphones noch an Tablets verschwendet wurden, war ein responsives Design nicht erforderlich. Zu dieser Zeit galt als Maßstab der klassische Bildschirm eines Desktop-PCs. Doch im Laufe der Zeit wurden die Displays nicht nur flacher, sondern auch kleiner. Gerade im Segment der mobilen Geräte schritt die Entwicklung sehr schnell voran, so dass hier zwangsläufig eine Anpassung der Webseite erfolgen musste, um die Usability zu wahren.
Gute Gründe für Responsive Design
Eine Webseite gehört für die allermeisten Unternehmen zum absoluten Standard. Gerade weil eine Webseite heute so eine große Relevanz hat, sollte diese nicht vernachlässigt werden. Vernachlässigt erst recht dann nicht, wenn die Webseite einen oder sogar den wesentlichen Grundstein eines Unternehmens bildet. So kann die z. B. ein Online-Shop für einen lokalen Händler eine zusätzliche Einnahmequelle darstellen. Allerdings vertreiben die allermeisten Online-Shops ihre Produkte nicht lokal vor Ort, sondern ausnahmslos über das Internet. Vor diesem Hintergrund und der Tatsache, dass die Zahl mobiler Geräte stetig weiter ansteigt, sollte zwingend über das Responsive Design der Webseite nachgedacht werden. Dadurch, dass speziell das Smartphone so gut wie immer greifbar und auch verfügbar ist, wird der klassische Desktop-PC für viele immer irrelevanter. Das Nutzerverhalten ändert sich also deutlich.
Um also potentiellen Besuchern einer Webseite einen optimalen Zugang zu der entsprechenden Webseite zu ermöglichen, sollte die Webseite bereits heute einem responsiven Design unterliegen. Da dieser Entwicklung immer weiter zunimmt, wird ein responsives Design zukünftig unverzichtbar sein. Schon heute ist es so, dass Webseite ohne responsives Design häufig spürbare Einbußen im Vergleich zu anderen Webseiten erleiden. Der Grund ist der: Auf kleinen Displays ist eine Orientierung innerhalb der Webseite ohnehin recht schwierig. Fehlt dann auch noch ein responsives Design, ist eine Orientierung ungleich schwerer und somit ist die individuelle Nutzererfahrung (User Experience) schlecht. Dass führt in der Regel dazu, dass der Nutzer die Webseite vorzeitig verlässt und eine mögliche Conversion ausbleibt. Ein bedeutender Teil der Webseitenbetreiber hat bereits heute seine Webseite auf ein Responsive Design umgestellt. Um im harten Online-Business bestehen zu können, wird – falls noch nicht geschehen – eine Umstellung der eigenen Webseite unumgänglich sein.
Die Technik zur Umsetzung eines Responsive Design
Möchte man eine Webseite responsiv gestalten, kommt man um CSS3 und die sog. Media Querries nicht herum. Bei Media Queries handelt es sich um ein CSS3 Konzept, welches in der Lage ist, bestimmte Informationen des jeweiligen Endgerätes abzufragen. Bedingt durch die Tatsache, dass Displaygrößen heutzutage sehr stark variieren können, spielt die Ermittlung der Displaygröße des verwendeten Endgerätes eine bedeutende Rolle. Darüber hinaus sind aber auch andere Faktoren entscheidend, hierzu zählen neben der individuellen Auflösung auch die verschiedenen Eingabemöglichkeiten. Der Großteil der Eingaben erfolgt per Tastatur und Finger, aber auch Spracheingaben sind möglich. Grundvoraussetzung für ein funktionierendes Responsive Design ist, dass der Inhalt der Webseite vom Design bzw. Layout klar getrennt wird.
Das Design
Durch ein Responsive Design wird die Betrachtung von Inhalten unabhängig vom verwendeten Device und vor allem dessen Displaygröße möglich. Die Inhalte werden immer gleich angezeigt, allerdings unterliegen sie leichten Schwankungen im Design, je nachdem welche Displaygröße vorliegt. Da selbst bei Smartphones Schwankungen der Displaygröße völlig normal sind – allerdings geht der Trend zu deutlich größeren Displays – kommt es immer noch recht häufig vor, dass kleinere Displays verwendet werden (z. B. bei älteren Handymodellen). Grundsätzlich gilt, dass die unterschiedlichen Darstellungen keinen Einfluss auf den verwendeten HTML-Code haben, dieser bleibt immer unverändert gleich.
Um auf kleinen Displays eine ideale Darstellung der einzelnen Elemente gewährleisten zu können, kann es schon mal vorkommen, dass Elemente teilweise reduziert werden. Grundsätzlich gilt aber, dass die bereits existierenden Elemente dargestellt werden, möglicherweise aber in leicht abgewandelter Form. Dass eine Umstrukturierung der einzelnen Elemente einen Sinn macht wird dann klar, wenn man bedenkt, dass eine Webseite eben nicht nur im Hochformat, sondern auch Querformat dargestellt werden kann. Speziell auf Smartphones, die ja eigentlich immer eine längliche form aufweisen, macht die Darstellung im Querformat häufig Sinn. Erfolgt also der Wechsel vom Hoch- ins Querformat (oder umgekehrt), passen sich die einzelnen Elemente automatisch an die „veränderte Displayform“ an, ohne aber, dass eine bestimmte Funktionalität nicht mehr verfügbar ist.
Der Wechsel auf ein Responsive Design
Trägt man sich mit dem Gedanken, seine Webseite im responsiven Design darzustellen, geht immer mit einem Aufwand einher. Zunächst sollte gründlich geplant werden, welche Bereiche bzw. Elemente einer Webseite wichtig bzw. eher unwichtig sind und nicht zwingend angezeigt werden müssen. Wichtige Elemente sind in der Regel die, die vom Webseitenbesucher am meisten geklickt oder auch erwartet werden. Da auf Displays, bedingt durch die Größe, nicht immer alle Elemente dargestellt werden können, sollte man sich dementsprechend darüber im Klaren sein, welche Elemente beim Betrachter der Webseite in den Fokus rücken sollen. So kann es also vorkommen, dass bestimmte Elemente weiter nach oben und somit in den Vordergrund rücken, dahingegen aber andere Elemente weiter nach unten verschoben werden oder sogar gänzlich verschwinden. Die Gestaltung bzw. Anordnung der Elemente sollte so erfolgen, dass der potentielle Besucher, der möglicherweise auch ein potentieller Kunde ist, dass findet, wonach er gesucht hat. So lässt sich langfristig die Nutzererfahrung steigern, was nicht zuletzt auch positive Auswirkungen auf den Traffic und/oder den Umsatz und somit auch den Gewinn hat.
Grundsätzlich empfiehlt sich der Wechsel auf ein Responsive Design dann, wenn die Webseite als Grundlage eines Geschäftsmodells dient (z. B. für Online-Shops) oder die Webseite recht häufig über mobile Geräte aufgesucht wird. Also Folge der rasanten Entwicklung im Bereich der Smartphones existierten vor 2011 meist nur „entschärfte“ Varianten von Desktop-Webseiten, die in der Regel durch die Verwendung einer Subdomain, in den meisten Fällen durch ein vorangestelltes „m.“, zu erkennen waren. Danach und speziell im Jahr 2013 vollzog sich ein rasanter Wechsel zu responsiven Webseiten, vor allem im Bereich des E-Business. Gemessen am Gesamtvolumen aller existierenden Webseiten, stellen die Webseiten im Responsive Design mehr oder weniger eine Minderheit dar. Allerdings, und das ist entscheidend, wurde der Anteil der responsiven Webseiten im Bereich der Marktrelevanten Webseiten vor einigen Jahren schon auf einen knapp zweistelligen Prozentwert geschätzt.
Responsive Design aus Sicht der Suchmaschinenoptimierung
Hat man für sich den Entschluss gefasst, die Webseite responsiv zu gestalten, sollte der zunächst hohe Aufwand in jedem Fall berücksichtigt werden. Aber, so aufwendig die einmalige Umstellung auf ein responsives Design anfänglich ist, am Ende zahlt es sich in der Regel aus. Auch der zu investierende Aufwand in die Webseite wird weniger, was ganz einfach der Tatsache geschuldet ist, dass Designs sozusagen nur an „ein einziges Device“ angepasst werden müssen. Wie weitere oben bereits thematisiert, sind auch aus Sicht der Suchmaschinenoptimierer Erfolge zu erwarten. Die Nutzererfahrung wird durch ein responsives Design stark verbessert. Das liegt mitunter daran, dass lästiges hin und her scrollen oder das typische zoomen mit zwei Fingern ausbleibt. Besucht also jemand eine Webseite und findet das wonach er sucht, steigt mit großer Wahrscheinlichkeit, auch als Folge der positiven Nutzererfahrung, die sog. Verweildauer. Die Verweildauer selbst ist für Google ein Rankingkriterium, dass sich direkt auf die Rankings auswirken kann. Verbessert sich die Verweildauer, ist das für Google ein klares Indiz dafür, dass die Inhalte der entsprechenden Webseite hilfreich sind. Da Google seinen Nutzern ein bestmögliches Ergebnis zu einer Anfrage liefern möchte, steigt somit die Wahrscheinlichkeit eines verbesserten Rankings. Neben der Verweildauer spielt aber noch ein anderer Faktor eine wichtige Rolle, und zwar die Absprungrate. Durch eine responsive Webseite verringert sich in der Regel die Anzahl derer, die eine Webseite nach deren Aufruf direkt bzw. ohne einen einzigen „Klick“ getätigt zu haben, wieder verlassen. Hieraus wird auch schon deutlich, dass über kurz oder lang ein responsives Design der eigenen Webseite unumgänglich sein wird. Diejenigen, die heute schon auf Responsive Design wechseln, können sich dadurch gegenüber dem ein oder anderen Wettbewerber einen Vorteil verschaffen und sich wohlmöglich gegenüber diesem auf dem Markt etablieren.
Klar abzugrenzen von responsiven Webseiten sind solche Webseiten, die nur für die mobile Nutzung erstellt wurden. Solche Webseiten haben gegenüber einer responsiven Webseite den großen Nachteil, dass diese eine eigene Domain darstellen und aufgrund dessen zusätzlich zur Desktop-Webseite optimiert werden müssen. Geschweige denn von der Problematik, dass auf einer solchen Webseite sehr häufig auch Duplicate Content (deutsch: doppelter Inhalt) durch Google identifiziert wird. Ebenfalls von Nachteil ist, dass extra mobil angefertigte Webseiten in der Regel nicht verlinkt werden und folglich auch keinen Nutzen durch die externe Verlinkung davontragen. Das wirkt sich natürlich auf die Rankings bei Google aus, wo in den meisten Fällen dann nicht die extra erstellte mobile Variante der Webseite eingeblendet wird, sondern die klassische Desktop-Variante. Durch das individuelle Online-Verhalten, welches sich bedingt durch die starke Zunahme an mobilen Geräten in den letzten Jahren stark verändert hat, gibt es möglicherweise auch Auswirkungen auf ein verändertes Sucherhalten. So sollte z. B. berücksichtigt werden, dass eine Suchanfrage mittels eines mobilen Gerätes möglicherweise anders ausfällt, als die über einen klassischen Desktop-PC. Hier kommt der Eingabemöglichkeit eine besondere Rolle zu. Beim Desktop-PC ist eine Tastatur vorhanden, über die tendenziell auch längere Sucheingaben stattfinden. Beim Smartphone selbst fällt eine entsprechende Eingabe tendenziell eher etwas kürzer aus, da sie in der Regel unter Verwendung der Finger eingegeben wird. Ein weiterer Grund ist der, dass Suchende mit mobilen Geräten häufig nicht am Schreibtisch sitzen, sondern möglicherweise unterwegs sind (zu Fuß, in der Bahn, etc.) und sich daher auf wenige Wörter bei der Suche beschränken. Somit bleibt abzuwarten, in welche Richtung sich Keywords bzw. die Planung relevanter Keywords zukünftig entwickeln wird.
Responsive Webseiten sind bereits heute sehr wichtig. Die Tatsache, dass auch Google eine Umstellung auf das Responsive Design empfiehlt, lässt erahnen, in welche Richtung es zukünftig gehen soll und wird. All diejenigen, die sich mit dem Gedanken tragen zu wechseln, sollten es auch tun. So lässt sich nicht nur der Grundstein für ein erfolgreiches Online-Business legen, dass bereits heute für die Zukunft gerüstet ist, sondern möglicherweise auch der Vorsprung gegenüber potentiellen Wettbewerbern ausbauen.
