fbpx
/ English
design responsive

Qu’est-ce que le design Web responsive ?

Que veut dire responsive ?

Le mot responsive est un terme anglais qui se traduit par « sensible », « enthousiaste » ou « prêt à répondre ».

En design Web, le terme responsive ou RWD (Responsive Web Design), est utilisé pour désigner une interface unique qui s’adapte dynamiquement aux différentes tailles d’écrans, que ce soit sur un poste de travail, sur une tablette ou sur un téléphone. Par exemple :

Exemple du design responsive du site de Wenovio

Quelle est la traduction française de responsive ?

Au Québec, l’Office québécoise de la langue française suggère d’utiliser l’expression « site Web réactif » pour traduire un « site Web responsive« . Les sites de Wikipédia et d’Adobe vont dans le même sens. En France, on utilise aussi « design auto adaptatif » et « design adaptatif » pour désigner le Responsive Design, ce qui peut porter à confusion puisque le terme anglais Adaptive Design réfère à une autre technologie. Néanmoins, en général, les professionnels utilisent plus couramment l’expression anglaise pour faire référence au Responsive Design.

Pourquoi est-ce important d’avoir un design de site Web responsive ?

Des statistiques récentes montrent que l’utilisation des appareils portables, tablettes et mobiles, est très populaire pour naviguer en ligne. Ainsi, au début 2020, le défunt organisme CEFRIO (Centre facilitant la recherche et l’innovation dans les organisations) rapportait que 48% des internautes (74% pour les adultes entre 18 et 44 ans) utilisaient principalement leur téléphone (source) pour accéder aux divers contenus Web, un pourcentage qui a beaucoup augmenter depuis 2016.

À la lumière de ces statistiques, on comprend que le design Web responsive est nécessaire pour assurer une expérience utilisateur positive peu importe l’appareil utilisé. On évite ainsi des gestes inutiles à votre client, comme le défilement horizontal ou l’utilisation du zoom, particulièrement sur les dispositifs tactiles. En optant pour une interface ergonomique qui s’adapte à toutes les résolutions lors de la conception de votre site Web, vous intervenez pour assurer une visite agréable aux internautes.

Quelle est la différence entre design réactif et design adaptatif ?

Le design réactif peut être aisément confondu avec une autre méthode de repositionnement de l’interface, le design adaptatif (Adaptive Web Design ou AWD). La différence entre les deux réside dans la façon dont la page est construite. Dans le cas du design responsive, il n’y a qu’une seule version du code de la page Web qui est interprété différemment selon les appareils. Le visuel s’adapte en continu lors des changements de résolutions. Dans le cas du design adaptatif, il y a plusieurs versions fixes différentes d’une même page et seulement une des versions est choisie pour être affichée selon les caractéristiques du dispositif utilisé. Par exemple :

Comparaison entre design réactif et design adaptatif

Présentement, la tendance est plutôt à l’utilisation du design réactif. La première raison concerne les créateurs de sites Web : le design réactif est plus facile et rapide à implanter que le design adaptatif. Côté gestionnaire de contenu, on retrouve quantité de thèmes qui utilisent le système responsive. C’est donc une option intéressante pour travailler efficacement. Ensuite, le design réactif est intéressant d’un point de vue expérience utilisateur : comme il s’agit d’un même visuel qui est réorganisé selon les caractéristiques de l’écran, cela crée une continuité pour les internautes, ce qui est rassurant pour eux. Enfin, le design réactif est bon pour le référencement puisqu’il est bien perçu par les moteurs de recherche. Un site Web responsive est définitivement un bon point de départ à votre présence en ligne.

Le design adaptatif est parfois choisi pour créer une meilleure expérience utilisateur puisque chaque type d’appareil utilise une interface qui est spécialement conçue pour lui. Par contre, il est plus long à développer et requiert des mises à jour lors de la sortie de nouveaux appareils.

Comment fonctionne le design Web responsive ?

Le design Web responsive s’appuie principalement sur le code CSS3, plus spécifiquement sur les media queries, pour fonctionner. Le CSS est le code qui définit l’apparence de chacun des éléments de votre site Web. Par exemple, pour un bloc de texte, il pourrait définir sa hauteur, sa couleur, la grosseur des caractères, l’alignement du texte, etc. C’est ce qui rend votre site « beau »! Quant aux media queries, ce sont des conditions qui s’appliquent aux styles CSS. Par exemple, on pourrait décider qu’un site construit sur 3 colonnes s’affichera plutôt sur seulement une colonne sur les téléphones mobiles. Il y aura donc une mention dans le code CSS qui ordonnera au navigateur de présenter le site sur une seule colonne à partir d’une certaine largeur d’écran. Ainsi, selon les conditions déterminées par les media queries, un site responsive s’affichera de différentes façons :

Un exemple de media queries en design responsive

Est-ce que votre site est mobile friendly ?

Vous vous demandez si votre site est considéré comme responsive? Google propose un outil, le Test d’optimisation mobile, qui analyse votre site Web et répond à cette question.

Votre site Web, un outil accessible à vos clients

À l’image de votre entreprise, votre site Web doit évoluer pour s’adapter à la réalité et rejoindre vos clients le plus efficacement possible. N’hésitez pas à nous contacter si votre site n’est pas muni d’une interface responsive, nos spécialistes du Web pourront discuter avec vous des solutions disponibles qui vous permettront de rejoindre tous les internautes, peu importe leur appareil de visionnement!

Auteur de l'article

Émilie Demers Moreau

Designer graphique
Diplômée de l’École de Design de l’UQÀM depuis 2011, Emilie aime jouer avec formes et couleurs pour construire des images qui vous ressemblent. Son sens aiguisé de l’analyse et son œil graphique lui permettent de répondre précisément aux besoins de ses clients, que ce soit à l’imprimé, sur le web ou lors de présentations numériques. Curieuse de nature, elle est constamment à la recherche de nouvelles façons de vous faire rayonner.

À découvrir sur notre blogue

2021-06-20

Le fil d’Ariane : où, quand, comment et pourquoi

Dominique Thomas / Traductrice agréée et réviseure agréée

Découvrez le fil d’Ariane (breadcrumbs), un outil de navigation secondaire qui aide les visiteurs à parcourir votre site Web.

Lire la suite
2017-03-28

Redirections d’URL : la pratique

Gilles Duquerroy / Flexocodeur

Si votre site tourne sous un serveur Apache, il faut modifier le fichier .htaccess qui doit être présent à la racine de votre site. S’il n’y est pas, il suffit de le créer.

Lire la suite
2021-03-28

Noms de fichiers pour le Web : les bonnes pratiques

Vincent Gaudreau / Programmeur Web

Les bonnes pratiques J’ai récemment remarqué que plusieurs font l’erreur de mettre des noms de fichier non conformes aux bonnes pratiques et exigences techniques du Web. Évidemment ce n’est pas tout le monde qui les connait. C’est ce que je vous explique aujourd’hui. Le plus important à se souvenirIl ne faut pas mettre de caractères […]

Lire la suite
2020-08-03

Comment configurer le reCAPTCHA version 3 de Google sur un site WordPress ?

Josué Wilsi / Programmeur Web

Le but principal d’utiliser un reCAPTCHA est de protéger votre site WordPress contre le spam, les spammeurs et les hackers.

Lire la suite

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.