Darin unterscheiden sich beide Designmethoden besonders

Responsive Design vs. Adaptive Design: was ist der Unterschied?
Kommentare

An Responsive Webdesign führt heutzutage kaum ein Weg mehr vorbei und immer mehr Webdesigner nutzen einen solchen Ansatz bei der Website-Gestaltung. So ist es nur wenig verwunderlich, wenn langläufig davon ausgegangen wird, dass jeder etwas mit dem Begriff „Responsive Webdesign“ anfangen kann. Aber kennt wirklich jeder auch den Unterschied zwischen Responsive und Adaptive Design?

Genau diese Frage kommt, zumindest laut Geoff Graham, deutlich öfter zur Sprache als man zunächst annehmen würde, und gerade Einsteiger im Bereich Webdesign tun sich oft schwer damit, den Unterschied zwischen beiden Design-Möglichkeiten zu verstehen. Angesichts der Tatsache, dass es auch einige Gemeinsamkeiten zwischen Responsive und Adaptive Design gibt, ist das nur wenig verwunderlich. Grund genug also, sich noch einmal genauer mit den verschiedenen Designmöglichkeiten auseinander zu setzen – back to the basics sozusagen.

Responsive oder Adaptive: was ist der Unterschied?

Das Problem mit Begriffen wie „Adaptive Design“ ist, dass sie sich über die Jahre gewandelt haben und viele Webdesigner mittlerweile den Überblick über deren eigentliche Bedeutung verloren haben – und sie darum schlichtweg falsch nutzen. Oft wird Adaptive Design, so beschreibt es zumindest Brad Frost in seinem Artikel The Many Faces of ‘Adaptive Design‘, nämlich als Synonym für Responsive Design, aber auch als gleichbedeutend mit Progressive Enhancement, RESS oder Device Detection genutzt. Tatsächlich gibt es dabei aber durchaus Unterschiede.

Definition von Responsive und Adaptive Design im Mozilla Developer Network

Sowohl Responsive Design als auch Adaptive Design sollen dazu dienen, die User Experience über verschiedene Devices mit verschiedenen Viewportgrößen, Auflösungen, Kontexten oder Steuerungselementen zu optimieren. Im MDN werden beide Designmethoden folgendermaßen beschrieben:

Responsive design works on the principle of flexibility […]. Responsive websites use media queries, flexible grids, and responsive images to create a user experience that flexes and changes based on a multitude of factors.

Adaptive design is more like the modern definition of progressive enhancement. Instead of one flexible design, adaptive design detects the device and other features, and then provides the appropriate feature and layout based on a predefined set of viewport sizes and other characteristics.

So ist meist Responsive Design der weiter verbreitete Begriff und das Verständnis selbigens wird oft als selbstverständlich angesehen. Doch auch Adaptive Design hat im Webdesign durchaus seine Daseinsberechtigung – wenn man es denn richtig umsetzt.

Snap oder Smooth?

Grundsätzlich, so erklärt Geoff Graham, ist die größte Gemeinsamkeit von Responsive und Adaptive Design, dass beide Methoden ihr Aussehen auf Basis des Browser-Environments verändern und sich entsprechend anpassen. Dabei antwortet Responsive Design auf die Viewportgröße des Browsers und passt sich flüssig verschiedenen Browsergrößen an – unabhängig vom Device, von dem aus eine Website besucht wird. Umgesetzt wird ein solches Design mithilfe von Media Queries, mit denen definiert wird, an welchen Stellen Content umbricht.

Adaptive Design dagegen passt sich der Breite des Browsers an bestimmten Stellen an. Im Gegensatz zum Responsive Design ist das Umspringen von einer Darstellung zur anderen weniger flüssiger; zudem ist ein Adaptive Design deutlich Device-orientierter, denn je nachdem auf welchem Device oder mit welchem Browser eine Seite aufgerufen wird, variiert deren Darstellung.

Stellen Sie Ihre Fragen zu diesen oder anderen Themen unseren entwickler.de-Lesern oder beantworten Sie Fragen der anderen Leser.

Im Prinzip ist die Unterscheidung zwischen Responsive und Adaptive also eine Unterscheidung zwischen dem Einsatz von Media Queries und Device-Detection und der Art und Weise, wie der User mit der Website interagiert. Oder anders gesagt: Adaptive Design ist Device- und Feature-abhängig, während Responsive Design abhängig vom Viewport ist.

Vor allem in den Kommentaren zu Grahams Artikel wurde das ausführlich diskutiert – und zeigt damit, dass es tatsächlich noch einige Verwirrung bei der richtigen Unterscheidung zwischen Adaptive und Responvie Design gibt. Auch gibt es keine definitive Antwort darauf, welche Methode der anderen bei der Nutzung vorzuziehen ist, sondern hängt wie so oft vom Projekt und der eigenen Arbeitsweise ab.

Will man sich etwa vor allem auf ein Device konzentrieren, ist oft ein Adaptive Design besser, während Responsive Design vor allem auch eine gute Strategie ist, um eine Website soweit wie möglich zukunftssicher zu machen. Denn dass Responsive Design auch in Zukunft eine wichtige Rolle spielen wird, ist angesichts der immer neuen Devices auf dem Markt und der zunehmenden Mobile-Nutzung nicht von der Hand zu weisen.

Aufmacherbild: adaptive or responsive web design choice – a napkin doodle with a cup of espresso coffee von Shutterstock / Urheberrecht: marekuliasz

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -