Fondamentaux du responsive web design

Le responsive web design désigne la méthode consistant à créer des sites internet dont la présentation est agréable et le fonctionnement optimal sur tous types d’écrans, qu’il s’agisse d’un téléphone, d’une tablette ou d’un ordinateur. Lorsque cette méthode est bien exécutée, cela passe souvent inaperçu, ce qui est positif, car cela signifie que tout fonctionne correctement. Cependant, lorsque le contenu d’un site web est lisible sur un écran, mais que ses pages s’affichent incorrectement sur un autre, cela indique une absence d’optimisation pour les plateformes et les appareils. Cela peut entraîner de la frustration chez les utilisateurs et les utilisatrices, ainsi qu’une expérience digitale incohérente ou médiocre.

Un site web qui ne s’affiche pas correctement sur différents appareils crée une expérience négative pour les utilisateurs et les utilisatrices. En comprenant l’importance de la façon dont votre site s’affiche sur l’ensemble des plateformes, vous pourrez offrir une meilleure expérience utilisateur.

Que vous soyez designer, développeur ou développeuse, spécialiste marketing ou responsable d’entreprise, vous souhaitez vous assurer que le contenu de votre site web bénéficie d’une optimisation multi-appareils efficace. Pour cela, il est essentiel d’intégrer les principes fondamentaux du responsive web design avant de commencer à envisager sa mise en œuvre sur votre site.

Dans cet article, vous découvrirez le responsive web design, ainsi que des exemples pour rendre votre site web plus adaptatif, et explorerez quelques bonnes pratiques.

Cet article aborde les sujets suivants :

• Définition du responsive web design
• Avantages du développement web adaptatif
• Techniques et méthodes de responsive web design
• Exemples de responsive web design
• Bonnes pratiques de responsive web design
• Création de vos propres sites web en responsive design

Le responsive web design s’adapte à la plateforme utilisée, la taille de l'écran et son orientation afin d'apporter des modifications dynamiques à l’affichage du contenu. Les pages web en responsive design offrent une qualité constante sur une multitude d’appareils et de tailles d’écrans. Un site en responsive design est attrayant visuellement, fonctionnel et utilisable, quel que soit l'appareil utilisé pour y accéder.

Lors de la création d’un site web en responsive design, les designers s’assurent que l’expérience proposée correspond aux nombreux profils susceptibles d’y accéder et de l'utiliser. Le responsive web design rend les sites plus rapides et améliore l’accessibilité et la navigation. Les utilisateurs et les utilisatrices trouvent ainsi plus rapidement les informations recherchées et restent sur le site, ce qui peut améliorer l’engagement et les ventes.

Il existe également des avantages internes. Un site web adaptatif est dynamique et est capable d’utiliser la même base de code pour chaque appareil, ainsi son développement et sa maintenance sont également plus faciles et plus rapides.

Étant donné que les appareils mobiles, comme les téléphones ou les tablettes, représentent plus de 60 % de tout le trafic internet, un site web adaptatif est crucial pour rester compétitif et devrait être une priorité absolue pour chaque entreprise.

Utilisation des points de rupture

Dans le contexte du responsive web design, un point de rupture marque le moment où le contenu et le design d’un site web s’adaptent à une nouvelle taille d’écran afin d’offrir la meilleure expérience client possible. Autrement dit, ils déterminent le mode d’affichage d’un site web. Ils sont généralement basés sur la largeur du navigateur.

Le contenu peut devenir difficile à lire selon les tailles d’écran. L’insertion de points de rupture est la solution. Il existe généralement des points de rupture pour les appareils mobiles, les tablettes et les ordinateurs portables ou de bureau, bien que la personnalisation soit possible afin d’assurer une flexibilité maximale pour tous les types d’appareils.

Songez à créer plusieurs points de rupture afin de fluidifier l’expérience des utilisateurs et des utilisatrices, quelle que soit la taille de leur écran. Pour ce faire, l’affichage de la page s’organise en grilles, elles-mêmes subdivisées en multiples de quatre. Les designers ajoutent généralement deux ou trois points de rupture par page. Cependant, il est recommandé de tenir compte des tailles suivantes :

