Design réactif versus design adaptatif : comment choisir entre les deux ?

Le design réactif est de plus en plus promu comme la norme d’or pour créer la nouvelle gamme d’applications Web. Cependant, en raison des complications résultant de l’utilisation du même code dans chaque version du site Web, une alternative à la technologie RWD connue sous le nom de livraison ou de conception adaptative est ce vers quoi les marques se tournent ces jours-ci. Comment choisiriez-vous entre les deux? Cet article est à peu près le même.

La conception Web réactive n’est plus une nouveauté. La fraternité des concepteurs de sites Web, la communauté technologique et même le maniaque du Web avoué savent désormais que le design réactif est la voie à suivre. Le smartphone, l’appareil qui change la donne, a vraiment forcé les concepteurs Web à créer des sites Web capables de répondre et de s’adapter automatiquement à n’importe quel appareil avec n’importe quelle taille d’écran. Ainsi, la conception Web réactive est née. Avec les techniques de RWD, la mise en page du site peut être optimisée pour s’adapter à la taille de l’écran de l’appareil sur lequel il est visualisé. Alors d’où vient le discours sur la conception adaptative ?

Pour les non-initiés, les deux mots à la mode peuvent sembler être un terme interchangeable pour la même technique. Cependant, comme de plus en plus de trafic provient d’appareils mobiles, il est devenu de plus en plus important pour les éditeurs de connaître les distinctions entre les deux et de choisir le meilleur pour leur site. Par ailleurs, une enquête Millenial Media et comScore réalisée aux États-Unis révèle que 56% du contenu en ligne est désormais consommé via les smartphones et les tablettes tandis que les 44% restants sont consommés via les ordinateurs de bureau. Et le changement continue de s’accélérer. Voilà qui règle une fois pour toutes l’importance d’avoir un site bien adapté aux audiences mobiles. Revenons maintenant à la question: comment choisir entre les deux ?

Quelle est la différence?

La façon la plus simple de choisir une option parmi les deux est de comprendre les différences et les avantages que l’une offre par rapport à l’autre.

Alors que la conception réactive est une approche côté client où la page entière est livrée au client (navigateur de l’appareil), la conception adaptative est généralement côté serveur, où le serveur détecte d’abord les attributs de l’appareil généralement via des plugins côté serveur ou un utilisateur personnalisé. détection d’agent, puis charge une version du site optimisée pour ses dimensions et ses fonctionnalités natives. Ainsi, la diffusion adaptative utilise des mises en page prédéfinies qui ont été créées pour une variété de tailles d’écran. Lorsqu’une taille d’écran particulière est détectée, la mise en page correspondante est activée et correspond à la feuille de style. Dans la conception adaptative, les mises en page changent en fonction des points d’arrêt.

Il existe également une autre alternative, une approche adaptative côté client où un JavaScript étendu est utilisé pour doter les sites Web de fonctionnalités avancées et de personnalisation. Un peu similaire à la conception Web réactive, ce type de livraison fonctionne côté client ou dans le navigateur de l’utilisateur, qui détecte différents appareils et charge le modèle correspondant pour l’utilisateur. L’avantage ici est qu’il ne nécessite qu’un seul ensemble de code HTML et JavaScript à utiliser sur tous les appareils, de sorte que la mise en œuvre des modifications est beaucoup plus facile.

Réactif ou adaptatif : lequel choisir ?

L’un des grands avantages de la conception réactive qui l’a propulsé à la célébrité instantanée était qu’une seule base de code servait bien à la fois à l’utilisateur de bureau et à l’utilisateur mobile. Cela a facilité la vie d’un développeur car il a presque éliminé l’expérience cauchemardesque d’avoir à s’occuper de plusieurs versions de code pour différents types d’appareils. Cependant, le même code pour les deux appareils signifie que le site Web lancé sur smartphone aura la même taille et la même complexité que la version de bureau, qui est le principal responsable du comportement étrange et gonflé des sites Web réactifs sur les appareils mobiles.

D’autre part, en utilisant une approche adaptative, un serveur a la liberté de choisir comment rendre les pages de manière optimale, en supprimant ou en ajoutant des fonctionnalités à la volée, sur la base de l’appareil détecté et des informations de l’utilisateur.

Les avantages peuvent être résumés comme suit :

• Les développeurs n’auraient pas à recréer le site Web à partir de zéro comme il le faudrait pour un site réactif. La plupart des sites Web deviennent trop complexes au fil du temps, une fonctionnalité étant ajoutée au-dessus de l’autre et gratter tous les efforts n’est pas une option viable. La phase de conception et de test est particulièrement délicate car il est difficile de personnaliser l’expérience utilisateur pour chaque appareil ou contexte.
• Les sites Web adaptatifs sont plus rapides et parfois plus conviviaux. La raison est assez simple. Comme la diffusion adaptative fonctionne en transférant uniquement les actifs spécifiques à l’appareil, les images et le contenu multimédia peuvent être optimisés à la volée en fonction de la résolution et de la taille de l’affichage.

L’adaptatif côté serveur propose des modèles distincts pour chaque appareil, permettant un plus grand niveau de personnalisation ainsi qu’un chargement plus rapide des pages Web. De plus, il est compatible avec différents plugins côté serveur disponibles pour les systèmes de gestion de contenu et les systèmes de commerce électronique populaires tels que Magento. Cependant, cette approche nécessite des modifications considérables des systèmes dorsaux, et si vous avez un budget limité, cela pourrait s’avérer un peu pénible. Vous devrez gérer plusieurs modèles, ce qui se traduira par une augmentation des coûts de maintenance. Des problèmes de performances peuvent également survenir lorsque les serveurs sont soumis à une charge importante.

Conclusion

Les sites Web riches en contenu où il n’y a pas beaucoup de différence dans l’intention de l’utilisateur entre les utilisateurs de bureau et les utilisateurs mobiles optent généralement pour une conception réactive. Cependant, si vous concevez un site Web où l’intention de l’utilisateur mobile est très différente de celle de votre public cible de bureau, la conception adaptative sera un meilleur pari. L’exemple est celui des sites de commerce électronique.

En outre, si un webmaster choisit la conception adaptative, il peut optimiser davantage l’expérience utilisateur en tirant parti des fonctionnalités supplémentaires qu’offrent ces appareils, par exemple la localisation. C’est exactement pourquoi 82% des 100 meilleurs sites mondiaux d’Alexa utilisent une sorte de détection côté serveur pour diffuser du contenu.

Pour la plupart des organisations, l’utilisation de la conception réactive en conjonction avec la livraison adaptative fonctionne bien. La partie lourde de contenu du site utilise une approche réactive permettant aux lecteurs de consommer le contenu de manière satisfaisante, quel que soit l’appareil sur lequel ils se trouvent. D’autre part, les parties à haute intention du site fonctionnent bien grâce à une livraison adaptative. La clé est de trouver un équilibre entre servir vos utilisateurs et atteindre l’objectif commercial.

La conception Web est l’une des compétences les plus recherchées sur le marché à l’heure actuelle. Selon les données sur l’emploi fournies par le Bureau of Labor Statistics, les perspectives d’emploi pour les développeurs Web sont à 20%, ce qui est plus rapide que la moyenne. Le rapport Best Jobs 2014 de USNews classe les emplois de conception Web parmi les trois principales carrières technologiques. Ainsi, pour un concepteur de sites Web en herbe, connaître les nuances du design telles que celles expliquées ci-dessus peut être très fructueux.