Website Relaunch mit Responsive Webdesign
Fakt ist: Wer heute einen Website-Relaunch plant, muss dabei berücksichtigen, dass die Nutzer mit vielen unterschiedlichen Geräten auf die Inhalte zugreifen. Ein Begriff, der in diesem Kontext unweigerlich fällt, ist „Responsive Webdesign“. Was das ist und was Sie im Zuge Ihres Website Relaunch in diesem Zusammenhang beachten müssen, erkläre ich Ihnen im folgenden Beitrag!
Haben Sie schon einmal von „Smombies“ gehört? Falls nicht, haben Sie garantiert schon mal welche beobachten dürfen. Mit dem Begriff, der sich aus den Wörtern „Smartphone“ und „Zombie“ zusammensetzt, bezeichnet man Menschen, die ihre Umgebung aufgrund des fast schon hypnotischen Dauerblicks auf das eigene Smartphone kaum noch wahrzunehmen scheinen. Warum das für Sie interessant sein soll? Ganz einfach: Smombies sind ein schönes, plakatives Beispiel für den Wandel im digitalen Zeitalter – einem Wandel, der dazu führt, dass immer mehr Nutzer digitale Inhalte primär über mobile Endgeräte wie Smartphones oder Tablets konsumieren.
Webseiten, die aufgrund mangelhafter Optimierung auf mobilen Endgeräten leicht mit einem bisher unbekannten Gemälde von Wasily Kandinski verwechselt werden könnten, fallen in der Gunst der Nutzer schnell durch. Wenn Sie eine Website erstellen, sollten Sie unbedingt sicherstellen, dass Ihre Webseite auf allen möglichen Endgeräten optimal dargestellt wird. Und damit landen Sie unweigerlich beim Thema Responsive Webdesign.
Prüfen Sie gerne erst mal die Mobilperformance Ihrer Website (Nur URL eingeben – dauert nur ein paar Sekunden):
Der Begriff Responsive Webdesign wurde erstmals 2010 in einem Beitrag für das Webmagazin „A list apart“ verwendet. Es dauerte nicht lange, bis sich der Begriff als Synonym für die mobile Optimierung von Webseiten etablierte – auch wenn das streng genommen nicht zu 100 Prozent korrekt ist. Doch dazu später mehr.
Widmen wir uns zunächst einmal dem Begriff als solchem und was sich dahinter verbirgt. Vereinfacht gesagt, stellen Sie mithilfe von Responsive Webdesign sicher, dass die Inhalte Ihrer Webseite auf allen möglichen Endgeräten und Bildschirmgrößen korrekt dargestellt werden. Wie der Name schon andeutet, passen sich die Inhalte dabei dynamisch an die verschiedenen Bildschirmauflösungen an – und garantieren so ein positives Nutzererlebnis über sämtliche Endgeräte hinweg.
Warum ist Responsive Webdesign so wichtig für Webseiten Design?
Kommen wir noch mal auf die „Smombies“ zurück. Wie schon erwähnt, steigt der Anteil jener Nutzer, die eine Webseite über mobile Endgeräte aufrufen, seit Jahren kontinuierlich an. Lag dieser Anteil im Vorjahr noch bei rund 53 Prozent, könnten Webseitenbesuche über Smartphones und Tablets am Ende dieses Jahres bereits über 60 Prozent ausmachen – Tendenz weiter steigend.
Die Customer Journey findet auf allen Kanälen statt
Besonders B2B-Unternehmen stehen oft immer noch auf dem Standpunkt, dass ihre Kunden am Schreibtisch sitzen und mit einem Desktopcomputer die eigene Internetseite aufrufen. Stellen Sie sich einmal folgendes Szenario vor: Ein potenzieller Kunde recherchiert während seiner Geschäftsreise mit seinem Smartphone im Internet – vielleicht in der Bahn oder am Flughafen. Dabei stößt er auf Ihre Website und stellt fest, dass diese für ihn nicht zu benutzen ist. Navigationselemente ragen über den Bildschirm hinaus, der Text ist viel zu groß und die Bilder wirken überdimensioniert und deplatziert. Sie können sich sicher leicht vorstellen, welche Meinung dieser potenzielle Kunde von Ihnen und Ihrem Angebot entwickeln wird.
Laut einer Studie des Bundesverbands für digitale Wirtschaft gilt, dass rund jeder zehnte am Desktop-PC getätigte Einkauf durch eine Recherche am Smartphone vorbereitet wird – und umgekehrt rund zwei Dritteln der per Smartphone oder Tablet getätigten Transaktionen eine Recherche am Desktop-PC vorausgeht. Die beiden Kanäle Mobil und Desktop sollten demnach auf keinen Fall getrennt voneinander betrachtet werden. Damit sich die beiden Kanäle im Hinblick auf Ihren geschäftlichen Erfolg bestmöglich ergänzen, ist es also unabdingbar, dass Sie die korrekte Darstellung Ihrer Webseite auf allen möglichen Endgeräten sicherstellen.
Mobile ist das neue Desktop
Keine Frage: Die Google-Suche ist weiterhin einer der wichtigsten Kanäle, um Besucher auf die eigene Webseite zu bekommen. Im Frühjahr 2015 gab Google offiziell bekannt, dass die Suchmaschine erstmals mehr Suchanfragen über mobile Geräte als über Desktops verzeichnete. Heute liegt der Anteil der mobilen Suchanfragen schon bei 60 Prozent. Vor diesem Hintergrund verwundert es nicht, dass Google Responsive Webdesign als einen der wichtigsten Rankingfaktoren sieht.
Seitenbetreiber, die die mobile Optimierung ihrer Webseite bisher vernachlässigt haben, müssen daher mit unter Umständen gravierenden Sichtbarkeitsverlusten ihrer Webseite in den Google-Suchergebnissen rechnen – und verlieren damit einen ihrer wichtigsten, darüber hinaus kostenlosen, Traffic-Kanäle.
Welche Möglichkeiten der Website Optimierung gibt es?
Wie schon anfänglich erwähnt, wird „Responsive Webdesign“ heute als Hauptbegriff für alle Methoden verwendet. Das ist eigentlich fachlich nicht ganz korrekt, denn wir unterscheiden bei der Optimierung einer Website für unterschiedliche Bildschirmgrößen und Endgeräte zwei grundsätzliche Methoden: Responsive Webdesign und Adaptive Webdesign.
Responsive Webdesign
Unter Responsive Webdesign verstehen Webdesigner eigentlich eine flüssige Anpassung aller Inhalte an die Bildschirme des Endgeräts. Diese Methode lässt sich am einfachsten nachvollziehen, indem Sie das Browserfenster am Desktopscreen horizontal kleiner ziehen. Bei einem Responsive Webdesign verkleinern sich die Elemente der Website dann proportional. Das bedeutet: Bilder und Textblöcke werden schmaler und der Text bricht anders um. Da dies „flüssig“ (ohne Sprünge) im Zuge des sich verkleinernden Browserfensters geschieht, bezeichnet man diese Methode auch als Fluid Webdesign. Durch dieses Verfahren wird die gesamte Breite des Browserfensters ausgenutzt – auch bei sehr großen Bildschirmen.
Das ist in vielen Fällen sehr sinnvoll, kann aber bei großen Bildschirmen und voll aufgezogenen Browserfenstern auch unerwünschte Auswirkungen haben. Beispielsweise dann, wenn wichtige Inhalte durch stark vergrößerte Bildelemente nach unten aus dem sichtbaren Bereich der Website verdrängt werden oder wenn sich die Zeilenlänge eines Textblocks so weit erhöht, dass die Lesbarkeit darunter leidet.
Adaptive Webdesign
Vereinfacht gesagt, werden beim Adaptive Webdesign verschiedene Versionen einer Webseite für unterschiedliche Displaygrößen erstellt. In der Regel jeweils ein Layout bezogen auf die Endgeräte Desktop, Tablet und Smartphone. Wenn Sie den oben beschriebenen Test anwenden und das Browserfenster am Desktopscreen horizontal kleiner ziehen, dann bleiben bei Adaptive Webdesign die Elemente der Website bis zu einer bestimmten Breite fix. Unterhalb diese Breite springt das Webdesign auf das nächst kleinere Layout um.
Das kann bei großen Bildschirmen am Desktopcomputer Vorteile bieten, weil die Nutzer nicht gezwungen werden, die Breite des Browserfensters für jede Website neu anzupassen. Adaptive Webdesign bringt aber auch Nachteile, denn eine auf diese Weise erstellte Webseite ist nicht zwingend für alle möglichen Endgeräte optimiert. Adaptive Webdesgin für Smartphones muss sich an der kleinsten möglichen Bildschirmbreite orientieren, damit die Inhalte auch auf dem kleinsten Smartphone vollständig dargestellt werden. Bei etwas größeren Handys würde daher der Vorteil eines größeren Bildschirms nicht optimal genutzt und Platz verschenkt.
Kernprinzipien von Responsive Webdesign
Sicher fragen Sie sich jetzt, ob Responsive oder Adaptive Webdesign die Lösung für Ihren Website Relaunch ist. Die Antwort darauf kann man nicht so einfach geben, ohne die Inhalte zu kennen. Oft ist eine Mischung aus beiden ideal und für die mobilen Endgeräte (Smartphone und Tablet) wird ein Responsive Webdesign angewendet und für die Desktopversion ein Adaptive Webdesign. Nicht selten werden sogar beide Methoden in der Desktopversion gemischt, sodass sich bestimmte Elemente „fluide“ verhalten und andere „fix“. Grundsätzlich kann man sagen, dass für eine optimale Ausnutzung kleiner Bildschirme ein Responsive Webdesign zwingend ist. Die Kernprinzipien möchte ich Ihnen in den folgenden drei Beispielen näherbringen.
Dynamisches Layout
Pixelgenaue Layoutraster, genauestens bemessene Bilder. Lange Zeit galt das als der Heilige Gral des Webdesigns, ließ sich die ordnungsgemäße Darstellung einer Webseite so doch am besten sicherstellen. Zumindest, wenn die Nutzer auch die gleiche Displayauflösung nutzten wie die Designer. Für alle anderen Nutzer war die Webseite so nur mit Einschränkungen oder im schlimmsten Fall gar nicht zu nutzen.
Responsive Webdesign setzt daher statt absoluter auf relative Werte. Konkret bedeutet das, dass eine Spalte im Layout zum Beispiel mit einer Breite von 20 Prozent und nicht etwa 200 Pixel bemessen wird. Das führt dazu, dass diese Kolumne auf allen Endgeräten 20 Prozent der verfügbaren Breite einnimmt. So wird sichergestellt, dass sich das Layout einer Webseite ohne Darstellungsfehler flexibel an unterschiedliche Displaygrößen anpassen kann.
Relative Schriftgrößen
Was für das Layoutraster gilt, muss natürlich auch für die Schriftgröße gelten. Daher werden diese beim Responsive Webdesign ebenfalls in relativen Werten angegeben. Also können entweder wieder prozentuale Werte oder alternative Maße wie „EM“ verwendet werden.
Keine fest definierten Bildgrößen
Es reicht nicht aus, allein das Layoutraster und die Schriftgrößen zu optimieren. Bilder sind zentrale Elemente auf einer Webseite und müssen daher auch entsprechend für die Darstellung auf allen möglichen Endgeräten optimiert werden. Das bedeutet gerade bei mobilen Endgeräten auch, dass die Bildgröße entsprechend angepasst wird, um lange Ladezeiten wegen viel zu großer Bilder zu vermeiden.
Fazit
Responsive Webdesign ist keine Modeerscheinung, sondern die Grundlage für langfristigen Erfolg. Bei einem Website Relaunch führt kein Weg an der mobilen Optimierung mittels Responsive Webdesign vorbei. Glücklicherweise lässt sich das mit den gängigen Content-Management-Systemen wie WordPress, TYPO3 oder Drupal in der Regel ganz einfach umsetzen.
Kalkulieren Sie doch einfach die Kosten für einen Website Relaunch, um auch Ihre Seite responsiv zu machen: