Principes de base du responsive web design

Il arrive que le contenu d’un site web, parcouru facilement et parfaitement lisible sur l’écran d’un ordinateur, se montre plus capricieux s’il est consulté sur un smartphone : sa mise en page est chamboulée ou l’affichage n’est pas conforme. C’est le signe qu’un site web n’est pas forcément optimisé pour chaque plateforme et chaque device, ce qui peut être source de contrariétés pour celles et ceux qui l’utilisent et donner lieu à une expérience digitale discordante (ou médiocre).

Un site web ne s’affichant pas correctement sur plusieurs appareils offre une expérience négative. Dès lors que vous connaissez l’importance du rendu de votre site sur les différentes plateformes, vous créerez une meilleure expérience utilisateur.

Que vous soyez spécialiste du design ou du développement, responsable marketing ou membre de l’équipe de direction, vous devez veiller à l’efficacité du contenu de votre site web sur les différentes plateformes. Il est impératif de cerner les principes de base du responsive web design avant d’envisager sa mise en œuvre sur votre site.

Cet article définit ce qu’est le responsive web design, montre comment améliorer la réactivité de votre site web au travers de plusieurs exemples et présente quelques bonnes pratiques.

Il aborde en particulier les points suivants :

• Rôle du responsive web design
• 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

Rôle du responsive web design

Le responsive web design prend en compte la plateforme de l’internaute, la taille de l’écran et l’orientation pour adapter l’affichage du contenu de manière dynamique. Les pages web en responsive design offrent une qualité constante sur une multitude de devices et d’écrans. Un site réactif est visuellement attrayant, fonctionnel et utilisable, quel que soit l’appareil utilisé pour y accéder.

En créant un site web en responsive design, les designers veillent à ce que l’expérience proposée s’adapte aux audiences nombreuses et hétéroclites qui interagiront avec lui. Grâce au responsive web design, les sites sont rapides, accessibles et faciles à parcourir, ce qui donne envie de s’y attarder. Résultat, les interactions et les ventes se multiplient.

En interne, les avantages ne sont pas négligeables non plus. Étant donné qu’un site web en responsive design est dynamique et permet d’exploiter la même base de code pour chaque device, le développement et la maintenance se révèlent également plus simples et plus rapides.

Sachant que les appareils mobiles, des smartphones aux tablettes, représentent 60 % du trafic web total, il est crucial d’opter pour un site web réactif afin de rester compétitif, et chaque entreprise devrait en faire une priorité.

Que sont les points de rupture ?

En responsive web design, les points de rupture (ou breakpoints) sont les points à partir desquels le contenu et le design d’un site web s’adaptent d’une certaine manière au support afin de produire la meilleure expérience client possible. Autrement dit, ils déterminent le mode d’affichage d’un site web. Ils sont généralement adaptés à la largeur du navigateur.

Il arrive que la lisibilité du contenu d’un site web soit compromise en raison de la disparité des formats d’affichage. L’insertion de points de rupture résout le problème. Il existe des points de rupture pour les appareils mobiles, les tablettes et les ordinateurs portables et de bureau, mais il est possible de les personnaliser pour parer à toutes les éventualités et bénéficier d’un maximum de souplesse.

Méthodes de responsive web design

Nous allons maintenant passer en revue certaines des méthodes les plus couramment utilisées pour rendre les sites web réactifs.

