Responsive Webdesign

Optimale Bedienung für alle Endgeräte

Responsive Webdesign – Was ist das?

Früher war es ganz einfach: Webseiten wurden mit einem Computer aufgerufen und im Bildschirm angezeigt. Doch das Internet ist mobil geworden. Auch unterwegs wird schnell gegoogelt und von jedem Ort der Welt wird mit allen möglichen mobilen Endgeräten auf das Internet zugegriffen. Das Problem: Smartphones, Tablets, Desktop-PC oder Laptop haben ganz unterschiedliche Bildschirmgrößen. Würde die Webseite nun wie früher nur mit einer möglichen Auflösung angezeigt, wäre sie z.B. mit einem Smartphone nicht mehr lesbar. Die Lösung heißt Responsive Webdesign. Denn eine mittels Responsive Webdesign gestaltete Webseite ist für alle Endgeräte optimiert. Die Webseite reagiert flexibel auf das eingesetzte Endgerät. Das bedeutet: Die Webseite wird in jedem Endgerät lesbar angezeigt. Die Eigenschaften und insbesondere die Größe des Endgerätes werden von der Webseite erkannt. Eine mittels Responsive Webdesign erstellte Webseite erkennt sogar, wie ein Tablet oder Smartphone gehalten wird und passt sich in Breite und Design automatisch an.

Durch gute Usability einer Webseite wird die Absprungrate deutlich verringert, da die User eine positive Erfahrung auf der Webseite machen. Auch werden neue Technologien seitens der Nutzer positiv wahrgenommen und unterstützen das Image eines Unternehmens als modern und kommunikativ. Ein weiterer Vorteil des Responsive Webdesign ist darin zu sehen, dass eine Responsive Webseite zur Anzeige auf allen Endgeräten nur einmal erstellt werden muss und keine zwei oder mehr Seiten nebeneinander existieren. Müssen z.B. die Inhalte einer Seite häufig verändert werden, so ist diese Arbeit nur einmal zu leisten. Es müssen also nicht mehrere unterschiedliche parallele Webseiten verändert werden. Da so auch sogenannter Duplicate Content vermieden wird, wirkt sich dies wiederum positiv auf die Ergebnisse der Suchmaschinen aus.

Warum sollte Responsive Webdesign eingesetzt werden?

Das mobile Internet hat das gute alte Festnetz längst überholt: Die meisten Zugriffe auf Webseiten erfolgen heute von unterwegs. Schnell wird etwas unterwegs gegoogelt, schnell noch einmal eine Information von einer Webseite abgerufen. Das mobile Internet wird somit immer häufiger und überall genutzt. Das bedeutet: Idealerweise sollte eine Webseite auch auf jedem Tablet oder Smartphone angezeigt werden können. Ein erster Lösungsansatz könnte sein, eine bestehende, für das Festnetz programmierte Webseite einfach noch einmal in zwei oder drei weiteren Versionen auch für verschiedene mobile Endgeräte zu erstellen. Doch diese Lösung wird kaum mit dem technischen Fortschritt mithalten. Denn das mobile Internet entwickelt sich rasend schnell und es kommen immer neue Endgeräte in immer neuen Varianten auf den Markt. Da stoßen diverse, jeweils für unterschiedliche Geräte programmierte Webseiten ganz schnell an ihre Grenzen. Bereits heute müssten Webseiten theoretisch in über 200 verschiedenen Auflösungen angezeigt werden. Das Beispiel zeigt: Hier werden dem klassischen Webdesign seine Grenzen aufgezeigt. Responsive Webdesign dagegen nutzt keine starre Auflösung, sondern passt sich automatisch an das Endgerät an. So ist eine mittels Responsive Webdesign gestaltete Webseite auch für die Zukunft gerüstet. Denn egal, was die Zukunft bringt: Eine in Responsive Webdesign erstellte Webseite wächst immer mit dem eingesetzten Browser mit. Angenehmer Nebeneffekt: Auch die Suchmaschinen bevorzugen Responsive Webdesign und belohnen auf mobilen Endgeräten lesbare Webseiten mit einem besseren Ranking in den Suchergebnissen.

Wie funktioniert Responsive Webdesign?

Eine mit Responsive Webdesign gestaltete Webseite nutzt als Basis ein flüssiges Raster, mit dessen Hilfe die Ansicht für das jeweilige Endgerät angezeigt wird. Die Breite der Seite wird dabei durch Prozentwerte festgelegt. So passt sich die Breite der in Responsive Webdesign programmierten Webseite in Relation zur Größe des jeweiligen Browserfensters an. Die einzelnen Elemente der Webseite sind ebenfalls flexibel und erkennen, welcher Platz jeweils zur Verfügung steht. Nicht nur die Webseite wächst oder schrumpft mit dem Endgerät, auch die Größe von Texten, Bildern oder Videos ändert sich entsprechend. Durch sogenannte Breakpoints im CSS-Code werden bestimmte Auflösungen definiert, an denen sich das Design ändert. Der jeweilige Gerätetyp und die spezifischen Geräteeigenschaften werden durch sogenannte Media-Queries abgefragt. So erkennt die Webseite das Endgerät und den zur Verfügung stehenden Platz. Die Webseite reagiert somit auf das Endgerät, um Größe und Anordnung der Webseite und ihrer Elemente zu variieren.

