Responsive Webdesign – Benutzerfreundlichkeit on Demand

Das Internet ist heute praktisch DIE Schnittstelle, zwischen Unternehmen und Kunden. Fast alles läuft über das Internet. Doch die Art und Weise, wie wir das Internet und seine Angebote nutzen, hat sich seit Beginn an erheblich verändert. Zuerst nutzten wir das Internet fast ausschließlich über Desktop-Rechner, fast zeitgleich begann die mobile Nutzung mittels Notebooks und heute gehen wir zusätzlich über mobile Geräte wie Smartphone oder Tablet ins Internet. Darüber hinaus gibt es noch eine ganze Reihe weiterer Geräte, die das Internet nutzen, doch die spielen im weiteren Verlauf des Artikels keine starke Rolle.

Betrachten wir die Entwicklung, dann sehen wir, dass alle aktuell genutzten Geräte unterschiedliche Displaygrößen und Auflösungen nutzen, um die jeweiligen Inhalte wiederzugeben. Am Anfang des Internets, also ab Mitte der 90er Jahre, war das Design von Websites relativ einfach, denn man konnte die jeweiligen Websites auf bestimmte Auflösungen hin so designen, dass diese praktisch überall korrekt angezeigt wurden. Doch spätestens mit dem Start des ersten iPhones im Jahr 2007 änderte sich alles. Plötzlich galt es, Websites auch auf verhältnismäßig kleinen Displays abzubilden. Zwar schaffte Apple es sehr gut, damit man auch auf klassischen Websites verhältnismäßig gut navigieren konnte, doch optimal war das natürlich nicht.

Mit zunehmender Verbreitung von Smartphones musste eine andere Lösung her. Idealerweise sollte sich diese Lösung an die jeweiligen Displaygrößen anpassen, so dass der User auf allen Geräten eine optimale Wiedergabe der Inhalte haben, problemfrei navigieren können und am Ende die gesuchten Informationen finden.

Die Lösung heißt „Responsive Webdesign“. Diese Lösung hat, über das reine Design hinaus, noch eine ganze Reihe Auswirkungen, zum Beispiel auch auf das Online Marketing.

Was ist Responsive Webdesign und wie differenziert es sich vom Oberbegriff „Webdesign“?

Traditionelles Webdesign orientierte sich zu Beginn sehr am Desktop-Publishing (DTP). Auf vordefinierten Seitengrößen wurden Websites angelegt, Bilder platziert und Texte eingearbeitet und auf der Seite fixiert. Über eine entsprechende Menüführung konnte man dann zwischen den einzelnen Inhaltsseiten hin und her blättern. Technisch gesehen waren (und sind) solche Websites sehr statisch — und werden überall auf den unterschiedlichsten Displays in der gleichen Größe angezeigt.

Der nächste Schritt im Webdesign, und schon damals ein Schritt in Richtung Responsive Webdesign, waren Cascading-Style-Sheets (CSS). Grob gesagt setzte man zu Beginn zwar auch noch auf Layout Vorgaben, doch die Inhalte wurden nicht mehr ausschließlich im Layout platziert und formatiert, sondern das grundlegende Erscheinungsbild einer Website, die Texte, Überschriften und so weiter, werden in einem Stylesheet definiert. Dadurch wurde das Webdesign flexibler und konnte sich auch leicht an unterschiedliche Browser anpassen, bzw. die dynamische Erzeugung von Website war möglich, so dass Inhalte jeweils automatisch einfließen und sich auf Basis des jeweils definierten Stylesheets anpassen.

Dieses Prinzip wird auch heute noch genutzt, nur dass grob vereinfacht gesagt alle Inhalte als Gruppen gesehen werden, die sich bei unterschiedlichen Displaygrößen verschieden verhalten bzw. anpassen. Dadurch ist es möglich, dass ein und dieselbe Website auf verschiedenen Displaygrößen wiedergegeben werden können. Hierbei werden Texte automatisch angepasst und neu umgebrochen, Bilder werden in einem vorgegebenen Rahmen skaliert, die Menüführung wird angepasst und einzelne Boxen und Rahmen werden mit den jeweiligen Inhalten neu angeordnet.

Sehen Sie das nur als stark vereinfachte und technisch grobe Wiedergabe dessen, was unter der Oberfläche abläuft, denn eigentliche Wirkungsweise von Responsive Webdesign geht mehr in Richtung User Experience, Suchmaschinenoptimierung und Online Marketing.