• HTML et CSS. Ces deux technologies permettent de redimensionner, de masquer, de réduire ou d’agrandir le contenu d’un site web. Tandis que HTML régit la structure et le contenu, CSS orchestre le design et la mise en page.
• Requêtes média. Les requêtes média (« media queries ») désignent une technique CSS qui modifie les sites web et les applications en fonction du type de device utilisé ou d’une caractéristique particulière (taille de l'écran et résolution, par exemple).
• Mise en page. Une mise en page fluide s’appuie sur des valeurs relatives, basées sur des pourcentages, pour définir la taille de l’écran, par exemple. Par ailleurs, la méthode Flexbox permet d’agrandir les éléments d’une mise en page pour qu’ils occupent l’espace disponible ou de les rétrécir pour éviter qu’ils ne débordent.
• Images réactives. En responsive web design, vous pouvez utiliser des variables dynamiques pour agir sur la largeur et la hauteur des images.
• Vitesse. La vitesse de chargement des pages est inversement proportionnelle au taux de rebond. En optimisant les images pour qu’elles se chargent plus facilement, en utilisant la mise en cache et en améliorant le chemin critique de rendu, vous contribuerez à augmenter cette vitesse.

Exemples de responsive web design

Nombre d’entreprises très présentes sur Internet ont modernisé leurs sites web pour les rendre plus réactifs à la diversité des audiences et des devices utilisés. Analysons à présent quelques exemples de responsive web design.

1. The New York Times

En 2018, The New York Times a augmenté la rapidité et amélioré l’expérience client de son site en misant sur le responsive web design. Cette actualisation a permis au site web de gagner en cohérence et au lectorat d’accéder à l’ensemble des plateformes digitales du quotidien new-yorkais.

Après avoir, dans un premier temps, travaillé la simplicité d’emploi et l’esthétique de leur application mobile en simulant le format papier, les équipes du Times ont estimé que le rendu du design sur ordinateur laissait à désirer. Elles ont donc pris le parti d’optimiser le design web pour le lectorat équipé d’ordinateurs portables et de bureau, qui jouit à présent d’une expérience analogue à celle du public exploitant l’application mobile, voire à celle des lectrices et des lecteurs de l’édition papier.

2. Dropbox

Le célèbre service d’hébergement de fichiers et de stockage dans le cloud a, lui aussi, modifié et adapté son site web pour mieux servir les appareils mobiles. Si vous comparez ces deux mises en page, vous constaterez que la version sur ordinateur (à gauche) est très similaire à celle sur appareil mobile (à droite). Cependant, certaines polices et couleurs de grille ont été modifiées pour que la page reste lisible.

3. Etsy

Le site web Etsy illustre parfaitement la façon dont l’entreprise adapte le format, les polices et les menus aux différents types et tailles d’écran. Les versions sur tablette et sur ordinateur sont analogues. Seules les rubriques dans l’en-tête et un design légèrement remanié les différencient, pointant une démarche et une intention différentes de la clientèle selon le device utilisé. Mais si vous comparez ces versions à la manière dont le site web Etsy s’affiche sur un smartphone, vous verrez que la barre de navigation disparaît totalement pour libérer de l’espace.

Il est évident que, sur les appareils mobiles, Etsy privilégie la personnalisation tout en aidant la clientèle à trouver rapidement ce qu’elle cherche : les produits.

4. GitHub

Ce site web fait ressortir ce qui est important pour qu’une entreprise puisse atteindre ses objectifs de chiffre d’affaires et de conversion. L’une des premières choses que voit la personne qui accède à la version pour ordinateur de ce site, ce sont les offres produit, ainsi qu’un formulaire d’inscription à GitHub.

Sur un appareil mobile, la fenêtre ou page d’inscription est davantage mise en évidence, allégée du contenu supplémentaire, mais avec des éléments affichés dans des résolutions supérieures.

5. Slack

Slack regroupe les options de son site web dans un menu hamburger pour les appareils mobiles et les tablettes, et dans une barre de navigation en haut de l’écran pour les ordinateurs. Les appels à l’action sont aussi moins nombreux sur les appareils mobiles. Les deux au-dessus du pli dans la version sur ordinateur sont remplacés par un énorme bouton occupant la quasi-totalité de l’écran sur un smartphone ou une tablette.

En outre, sur un appareil mobile, le contenu de la page web est condensé selon un axe vertical dans une seule colonne, le texte des paragraphes étant redistribué de part et d’autre des images.

6. Starbucks

Le site web Starbucks démontre à quel point le responsive web design peut être à la fois simple et percutant s’il est correctement mis en œuvre. Il est dépourvu d’effets de défilement parallaxe élaborés, mais ses images statiques colorées de produits de saison sont efficaces.

Petit bémol, l’option Menu, qui présente la carte des boissons et des produits sucrés et salés sur ordinateur, est intégrée à un menu hamburger général sur un écran de petit format. Cette conception peut être déroutante pour des mobinautes qui ne s’attendent pas forcément à le retrouver à cet endroit.

Bonnes pratiques de responsive web design

Maintenant que le responsive web design n’a plus aucun secret pour vous, passons en revue quelques bonnes pratiques.

Privilégiez le contenu.

Veillez à ce que les internautes puissent trouver le contenu recherché en limitant le plus possible les défilements et la navigation. Si la consultation d’informations sur un site web nécessite sans doute moins de faire défiler les pages, elle risque, sur un appareil mobile, de se solder par une expérience médiocre si le contenu est long ou si les images ne sont pas modifiées pour s’adapter aux dimensions de l’écran.

Gardez à l’esprit que le contenu créé doit tenir dans la fenêtre d’affichage afin que la clientèle puisse localiser facilement les informations recherchées.

Limitez les complications.

Réfléchissez à la finalité première de votre page et organisez votre design en conséquence au lieu de multiplier les appels à l’action. Vous devrez adapter votre page à chaque version du site web. Une approche orientée mobilité permet aux designers de savoir ce qu’il est indispensable de faire figurer sur le site web pour que le principal objectif de l’entreprise (l’achat d’un produit ou d’un service, par exemple) soit atteint.

Au moment de créer les versions de votre site web pour tablettes et ordinateurs, commencez à réfléchir aux objectifs secondaires, comme l’abonnement à une newsletter susceptible de déclencher un achat, et identifiez à cet effet les micro-interactions et appels à l’action pertinents. Vous devez avant tout vous focaliser sur les intentions premières de l’internaute et éliminer les complications inutiles risquant de nuire à la réalisation des objectifs principaux et secondaires.

N’oubliez pas le pouce.

Faites en sorte que les parties importantes d’une page soient aisément accessibles à quiconque se sert de son pouce pour naviguer sur son téléphone mobile. La principale différence entre une personne équipée d’un ordinateur et une autre d’un appareil mobile, c’est que la première utilise un équipement posé sur une surface tandis que la seconde doit le tenir.

Voilà qui change considérablement la donne côté designers web quant aux modalités de création des cibles tactiles et autres éléments d’interaction avec les internautes. En règle générale, sur un ordinateur, le système de navigation est attendu en haut de la page. Sur un appareil mobile, en revanche, il est préférable de le positionner au milieu ou au bas de la page, le haut de l’écran étant plus compliqué à atteindre avec les pouces.

Créez et développez de concert.

Le responsive web design suggère, par son approche, que le design et le développement doivent faire écho au comportement et à l’environnement de l’internaute, d’où l’importance que ces deux disciplines interagissent efficacement. Designers et développeurs travaillent main dans la main pour déterminer le degré de remaniement du contenu et avoir une idée du résultat final.

En conjuguant création et développement, vous pouvez renforcer la lisibilité de votre site web, augmenter le temps passé dessus, intensifier les interactions, développer vos ventes e-commerce et améliorer globalement l’expérience utilisateur.

Pour mettre le responsive web design en pratique, vous devez commencer par recueillir des informations, structurer les choses et imaginer ce à quoi ressemblera votre site. Vous pourrez ensuite tester et lancer une version bêta.

Misez sur une refonte structurelle.

La réactivité doit être véritablement intégrée à vos processus et vos systèmes, et non se manifester, ici ou là, sur telle ou telle page web ou dans une campagne marketing précise. Les designers web doivent se polariser sur la réactivité et les fonctionnalités au niveau de chaque composant.

Au lieu de considérer une page dans son ensemble, axez votre réflexion sur la manière d’ajuster instantanément la sélection sur une page produit. Songez aux cartes, aux carrousels et aux appels à l’action. Réfléchissez aux critères à appliquer à chaque composant pour le restituer sous son meilleur jour dans différentes largeurs de fenêtre d’affichage et résolutions d’écran. Lorsque les équipes de design recevront les demandes de développement de pages, elles disposeront ainsi de composants prêts à l’emploi et pourront mettre au point du contenu spécifique pour parfaire l’expérience client.

Testez sans relâche.

Il est vital de réaliser régulièrement des tests d’ergonomie sur les différentes plateformes. Testez la navigation sur le site web : s’il y a changement d’appareil, la barre de navigation variera forcément. Il est nécessaire d’essayer les systèmes de navigation sur différents écrans afin de s’assurer que la clientèle ne pâtira pas d’une expérience médiocre.

De même, n’hésitez pas à tester les polices sur plusieurs appareils. Peut-être aurez-vous à cœur d’utiliser des polices et méthodes de design différentes pour publier du contenu sur votre site web. Sachez alors que ces polices risquent de ne pas être prises en charge partout et d’être transformées ou remplacées par des caractères ou des codes aléatoires sur les appareils utilisés par la clientèle. Pensez à tester les polices sur plusieurs devices avant d’actualiser votre site web.

Expérimentez différentes combinaisons d’appareils et de navigateurs. Vous pouvez analyser le trafic web et mobile depuis Google Analytics en incluant les navigateurs les plus fréquemment utilisés pour consulter votre site web. Enfin, testez la vélocité de votre site web, en tenant compte du temps de chargement des différents contenus (images et vidéos, par exemple) sur divers appareils.

Création de vos propres sites web en responsive design

En veillant à ce que votre site web s’affiche impeccablement sur l’ensemble des devices et des plateformes, vous garantissez une expérience d’exception à celles et ceux qui le visitent.

Avant de vous lancer dans le responsive web design, penchez-vous sur une partie de votre site web que vous souhaiteriez remanier. Définissez l’élément ou l’argument principal de la page, et commencez à réfléchir au design environnant afin d’atteindre l’objectif souhaité.

Adobe Experience Manager Sites facilite la création de pages web s’ajustant à la quasi-totalité des devices. L’expérience utilisateur est ainsi optimale.

Pour savoir comment Experience Manager Sites peut vous aider à créer des sites web en responsive design, regardez la vidéo de présentation ou suivez une visite guidée du produit.