Mehr und mehr Webseitenbesuche stammen von mobilen Geräten. Manche Webseiten begegnen diesem Trend mit getrennten mobilen- und Desktop-Versionen – ein recht aufwändiger, und dennoch manchmal nicht erfolgreicher Ansatz. Theoretisch müssen Webseitenbetreiber nämlich mit mehr als 200 verschiedenen möglichen Bildschirmauflösungen rechnen.

Effizienter kann man den unterschiedlichen Bildschirmauflösungen mit einer automatischen Anpassung der Seite an diese begegnen. Genau hier kommt Responsive Design ins Spiel.

Einleitung

In der heutigen Zeit ist das mobile Internet zu einer Selbstverständlichkeit geworden. Fast jeder hat sein Smartphone immer dabei, und nutzt es unterwegs oder auch zu Hause zum Surfen im Web. Aus diesem Grund können die meisten Webseiten heute sogar deutlich mehr Aufrufe von mobilen Geräten (Smartphones und Tablets) verzeichnen, als von klassischen Computern (PCs und Laptops).

Für Betreiber von Webseiten ist es daher wichtig sicherzustellen, dass die Darstellung ihrer Webseite auch auf mobilen Geräten gut funktioniert. Responsive Design ist ein moderner und ebenso effizienter Ansatz, dies zu ermöglichen. Oft ist die Umsetzung eines Responsive Designs mit weniger Aufwand verbunden, als die Erstellung mehrerer separater Versionen (z.B. eine Mobilversion und eine Desktop-Version) einer Webseite. Zugleich bringt es aber oft bessere Ergebnisse, sprich eine bessere Anpassung an die unterschiedlichen Bildschirmgrößen.

Wie funktioniert Responsive Webdesign?

Aus technischer Sicht basiert Responsive Design auf einem flüssigen Raster der Webseite. Dabei ist die Breite der jeweiligen Seite mit Prozentwerten definiert, was es ihr erlaubt sich an die Größe des Bildschirms, bzw. des Browserfensters, anzupassen.

Auch die in die Seite integrierten Inhalte, wie z.B. Texte, Bilder oder Videos, können je nach verfügbarem Platz unterschiedlich groß bzw. klein dargestellt werden.

In der für wichtige Teile des Designs bzw. Layouts von Webseiten zuständigen Programmiersprache CSS (Cascading Style Sheets) können so genannte Breakpoints definiert werden. Diese legen fest, ab welcher Auflösung sich das Seitenlayout verändern soll – also z.B. von Desktop auf Mobilgerät „umspringt“.

Dies kann man übrigens auch testen, wenn man eine Webseite mit Responsive Design im Browser öffnet, und dann das Fenster langsam kleiner (bzw. schmäler) zieht. Dabei lassen sich die unterschiedlichen Breakpoints und ihre Auswirkungen beobachten.

Dazu ein Beispiel: Häufig werden in Webseiten Werbeanzeigen seitlich zum normalen Inhalt, in einer so genannten Sidebar, angezeigt. Anhand eines Breakpoints kann man jedoch per CSS festlegen, dass die Werbeanzeigen aber einer bestimmten Fensterbreite stattdessen unter den normalen Inhalt rutschen sollen. Denkbar wäre z.B. ein Umschalten ab einer Breite von kleiner als 500 Pixeln.

Natürlich ist die Entwicklung eines solchen, individuellen Responsive Designs recht aufwendig. Verglichen mit einer herkömmlichen Seite muss man beim Responsive Design mit einem höheren Zeitaufwand rechnen, und auch ungefähr 30 bis 40 Prozent höhere Kosten einplanen. Im Gegenzug spart man sich jedoch die Entwicklung einer eigenen mobilen Version der Webseite.

Warum sollte man Responsive Webdesign nutzen?

Der unter Umständen höhere Zeit- und Kostenaufwand zu Beginn, kann sich jedoch längerfristig schnell rentieren. Da es bei einem Responsive Design nur eine anstatt mehrerer Webseiten benötigt, spart man sich als Betreiber entsprechenden Aufwand sowohl bei der technischen Wartung als auch bei der inhaltlichen Aktualisierung.

Somit ist Responsive Webdesign häufig nicht nur die technisch modernste, sondern auch die wirtschaftlich vernünftigste Option.

Darüber hinaus ist Responsive Design aufgrund seiner enormen Flexibilität einfach eine sehr gute Möglichkeit, viele unterschiedliche Anwender mit unterschiedlichen Endgeräten bestmöglich erreichen zu können. Aufgrund der dynamischen Anpassung der Seite an verschiedene Bildschirm- und Fenstergrößen ist man bestmöglich auf die unterschiedlichsten Anforderungen vorbereitet.

Nicht zuletzt trägt ein Responsive Design auch zu einem einheitlicheren Bild Ihrer Webseite auf allen Endgeräten bei. Eine eigene mobile Version einer Webseite kann nur schwer den selben „Look & Feel“ erzeugen, wie die Desktop-Seite (und umgekehrt). Responsive Design fördert dagegen ein einheitlicheres Nutzererlebnis, und steigert damit den Wiedererkennungswert von Webseiten auf unterschiedlichen Anzeigegeräten.