Warum ist Responsive Webdesign in der heutigen Zeit so wichtig?

Responsive Webdesign ist letztlich kein Zufall, sondern das Ergebnis von zwei Entwicklungen. Zum einen die technische Entwicklung und die Notwendigkeit, um Inhalte auf unterschiedlichen Display wiederzugeben. Zum anderen ist es aber auch der verstärkte Fokus auf den User, um ihm mit maßgeschneiderten Inhalten in optimaler Darstellung das zu liefern, was er im Augenblick konkret sucht und braucht.

Machen wir an dieser Stelle einen Schritt zurück und betrachten wir die Art und Weise, wie wir das Internet heute zumeist nutzen. Heute werden mehr als 50 % der Suchanfragen über mobile Geräte, also Smartphones und vereinzelt auch Tablets, gestellt. Diese Entwicklung lässt sich ab 2010 vermehrt beobachten — und ab 2013 hat dieses Thema massiv an Fahrt aufgenommen. Natürlich ist auch Google das aufgefallen, denn bekanntermaßen laufen heute die meisten Suchanfragen über Google, und das hat eine direkte Auswirkung auf das Online Marketing.

An den Planungen von Google lässt sich die Wichtigkeit von Responsive Webdesign direkt ablesen — und die Auswirkungen für Online Marketing unmittelbar ableiten. Konkret sieht es aktuell so aus, dass Google auf Grund der vermehrten mobilen Nutzung auch mehr und mehr Websites in den Suchergebnissen anzeigt, die mobil optimiert sind, also im Responsive Design vorliegen.

Mit anderen Worten: Die Vorbereitungen laufen auf Hochtouren, und der „Mobile First“ Index von Google ist beschlossene Sache — und die Auswirkungen auf das Online Marketing sind grundlegend.

Inwiefern stehen Responsive Webdesign und Online Marketing im Zusammenhang?

Die Suche nach Produkten startet heute zumeist bei Amazon — (fast) alle anderen Suchanfragen beginnen bei Google. Doch warum spielt gerade Responsive Webdesign eine so große Rolle und welchen Zusammenhang gibt es in Bezug zum Online Marketing?

Um den Zusammenhang zwischen Responsive Webdesign und Online Marketing näher zu betrachten gilt es, die typischen Suchanfragen näher zu beleuchten. Normalerweise ist jede Suchanfrage so etwas wie eine Frage: „Ich suche …?“, „Was ist …?“ oder „Wo finde ich …?“. Letztlich verfolgt jeder User mit seiner individuellen Suchanfrage eine ganze bestimmte Suchintention. Diese Suchintention versucht Google, so gut wie möglich, zu verstehen und zu interpretieren, um dann die entsprechenden Ergebnisse zu liefern.

Mehr noch, kommen diese Suchanfragen über mobile Geräte, also über Smartphones, dann will Google nicht nur die möglichst passenden Suchergebnisse liefern, sondern auch bevorzugt die Ergebnisse präsentieren, die für Smartphones aufbereitet sind. Diese Websites müssen also im Responsive Webdesign vorliegen, und sowohl inhaltlich, also auch von der Benutzerführung her, einige Kriterien erfüllten. Letztlich bedeutet das, dass beim Online Marketing ein neuer Faktor hinzugekommen ist.

Welche Vorteile bietet gutes Responsive Webdesign für Unternehmen und ihr Online Marketing?

Auf den ersten Blick scheint Responsive Webdesign ein kompletter Neustart zu sein. Bei manchen Websites mag das der Fall sein. Doch wer schon heute auf aktuelle Standards setzt, kann verhältnismäßig leicht seine Website, inkl. der entsprechenden Inhalte, auf Responsive Webdesign umstellen, und wer einen Neustart seiner Website plant, der sollte von Anfang an auf Responsive Webdesign setzen und seine Websites so entwickeln, dass diese auf allen Displays optimal angezeigt werden. Im Grunde genommen ist das heute mehr Pflicht als Kür, denn der Erfolg der heutigen Smartphones, mit all ihren Möglichkeiten, sind heute praktisch die zentrale Schnittstelle, um das Internet zu nutzen — und um beim Online Marketing potenzielle Kunden auf noch kürzerem Weg zu erreichen.

