L’internet étant de plus en plus accessible à partir d’appareils mobiles, il ne suffit plus d’avoir un site web statique dont la conception n’a d’intérêt que sur un écran d’ordinateur.
Sans oublier qu’il faut aussi tenir compte des tablettes, des ordinateurs portables 2 en 1 et des différents modèles de smartphones avec des dimensions d’écran différentes lors de la conception d’un design.
Donc, le fait de mettre votre contenu dans une seule colonne et en rester là ne va pas suffire.
Grâce à un design web responsive, vous pouvez faire en sorte que votre site web soit le plus attrayant possible sur les téléphones portables, les tablettes, les ordinateurs portables et les écrans d’ordinateurs de bureau.
Et l’amélioration de l’expérience utilisateur signifie des conversions plus élevées et une croissance de l’activité.
Ce guide vous donnera tout ce que vous devez savoir sur la conception de sites web responsives, y compris des définitions, une présentation étape par étape, des exemples, et plus encore.
Consultez notre guide vidéo sur la conception web responsive :
Qu’est-ce que le design web responsive ?
Le design responsive est une approche de la conception web qui permet d’adapter votre contenu web aux différentes tailles d’écran et de fenêtre d’une variété d’appareils.
Par exemple, votre contenu peut être séparé en différentes colonnes sur les grands écrans, car elles sont suffisamment larges pour s’adapter à ce design.
Si vous séparez votre contenu en plusieurs colonnes sur un appareil mobile, il sera difficile pour les utilisateurs de le lire et d’interagir avec lui.
Le design responsive permet de fournir à différents appareils plusieurs mises en page distinctes de votre contenu et de votre design en fonction de la taille de l’écran.
Design web responsive vs design adaptatif
La différence entre le design responsive et le design adaptatif est que le design responsive adapte le rendu d’une version d’une seule page. En revanche, le design adaptatif fournit plusieurs versions complètement différentes de la même page.
Ce sont deux tendances cruciales de la conception web qui aident les webmasters à contrôler l’apparence de leur site sur différents écrans, mais l’approche est différente.
Grâce à un design responsive, les utilisateurs accéderont au même fichier de base par le biais de leur navigateur, quel que soit l’appareil, mais le code CSS contrôlera la mise en page et la rendra différemment en fonction de la taille de l’écran. Avec le design adaptatif, il existe un script qui vérifie la taille de l’écran, puis accède au modèle conçu pour cet appareil.
Pourquoi le design responsive est important
Si vous êtes nouveau dans le domaine du design web, du développement ou des blogs, vous vous demandez peut-être pourquoi le design responsive est si important.
La réponse est simple. Il ne suffit plus de concevoir pour un seul appareil. Le trafic web mobile a dépassé celui des ordinateurs de bureau et représente désormais la majorité du trafic des sites web, soit plus de 51 %.
Lorsque plus de la moitié de vos visiteurs potentiels utilisent un appareil mobile pour naviguer sur l’internet, vous ne pouvez pas vous contenter de leur servir une page conçue pour un ordinateur. Elle serait difficile à lire et à utiliser, et conduirait à une mauvaise expérience utilisateur.
Mais ce n’est pas tout. Les utilisateurs d’appareils mobiles représentent également la majorité des visites sur les moteurs de recherche.
Enfin, ces dernières années, le mobile est devenu l’un des plus importants canaux publicitaires. Même dans un marché post-pandémique, les dépenses publicitaires sur les mobiles augmentent de 4,8 % pour atteindre 91,52 milliards de dollars.
Que vous choisissiez de faire de la publicité sur les réseaux sociaux ou d’utiliser une approche organique comme le référencement YouTube, la grande majorité de votre trafic proviendra des utilisateurs mobiles.
Si vos pages d’atterrissage ne sont pas optimisées pour le mobile et faciles à utiliser, vous ne pourrez pas maximiser le retour sur investissement de vos efforts de marketing. De mauvais taux de conversion entraîneront une diminution du nombre de prospects et des dépenses publicitaires inutiles.
Les sites WordPress sont-ils responsives ?
Les sites WordPress sont responsives en fonction du thème de votre site WP. Un thème WordPress est l’équivalent d’un modèle pour un site web statique et contrôle la conception et la mise en page de votre contenu.
Si vous utilisez un thème WordPress par défaut, comme Twenty Twenty, le design est responsive, mais comme il s’agit d’un design à colonne unique, vous ne vous en rendrez peut-être pas compte en le regardant sur différents écrans.
Si vous utilisez un autre thème WordPress, vous pouvez tester s’il est responsive ou non en comparant son apparence sur différents appareils ou en utilisant les outils de développement Chrome.
Les éléments de base de la conception de sites web responsives
Dans cette section, nous aborderons les fondements d’une conception de site web responsive et ses différents éléments.
CSS et HTML
Le fondement du design web responsive est la combinaison de HTML et de CSS, deux langages qui contrôlent le contenu et la présentation d’une page dans un navigateur web donné.
Le HTML contrôle principalement la structure, les éléments et le contenu d’une page web. Par exemple, pour ajouter une image à un site web, vous devez utiliser un code HTML comme celui-ci :
<img src="image.gif" alt="image" class=”full-width-img”>Vous pouvez définir une « classe » ou un « id » que vous pouvez cibler plus tard avec du code CSS.
Vous pouvez également contrôler les attributs primaires tels que la hauteur et la largeur dans votre HTML, mais cela n’est plus considéré comme une bonne pratique.
Le CSS est utilisé à la place pour modifier la conception et la mise en page des éléments que vous incluez dans une page avec du HTML. Le code CSS peut être inclus dans une section <style> d’un document HTML, ou dans un fichier de feuille de style séparé.
Par exemple, nous pourrions modifier la largeur de toutes les images HTML au niveau des éléments comme ceci :
img {
width: 100%;
}Ou nous pourrions cibler la classe spécifique « full-width-img » en ajoutant un point devant.
.full-width-img {
width: 100%;
}Vous pouvez également contrôler le design au-delà de la hauteur, de la largeur et de la couleur. C’est en utilisant le CSS de cette manière que vous rendez un design responsive lorsque vous le combinez avec une technique appelée « media query ».
Media queries
Une media query est une partie fondamentale de CSS3 qui vous permet de rendre le contenu pour l’adapter à différents facteurs comme la taille de l’écran ou la résolution.
Cela fonctionne de la même manière qu’une clause «if » dans certains langages de programmation, c’est-à-dire qu’il vérifie si la fenêtre de visualisation d’un écran est suffisamment ou trop large avant d’exécuter le code approprié.
@media screen and (min-width: 780px) {
.full-width-img {
margin: auto;
width: 90%;
}Si l’écran fait au moins 780 pixels de large, les images de la classe « full-width-img » occuperont 90% de l’écran et seront automatiquement centrées par des marges de même largeur.
Mises en page fluides
Une mise en page fluide est un élément essentiel d’un design moderne et responsive. Dans le bon vieux temps, on fixait une valeur statique pour chaque élément HTML, par exemple 600 pixels.
Une mise en page fluide repose plutôt sur des valeurs dynamiques comme un pourcentage de la largeur de la fenêtre de visualisation.
Cette approche permettra d’augmenter ou de diminuer dynamiquement les différentes tailles des éléments du conteneur en fonction de la taille de l’écran.
Mise en page Flexbox
Si une mise en page basée sur un pourcentage est fluide, de nombreux concepteurs et développeurs web ont estimé qu’elle n’était pas assez dynamique ou flexible. Flexbox est un module CSS conçu comme un moyen plus efficace de disposer plusieurs éléments, même lorsque la taille du contenu à l’intérieur du conteneur est inconnue.
Un conteneur flexible permet d’agrandir les articles pour remplir l’espace libre disponible ou de les rétrécir pour éviter le débordement. Ces conteneurs flex ont un certain nombre de propriétés uniques, comme le contenu justifié, que vous ne pouvez pas modifier avec un élément HTML ordinaire.
C’est un sujet compliqué, donc si vous voulez l’utiliser dans votre conception, vous devriez lire le guide flexbox de CSS Tricks.
Images responsives
L’itération la plus élémentaire des images responsives suit le même concept qu’une mise en page fluide, en utilisant une unité dynamique pour contrôler la largeur ou la hauteur. L’exemple de code CSS dont nous avons parlé plus haut permet déjà d’atteindre cet objectif :
img {
width: 100%;
}L’unité % correspond à un pourcentage unique de la largeur ou de la hauteur de la fenêtre de visualisation et permet de s’assurer que l’image reste proportionnelle à l’écran.
Le problème de cette approche est que chaque utilisateur doit télécharger l’image en taille réelle, même sur son téléphone portable.
Pour servir différentes versions mises à l’échelle pour différents appareils, vous devez utiliser l’attribut HTML srcset dans vos balises img, pour spécifier plus d’une taille d’image parmi lesquelles choisir.
<img srcset="large-img.jpg 1024w,
middle-img.jpg 640w,
small-img.jpg 320w"
src="small.jpg"
/>WordPress utilise automatiquement cette fonctionnalité pour les images incluses dans les articles ou les pages.
Vitesse
Lorsque vous essayez de créer un design adapté à votre site web, la vitesse de chargement doit être une priorité absolue.
Les pages qui se chargent en 2 secondes ont un taux de rebond moyen de 9 %, tandis que les pages qui prennent 5 secondes ont un taux de rebond de 38 %.
Votre approche du responsive ne doit pas bloquer ou retarder le premier rendu de votre page plus qu’il n’est nécessaire.
Il existe plusieurs moyens de rendre vos pages plus rapides. L’optimisation de vos images, la mise en cache, la minification, l’utilisation d’une mise en page CSS plus efficace, le fait d’éviter le blocage du rendu JS et l’amélioration de votre chemin critique de rendu sont autant d’excellentes idées que vous devriez envisager.
Les clients de Kinsta ont accès à un moyen rapide et facile d’accomplir cela en utilisant la fonction de minification du code qui est intégrée directement dans le tableau de bord MyKinsta, permettant aux clients d’activer la minification automatique de CSS et JavaScript d’un simple clic.
Vous pourriez également essayer d’implémenter Google AMP pour vos pages mobiles, mais dans notre étude de cas Google AMP, nos prospects mobiles ont chuté de 59 %.
Points de rupture responsives communs
Pour travailler avec les media queries, vous devez décider des « points de rupture responsive » ou des points d’arrêt de la taille de l’écran. Un point de rupture est la largeur de l’écran où vous utilisez une media query pour implémenter de nouveaux styles CSS.
Tailles d’écran communes
- Mobile : 360 x 640
- Mobile: 375 x 667
- Mobile : 360 x 720
- iPhone X : 375 x 812
- Pixel 2 : 411 x 731
- Tablette : 768 x 1024
- Ordinateur portable : 1366 x 768
- Ordinateur portable ou de bureau haute résolution : 1920 x 1080
Si vous choisissez une approche de design axée sur le mobile, avec une seule colonne et des tailles de police plus petites comme base, vous n’avez pas besoin d’inclure des points de rupture mobiles – sauf si vous voulez optimiser le design pour des modèles spécifiques.
Vous pouvez donc créer un design sur une base responsive avec seulement deux points de rupture, un pour les tablettes et un pour les ordinateurs portables et de bureau.
Les points de rupture responsive de Bootstrap
En tant que l’un des premiers, et des plus populaires, framework responsives, Bootstrap a mené l’assaut sur la conception de sites web statiques et a contribué à établir la conception de sites mobiles comme norme industrielle.
C’est pourquoi de nombreux créateurs suivent encore aujourd’hui les points de rupture de Bootstrap en matière de largeur d’écran.
Ils utilisent les media queries pour cibler les téléphones en mode paysage (576px), les tablettes (768px), les ordinateurs portables (992px) et les écrans de bureau extra larges (1200px).
Comment rendre votre site web responsive
Maintenant que vous connaissez les éléments de base, il est temps de rendre votre site web responsive.
Définissez vos plages de media query (points de rupture responsives)
Définissez vos plages de media query en fonction des besoins uniques de votre design. Par exemple, si nous voulions suivre les normes Bootstrap pour notre design, nous utiliserions les media queries suivantes :
- 576px pour les téléphones en portrait
- 768px pour les tablettes
- 992px pour les ordinateurs portables
- 1200px pour les grands écrans
Taille des éléments de mise en page avec des pourcentages ou création d’une grille CSS
La première étape, et la plus importante, consiste à définir différentes tailles pour différents éléments de mise en page en fonction de la media query ou du point de rupture de l’écran.
Le nombre de conteneurs de mise en page dont vous disposez dépendra du design, mais la plupart des sites web se concentrent sur les éléments listés ci-dessous :
En utilisant une approche mobile first, vous pouvez styliser les principaux éléments de la mise en page de cette manière (sans media query pour les styles de base pour les téléphones portables) :
#wrapper {width:95%; margin: 0 auto; }
#header {width:100%; }
#content {width:100%; }
#sidebar {width:100%; }
#footer {width:100%; }
// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) {
// Medium devices (tablets, 768px and up)
@media (min-width: 768px) {
#wrapper {width:90%; margin: 0 auto; }
#content {width:70%; float:left; }
#sidebar {width:30%; float:right; }
// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }
}
// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) {
#wrapper {width:90%; margin: 0 auto; }
}Dans une approche basée sur le pourcentage, l’attribut « float » contrôle de quel côté de l’écran un élément apparaîtra, à gauche ou à droite.
Si vous voulez aller au-delà des bases et créer un design reposnive de pointe, vous devez vous familiariser avec la mise en page flexbox CSS et ses attributs tels que la box-sizing et flex.
Mettre en œuvre des images responsives
Une façon de s’assurer que vos images ne se cassent pas est simplement d’utiliser une valeur dynamique pour toutes les images, comme nous l’avons vu plus tôt.
img {
width: 100%;
}Mais cela ne réduira pas la charge imposée à vos visiteurs sur mobile lorsqu’ils accèdent à votre site web.
Veillez à toujours inclure un srcset avec les différentes tailles de votre image lorsque vous ajoutez des images à vos pages.
Faire cela manuellement peut prendre beaucoup de temps, mais avec un CMS comme WordPress, cela se produit automatiquement lorsque vous téléversez des fichiers média.
Une typographie responsive du texte de votre site web
La conception de sites web responsive est principalement axée sur le fait que les blocs de mise en page les éléments et les médias soient responsives. Le texte est souvent traité comme une réflexion secondaire.
Mais pour une conception vraiment responsive, vous devez également ajuster la taille de vos polices de caractères pour qu’elles correspondent à la taille de l’écran.
Le plus simple est de fixer une valeur statique pour la taille de la police, par exemple 22 px, et de l’adapter dans chaque media query.
Vous pouvez cibler plusieurs éléments de texte en même temps en utilisant une virgule pour séparer chacun d’entre eux.
@media (min-width: 992px) {
body, p, a, h4 {
font-size: 14px;
}
}Tester le responsive
Tout d’abord, vous voulez tester si votre site est adapté aux mobiles avec le test de Google. Il vous suffit de saisir l’URL de votre site web et de cliquer sur le bouton « tester l’URL » pour obtenir les résultats.
Ne vous inquiétez pas si la recherche de votre site prend du temps. Cela ne reflète pas la vitesse de chargement de votre page.
Si vous avez suivi les étapes décrites dans cet article, cela devrait signifier que vous avez un site web adapté aux téléphones mobiles.
Ensuite, vous voulez tester votre site sur plusieurs tailles d’écran avec un outil comme les outils de développement Chrome.
Appuyez sur CTRL + Shift + I sur les ordinateurs Windows, ou sur Commande + Option + I sur les Macs pour ouvrir la vue du périphérique concerné. À partir de là, vous pouvez sélectionner l’appareil mobile ou la tablette de votre choix pour tester si votre design est reposnive.
Il y a quelques questions auxquelles vous souhaitez répondre lors de ce processus.
- La mise en page s’adapte-t-elle au nombre correct de colonnes ?
- Le contenu s’intègre-t-il bien dans les éléments de mise en page et les conteneurs des différents écrans ?
- La taille des caractères est-elle adaptée à chaque écran ?
Unités CSS et valeurs pour un design responsive
Le CSS a des unités de mesure à la fois absolues et relatives. Un exemple d’unité de longueur absolue est un cm ou un px. Les unités relatives ou les valeurs dynamiques dépendent de la taille et de la résolution de l’écran ou de la taille des caractères de l’élément racine.
PX vs EM vs REM vs Viewport Units pour un design responsive
- PX – un seul pixel
- EM – unité relative basée sur la taille de la police de l’élément.
- REM – unité relative basée sur la taille de la police de l’élément.
- VH, VW – % de la hauteur ou de la largeur de la fenêtre.
- % – le pourcentage de l’élément parent.
Un nouveau concepteur ou développeur web devrait probablement s’en tenir aux pixels pour le texte car ils constituent l’unité de longueur la plus simple en CSS.
Mais lorsqu’il s’agit de définir la largeur et la largeur maximale des images et autres éléments, l’utilisation de % est la meilleure solution. Cette approche permettra de s’assurer que les éléments s’adaptent à la taille de l’écran de chaque appareil.
Exemples de design responsive
Ci-dessous, nous allons présenter quelques exemples de conception de sites web responsives dans différents secteurs d’activité – et apprendre de ce qu’ils font bien et mal.
1. Journal en ligne : New York Times
Sur un ordinateur, la mise en page du NYT rappelle celle d’un journal traditionnel, avec des visuels et différentes lignes et colonnes de contenu. Il semble y avoir une colonne ou une ligne séparée pour chaque catégorie de nouvelles.
Sur mobile, il est conforme à la norme de la colonne unique et ajuste également le menu pour qu’il soit au format accordéon afin d’être plus facile à utiliser.
2. Blog : The Art of Non-Conformity
Le blog de Chris Guillebeau « The Art of Non-Conformity » est en plein essor depuis plus d’une décennie. Bien que le design ne soit pas des plus avant-gardistes, il est responsive et adapte la colonne latérale à deux colonnes et la présentation du contenu principal à un design à une seule colonne sur les appareils mobiles.
3. Ecommerce : Amazon
Si Amazon est un leader mondial du commerce électronique, c’est pour une bonne raison : son interface utilisateur est parfaitement fluide sur tous les appareils.
La mise en page sur tablette supprime simplement une partie de l’espace blanc et ajoute une section d’icônes déroulantes pour faire tenir plus de contenu dans un espace plus petit.
Leur mise en page mobile permet de regrouper les informations sur une seule colonne, en se concentrant sur l’essentiel, comme l’historique des achats récents, plutôt que sur les différentes icônes de liens de section de leur page d’accueil principale.
4. Site vidéo : YouTube
Le cœur de la conception de la page d’accueil de YouTube est une grille flexible de vidéos qui sont pertinentes pour chaque utilisateur. Sur les tablettes, le nombre de colonnes dans chaque ligne descend à trois. Sur les mobiles, il est réduit à une seule colonne.
La version mobile déplace également le menu principal vers le bas de l’écran, plus près des pouces des utilisateurs de leurs smartphones. Ce simple déplacement améliore la navigation et l’UX.
5. Online Magazine: Wired
L’approche de Wired en matière de design web responsive est axée sur l’implémentation d’une mise en page à colonne unique sur tous les petits écrans, à commencer par les tablettes.
Il s’agit d’une mise en page de base, mais qui permet d’attirer plus facilement l’attention des utilisateurs sur les grands sujets et leur CTA à s’abonner.
Résumé
Il y a beaucoup d’éléments différents qui entrent dans la conception de sites web responsives. Sans une compréhension de base du HTML et du CSS, il peut être facile de faire des erreurs.
Mais en vous familiarisant avec les différents éléments de base, en analysant les exemples à l’aide d’outils de développement web et en testant au fur et à mesure le code d’exemple, vous devriez être en mesure de rendre votre site web responsive sans aucun problème majeur.
Si cela semble trop difficile à réaliser, vous pouvez toujours soit engager un développeur WordPress, soit simplement vous assurer que votre thème est déjà responsive.
Rédacteur en chef chez Kinsta et consultant en marketing de contenu pour les développeurs de plugins WordPress. Connectez-vous avec Matteo sur Twitter.
Laisser un commentaire