wake-up-neo.net

Responsive Design vs. Adaptive Design

Würden Sie den Unterschied zwischen RWD (Responsive Web Design) und AWD (Adaptive Web Design) auf einfache Weise erklären?

23
hd.

Adaptiv (AWD): Nicht unbedingt in einem Fluidnetz eingestellt; zielt auf bestimmte Geräteauflösungen ab (320, 768, 1024 usw.); können festgelegte Breiten (fest) oder relative Breiten (%) haben, gesteuert durch Medienabfragen.

Responsive (RWD): Aufbauend auf einem Flüssigkeitsnetz; ändert sich mit dem Browser, unabhängig von der Bildschirmauflösung; Inhalte können sich auflösen und bei Bedarf neu ausrichten.

Kurz gesagt: RWD ist wie AWD, mit der Ausnahme, dass ein oder zwei Schritte weitergearbeitet werden, um ein zukunftssicheres Design für unbekannte und bekannte Geräte zu ermöglichen.

28
lockedown

Fluid Layout

Passt in einem Zeilenumbruch an, wenn die Bildschirmbreite vergrößert oder verkleinert wird.

Adaptives Layout

Es gibt vordefinierte Größen, bei denen unterschiedliche Layouts ausgelöst werden. Diese werden als Haltepunkte bezeichnet. Adaptives Layout kann entweder flüssig oder vollständig statisch sein!

Ansprechendes Layout

Kombination aus flüssigem und adaptivem Layout. Bietet eine optimale Erfahrung.

Progressive Enhancement

Prozess der Anerkennung Ihrer Inhalte (und Ihrer Benutzer) durch intelligente Anwendung von Technologien, Schicht für Schicht . Für die fortschreitende Verbesserung ist es nicht erforderlich, dass Sie dieselbe Erfahrung in verschiedenen Browsern bereitstellen.

Quelle:http://bloggingexperiment.com/archives/responsive-web-design-rwd-vs-adaptive-web-design-awd.php

8
honzajde

Aus meinem Blogbeitrag zum Thema :

"Responsive Webdesign", wie es von Ethan Marcotte geprägt wurde, bedeutet "flüssige Gitter, flüssige Bilder/Medien und Medienabfragen". "Adaptives Webdesign", wie ich es verwende, bedeutet, Schnittstellen zu erstellen, die sich an die Fähigkeiten des Benutzers anpassen (in Begriffen Form und Funktion). Für mich ist „adaptives Webdesign“ nur ein weiterer Begriff für „progressive Verbesserung“, bei dem responsives Webdesign ein integraler Bestandteil sein kann (und oft auch sollte), aber ein ganzheitlicherer Ansatz für das Webdesign ist, indem es auch Variationen berücksichtigt Unterstützung für Markups, CSS, JavaScript und unterstützende Technologien.

Ich halte es für wichtig, zwischen „adaptivem Webdesign“ und „adaptiven Layouts“ zu unterscheiden, da „adaptive Layouts“ nur die Verwendung von Medienabfragen implizieren, die möglicherweise nicht schrittweise verbessert werden können. Adaptive Layouts, die zuerst auf mobile Weise erstellt werden, sind jedoch höchstwahrscheinlich fortschreitende Verbesserungen und damit ein Mittel für „adaptives Webdesign“.

7
Aaron Gustafson

Eine alternative Definition, die ich gesehen habe, unterteilt sie nach dem Ort, an dem die Magie geschieht:

  • Responsive - clientseitig - Die gleiche Seite wird an alle Geräte zurückgegeben, die Anzeige der Seite reagiert jedoch auf die Geräte, normalerweise mit JavaScript und CSS (insbesondere Medienabfragen). .
  • Adaptive - serverseitig - Informationen zu den Gerätespezifikationen werden an den Server übergeben, und eine an dieses Gerät angepasste Seite wird zurückgegeben. Dies würde einige der gleichen JavaScript/CSS-Techniken wie RWD verwenden, aber einige der Inhalte können unterschiedlich/kleiner sein.

Quelle: http://www.huffingtonpost.com/garrett-goodman/adaptive-design_b_2344569.html

Ich bin nicht sicher, wie diese Definition mit einigen anderen Definitionen zusammenpasst, die mehr über den Fluss des Seiteninhalts sprechen.

6
Luke

Der Unterschied zwischen adaptivem Webdesign und responsivem Webdesign ist breiter und wichtiger als die in diesem Thread vorgeschlagenen Unterscheidungen. Der Unterschied hängt weder davon ab, wo sich die Softwarefunktionalität befindet, noch welche Maßeinheit unter CSS-Bedingungen verwendet wird.

Keiner der Begriffe (adaptiv oder responsiv) ist eine Marke, daher sollten wir nicht von den grundlegenden Definitionen der Wörter abweichen. In der Informatik ist eine Antwort eine Aktion, ein Ereignis oder eine Nachricht, die auf einen bestimmten Anreiz hin generiert wird. Diese Definition stammt aus der Biologie. Die Erweiterung der Pupillen als Reaktion auf Licht ist ein responsives Design.