Wann ist Responsive Webdesign sinnvoll?

Grundsätzlich ist Responsive Design heute ein quasi-Standard, und somit eine klare Empfehlung für die aller meisten Webseiten. Es gibt jedoch einige spezielle Gründe und Anwendungsfälle, die Responsive Design besonders wichtig machen. An dieser Stelle möchten wir Ihnen die wichtigsten davon auflisten:

Sie haben besonders viele Seitenbesucher, die mobile Geräte nutzen

Wenn Sie viele Aufrufe durch mobile Geräte haben, müssen Sie Ihren Besuchern natürlich eine für mobile Geräte optimierte Seite präsentieren. Auch ein „Mobile First“-Ansatz könnte hier absolut Sinn machen, und ein Responsive Design kann einen Grundbestandteil dieses Konzepts bilden.

Web-Analyse Tools wie z.B. Google Analytics können Ihnen Daten zu liefern, wie hoch der Anteil an mobilen Geräten bei Ihren Seitenaufrufen ist. Wenn Sie über keine solche Daten verfügen, denken Sie an Ihre Zielgruppe: Sind die Leute, die Sie ansprechen primär Smartphone-Besitzer und viel unterwegs? Dann ist ein Responsive Design sehr wahrscheinlich eine gute Idee.

Sie planen gerade eine neue Webseite

Wenn Sie die Anschaffung einer neuen Webseite planen, oder Ihre bestehende Seite einem größeren Relaunch unterziehen möchten, ist jetzt wahrscheinlich der richtige Zeitpunkt auf Responsive Design umzusteigen.

Das gilt vermutlich auch dann, wenn Sie mit Ihrer alten Webseite nur wenige mobile Besucher erreicht haben: Denn der Trend geht eindeutig hin zu immer mehr mobiler Internetnutzung. Auch wenn Sie also bisher noch nicht viele mobile Seitenaufrufe hatten, können Sie davon ausgehen, dass sich dies in Zukunft rasant ändern könnte.

Übrigens wird eine besonders mobilfreundliche Webseite natürlich auch verstärkt mobile Besucher anziehen. Umgekehrt wird eine Webseite, die für mobile Geräte nicht geeignet ist, über kurz oder lang nur noch wenige bis gar keine mobilen Besucher mehr erreichen. Wenn Sie bisher nur wenige mobile Besucher auf Ihrer Webseite verzeichnen konnten, könnte eine unzureichende Optimierung für mobile Geräte also ein wesentlciher Grund dafür sein.

Häufige Updates

Je häufiger Sie Ihre Webseite aktualisieren oder verändern, desto mehr macht Responsive Webdesign im Vergleich zu einer eigenen mobilen Version Sinn. Hier brauchen Sie nur eine einzelne Webseite bearbeiten, anstatt zwei oder mehrere – die Zeitersparnis ist dementsprechend groß.

Auch ist mit Responsive Design sichergestellt, dass es keine Unstimmigkeiten zwischen mobiler Version und Desktopversion gibt, und Besucher (egal ob mobil oder nicht) immer die aktuellste Version Ihrer Webseite angezeigt bekommen.

Suchmaschinenoptimierung

Heute empfiehlt und unterstützt Google Responsive Design. Da es das Ziel der meisten Webseiten ist, bei Google gute Platzierungen zu erzielen, macht es Sinn, auf die Empfehlungen von Google zu hören.

Es gibt mehrere Bereiche, in denen Responsive Webdesign SEO unterstützen kann: Es gibt beispielsweise keinen Duplicate Content, und es gibt nur eine einzelne Domain, die Sie in den Rankings nach oben bringen müssen. Außerdem geht man davon aus, dass Google Webseiten im Ranking von mobilen Suchanfragen besser bewertet, wenn sie für mobile Geräte optimiert sind.

Modernität gehört zu Ihrem Image

Responsive Design ist heute die aktuellste und modernste Form des Webdesigns im Hinblick auf mobile Optimierung. Eine Webseite mit einem ansprechendem Responsive Webdesign kann zu einem modernen oder technisch fortschrittlichem Image beitragen. Wenn Sie bei Ihren Seitenbesuchern genau diesen Eindruck erwecken wollen, ist Responsive Design eine klare Empfehlung.

Usability

Responsive Design kann, richtig umgesetzt, zu einer sehr benutzerfreundlichen Webseite führen. Und Benutzerfreundlichkeit ist definitiv etwas, auf dass Sie als Webseitenbetreiber Wert legen sollten. Ihre Conversion-Rate ist sehr eng mit der Usability Ihrer Webseite verbunden: Nur wenn ein Besucher Ihre Seite problemlos bedienen kann, kann er auch über die Seite etwas kaufen, Ihnen eine Anfrage stellen etc.

Vorüberlegungen

000