Mit anderen Worten: Kaum einer kommt um Responsive Webdesign herum, gerade wenn das Online Marketing auch in Zukunft noch messbare Ergebnisse liefern soll.

Die Umstellung auf Responsive Webdesign ist somit mehr als Investition in die eigene unternehmerische Zukunft und Online Marketing zu verstehen — eine Investition, die zugleich einige Vorteile mit sich bringt.

Diese Vorteile lassen sich an einer Hand abzählen:

1. Ein bestehendes Corporate Design ist eine visuelle Schnittstelle zwischen Unternehmen und Kunden. Der Wiedererkennungswert ist hierbei extrem wichtig und wertvoll. Mittels Responsive Webdesign lässt sich ein Corporate Design einheitlich auf allen Geräten abbilden, was für das Online Marketing extrem wichtig ist.

2. Responsive Webdesign setzt auf einen einheitlichen Standard und bietet so die Möglichkeit, dass mit einem einzigen Framework die gleichen Inhalte auf allen nur denkbaren Plattformen ausgespielt werden können. Somit muss am Ende nur noch ein System gepflegt und gewartet werden, und nicht für jedes Endgerät und jede Displaygröße eine gesonderte Website. Auf mittelfristige Sicht spart das Kosten für Design und Wartung — und kann ggf. Mehr in Online Marketing investieren.

3. Auf der Website und beim Online Marketing steht immer der User im Mittelpunkt. Mit einem einheitlichen responsiven Webdesign, und einer optimalen Darstellung der einzelnen Inhalte, lässt sich eine positive User Experience erzeugen. Der User findet letztlich schneller und besser das, was er in diesem Augenblick sucht, braucht oder erwartet. Responsive Webdesign ist somit der Schlüssel für zufriedenere Kunden und wirkungsvolles Online Marketing.

4. Die Inhalte einzelner Seiten sind ein Thema. Ein weiteres Thema ist die Struktur der Website und die Verlinkung zu anderen Inhalten. Über ein Responsive Webdesign lassen sich nicht nur die Inhalte auf die unterschiedlichen Displays anpassen, sondern auch die Menüführung passt sich automatisch an, so dass jeder User problemfrei auf den jeweiligen Websites navigieren kann. Gerade bei der Bedienung mit dem Finger über ein Touch-Display ist eine optimierte Menüführung essenziell.

5. Der letzte wichtige Vorteil, und einer der wichtigsten Punkte im Hinblick auf das Online Marketing, ist, dass Responsive Webdesign für Google eine immer wichtiger werdende Rolle spielt. Bei der Suche im Internet werden mehr und mehr Suchanfragen über Smartphones gestellt. Das ist gerade auch für das Online Marketing wichtig, denn Google möchte hier nicht nur die passenden Antworten auf die Suchanfragen der User liefern, sondern die Ergebnisse sollten auch optimal auf dem Gerät abgebildet werden, über das die Suchanfrage gestellt wurde. Deshalb sollte über kurz oder lang jede Website im Responsive Webdesign vorliegen — und für Websites im lokalen Geschäftsbereich ist Responsive Webdesign praktisch schon heute Pflicht, denn gerade hier liegen die Anfragen über Smartphones weit über dem Durchschnitt. Mit anderen Worten: Ein Responsive Webdesign ist Online Marketing pur und gut für ein besseres Ranking bei Google.

Das sind die fünf vorrangigsten Vorteile, die ein Responsive Webdesign bietet. Sicherlich gibt es noch einige Vorteile mehr, doch diese lassen sich als Unterpunkt zu einem der hier vorgestellten fünf Hauptpunkte zuordnen.

Welche Dinge sollten bei Responsive Webdesign beachtet werden?

Responsive Webdesign bringt heute viele Vorteile mit sich und ist praktisch Pflichtprogramm für alle Unternehmer. Doch beim Planen und Erstellen von Websites im Responsive Webdesign sind einige Punkte ganz besonders zu beachten:

1. Responsive Webdesign steht und fällt mit seiner Flexibilität. Von daher sollte man sich beim Responsive Webdesign endgültig vom klassischen Layout-Design verabschieden. Das bedeutet, dass es keine festen Breiten und Ausrichtungen mehr gibt, und die einzelnen Elemente haben keine feste Position auf den jeweiligen Seiten mehr. Dieses Detail ist bei der Planung der einzelnen Inhalte zu beachten. Verschiedene Elemente haben zwar per Definition eine maximale Breite, doch ansonsten passt sich die Breite automatisch an die jeweilige Größe des Displays an. Bei den einzelnen Elementen, also zum Beispiel Texte, Bilder oder Inhaltsboxen müssen diese so geplant und platziert werden, dass diese nebeneinander oder auch untereinander funktionieren.