• Très petite : généralement basée sur une grille de 4 colonnes, cette plage est destinée aux mobiles, allant jusqu'à 500 pixels.
• : couvre une plage de tailles de tablettes de 500 pixels à 1 200 pixels, généralement dans une grille de 8 colonnes.
• Moyenne : conçue pour les ordinateurs portables, cette grille de 12 colonnes va de 1 200 pixels à 1 400 pixels.
• Grande : cette taille est dédiée aux écrans de grande dimension, à partir de 1 400 pixels. On utilise une grille de 12 colonnes pour celle-ci.

Le développement web adaptatif offre des avantages dans trois domaines clés : l’expérience client (UX), le SEO et l’impact commercial. Découvrons chaque domaine plus en détail :

Expérience utilisateur (UX)

Le développement web adaptatif garantit l’adaptation de vos pages web à tous les écrans. Sans pages web adaptatives, les sites peuvent être difficiles ou pénibles à utiliser et peuvent dissuader les utilisateurs et les utilisatrices de revenir. Même avec de la persévérance, il est possible de passer à côté d’informations essentielles masquées par une mise en page maladroite sur un site qui n’est conçu en responsive design. Cela peut impacter les taux de conversion et augmenter la tendance au rebond d’un utilisateur ou d’une utilisatrice.

SEO

L'un des critères principaux d’indexation du moteur de recherche Google est la compatibilité d'un site avec les appareils mobiles, ce que le responsive web design peut faciliter. En outre, un site en responsive design utilise un code source unique pour tous les sites, ce qui réduit le risque de pénalités pour contenu en doublon. Cela signifie que les sites web en responsive design ont plus de chances d’apparaître en tête des pages de résultats des moteurs de recherche, devant ceux de vos concurrents. Ce qui augmente le trafic vers votre site.

Impact commercial

En résumé, le coût de gestion d’un seul site en responsive design est moins élevé, plus efficace et plus facile à maintenir que celui de plusieurs versions pour différents appareils. En associant cela à une interface utilisateur améliorée et à une visibilité accrue dans les pages de résultats de recherche, il est probable que vous observiez également une augmentation des conversions.

Vous venez de découvrir le responsive web design. Examinons maintenant quelques-unes des méthodes les plus courantes que vous pouvez utiliser afin de le mettre en pratique sur votre site.

• HTML et CSS : Ces deux technologies permettent de redimensionner, masquer, réduire ou agrandir automatiquement un site web. Tandis que le HTML contrôle la structure et le contenu, le CSS contrôle le design et l’affichage.
• Requêtes multimédias : Une requête multimédia est une technique CSS qui modifie les sites web et les applications en fonction du type d’appareil ou d’une caractéristique spécifique, par exemple la taille et la résolution de l’écran.
• Mise en page : Une mise en page fluide utilise des valeurs basées sur des pourcentages, comme la taille de l’écran. À l’inverse, une mise en page Flexbox agrandit les éléments pour qu’ils occupent l’espace disponible ou les rétrécit pour éviter qu’ils ne débordent.
• Images en responsive design : Avec le responsive web design, vous pouvez utiliser des variables dynamiques pour contrôler la largeur et la hauteur des images.
• Vitesse : Les pages qui se chargent plus rapidement ont un taux de rebond plus faible. L’optimisation du chargement des images, l’utilisation du caching et l’amélioration du chemin de rendu critique peuvent contribuer à augmenter la vitesse du site.

De nombreuses marques ayant une forte présence en ligne ont mis à jour leurs sites web pour en améliorer l’adaptativité selon les utilisateurs ou les utilisatrices et appareils. Voyons ensemble quelques exemples de responsive web design.

Le New York Times

En 2018, le New York Times a amélioré la rapidité et l’expérience client de son site grâce au responsive web design. Cette mise à jour a rendu le site plus cohérent et a permis aux lecteurs et aux lectrices du format digital d’accéder facilement à l’ensemble des plateformes digitales du journal.

Après avoir, dans un premier temps, rendu son application plus facile à utiliser et plus attrayante, notamment en imitant le format papier, le Times a constaté que son design pour ordinateur accusait une certaine lenteur. Cette prise de conscience a conduit à l’amélioration du design web pour les lecteurs et les lectrices sur ordinateurs portables et de bureau, qui bénéficient désormais d’une expérience comparable à celle d’un utilisateur ou d’une utilisatrice d’une application mobile ou d’un lecteur ou d’une lectrice d’un quotidien physique.

Dropbox

