Viele Ihrer Kunden sind einen maßgeblichen Teil des Tages unterwegs. Während dieser Zeit haben sie das Internet auf mobilen Geräten dabei: Notebooks, Netbooks, Tablets, Smartphones. Sie verbringen dabei viel Zeit im World Wide Web – das ist erwiesen. Belegt ist auch, dass ihre Aufmerksamkeit und Aufnahmekapazität in diesen Zeiträumen erstaunlich hoch sein kann. Diese Tatsache nicht umsatzfördernd zu nutzen, wäre ein echter Verlust. Leider realisieren viele Unternehmen nicht, dass die Nutzerfreundlichkeit der Bilddarstellung Ihrer Internetpräsenzen auf dem respektiven Gerät dabei die entscheidende Komponente ist. Denn wenn der Nutzer Ihre Inhalte nicht innerhalb von Sekunden einfach lesbar zur Verfügung gestellt bekommt, wird er Ihre Seite verlassen – egal, wie wertig oder für ihn relevant die Inhalte sind. Findet er umgekehrt ein perfekt optimiertes, komfortabel zu konsumierendes Website Design vor, wird aus dem Nutzer schnell ein mobiler Kunde. Das diesbezügliche Schlüsselwort heißt Responsive Webdesign.

Responsive Webdesign bedeutet, dass Sie Ihre Webangebote so programmieren, dass diese sich automatisiert Darstellungsparametern und Auflösung des jeweiligen Endgerätes anpassen. Dies gilt für alle Inhalte, Navigationselemente und die Seitenstruktur an sich. Indem das Responsive Webdesign mit dem Endgerät des Nutzers kooperiert, wird es von diesem auch als Anpassung an seine Usergewohnheiten wahrgenommen. Ein exzellentes Responsive Webdesign bedeutet daher nicht nur Funktionalität, sondern auch Serviceleistung und ist somit eine Visitenkarte Ihres Unternehmens als kundenorientierter, moderner Anbieter. Kurz gesagt: Responsive Webdesign ist das Mittel gegen den Absprung und der Schlüssel zur Konversion.

Responsive Webdesign: Maßgeschneiderte Inhalte für anspruchsvolle Nutzer

Eine wirklich moderne Website umfasst neben dem Website Design für die Darstellung am Computer auch automatisch die Darstellungsoptimierung für Netbooks, Tablets und Smartphones. Das Responsive Webdesign kennt seiner Programmierung nach keine festen Schrift- oder Bildgrößen. Stattdessen stellen sich die einzelnen „responsiven“ Webdesign Elemente je nach Ausgabegerät automatisiert auf die jeweils bestmögliche Ansicht und Lesbarkeit ein. Eine Responsive Webdesign Darstellung, optimiert für iPad, kann deshalb grundsätzlich anders aussehen als die für das Samsung Smartphone. Gleich bleiben allerdings die Inhalte. In Folge liegt das Geheimnis des erfolgreichen Responsive Webdesign einerseits in der erfolgreichen Programmierung, die die Konformität für alle Geräte gewährleistet. Andererseits wird Ihr Webauftritt dann am attraktivsten und homogensten wahrgenommen, wenn das Website Design von Anfang an für verschiedene Darstellungen konzipiert ist. Diesbezüglich müssen Sie verschiedene Kriterien bei der Umsetzung des Responsive Webdesign berücksichtigen.

Programmiertechnisch stellt Responsive Webdesign die einheitliche Inhaltsanzeige durch HTML5 und CSS3 Media-Queries zur Verfügung. Die damit einhergehende Anpassungsflexibilität aller Responsive Webdesign Elemente wie Texte, Tabellen, Bilder, Videos und interaktive Elemente ist entscheidend. Denn würde neben der Desktopvariante des Website Design für jedes mobile Endgerät eine eigene Mobilvariante erstellt werden, würden Pflegeaufwand und Kosten der konstanten Neuprogrammierungen ins Uferlose gehen. Auch native Apps, also meist kostenpflichtige Erweiterungsprogramme, die plattformabhängig für ein bestimmtes Betriebssystem oder Gerät in dessen Programmiersprache entwickelt wurden, werden durch Responsive Webdesign überflüssig. Unabhängig vom respektiven Programmieraufwand des Responsive Webdesign für Ihre Webauftritte ist es deshalb in jedem Fall die mittelfristig kosteneffizienteste Lösung.

