Darin unterscheiden sich beide Designmethoden besonders

Responsive Design vs. Adaptive Design: was ist der Unterschied?
6 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

Hinterlasse einen Kommentar

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

avatar
400
  Subscribe  
Benachrichtige mich zu:
trackback

[…] ausgegangen, dass jeder etwas mit dem Begriff anfangen kann. Aber kennt wirklich jeder auch den Unterschied zwischen Responsive und Adaptive Design? Gerade Einsteiger im Bereich Webdesign tun sich oft schwer damit, den Unterschied zwischen beiden […]

trackback

[…] Die typischen Muster des Flat Designs stammen aus dem Swiss Design und Minimalismus. Was uns 2010 als visuelle Revolution erschien, war also im Grunde nicht Neues – einzig der Kontext hat sich gewandelt. Ästhetische Maßstäbe, die zuvor in der Kunst und Architektur Verwendung fanden, haben Einzug in die digitale Welt gefunden. Das Flat Design verdankt seine Popularität jedoch nicht seiner visuellen Gestaltung, sondern der zeitgleichen Entwicklung des responsiven Designs. […]

trackback

[…] Layouts in Kartenform erlauben es, reichhaltige Inhaltsangebote organisiert und übersichtlich darzustellen, und sorgen auf diese Weise für eine angenehme Surferfahrung. Außerdem können Boxen ohne großen Aufwand automatisch an verschiedene Displayauflösungen angepasst werden und eignen sich daher perfekt für responsive und adaptive Designs. […]

trackback

[…] so gut wie keine Programmierkenntnisse voraussetzen. Mit ihrer Hilfe lassen sich funktionale und responsive Webseiten leicht und einfach […]

trackback

[…] für eine einheitliche Erfahrung zu sorgen, haben sich zwei Strategien etabliert: Responsive Design und Adaptive Design. Die responsive Gestaltung sorgt dafür, dass sich das gleiche Interface jeweils an seine Umgebung […]

X
- Gib Deinen Standort ein -
- or -