Unsere Updates halten Sie auf dem Laufenden!

Zur Übersicht
Juli 2014

Responsive- und Adaptive-Webdesign
Wo ist der Unterschied, was ist zu beachten?

Fast jedem ist der Begriff Responsive-Webdesign geläufig, aber dennoch wird dieser technisch gesehen oft falsch angewendet.

Dazu fange ich einmal von ganz vorne an. Vor einigen Jahren war es üblich, Webseiten mit nur einem Ausgabegerät anzusehen, also Beispielsweise mit einem Desktop-PC. Hier konnte man sich, was das Design anbelangt, frei entfalten. Jeder kannte die einzuhaltenden Größen, Farben und die Pixeldichte. Heutzutage ist es nicht mehr ganz so einfach. Und zwar hat sich die Anzahl der Ausgabegeräte, mit welchen wir durch die weite Welt des Internets surfen, mehr als verdoppelt. Angefangen vom Desktop-PC, über das Tablet und Smartphone, bis hin zu Kühlschränken oder Monitoren im Auto, welche die Ausgabe von Webseiten anbieten. Und das sind bei weitem nicht alle Möglichkeiten sich eine Webseite anzusehen. Dieser Trend wird sich in den kommenden Jahren immer weiter entwickeln.

Aber was bedeutet das nun für Sie als Designer? Zunächst einmal müssen Sie wissen, welche Möglichkeiten (technisch gesehen) es für die Umsetzung Ihres Designs gibt. Damit ist gemeint, wie sich Ihr erstelltes Design an die verschiedensten Bildschirmgrößen flexibel anpasst, ohne das die Webseite neu geladen werden muss.

Ein konkretes Beispiel:
Sie benutzen Ihr Smartphone und rufen mit diesem über Ihren Browser eine Webseite auf. Sie halten das Handy vertikal und drehen dies nur in die Horizontale. Ihr Smartphone wird das Design sofort an die nun breitere Darstellungsfläche anpassen, ohne wie schon oben beschrieben die Seite neu laden zu müssen.

Dies geschieht mit Hilfe eines Responsive- oder Adaptive-Webdesigns. Aber was ist der genaue Unterschied? Eine Webseite welche im Adaptive-Webdesign umgesetzt wurden ist, wird in Stufen aufgeteilt. Es werden also Stufen festgelegt, an welche sich das Design anpassen kann. Üblichen Stufen-Definitionen sind ein Design für Smartphones, ein Design für Tablets und eins für Desktop-Webseiten. Dieses wechselt dann je nach Bildschirmgröße zwischen den genannten Stufen. Leider verstehen viele Leute unter dieser Methode das Responsive-Design, wobei hier ein gravierender Unterschied festzustellen ist. Ein echtes Responsive- Webdesign ist so flexibel, dass es sich jede beliebige Art von Bildschirmen anpassen kann. Also ein adaptive Design mit unendlich vielen Stufen. Durch die genannten Unterschiede der beiden Methoden, sind auch ganz einfach Vor – und Nachteile festzustellen:

Vorteile des Adaptive-Design sind beispielsweise, dass Sie als Designer mit festgelegten Seitengrößen rechnen können. Also bleibt Platz für viel gestalterischen Freiraum. Inhalte müssen nur für klar definierte Abmessungen optimiert werden. Technisch gesehen ist die Umsetzung recht unkompliziert. Leider kommt es hierbei aber auch zu Fehldarstellungen durch den Einsatz verschiedenster Endgeräte und ist deshalb nur für bestimmte Darstellungsgrößen wirklich optimal.

Responsive-Webdesign hingegen passt sich jedem beliebigen Bildschirm an. Das ist nicht nur sehr Benutzerfreundlich, sondern macht es auch Zukunftssicher. Redakteure müssen hier nur eine Version der Webseite pflegen, was die Wartung enorm vereinfacht. Darüber hinaus entsteht ein geringerer Entwicklungsaufwand als zwei getrennte Versionen (Mobile und Desktop) zu erstellen. Eines sollte aber klar sein, wenn mobilen Besuchern ein komplett anderer Inhalt gezeigt werden soll, als den Besuchern einer Desktop-Version, dann ist Responisve-Webdesign die falsche Lösung. Für einen solchen Fall wird eine zweite Webseite benötigt, die auch über ein CMS gepflegt werden kann, nur mit einem mobilen Template.

Es ist nicht immer leicht die beste Lösung für ein anstehendes Projekt zu finden. Wir als technischer Dienstleister stehen Ihnen auf diesem Gebiet selbstverständlich gern beratend zur Seite.

Sprechen Sie uns einfach an.
Nächster Beitrag