Adaptive Design vs. Responsive Web Design

Aktuelle Designtrends unter der Lupe

Wir schreiben das Jahr 2017 und mittlerweile sollte es eigentlich überall angekommen sein: Das Internet ist mobil. Selbst wenn der Breitbandausbau in Deutschland vielerorts noch zu Wünschen übrig lässt, so ist der Trend zum mobilen Surfen nicht mehr rückgängig zu machen. Immer leistungsfähigere Smartphones mit immer besseren Bildschirmen erlauben die Interaktion mit qualitativ hochwertigen Webseiten.

Die Apps sozialer Netzwerke, wie Facebook, Twitter und Co, verändern die Zugriffsstatistiken vieler Internetseiten nachhaltig. Und die Nutzer, die mithilfe eines mobilen Endgerätes auf eine Webseite stoßen, erwarten heute ein perfekt angepasstes Design. Denn eins lässt sich, trotz hochauflösender Displays nicht ändern: die Viewports von Smartphone und Desktop-PC unterscheiden sich massiv. Ein Design, das auf einem Desktop wundervoll aussieht, kann auf dem winzigen Handydisplay katastrophale Folgen für die Lesbarkeit und User Experience einer Seite haben.

Schon früh wurden deshalb besonders angepasste Mobilversionen populärer Websites erstellt. Waren die mobilen Websites vergangener Tage auch zusätzlich inhaltlich reduziert, so gibt es seit einiger Zeit zwei Programmierparadigmen, die dem Benutzer den Genuss einer vollständigen Website mit perfekt angepasstem Design ermöglichen.

Mit responsivem und adaptivem Webdesign möchten wir Ihnen zwei dieser Paradigmen vorstellen, ihre Gemeinsamkeiten und Unterschiede herausarbeiten und einen Blick in die Zukunft des Webdesigns wagen.

Was ist responsives Webdesign?

Beim responsiven Webdesign handelt es sich um ein Gestaltungsparadigma, das die Eigenschaften des jeweiligen Endgerätes berücksichtigt. Die erste Webseite, die responsive Elemente aufwies, war die Präsenz des Ingolstädter Autobauers Audi im Jahr 2001. Beherrschten bis dahin starre Seiten mit Frames, Headern und Seitenleisten das Internet, war es plötzlich möglich, Usern geräteübergreifend eine perfekte Webseite zu präsentieren.

Technische Voraussetzungen für das responsive Webdesign sind die Standards HTML5, JavaScript und CSS3. Gerade der letztgenannte Standard bietet mit den neu definierten Media Queries zahllose Möglichkeiten der Designanpassung, da mit ihrer Hilfe wichtige technische Informationen eines jeweiligen Endgerätes abgefragt werden können. Mithilfe der Media Queries aus CSS3 ist es beispielsweise möglich, die Breite und Höhe von Browserfenster und Gerät, die Bildschirmauflösung oder die Geräteorientierung in Hoch- oder Querformat abzufragen. Ausgehend von diesen Informationen kann ein zum Gerät passendes CSS ausgeliefert werden.

Dabei setzt das responsive Webdesign nicht mehr auf verschiedene Templates, die einer mobilen Webseite ein völlig anderes Aussehen als der Desktopseite verpasst. Vielmehr werden die Designelemente mithilfe der Informationen aus den Media Queries perfekt angeordnet.

Eine wichtige Leitlinie des responsiven Webdesigns ist der Gedanke des "mobile first". Nach dieser Leitlinie wird also zuerst das Aussehen einer Seite auf einem mobilen Endgerät definiert und alles andere daraus abgeleitet.

Was zeichnet adaptives Webdesign aus?

Beim adaptiven Webdesign handelt es sich ebenfalls um ein Programmierparadigma, das Benutzern plattformübergreifend eine hervorragende User Experience bieten soll. Anders als beim responsiven Design lautet der Grundgedanke des adaptiven Webdesigns jedoch "mobile separate". Im Gegensatz zum responsiven Design liegt beim adaptiven Design kein einheitliches Grunddesign vor, das an das jeweilige Endgerät angepasst wird. Vielmehr wird ein separates, perfekt optimiertes Design entwickelt, dass an die Browser der jeweiligen Endgeräte ausgeliefert wird. Dieses Vorgehen ermöglicht sogar die Erstellung verschiedener mobiler Designs, die auf die Leistungsfähigkeit unterschiedlicher Endgeräte angepasst ist.

Dabei bezieht adaptives Design wie selbstverständlich die Techniken anderer Programmierparadigmen mit ein. Angepasste Designelemente, Textcontainer variabler Größe und passende Medieneinbettung finden sich sowohl bei responsiv gestalteten Webseiten als auch bei solchen, die den Grundzügen des adaptiven Designs folgen.

Allerdings setzt das Paradigma des adaptiven Designs auf die serverseitige Beteiligung bei der Darstellung von Webseiten. Statt der Interpretation verschiedener CSS-Elemente und Skripte im Browser setzt adaptives Design darauf, dass der Server direkt nach der Anfrage die spezifischen Designinformationen sendet, um so ein möglicherweise schwächeres Endgerät nicht mit unnötiger Rechenleistung zu überfordern.

Wohin geht die Reise?

Aktuell setzen noch viele Internetseiten auf einen Designansatz, der mobilen Usern nur eine stark abgespeckte Version einer Webseite präsentiert. Doch die Entwicklung hin zu vollwertigen mobilen Webseiten scheint unaufhaltsam, schließlich waren die meisten aktuellen Relaunches bestehender Seiten darauf hin optimiert, solche Einschränkungen in der User Experience zu beseitigen.

Mit responsivem und adaptivem Layout stehen für das mobile Internet zwei Programmierparadigmen zur Verfügung, die Usern plattformübergreifend den Genuss vollwertiger und perfekt angepasster Internetseiten genießen. Während Entwickler responsiv programmierter Webseiten versuchen, eine einzige Lösung für alle Endgeräte zur Verfügung zu stellen, verfolgt der Ansatz des adaptiven Designs die Erstellung vieler unterschiedlicher Fassungen einer Webseite, von denen der Server die jeweils passende ausliefert. Gerade vor dem Hintergrund solch unterschiedlicher Endgeräte wie Laptops, Smartphones oder Smartwatches scheint der adaptive Ansatz der zukunftsweisendere zu sein, weil er weitgehend unabhängig von der technischen Ausstattung des jeweiligen Endgerätes ist.