Responsive Webdesign ist programmiertechnisch herausfordernd, aber ultimativ lohnenswert

Wie funktioniert Responsive Webdesign programmiertechnisch? Erstens kennt das Responsive Webdesign keine statischen Layout-Grids. Das stellt viele Programmierer der PC-Generation vor die grundsätzliche Herausforderung, nun in sich prozentual zueinander verhaltenden statt festgelegten Pixelverhältnissen denken müssen. Tatsächlich sind Seiten im Responsive Webdesign deshalb komplexer zu programmieren und wollen in der Konzeptionsphase ausgesprochen gründlich durchdacht werden. Hinterher macht allerdings der wegfallende Pflegeaufwand jede Nachtschicht wieder wett. In der Herangehensweise bewährt sich beim Responsive Webdesign die Devise „MobileFirst“ – sprich, die kompakteste Darstellung des Smartphones wird als erste entworfen und programmiertechnisch umgesetzt. Im weiteren Verlauf des Responsive Webdesign Layoutelemente hinzuzufügen hat sich als weniger zeitaufwendig herausgestellt als diese im Top-Down Verfahren reduzieren zu müssen. Auch die Schriftgröße wird zu einem flexiblen Wert, der im Responsive Webdesign entweder ebenfalls prozentual angegeben oder durch integrierte Programme automatisiert auf die Größe des Displays skaliert wird. Skaliert werden im Responsive Webdesign auch Bilder und Videos, nicht zuletzt, um unnötig lange Ladezeiten zu vermeiden und trotzdem Schärfe und Präzision zu bewahren. Allerdings entscheiden in diesem Fall Designer, Programmierer und Webseitenbetreiber im Sinne der Ressourceneffizienz gemeinsam, ob tatsächlich alle Bilder für alle Darstellungen notwendig sind.

Damit die entsprechenden Programmierungen und PlugIns des Responsive Webdesign auch greifen können, fragt der Browser das Endgerät zunächst nach seiner Identität. Dieses kommuniziert daraufhin seinen sogenannten „Viewport“. Dabei handelt es sich um den exakten Anzeigenbereich im Anwendungsfenster, der der Darstellung der Inhalte zugewiesen ist. Soll beispielsweise die Darstellung optimiert für iPad oder iPhone ablaufen, geben die respektiven Geräte ihren individuellen Viewport an. Auf der Basis dieser Information können die CSS-Inhalte über Media Queries entsprechend ausgegeben werden. Dies setzt natürlich voraus, dass der genutzte Browser mit CSS3 Media Queries umgehen kann. Diese und andere Kriterien des Responsive Webdesign wie Contentmenge und Ladezeiten lassen sich am besten in einer großzügig bemessenen Testphase beurteilen und justieren, in der Ihre Webpräsenz auf möglichst vielen Endgeräten ausgeworfen und das Ergebnis analysiert wird.

Planen Sie für die Erstellung Ihrer Seite in Responsive Webdesign also genügend Entwicklungszeit ein – Ihre Nutzer werden es Ihnen danken. Denn Sie haben es nicht länger mit einem Markt zu tun, in dem nur die jüngste Zielgruppe die mobile Nutzung des Internet als Selbstverständlichkeit betrachtet. Inzwischen sind alle potenziellen Kunden unter 65 (und oft darüber) auch unterwegs im Netz unterwegs. Aber gerade diese Nutzer sind nicht bereit, Abstriche in der Darstellungsqualität und Bedienungsfreundlichkeit hinzunehmen. Auf diesen Anspruch müssen Sie mit Responsive Webdesign reagieren, wenn für Ihr Unternehmensimage und Ihre Konversionsrate eine moderne Webseite der Schlüssel ist. Auch und gerade im eCommerce heißt die Basis zukunftsorientierten Marketings deshalb Multi Channel-Präsenz durch Responsive Webdesign.

Image Credits: ©mpfphotography