Qu'est-ce que la conception adaptative et réactive?

Conception adaptative et conception réactive: différences clés

La conception adaptative et la conception réactive sont deux méthodes différentes de conception Web. La conception adaptative utilise une disposition statique basée sur des points d'arrêt et ne répond pas après le chargement; tandis que la conception réactive circule, en utilisant les pourcentages comme unité de mesure, ajusté en fonction de la largeur du navigateur.

La conception à choisir pour le projet dépend des exigences spécifiques. La conception adaptative offre une expérience utilisateur plus adaptée car elle permet une conception spéciale pour différents appareils, mais nécessite plus de travail. La conception réactive est plus flexible et plus facile à mettre en œuvre, mais peut ne pas fournir la même expérience sur mesure.

La mise en œuvre de la conception adaptative peut améliorer les vitesses de chargement du site Web car elle ne charge que les ressources requises par un appareil spécifique. Cependant, cela nécessite une compréhension approfondie des différents appareils utilisés par le public cible et peut augmenter le temps de développement et le coût.

le malentendu de la "conception réactive"?

Nous connaissons tous le terme «conception réactive», ce qui signifie concevoir des sites Web qui peuvent être affichés correctement sur tous les appareils et tailles d'écran. Mais certaines personnes pensent que la «conception adaptative» est plus appropriée.

sont-ils la même chose? Ou est une «conception adaptative» une autre chose? Comment comprendre la «conception des fluides»?

Cette question semble simple, mais après certaines recherches, j'ai trouvé qu'elle était plus vague que je ne le pensais, et peut même être controversée.

Il semble y avoir deux définitions de la conception adaptative:

Définition 1: La conception réactive est comme un bâton de selfie, le design adaptatif est comme un parapluie

Dans cette définition, une page Web conçue de manière réactive - comme un bâton de selfie - peut être dans divers états allant de l'étirement complet à la rétraction complète et à tout point entre

, etc. Utiliser. Bien sûr, certaines largeurs ou points d'arrêt sont plus importants que d'autres, mais chaque largeur différente produit une disposition légèrement différente.

Le design adaptatif ressemble plus à un parapluie. Il a un "statut" prédéfini - pour bloquer la pluie et hors de la portabilité. "État intermédiaire" n'a pas d'importance.

Auto-équipe avec parapluie

De nombreuses animations GIF illustrent bien ce concept.

En 2015, Geoff Graham a décrit ses opinions sur les différences entre les deux, affirmant que les dispositions réactives s'adaptent à la largeur du navigateur à tout moment donné , tandis que la "mise en page adaptative" uniquement à Point d'arrêt spécifique

pour s'adapter à la largeur du navigateur.