Anpassung bedeutet eine viel höhere Funktionalität als nur eine programmierte Reaktion. Die ENTWICKLUNGSFÄHIGKEIT von sich erweiternden Schülern ist ein adaptives Design. Anpassung erfordert die Speicherung der Geschichte und deren spätere Anwendung. In der Biologie erfordert die Anpassung DNA, um Anpassungen zu speichern. Im Webdesign können Anpassungen in Cookies oder im Kontoprofil des Benutzers auf dem Server gespeichert werden.

Beginnen wir mit dem Einfacheren von beiden. Eine gute formale Definition eines responsiven Webdesigns ist:

Ein reaktionsschnelles Webdesign überprüft die Anzeigeeigenschaften und reagiert sofort auf die Anzeige von Seiten auf eine Weise, die über die integrierten automatischen Layoutfunktionen von HTML hinausgeht, um ein komfortables, funktionales und maximal sichtbares Erlebnis unter verschiedenen Anzeigebedingungen zu bieten .

Tragbare Geräte haben die Bedeutung dieser zusätzlichen Größenempfindlichkeit erhöht. Viele solcher Entwurfstechniken konzentrieren sich auf das Hinzufügen von Bedingungen zum CSS (Cascading Style Sheet oder zu Cascading Stylesheets) oder über Skripte (wie JavaScript). Jede Bedingung, die auf Anzeigeeigenschaften basiert, verbessert die allgemeine Benutzerfreundlichkeit, indem die Werte bestimmter Stilparameter für eine Reihe von Dokumentelementen (Tags) gesteuert werden, die von CSS-Selektoren identifiziert werden. *

Bei Verwendung der Wörterbuchdefinition oder der allgemeinen Informatikdefinition von ADAPTIVE muss das Dokumentlayout eines adaptiven Webdesigns auf der Grundlage einiger höherer Kriterien als einer einfachen statischen Größenschwelle intelligent variieren. Diese Kriterien werden kontinuierlich ausgewertet. Eine gute Definition eines adaptiven Webdesigns ist:

Ein adaptives Webdesign zeichnet Nutzungsmuster und Nutzungsbedingungen auf und passt sich im Laufe der Zeit an, um den Nutzern Inhalte und Funktionen schneller, umfassender oder individueller bereitzustellen.

Einige der anderen Verwendungen des Begriffs ADAPTIVE in Bezug auf Webdesign sprechen zu viel für eine andere Responsive-Design-Methodik, die weder intelligenter noch anpassungsfähiger ist als jede andere.

Einfache adaptive Schemata können in JavaScript programmiert werden, um CSS basierend auf JSON-Daten zu variieren, die von RestFUL-Aufrufen an den Server zurückgegeben werden, um Benutzer-Scroll-and-Click-Statistiken über SQL oder NOSQL aus einer Datenbank abzurufen. Für die Analyse der erweiterten Benutzererfahrung wird möglicherweise ein regelbasiertes System (z. B. DRules oder Prolog) oder Fuzzy-Logik, neuronales Netz oder Bayes'sche Schemata verwendet, die asynchron ausgeführt werden.

Ein Beispiel für eine einfache Regel lautet: "Sortieren Sie die Links in der Reihenfolge der häufigsten bis seltensten Klicks, und setzen Sie alle 10 Anzeigen einen weniger beliebten Link an die zweite Stelle, um sicherzustellen, dass die Elemente im Laufe der Zeit auslaufen können."

Triviale Feedback-Formulare sind gängige Feedback-Mechanismen.

4
Douglas Daseeco

Eine der besten Verbindungen, um zwischen fließendem, festem, ansprechendem und anpassungsfähigem Layout zu unterscheiden. http://teamtreehouse.com/library/build-a-responsive-website/introduction-to-responsive-web-design/fixed-fluid-adaptive-and-responsive-2 . In einfachen Worten für die Stile in Ihrer HTML-Seite angewendet,

  1. Festes Layout: Verwendung von Pixeln.
  2. Fluid Layout: Mit Prozentsatz.
  3. Responsive Layout: Verwenden Sie bei Medienabfragen nur Prozentsätze
  4. Adaptives Layout: Verwenden von Pixeln und Prozentsätzen bei Medienabfragen
1
vinod

einfach:

RWD (Responsive): ist eine andere Struktur und Gestaltung der Website, die auf ein bestimmtes Gerät abzielt. (Hauptsächlich handelt es sich um eine serverseitige Arbeit, da es sich um eine unterschiedliche Struktur und Funktionalität handelt.)

AWD (Adaptive): ist ein anderes Design mit derselben Struktur, die auf ein bestimmtes Gerät abzielt. (hauptsächlich handelt es sich um eine clientseitige Arbeit, da es sich nur um ein anderes Design handelt.)

Beachten Sie, dass beide Techniken darauf abzielen, ein für ein bestimmtes Gerät benutzerfreundlicheres Erlebnis zu schaffen

0