2. Die Darstellung von einzelnen Elementen und Bildern sollte sich am kleinstmöglichen Display orientieren. Zwar passen sich einzelne Layouts und Inhalte automatisch an, doch manche Elemente und Bilder sehen nur auf dem großen Desktop-Monitor gut aus, doch auf dem Smartphone ist die Darstellung weniger gelungen. Gegebenenfalls müssen hier einzelne Elemente so lange ausgetauscht werden, bis alles passt. Am Ende zählt das Gesamtergebnis und die User-Experience.

3. Gerade bei Headlines, aber auch bei Fließtexten, ist darauf zu achten, dass diese passen und auf unterschiedlich großen Displays funktionieren. Konkret bedeutet das, dass man eher auf kurze Worte setzt, so dass der Flatterrand nicht zu große Lücken aufweist, und auch bei Headlines muss man von Anfang an im Hinterkopf behalten, dass diese auch auf kleinen Displays gut zu lesen sind. Einzelne Worte und unglückliche Umbrüche sind hier zu vermeiden.

4. Generell sollte jede Menüstruktur gut geplant sein. noch gerade bei mobilen Endgeräten sind weniger Klicks und Verweise auf weiterführende Seiten besser. Außerdem ist bei weiterführenden Links und Buttons immer zu beachten, dass diese auf Smartphones mit dem Finger bedient werden. Bei zu kleinen Links und Buttons kann so etwas zu einem echten Geduldsspiel werden — und der User ist meist nach kurzer Zeit weg.

5. Bezüglich der Verlinkung in Texten ist zu beachten, dass zum einen Links hier auch als solche zu erkennen sind. Zum anderen ist auch wichtig zu wissen, dass zum Beispiel Hover-Effekte zwar auf Desktop-Rechnern gut funktionieren — und hier auch einen gewissen Zweck erfüllen — aber auf Touch-Displays suboptimal sind.

6. Bilder auf einer Website sind gut. Sie geben dem Auge halt, führen durch die Inhalte und transportieren im Idealfall auch einzelne Botschaften. Doch auch hier gilt der Grundsatz: Das, was auf einem Desktop-Monitor gut aussieht, muss auch auf kleinen Displays eine gute Figur machen. Beim Responsive Webdesign passen sich zwar die Bilder automatisch an, doch wenn diese so klein sind, dass die eigentlichen Inhalte nicht mehr gut zu erkennen sind (zum Beispiel bei Grafiken und Diagrammen), dann sollte man besser auf das Bild verzichten. Auch mit der Kombination von Bilder und Texten, die die Bilder überlagern, sollte man vorsichtig sein, denn hier werden oft die Inhalte verschoben, so dass unter Umständen auf kleinen Displays plötzlich nichts mehr richtig passt.

7. Zwar haben wir heute schnellere Internetverbindungen, doch gerade im mobilen Bereich ist es an vielen Stellen noch immer sehr wichtig, dass Rücksicht auf die Datenmengen genommen wird. Deshalb sollten besonders Bilder in jeweils optimierten Auflösungen vorliegen. Diese Daten sind dann zumeist sehr viel kleiner, und können somit schnell und problemfrei auch im mobilen Netz auf ein Smartphone übertragen werden. Außerdem gelten schnelle Ladenzeiten auch als Pluspunkt für eine positive User-Experience.

Fazit

Responsive Webdesign ist heute meist weniger Mehraufwand, sondern eher eine Chance, einen besseren Draht zum Kunden zu bekommen. Außerdem spiegelt ein ausgeklügeltes Responsive Webdesign das Corporate Design des Unternehmens wieder, so dass man hier auf eine gesamtheitliche visuelle Darstellung setzen kann. Nicht zuletzt ist Responsive Webdesign auch in Hinblick auch Google wichtig, denn in Zukunft ist zu erwarten, dass der „Mobile First“-Index greift, und so klassische Websites beim Ranking abgestuft werden — und das kann sich praktisch kaum ein Unternehmen auf lange Sicht leisten.

 

Autorenprofil Kaleab