Wann ist Responsive Webdesign für eine Webseite sinnvoll?

Salopp gesagt: Responsive Webdesign ist immer sinnvoll, da immer mehr Menschen das Internet mobil nutzen und immer mehr Zugriffe auf Webseiten über mobile Endgeräte erfolgen. Da insbesondere eine Unternehmenswebseite das virtuelle Aushängeschild eines Unternehmens ist, sollte sie entsprechend professionell wirken und Hürden beim Zugriff minimieren. Denn schließlich gibt es für den berühmten ersten Eindruck keine zweite Chance. Unternehmen, die sich modern präsentieren und in den Suchmaschinen gut platziert sein möchten, kommen somit am Thema Responsive Webdesign nicht mehr vorbei. Insbesondere dann, wenn ein Relaunch einer bestehenden Webseite bevorsteht oder eine Webseite neu zu entwickeln ist, sollte bei der Gestaltung der Webseite auf Responsive Webdesign als State-of-the-Art-Technologie zurückgegriffen werden. Denn da der Trend eindeutig zu einer immer stärkeren Nutzung des mobilen Internet geht, sollte eine Webseite auch auf allen Endgeräten zuverlässig und professionell angezeigt werden. Denn wird eine Webseite auf allen Displaygrößen optimal angezeigt, werden die User länger auf der Seite verweilen.

Vorüberlegungen zur Gestaltung der Webseite

Unabhängig von der Frage des Responsive Webdesign sollte im Vorfeld der Gestaltung einer Webseite analysiert werden, welche Zielgruppen angesprochen werden sollen. Welche Inhalte soll die Webseite transportieren? Wie häufig und wie intensiv nutzen die Besucher der Webseite mobile Endgeräte? Hier hilft z.B. Google Analytics, das Nutzerverhalten zu analysieren. Auch bezüglich der Priorisierung der Seiteninhalte sind Vorüberlegungen zu treffen. Denn auf einem Smartphone werden Inhalte anders dargestellt als auf einem Desktop-PC. Die Nutzer eines mobilen Endgeräts werden die Webseite und ihre Inhalte demnach anders wahrnehmen und anders auf ihr navigieren. Es ist demnach festzulegen, welche Inhalte bei einer Optimierung für mobile Endgeräte in den Vordergrund gerückt werden sollen. Die mobile Ansicht setzt demnach ein intelligentes Abspecken der Inhalte voraus.

Vorgehensweisen bei der Umsetzung des Responsive Webdesign

Grundsätzlich lassen sich zwei mögliche Vorgehensweisen bei der Erstellung von Webseiten mittels Responsive Webdesignunterscheiden: Bei neuen Webseiten arbeitet man nach dem Mobile-First-Konzept. Bei diesem Progressive Enhancement genannten Prinzip arbeitet der Webdesigner zunächst an der auf das Wesentliche reduzierten mobilen Version der Webseite. Anschließend erfolgt eine schrittweise Verbesserung hin zur Version für Tablets und schließlich für Desktop-Endgeräte. In der Desktop-Vollversion lassen sich dann alle Elemente wie Animationen oder Bilder nutzen, die auf kleineren Endgeräten stören würden. Beim Redesign bereits bestehender Webseiten geht man dagegen den umgekehrten Weg der Graceful Degradation. Graceful Degradation bedeutet würdevolle Herabstufung: Die Webseite wird ausgehend von der Desktop-Vollversion abgespeckt, so dass sie auch für mobile Endgeräte nutzbar wird. Dabei werden Elemente der Vollversion weggelassen oder an andere Stellen verschoben, so dass die Webseite auch auf dem Smartphone übersichtlich und leicht zu bedienen ist.

Hürden beim Responsive Webdesign – Herausforderungen für den Webdesigner

Bei der Gestaltung einer Webseite mit Responsive Webdesign steht insbesondere der Webdesigner vor einigen Herausforderungen. Denn die Entwicklung einer Responsive Webseite ist zeitintensiver als die einer herkömmlichen Seite. Da die Webseite auf unterschiedlichen Endgeräten angezeigt werden soll, sind viele Tests erforderlich, um eine bestmögliche Bedienbarkeit zu gewährleisten. Auch der Seitenbetreiber steht vor einer Herausforderung: Denn er muss eine mitunter schon bestehende Webseite für die mobile Ansicht auf das Wesentliche konzentrieren. Doch mit einem erfahrenen Webdesigner an der Seite lässt sich auch diese Herausforderung meistern.