Les premiers développeurs de sites Web n'avaient pas à s'inquiéter beaucoup de la conception de sites Web, car les utilisateurs les verraient sur des ordinateurs, lesquels affichaient une résolution d'écran fixe. Avec la révolution mobile, de plus en plus de personnes recherchent des informations sur leurs appareils mobiles - tablettes ou téléphones mobiles. Il est donc devenu nécessaire pour les développeurs de sites Web de créer un site Web qui couvre tout, des PC Windows aux appareils mobiles. Cet article explique la différence entre conception web adaptative vs responsive et vous permet de décider lequel est le meilleur pour vous et votre organisation.
Site Web adaptatif
Responsive Web Design implique un codage supplémentaire et utilise ce que l'on appelle des «grilles de fluide». Les nombres sont spécifiés en «pourcentage» plutôt qu'en nombre exact de pixels. Cela rend le même code de site Web correctement affiché sur un écran de PC et sur un écran de téléphone portable. Ainsi, quelle que soit la façon dont vous redimensionnez votre écran, le même site Web est présenté de manière facile à lire. Pour les sites Web plus petits, le texte et les images se glissent facilement dans l’espace de l’écran et s’y intègrent sans casser le site Web ni recadrer certaines parties du site Web.
Une approche de conception Web réactive rend obligatoire l’utilisation de CSS3 au lieu de CSS uniquement. Il utilise également des images évolutives et des grilles fluides un peu difficiles à coder.
Conception Web adaptative
La conception Web adaptative vise également à présenter des sites Web consultables sur des tablettes et des téléphones mobiles, en plus des écrans d’ordinateur. L'approche est un peu différente cependant. Dans la conception Web réactive, la flexibilité permettait un flux de texte libre et le dimensionnement des images pour s’adapter aux différents écrans.
Dans la conception Web adaptative, les développeurs utilisent des tailles d’écran et un code prédéterminés en conséquence. Ainsi, lorsqu'un utilisateur atterrit sur le site Web, ce dernier détermine le type d'appareil utilisé et présente le site Web conçu pour la taille d'écran de cet appareil. Le contenu peut varier d'un appareil à l'autre dans certains cas.
Par exemple, les développeurs considéreraient 1280 × 800 pixels pour les PC, 8 "pour les tablettes et 5" pour les mobiles. Le premier code de conception Web adaptative contient l'identification des écrans. S'il s'agit d'un PC, affichez la version PC du site Web. Si c'est une tablette de 8 ″, affichez la version tablette du site Web et de même, si l'appareil est un téléphone mobile, affichez la version mobile du site Web. Pour ce faire, utilisez l'instruction «IF», suivie de différentes dimensions spécifiées avec précision en pixels plutôt que sous forme de pourcentage.
Si de nouveaux appareils arrivent avec une résolution d'écran différente, les développeurs devront revenir au codage pour intégrer les nouvelles résolutions d'écran. Ainsi, la conception Web adaptative a certaines chances de cadrer sur des appareils plus petits si les développeurs ne font pas attention.
Comparé à la conception Web réactive, la conception Web adaptative est plus facile à coder et la plupart des développeurs choisissent cette dernière solution plutôt que la conception Web réactive.
Conception Web réactive vs adaptative
Les sites Web réactifs sont difficiles à coder. Le code est complexe et utilise des valeurs en pourcentage au lieu de valeurs fixes en pixels. Il faut beaucoup de concentration pour créer un site Web qui s'adapte à la taille de l'écran des appareils. Au contraire, il est plus facile de créer différents sites Web pour différents appareils, comme c'est le cas dans la conception Web adaptative. Bien que la conception Web adaptative soit plus adaptée aux développeurs, car ceux-ci créeraient différents sites Web pour différentes tailles d’appareils, il est tout de même plus simple que la conception Web réactive.
Comme il y a trop d'appareils mobiles sur le marché, les développeurs ne peuvent pas nécessairement inclure tous les types de résolutions d'écran. Cela conduit à un recadrage des sites Web sur des écrans plus petits lorsque l'approche de conception Web adaptative est utilisée.
Le chargement des sites Web adaptatifs est un peu lent, car le site Web doit d'abord déterminer quel appareil et quelle résolution d'écran est utilisé. Sur cette base, la version correspondante du site Web est chargée sur l’écran de l’appareil. Dans le cas d'une conception Web réactive, un code unique est utilisé et il est automatiquement réduit pour s'adapter aux écrans du mobile.
Vous voudrez peut-être également consulter ce message sur MSDN intitulé Pourquoi je préfère la conception Web adaptative à la conception Web réactive.
UPDATE: La page liée n'est pas disponible sur Microsoft. Vous voudrez peut-être consulter SharePoint Responsive Web Design.