Le célèbre service d’hébergement de fichiers et de stockage dans le cloud a également adapté son site web afin d’offrir une meilleure expérience sur les appareils mobiles. Si vous comparez ces deux affichages, vous constaterez que la version pour ordinateur (à droite) est très similaire à celle pour appareil mobile (à gauche). Cependant, on peut observer des changements subtils dans les couleurs de la grille et les polices pour conserver la lisibilité de la page.

Etsy

Le site web d’Etsy adapte la taille, les polices et les options de menu aux différents types et tailles d’écran. Les versions tablette et bureau sont disposées de manière similaire, seules les options d’en-tête et une légère modification de design les distinguent, ce qui indique un changement d’intention utilisateur selon l’appareil. Mais si vous comparez ces versions à la façon dont le site d’Etsy s’affiche sur un appareil mobile, vous pouvez constater que la barre de navigation disparaît complètement afin d’alléger l’interface.

Sur les appareils mobiles, Etsy met l’accent sur la personnalisation tout en aidant la clientèle à accéder rapidement aux produits qu’elle souhaite.

GitHub

Ce site web montre l'importance des objectifs commerciaux et de conversion pour une société. L’un des premiers constats pour les utilisateurs et les utilisatrices en arrivant sur la version pour ordinateur est la présence d’offres de produits et d’un formulaire d’inscription à GitHub.

Sur mobile, la page principale de connexion ou d’inscription est encore plus visible, sans le contenu ni les éléments supplémentaires affichés sur les écrans de plus grande taille.

Slack

Slack regroupe les options de son site web dans un menu hamburger pour mobile et tablette pour remplacer la barre de navigation de la version pour ordinateur. Les CTA sont aussi moins nombreux sur les appareils mobiles. Les deux CTA situés au-dessus du pli sur l’affichage de bureau sont remplacés par un grand bouton occupant quasiment tout l'écran dans l’affichage sur mobile et tablette.

De plus, sur mobile, le contenu de la page web est agencé verticalement en une seule colonne, avec des paragraphes de texte placés au-dessus et au-dessous des images.

Starbucks

Starbucks représente un exemple de responsive web design simple et accrocheur lorsque bien exécuté. Il n’y a pas d’effet de défilement parallaxe sophistiqué, mais les images statiques et colorées des produits saisonniers sont efficaces.

Cependant, l’option de menu, qui correspond à un menu des produits sur la version ordinateur, est regroupée dans un menu hamburger lorsque l’affichage est réduit. Cela peut prêter à confusion lorsque l’on ne s’attend pas à voir des options alimentaires en ouvrant le menu hamburger.

Maintenant que vous connaissez le responsive web design et que vous avez découvert des exemples concrets, passons en revue quelques bonnes pratiques.

Hiérarchisation du contenu

Assurez-vous que les utilisateurs et les utilisatrices trouvent facilement le contenu recherché, avec un minimum de défilement ou de navigation. Si la consultation des informations d’un site web sur un ordinateur nécessite généralement moins de défilement, la lecture des mêmes informations sur un appareil mobile peut nuire à l’expérience client si le contenu est long et si la police ou les images ne sont pas adaptées à la taille de l’écran.

N’oubliez pas de créer du contenu qui s’adapte à la zone d’affichage spécifiée afin que les utilisateurs et les utilisatrices puissent facilement trouver les informations recherchées.

Réduction des points de friction

Commencez par identifier l’objectif principal de la page et concevez-la dans cette optique. Évitez de submerger les utilisateurs et les utilisatrices avec un trop grand nombre de CTA. Vous devrez adapter chaque version du site à leurs besoins. Une approche centrée sur les appareils mobiles permet aux designers de comprendre et de déterminer les éléments à inclure sur le site web afin que l’objectif principal de l’entreprise soit atteint. L’achat d’un produit ou d’un service peut constituer un objectif principal.

Au moment de créer les versions pour tablettes et ordinateurs du site web, vous pouvez commencer à réfléchir aux objectifs secondaires. Cela peut inclure des invitations à s’inscrire à une newsletter pour encourager des achats ultérieurs, ainsi que la détermination des CTA et des micro-interactions qui permettront de faciliter cela. Vous devez vous concentrer d’abord sur les objectifs principaux de l’utilisateur ou de l’utilisatrice, puis éliminer les points de friction inutiles qui desservent les objectifs principaux ou secondaires.

Importance des pouces