Eine neue Webseite will definitiv gut geplant werden. Sie sollten nichts überstürzen, sondern sich in Ruhe Gedanken darüber machen, wie Ihre neue Webseite sein soll, und was Sie mit ihr konkret erreichen möchten. Ziehen Sie für diese Vorüberlegung wenn möglich auch Auswertungen Ihrer Web-Analyse Software zu Rate, und bedenken Sie insbesondere zwei wichtige Teilbereiche:

Ihre Zielgruppe

Je besser Sie Ihre Zielgruppe kennen, desto besser können Sie Ihre neue Webseite auf sie ausrichten. Bedenken Sie dabei unbedingt die Nutzungsgewohnheiten in Bezug auf Smartphones und Tablets.

Ihre Inhalte

Nicht nur die optische Gestaltung Ihrer Webseite ist wichtig, sondern auch die inhaltliche. Insbesondere bei mobilen Aufrufen ist es sinnvoll, dass die wichtigsten Inhalte zuerst kommen. Stellen Sie sicher, dass Besucher sofort die wichtigsten Elemente Ihrer Webseite im Blick haben, und nicht lange suchen oder scrollen müssen, um dort hin zu gelangen, wo sie wahrscheinlich hin wollen.

Umsetzung

Die beste Planung nützt jedoch nichts, wenn die Umsetzung mangelhaft war. Setzen Sie also bei der Umsetzung Ihrer neuen Webseite im Responsive Design unbedingt auf Qualität.

Grundsätzlich gibt es zwei verschiedene Ansätze bei der Umsetzung von Responsive Webdesign: Progressive Enhancement und Graceful Degradation.

Progressive Enhancement

Dieser Ansatz verfolgt das bereits erwähnte Mobile-First-Orinzip. Hier wird das Design zuerst für die kleinste Darstellung auf Smartphones erstellt. Erst danach werden Designs für die Tablet- und schließlich die Desktop-Ansicht entwickelt. Dieser Ansatz ist insbesondere für komplett neu erstellte Webseiten empfehlenswert.

Graceful Degradation

Dies ist der gegenteilige Ansatz, der meist genutzt wird, wenn man eine bestehende Seite umgestaltet oder einen Relaunch durchführt. Man geht hier von der Desktop-Ansicht als Basis aus, und verkleinert dann das Design zunächst auf die Tablet- und schließlich die Smartphone-Ebene. Naturgemäß ist hier das Nutzererlebnis auf mobilen Geräten meist nicht ganz so gut, wie beim Progressive Enhancement – dennoch kann es aber zu sehr soliden Ergebnissen führen.

Hürden

In Wirklichkeit ist die größte Hürde für das Responsive Webdesign natürlich die technische Umsetzung selbst – diese ist recht aufwendig und komplex – allerdings ist für das Erklimmen dieser Hürde der Webdesigner verantwortlich.

Als Seitenbetreiber ist eine Hürde natürlich die finanzielle Investition, die Sie tätigen müssen. Eine größere Hürde ist für die meisten jedoch das Umdenken in Bezug auf Ihre Webseite: Inhalte sollten auf das Wesentliche reduziert werden, unnötiger Ballast verschwindet. Insbesondere Webseitenbetreibern, die bereits viele Jahre eine Webseite besaßen, fällt es oft schwer sich von ihren alten Inhalten zu trennen. Lassen Sie sich also hierbei auf jeden Fall von Experten beraten.

Verschiedenen Ansichten

Zwar bietet das Responsive Design eine automatische, flüssige Anpassung verschiedenste Bildschirm- und Fenstergrößen – dennoch kann man es jedoch grob in die drei wichtigsten Ansichten kategorisieren:

Die Ansicht auf dem Smartphone

Die Smartphone-Ansicht ist natürlich jene Ansicht, mit dem wenigsten Platz. Es ist daher besonders wichtig, alle Elemente sinnvoll und geschickt anzuordnen. Meist ist in dieser Ansicht das Hauptmenü hinter einem Symbol verborgen, Teasertexte passen sich dem geringen Platz an, und alle inhalte werden über- bzw. untereinander dargestellt.

Die Ansicht auf dem Tablet

Die Tablet-Ansicht ist häufig eine Art Mittelweg aus Handy- und PC/Laptop-Ansicht. Inhalte werden hier gerne ebenfalls in einer einzelnen Spalte übereinander angezeigt – in manchen Fällen sind aber auch zweispaltige Inhaltsbereiche möglich. Auch ist bereits wesentlich mehr Platz für Bilder und Texte verfügbar.

Die Ansicht auf PCs und Laptops

In der Desktop-Ansicht steht nun natürlich sehr viel Platz zur Verfügung, der jedoch auch sinnvoll genutzt werden sollte. Häufig sieht man hier im oberen Seitenbereich ein Navigationsmenü, gefolgt von einem Slider mit einem großen Foto. Wichtige Themengebiete werden gerne in 3-4 Auswahlkästchen nebeneinander dargestellt, gefolgt von einem meistens zweispaltigen Inhaltsbereich. Wichtig ist es, trotz des vielen Platzes die Seite nicht zu überladen, und den Nutzer zu verwirren oder überanstrengen.