Design réactif vs design adaptatif
Souhaitez-vous expliquer la différence entre RWD (Responsive Web Design) et AWD (Adaptive Web Design) de manière simple?
Adaptive (AWD): pas nécessairement défini sur une grille de fluide; cible les résolutions de périphériques spécifiques (320, 768, 1024, et autres); peut avoir des largeurs définies (fixes) ou relatives (%), contrôlées par des requêtes de support.
Responsive (RWD): construit sur une grille de fluide; changera avec le navigateur, peu importe la résolution de l'écran; le contenu peut se séparer et se réaligner si besoin est.
En bref: RWD est semblable à AWD, à l'exception d'une ou deux étapes supplémentaires, afin de permettre une conception à l'épreuve du temps pour des périphériques inconnus ainsi que des périphériques connus.
Mise en page fluide
S'ajuste de manière Word-wrap à mesure que la largeur de l'écran augmente ou diminue.
Disposition adaptative
Il existe des tailles prédéfinies pour lesquelles différentes dispositions sont déclenchées. Celles-ci s'appellent points d'arrêt. La disposition adaptative peut être fluide ou complètement statique!
Mise en page réactive
Combinaison de la disposition fluide et adaptative. Fournit une expérience optimale.
Amélioration progressive
Processus consistant à respecter votre contenu (et vos utilisateurs) en appliquant les technologies de manière intelligente, couche sur couche. L’amélioration progressive ne nécessite pas de fournir la même expérience dans différents navigateurs.
Source:http://bloggingexperiment.com/archives/responsive-web-design-rwd-vs-adaptive-web-design-awd.php
«Responsive Web Design», selon Ethan Marcotte, signifie «grilles fluides, images/supports fluides et requêtes multimédia». «La conception Web adaptative», telle que je l’utilise, consiste à créer des interfaces qui s’adaptent aux capacités de l’utilisateur (en termes de de forme et de fonction). Pour moi, «conception Web adaptative» est juste un autre terme pour «amélioration progressive» dont la conception Web réactive peut (devrait souvent) faire partie intégrante, mais constitue une approche plus holistique de la conception Web dans la mesure où elle prend également en compte niveaux de balisage, CSS, JavaScript et support des technologies d'assistance.
Pour l’information, j’estime qu’il est important de faire la distinction entre «conception Web adaptative» et «présentations adaptatives», car les «présentations adaptatives» impliquent uniquement l’utilisation de requêtes multimédia, ce qui peut ne pas être fait de manière progressivement améliorée. Les mises en page adaptatives réalisées de manière mobile, en revanche, constituent très probablement une amélioration progressive et, par conséquent, un moyen de «conception adaptative de sites Web».
Une autre définition que j'ai vue décompose la situation par magie:
- Responsive - côté client - la même page est renvoyée à tous les périphériques, mais l'affichage de la page répond aux périphériques, généralement à l'aide de JavaScript et de CSS (notamment les requêtes multimédia). .
- Adaptive - côté serveur - des informations sont transmises au serveur concernant les spécifications du périphérique, et une page adaptée à ce périphérique est renvoyée. 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 sais pas comment cette définition s’accorde avec certaines des autres qui parlent davantage du flux du contenu de la page.
La différence entre la conception Web adaptative et la conception Web réactive est plus large et plus importante que les distinctions suggérées dans ce fil. La différence n’est ni l’emplacement ni la fonctionnalité du logiciel ni l’unité de mesure utilisée dans les conditions CSS.
Ni l'un ni l'autre terme (adaptatif ou réactif) n'est une marque, nous ne devons donc pas nous écarter des définitions de base des mots. En informatique, une réponse est une action, un événement ou un message généré sur un stimulus. Cette définition provient de la biologie. La dilatation des pupilles en réponse à la lumière est une conception sensible.
L'adaptation dénote une fonctionnalité bien supérieure à une simple réponse programmée. Les élèves capables de se dilater sont un design adaptatif. L'adaptation nécessite le stockage de l'historique et son application ultérieure. En biologie, l'adaptation nécessite de l'ADN pour stocker les adaptations. Dans la conception Web, les adaptations peuvent être stockées dans des cookies ou dans le profil du compte de l'utilisateur sur le serveur.
Commençons par le plus simple des deux. Une bonne définition formelle d’une conception Web réactive est la suivante:
Un conception de site Web réactif examine les caractéristiques d'affichage et réagit instantanément à l'affichage des pages d'une manière qui va au-delà des capacités de présentation automatiques intégrées du code HTML pour fournir une expérience pratique, fonctionnelle et parfaitement visible sur plusieurs conditions d'affichage.
Les appareils portables ont mis l'accent sur l'importance de cette réactivité de taille supplémentaire. Beaucoup de ces techniques de conception sont centrées sur l'ajout de conditions au CSS (feuille de style en cascade) ou via un script (tel que 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 de paramètres de style spécifiques pour un ensemble d'éléments de document (balises), identifiés par les sélecteurs CSS. *
En utilisant soit la définition du dictionnaire, soit la définition informatique commune de ADAPTIVE, la mise en page d'un document de conception Web adaptative doit varier de manière intelligente en fonction de critères plus élevés qu'un simple seuil de taille statique, critères qui sont évalués en permanence. Une bonne définition de la conception Web adaptative est la suivante:
Un conception de site Web adaptatif enregistre les modèles d'utilisation et les conditions d'utilisation et s'adapte, au fil du temps, pour fournir plus de contenu et de fonctionnalités aux utilisateurs, de façon plus rapide, plus complète ou plus individualisée.
Certaines des autres utilisations du terme ADAPTIVE en ce qui concerne la conception Web donnent trop de crédit à une autre méthodologie de conception réactive, ni plus intelligente ni plus adaptative qu’une autre.
Des schémas adaptatifs simples peuvent être programmés dans JavaScript pour faire varier le CSS en fonction des données JSON renvoyées par les appels RestFUL au serveur afin d'acquérir les statistiques de défilement et de clic utilisateur à partir d'une base de données via SQL ou NOSQL. Des analyses d’expérience utilisateur plus avancées peuvent utiliser un système basé sur des règles (telles que DRules ou Prolog), une logique floue, un réseau neuronal ou des schémas bayésiens à exécution asynchrone.
Voici un exemple de règle simple: "Triez les liens dans l'ordre, du plus fréquemment au moins fréquemment cliqué et tous les 10 affichages, placez un lien moins populaire à la deuxième place afin de vous assurer que les éléments peuvent s'écouler au fil du temps."
Les formulaires de commentaires triviaux sont des mécanismes de commentaires courants.
Un des meilleurs liens pour différencier les dispositions fluides, fixes, réactives et adaptatives. http://teamtreehouse.com/library/build-a-responsive-website/introduction-to-responsive-web-design/fixed-fluid-fluid-adaptive-and-responsive-2 . En termes simples pour les styles appliqués dans votre page html,
- Mise en page fixe: Utilisation de pixels.
- Mise en page fluide: Utilisation du pourcentage.
- Mise en page réactive: utiliser uniquement des pourcentages avec des requêtes multimédia
- Disposition adaptative: utilisation de pixels et de pourcentages avec des requêtes multimédia
simplement:
RWD (Responsive): est une structure et une conception différentes du site Web qui cible un certain périphérique. (nous parlons principalement d'un travail côté serveur car nous parlons d'une structure et de fonctionnalités différentes)
AWD (Adaptive): est une conception différente avec la même structure que celle qui cible un certain périphérique. (nous parlons principalement d'un travail côté client car nous ne parlons que d'un design différent)
Notez que les deux techniques visent à créer une expérience utilisateur différente plus conviviale pour un certain périphérique