Was ist Responsive Design? Webdesigner bemühen sich seit jeher um eine ansprechende Gestaltung von Websiten. Responsive Design bedeutet nun, dass die Websites nicht mehr nur ausschließlich auf einem PC-Monitor gut aussehen, und für eine bestimmte Auflösung designed sind. Vielmehr sehen die Websites auf jedem Gerät gut aus, ob das nun ein Tablet-PC, ein Smartphone, ein Notebook oder ein großer Bildschirm ist. Responsive Design passt das Design der Website an das Ausgabegerät, an das Display an. Je kleiner das Display ist desto mehr ist der Fokus auf dem Artikel und weniger auf dem Drumherum. Aber mal der Reihe nach.

Responsive Design

Responsive Design – Entstehung

Vor Jahren war es noch selbstverständlich, dass ein Besucher einer Website vor einem PC saß und auf einen mehr oder weniger großen Bildschirm schaute. Überspringen wir mal die 14 und 15-Zoll-Displays, so ergab sich in Zeiten der CRT-Monitore noch ein standard von 17- und 19-Zoll Geräten. Die Auflösung lag in der Regel bei 1024×768 und 1280×960 Pixel. Auch damals war schon ein seitliches Scrollen verpönt. Dass man bei vielen Inhalten nach unten scrollen muss ist unvermeidbar. Aber als Webdesigner konnte man also nicht viel falsch machen, wenn man die Seite auf 1024×768 optimierte. Das war der sichtbare Bereich beim Erstkontakt. Seither ist viel passiert und dank der LCD-TEchnik sind die Monitore deutlich größer geworden. Aber aug den großen Bildschirmen hat man normalerweise keine Fullsize-Fenster auf um Website zu betrachten. Das ist ergonomisch nicht optimal. Das heißt man kann mit einer maximalen Breite von 1280 Pixeln rechnen. Aber die Bildschirme sind nicht nur größer sondern auch kleiner geworden. Heutzutage ist es Gang und Gäbe mit dem Smartphone oder Tablet ins Internet zu gehen.

Responsive Design – Anpassung an die Displaygröße

Wenn man jetzt für große Bildschirme designt hat das zur Folge, dass man am Smartphone in alle Richtungen scrollen muss. Das vergrault eine zunehmende mobile Userschicht. Die Idee hinter responsive Design ist, dass man abhängig von der Bildschirmgröße ein anderes Layout zur Verfügung stellt. Während man auf einem 22-Zoll-Monitor noch seine Website in ganzer Pracht darstellen kann und zusätzliche Menüs und Boxen anbieten kann muss man sich bei kleinen Displays aufs Wesentliche beschränken. Und das ist mit responsive Design nun kein Problem mehr. Der Browser übermittelt an den Webserver die Größe des Diaplays. der webserver stellt nun entsprechend ein angepasstes Layout der Website zur Verfügung. Also je nachdem mit welchem Bildschirm man die Website betrachtet sieht man mehr oder weniger Details.

Responsive Design – Scrollen wird minimiert

Vor allem das seitliche Scrollen ist lästig, da man dann wieder nach links muss und hier den Anschluß sucht. auf kleinen displays wird beim responsive Design nun auf weniger wichtige Elemente verzichtet. Sidebars und Werbebenner werden entweder gar nicht dargestellt oder rutschen nach unten. Die Schrift wird gleich auf ein vernünftiges Maß skaliert, sodass man nicht erst zoomen muss, um dann hinterher wieder scrollen zu müssen. Responsive Design ist also eindeutig nutzerfreundlich, da er, egal mit welchem Endgerät, immer ein ansprechendes Layout bekommt.

Nutzen für den Websitebetreiber

Doch nicht nur der Besucher einer Website profitiert vom dieser Technik. Auch die Betreiber der Website profitieren, und das aus mehreren Gründen.

  • Zufriedene Besucher
  • Längere Verweildauer
  • Besseres Google-Ranking
  • Höhere Besucherzahlen
  • Höhere Einnahmen

Ein Besucher, der eine Website nur mit der Lupe auf seinem Smartphone erkennen kann, und nur über zoomen und scrollen an die Inhalte kommt wird die Seite sher schenll wieder verlassen. Wahrscheinlich macht er sich nicht einmal die Mühe die Inhalte zu lesen und sucht lieber einen anderen Anbieter, der die passenden Inhalte bereit hält. Das heißt er klickt sofort auf „zurück“ und bleibt nicht auf der Seite. Die durchschnittliche Besuchsdauer sinkt und die Bounce-Rate steigt. Die Bounce-Rate gibt an wie viele User die Website sofort wieder verlassen. Beide parameter sind Werte,d ei Google messen kann. Hierfür stehen dem Suchmaschinenbetreiber mehrere Möglichkeiten wie Analytics und Adsense zur Verfügung, die auf vielen Websites genutzt werden. Aber auch so kann Google messen wie lange es dauert bis ein User wieder auf die Suchseite zurück kehrt. Beide Signale Verweildauer und Bouncerate weret Google für die Qualität einer Website. Wenn ein Besucher nach 5 Sekunden die Seite wieder verlässt kann die Website wohl keine vernünftigen Inhalte haben. Die Folge ist ein Absinken in den Suchergebnissen bei Google. Im Umkehrschluß steigen Websites, die ihren Besuchern stets ein optimales Layout bieten, in der Google-Gunst. Wer in einer Liste weiter oben steht bekommt mehr Besucher ab und erzielt dementsprechend auch höhere Einnahmen.

Ist Responsive Design der Weg der Zukunft?

An einem responsive Design führt heutzutage kein Weg mehr vorbei. Zumal der Trend zum mobilen Internet noch lange nicht vorbei ist. Und warum sollte man sich auch einer großen Benutzergruppe verschließen? Man hat ja aus dem Grund eine Website um seine Inhalte möglichst vielen Usern zugänglich zu machen. einzig die Kosten und der Aufwand könnten jetzt noch abschrecken.

Technische Lösungen bieten responsive Design

Je nach der verwendeten Technik ist es mehr oder weniger aufwändig seinen Besuchern ein responsive design zu bieten. Viele CMS bieten jedoch heute die Möglichkeit mit einem Wechsel des Themes auch eine mobile Darstellung anzubieten. Bei WordPress beispielsweise muss man sich um nichts weiter kümmern. die gleichen Inhalte auf der Website für den Desktop-Pc werden in leicht abgewandelter Form auch auf dem Smartphone präsentiert. Man muss lediglich bei der Auswahl des Themes darauf achten, dass das Theme auch die Funktion „Responsive Design“ unterstützt. Meist kann man sich ja eine Demoversion des Themes ansehen. Websitebetreiber mit einer statischen HTML-Seite haben es da nicht so einfach, da hier die Technik nicht so schnell ausgetauscht werden kann.

Fazit:

Responsive Design und Responsive WordPress Themes sind der Weg der Zukunft. Wer neue Websites beauftragt sollte diese Technik mit integrieren lassen.