Geoff dit que la conception réactive est basée sur le pourcentage (c'est-à-dire la même chose que la conception du fluide), tandis que la conception adaptative est basée sur des unités fixes de mesure

. Les deux sont alimentés par les requêtes médiatiques CSS.

Définition 2: La conception adaptative lui-même répond à l'environnement de l'appareil (pas seulement l'écran)

Cependant, comme vous pouvez le voir dans les commentaires ci-dessous l'article de Geoff, tout le monde n'est pas d'accord avec cette définition.

Voici les meilleurs commentaires:

"La conception réactive peut être fluide ou fixe, et la conception adaptative peut être également. La conception de l'auto-adaptation est conçue spécifiquement pour s'adapter à l'environnement du navigateur et peut considérer ou non la taille actuelle du navigateur. "⏤ Zzzzbov.

Selon la définition de ZZZZBOV, la conception adaptative est alimentée par JavaScript, qui réagit autant au type de l'appareil et est également liée à la taille de l'écran. Par exemple, une tablette peut avoir un écran haute résolution, mais nécessite une cible tactile plus grande. Le téléphone peut nécessiter un système de navigation différent.

De nombreuses personnes célèbres ont exprimé leurs opinions, d'Uxpin à Mozilla, mais cela semble toujours ouvert.

mon opinion

Utilisons les lampes de bureau réglables comme un exemple du monde réel: une conception réactive est lorsque vous tournez l'interrupteur, les lampes de bureau répondent à

et allumez la lumière. La conception adaptative est que vous pouvez ajuster / adapter la lampe de table pour une meilleure visualisation. Si le site Web ne répond pas à votre interaction, il n'est pas très réactif s'il ne peut pas s'adapter à son environnement (c'est-à-dire les écrans de périphérique), il n'est pas très adaptatif. Ces deux-là affecteront sérieusement l'expérience utilisateur.

Pourquoi la conception réactive n'est pas une véritable conception réactive

La réponse est le résultat d'une autre action, par exemple, si un bouton de site Web modifie sa couleur d'arrière-plan lorsque l'utilisateur plane dessus - l'action est en train de planer et que la réponse est la couleur de la couleur d'arrière-plan.

Habituellement, lorsque nous disons qu'un site Web est réactif, nous voulons dire qu'il s'intègre dans n'importe quelle taille d'écran sur n'importe quel appareil, mais en réalité, cela devrait signifier qu'il répond aux interactions utilisateur. Les raisons sont les suivantes:

Les utilisateurs ne peuvent pas redimensionner les navigateurs sur leurs appareils mobiles. Bien que les utilisateurs puissent modifier la taille du navigateur sur leurs ordinateurs de bureau, ils n'ont généralement pas besoin de le faire pour interagir avec le site Web - ce n'est pas une interaction utilisateur normale. Bien sûr, nos concepteurs Web redimensionnent souvent leurs navigateurs pour tester le site Web, mais ce n'est pas une action normale pour les utilisateurs.

Pourquoi je pense que la "conception adaptative" est plus précise

Étant donné que les tailles d'écran sont souvent utilisées dans leur état par défaut (dans un sens, vous ne pouvez pas ou ne pas avoir besoin de les redimensionner), le terme "conception adaptative" peut être plus approprié. Un site Web (au moins un site Web bien conçu) modifiera sa mise en page pour s'adapter à l'appareil de l'utilisateur; La conception adaptative peut également décrire comment nous optimisons le temps de chargement et les performances perçues des petits appareils portables. Alors, qu'est-ce que la conception du fluide?

Au début des années 2000, le plus grand débat a été «la disposition fixe par rapport à la disposition des fluides». La disposition de conception du fluide utilise des paramètres pour pourcentage pour s'adapter au cadre du navigateur. La disposition fixe est définie comme une seule disposition déterminée par la largeur des pixels. Aucun d'eux n'est idéal. La disposition fixe a fière allure sur le bon écran, mais elle ne fonctionne pas sur un petit moniteur. La disposition du fluide est plus flexible, mais semble mince sur un écran large. La conception réactive est la réponse directe d'Ethan Marcotte à ces puzzles de conception - pas des jeux de mots. Le RWD «rétractable» classique est comme une version mature de la conception du fluide - s'étire pour remplir la fenêtre, mais se réorganiser si nécessaire. La définition de Geoff de la conception adaptative - bien que de nombreuses personnes ne soient pas d'accord - comme la «version mature du design fixe» - n'est pas une seule disposition fixe, mais 3, 4 dispositions ou plus.

Conclusion

C'est ce que je pense de la conception réactive et de la conception adaptative. Après avoir lu cet article, changerez-vous la façon dont vous parlez de ces termes ou continuerez à utiliser un design réactif comme un moyen d'adapter votre site Web à plusieurs tailles d'écran un peu plus facilement?

Avez-vous déjà utilisé le terme "design adaptatif" mais que vous avez seulement un look vierge?

Je voudrais savoir, faites-le moi savoir dans les commentaires ci-dessous!

(Ne discutez pas!)

FAQS pour la conception adaptative et réactive (FAQ)

Quelles sont les principales différences entre la conception adaptative et la conception réactive?

La principale différence entre la conception adaptative et réactive est leur approche de l'expérience utilisateur. Les conceptions adaptatives utilisent des dispositions statiques basées sur des points d'arrêt, et une fois initialement chargés, ils ne répondent pas. La conception réactive, en revanche, s'écoule, qui utilise des pourcentages au lieu de pixels comme unités de mesure pour ajuster en fonction de la largeur du navigateur.

La conception adaptative est-elle meilleure que la conception réactive?

Le choix de la conception adaptative et de la conception réactive dépend des besoins spécifiques du projet. La conception adaptative peut fournir une expérience utilisateur plus sur mesure car elle permet la création de conceptions spécialisées pour différents appareils. Cependant, cela nécessite plus de travail car vous devez créer une conception pour chaque taille d'écran. La conception réactive, en revanche, est plus flexible et plus facile à mettre en œuvre, mais elle peut ne pas offrir la même expérience sur mesure que la conception adaptative.

Comment la conception adaptative affecte-t-elle la vitesse de chargement d'un site Web?

La conception adaptative peut augmenter la vitesse de chargement du site Web. En effet, il ne charge que les ressources requises par un appareil particulier, ce qui peut réduire la quantité de données qui doivent être téléchargées.

Quels sont les défis de la mise en œuvre de la conception adaptative?

La mise en œuvre de la conception adaptative peut être plus complexe et longue que la conception réactive. Il nécessite une compréhension approfondie des différents appareils utilisés par le public cible et créant une conception spécifique pour chaque appareil. Cela augmente le temps de développement et le coût.

La conception adaptative peut-elle améliorer l'expérience utilisateur?

Oui, la conception adaptative peut considérablement améliorer l'expérience utilisateur. En créant des conceptions adaptées à un appareil spécifique, vous pouvez vous assurer que votre contenu est affiché sur chaque appareil de manière optimale. Cela peut conduire à une expérience utilisateur plus agréable et plus efficace.

La conception adaptative est-elle adaptée à tous les types de sites Web?

Bien que la conception adaptative puisse être bénéfique pour de nombreux types de sites Web, ce n'est peut-être pas le meilleur choix pour tous les sites Web. Les sites Web qui nécessitent des appareils hautement personnalisés pour différents appareils peuvent bénéficier d'une conception adaptative. Cependant, pour les sites Web plus simples, la conception réactive peut être une option plus rentable.

Comment la conception adaptative affecte-t-elle le référencement?

La conception adaptative peut avoir un impact positif sur le référencement. En offrant une meilleure expérience utilisateur et des temps de chargement plus rapides, cela peut améliorer le classement de votre site Web dans les résultats des moteurs de recherche. Cependant, il est important de s'assurer que toutes les versions de votre site Web ont le même contenu et les mêmes balises de méta pour éviter tout problème de référencement potentiel.

Quelles compétences sont nécessaires pour mettre en œuvre la conception adaptative?

La mise en œuvre de la conception adaptative nécessite une compréhension approfondie des principes de la conception Web, ainsi que de la connaissance de HTML, CSS et JavaScript. Il doit également être en mesure de concevoir pour différents appareils et tailles d'écran et comprendre comment optimiser les ressources pour différents appareils.

La conception adaptative peut-elle être utilisée avec une conception réactive?

Oui, la conception adaptative et la conception réactive peuvent être utilisées ensemble. Cette approche est appelée «RESS» (conception réactive avec des composants côté serveur), qui combine la flexibilité de la conception réactive avec une optimisation spécifique au périphérique pour la conception adaptative.

Quel est l'avenir de la conception adaptative?

Alors que le nombre de dispositifs et de tailles d'écran différents continue de croître, la demande de conception adaptative peut augmenter. Cependant, à mesure que la technologie progresse, de nouvelles approches de conception qui combinent les meilleurs aspects de la conception adaptative et de la conception réactive peuvent émerger.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!