La conception réactive par opposition à la conception adaptative
expliqueriez-vous la différence entre RWD (Responsive Web Design) et AWD (Adaptive Web Design) d'une manière simple?
9 réponses
adaptatif (AWD): pas nécessairement réglé sur une grille fluide; cible des résolutions spécifiques de l'appareil (320, 768, 1024, et.al.); peut avoir défini des largeurs (fixes) ou des largeurs relatives ( % ), contrôlées par des requêtes médias.
Responsive (RWD): construit sur une grille fluide; va changer avec le navigateur, quelle que soit la résolution de l'écran; le contenu peut se briser et réaligner si besoin est.
en bref: RWD est comme AWD, sauf pris un pas ou deux plus loin, afin de futurs design de preuve pour les périphériques inconnus ainsi que des dispositifs connus.
Liquide De Mise En Page
Règle word-wrap mode comme la largeur de l'écran est augmentée ou réduire.
Agencement Adaptatif
il y a des tailles prédéfinies où différentes mises en page sont déclenchées. Ceux-ci sont appelés points d'arrêt. La disposition adaptative peut être soit fluide ou complètement statique!
Layout Responsive
Combinaison de Aménagement fluide et adaptatif. Offre une expérience optimale.
Amélioration Progressive
processus pour honorer votre contenu (et vos utilisateurs) en appliquant des technologies intelligentes,calque-sur-couche. Amélioration Progressive ne nécessite pas que vous fournissez la même expérience dans différents navigateur.
Source: http://bloggingexperiment.com/archives/responsive-web-design-rwd-vs-adaptive-web-design-awd.php
mon billet de blog sur le sujet:
"Responsive web design", comme inventé par Ethan Marcotte, signifie "fluide" grilles, fluidité des images/médias et les media queries.""Adaptive web design", comme Je l'utilise, est sur la création d'interfaces qui s'adaptent à l'utilisateur capacités (en termes de forme et de fonction). Pour moi, "adaptive web design" est juste un autre terme pour "amélioration progressive" de qui responsive Web design Peut (devrait souvent) être une partie intégrante partie, mais est une approche plus holistique de la conception web en ce qu'il prend également compte tenu des différents niveaux de balisage, CSS, JavaScript et d'assistance support de la technologie.
pour information, je pense qu'il est important de faire une distinction entre la "conception adaptative du web" et la "mise en page adaptative" parce que layouts " implique seulement l'utilisation de requêtes médias, ce qui ne peut pas être fait progressivement améliorée. Dispositions d'adaptation réalisé dans un mobile-première manière, cependant, sont très probablement amélioration progressive et, par conséquent, un moyen de "conception adaptative web."
une autre définition que j'ai vue le décompose par où la magie se produit:
- Responsive-- côté client -- la même page est retournée à tous les périphériques, mais l'affichage de la page répond aux périphériques, généralement en utilisant JavaScript et CSS (en particulier les requêtes médias).
- adaptative-- côté serveur -- information est transmise au serveur sur l'appareil et spécifications, et une page adaptée à cet appareil est retourné. Cela utiliserait certaines des mêmes techniques JavaScript/CSS que RWD, mais certains contenus pourraient être différents / plus petits.
Source: http://www.huffingtonpost.com/garrett-goodman/adaptive-design_b_2344569.html
Je ne suis pas certain de la concordance entre cette définition et certaines autres qui parlent davantage du flux du contenu de la page.
différence entre adaptive web design et responsive web design est plus large et plus important que les distinctions qui ont été suggérées dans ce fil. La différence n'est pas une question de savoir où réside la fonctionnalité du logiciel ni quelle unité de mesure est utilisée dans les conditions CSS.
aucun terme (adaptatif ou réactif) n'est une marque, donc nous ne devrions pas dévier des définitions de base des mots. En informatique, une intervention est une action, un événement, ou un message généré par un stimulus. Cette définition provient de la biologie. La dilatation des pupilles en réponse à la lumière est une conception réactive.
L'Adaptation dénote une fonctionnalité beaucoup plus élevée qu'une simple réponse programmée. La capacité de développer des pupilles qui peuvent se dilater est une conception adaptative. L'Adaptation exige le stockage de l'histoire et son application ultérieure. En biologie, l'adaptation nécessite de l'ADN pour emmagasiner les adaptations. Dans la conception web, les adaptations pourraient être stockés dans des cookies ou le profil de compte de l'utilisateur sur le serveur.
commençons par le plus simple des deux. Voici une bonne définition formelle d'un design web responsive:
responsive web design examine les caractéristiques d'affichage et répond instantanément à l'affichage des pages d'une manière qui va au-delà des capacités de mise en page automatique intégrées de HTML pour fournir une expérience pratique, fonctionnelle, et maximalement visible à travers conditions d'affichage variées.
les appareils portatifs ont fait ressortir l'importance de cette sensibilité additionnelle à la taille. Bon nombre de ces techniques de conception sont axées sur l'ajout de conditions à la CSS (feuille ou feuille de style en cascade) ou par le biais de scripts (comme JavaScript). Chaque condition basée sur les caractéristiques d'affichage améliore l'expérience globale de l'utilisateur en contrôlant les valeurs des paramètres de style spécifiques pour un ensemble d'éléments de document (tags), identifiés par CSS sélecteur.*
à l'aide de la définition du dictionnaire ou de la définition courante de L'informatique de L'adaptatif, la mise en page d'un document de conception web adaptative doit varier intelligemment en fonction de certains critères plus élevés qu'un simple seuil de taille statique, critères qui sont évalués de façon continue. Voici une bonne définition d'un design web adaptatif:
design web adaptatif enregistre les modèles d'utilisation et des conditions d'utilisation et s'adapte, au fil du temps, pour plus rapidement, de façon globale, ou individualistically fournir aux utilisateurs avec le contenu et la fonctionnalité.
certains des autres usages du terme adaptatif en ce qui concerne la conception web donne trop de crédit à ce qui est simplement une autre méthodologie de conception réactive, pas plus intelligent ou plus adaptatif que n'importe quel autre.
des schémas adaptatifs simples peuvent être programmés dans JavaScript pour faire varier CSS basé sur les données JSON retournées des appels reposants au serveur pour acquérir le défilement de l'utilisateur et cliquer stats à partir d'une base de données via SQL ou NOSQL. L'analyse plus avancée de l'expérience utilisateur peut utiliser un système basé sur des règles (comme DRules ou Prolog) ou une logique floue, un réseau neuronal ou des schémas bayésiens qui fonctionnent de manière asynchrone.
un exemple d'une règle simple est, "trier les liens dans l'ordre de la plus fréquemment à la moins fréquemment cliqué et tous les 10 affichages mettent un lien moins populaire à la deuxième place pour s'assurer que les éléments peuvent glisser vers le haut sur temps."
les formulaires de rétroaction banale sont des mécanismes de rétroaction courants.
un des meilleurs liens pour différencier entre fluide, fixe, responsive et adaptative layout. http://teamtreehouse.com/library/build-a-responsive-website/introduction-to-responsive-web-design/fixed-fluid-adaptive-and-responsive-2. En mots simples pour les styles appliqués dans votre page html,
- mise en page fixe : utilisant des pixels.
- mise en page Fluide : à l'Aide de pourcentage.
- mise en page réactive: en utilisant seulement des pourcentages avec des médias les requêtes
- mise en page adaptative : utilisant à la fois des pixels et des pourcentages avec des requêtes média
simplement:
RWD (Responsive): est une structure et une conception différente du site web qui cible un certain appareil. (principalement nous parlons d'un travail côté serveur parce que nous parlons de structure différente et de fonctionnalité différente)
AWD (Adaptive): est une conception différente avec la même structure qui cible un certain dispositif. (nous parlons principalement d'un travail côté client parce que nous parlons de conception différente uniquement)
notez que les deux techniques visent à créer une expérience utilisateur plus conviviale pour un certain appareil
pour en savoir plus sur RWD (Responsive) et AWD (Adaptive), consultez le lien