Assurez-vous que les éléments importants de la page soient facilement accessibles pour une personne utilisant son pouce sur un appareil mobile. La principale différence entre les utilisateurs et les utilisatrices sur ordinateur et sur mobile est que les premiers ont généralement leur ordinateur posé sur une surface, tandis que les seconds tiennent leur appareil dans leurs mains.

Cela modifie considérablement la façon dont les designers web créent les tap target et les autres éléments avec lesquels les utilisateurs et les utilisatrices interagissent. En règle générale, sur un ordinateur, le système de navigation se situe en haut de la page. Mais sur mobile, il devrait se trouver au milieu ou en bas de la page, car les utilisateurs et les utilisatrices ne peuvent pas atteindre le haut de l’écran confortablement avec leurs pouces.

Association des phases de design et de développement

Rappelez-vous que l’objectif du responsive web design consiste à ce que le design et le développement s’adaptent au comportement et à l’environnement de l’utilisateur ou de l’utilisatrice, ces deux phases doivent donc aller de pair. Les designers et les développeurs ou les développeuses collaborent pour déterminer comment le contenu doit être réorganisé et le résultat final.

En alliant design et développement, vous pouvez :

• Booster la lisibilité des informations
• Augmenter le temps passé sur le site web
• Améliorer les interactions
• Maximiser les ventes e-commerce
• Améliorer l’expérience client globale

Afin de mettre en pratique le responsive web design, commencez par rassembler des informations, organisez la structure et imaginez l’aspect du site web. Vous pouvez ensuite tester et lancer une version Beta de votre site.

Structuralisation

La réactivité doit être intégrée à vos processus et à vos systèmes et ne doit pas se cantonner à une seule page web ou à une campagne marketing spécifique. Les designers web doivent se concentrer sur la réactivité et la fonctionnalité au niveau des composants.

Au lieu de penser à l’ensemble de la page produit, réfléchissez à la façon dont la bannière sur une page produit fonctionne en responsive design. Songez aux cartes, aux carrousels et aux CTA. Réfléchissez à comment mettre en valeur chaque composant en fonction des différentes largeurs de fenêtre d’affichage et résolutions d’écran. Ainsi, lorsque les équipes de design reçoivent des demandes de développement de pages, elles disposent déjà des composants prêts à l’emploi et peuvent se concentrer sur le contenu spécifique de la page afin d’optimiser l’expérience utilisateur.

Tests fréquents

Testez régulièrement l’ergonomie sur l’ensemble des plateformes. Testez la navigation sur le site web : s’il y a changement d’appareil, la barre de navigation devra s’y adapter. Il est nécessaire de tester les designs de navigation sur différents écrans et de vérifier qu'ils ne conduisent pas à une mauvaise expérience utilisateur.

Vous pouvez également tester les polices sur plusieurs appareils. Il est possible d’utiliser différentes polices et méthodes de design pour le contenu de votre site. Il est toutefois possible que ces polices ne soient pas universellement prises en charge, et s’affichent alors sous forme de caractères ou de codes aléatoires sur l’appareil. Pensez à tester les polices sur plusieurs appareils avant de déployer la mise à jour sur votre site web.

Assurez-vous de tester différentes combinaisons d’appareil et de navigateur. Vous pouvez analyser le trafic web et mobile à l’aide de Google Analytics et inclure les navigateurs les plus utilisés pour visiter votre site. Enfin, testez la vitesse de votre site, en tenant compte du temps de chargement des différents types de contenu, tels que les images et les vidéos sur différents appareils.

Veiller à ce que votre site web s'affiche correctement sur l'ensemble des appareils et des plateformes constitue une étape essentielle pour garantir une expérience de qualité à votre clientèle.

Lorsque vous êtes prêt à mettre en œuvre le responsive web design, sélectionnez la partie de votre site web que vous souhaitez remanier. Décidez quel doit être l’élément principal de la page, puis réfléchissez à la manière de concevoir votre site autour de celui-ci afin d’atteindre votre objectif.

Adobe Experience Manager Sites facilite la création de pages web s’adaptant à la quasi-totalité des appareils et garantissant à vos utilisateurs et vos utilisatrices une expérience optimale.

our savoir comment Experience Manager Sites peut vous aider à créer des sites web en responsive design, regardez la vidéo récapitulative ou participez à une visite guidée du produit.