{"id":42130,"date":"2020-09-28T06:56:47","date_gmt":"2020-09-28T13:56:47","guid":{"rendered":"https:\/\/kinqsta.com\/?p=78861&preview=true&preview_id=78861"},"modified":"2024-09-17T15:28:01","modified_gmt":"2024-09-17T14:28:01","slug":"design-web-responsive","status":"publish","type":"post","link":"https:\/\/kinqsta.com\/fr\/blog\/design-web-responsive\/","title":{"rendered":"Le guide du d\u00e9butant pour un design web responsive (exemples de code et de mise en page)"},"content":{"rendered":"

L’internet \u00e9tant de plus en plus accessible \u00e0 partir d’appareils mobiles, il ne suffit plus d’avoir un site web statique<\/a>\u00a0dont la conception n’a d’int\u00e9r\u00eat que sur un \u00e9cran d’ordinateur.<\/p>\n

Sans oublier qu’il faut aussi tenir compte des tablettes, des ordinateurs portables 2 en 1 et des diff\u00e9rents mod\u00e8les de smartphones avec des dimensions d’\u00e9cran diff\u00e9rentes lors de la conception d’un design.<\/p>\n

Donc, le fait de mettre votre contenu<\/a> dans une seule colonne et en rester l\u00e0 ne va pas suffire.<\/p>\n

Gr\u00e2ce \u00e0 un design web<\/a> responsive, vous pouvez faire en sorte que votre site web soit le plus attrayant possible sur les t\u00e9l\u00e9phones portables, les tablettes, les ordinateurs portables et les \u00e9crans d\u2019ordinateurs de bureau.<\/p>\n

Et l’am\u00e9lioration de l’exp\u00e9rience utilisateur signifie des conversions plus \u00e9lev\u00e9es et une croissance de l\u2019activit\u00e9.<\/p>\n

Ce guide vous donnera tout ce que vous devez savoir sur la conception de sites web responsives, y compris des d\u00e9finitions, une pr\u00e9sentation \u00e9tape par \u00e9tape, des exemples, et plus encore.<\/p>\n

<\/div><\/kinsta-auto-toc>\n

Consultez notre guide vid\u00e9o sur la conception web responsive :<\/h3>\n<\/kinsta-video>\n

Qu’est-ce que le design web responsive ?<\/h2>\n

Le design responsive est une approche de la conception web qui permet d’adapter votre contenu web aux diff\u00e9rentes tailles d’\u00e9cran et de fen\u00eatre d’une vari\u00e9t\u00e9 d’appareils.<\/p>\n

Par exemple, votre contenu peut \u00eatre s\u00e9par\u00e9 en diff\u00e9rentes colonnes sur les grands \u00e9crans, car elles sont suffisamment larges pour s’adapter \u00e0 ce design.<\/p>\n

Si vous s\u00e9parez votre contenu en plusieurs colonnes sur un appareil mobile, il sera difficile pour les utilisateurs de le lire et d’interagir avec lui.<\/p>\n

Le design responsive<\/a> permet de fournir \u00e0 diff\u00e9rents appareils plusieurs mises en page distinctes de votre contenu et de votre design en fonction de la taille de l’\u00e9cran.<\/p>\n\n

Design web responsive vs design adaptatif<\/h2>\n

La diff\u00e9rence 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\u00e8tement diff\u00e9rentes de la m\u00eame page.<\/p>\n

\"Design
Design responsive ou adaptatif<\/figcaption><\/figure>\n

Ce sont deux tendances cruciales de la conception web<\/a> qui aident les webmasters \u00e0 contr\u00f4ler l’apparence de leur site sur diff\u00e9rents \u00e9crans, mais l’approche est diff\u00e9rente.<\/p>\n

Gr\u00e2ce \u00e0 un design responsive, les utilisateurs acc\u00e9deront au m\u00eame fichier de base par le biais de leur navigateur, quel que soit l’appareil, mais le code CSS<\/a> contr\u00f4lera la mise en page et la rendra diff\u00e9remment en fonction de la taille de l’\u00e9cran. Avec le design adaptatif, il existe un script qui v\u00e9rifie la taille de l’\u00e9cran, puis acc\u00e8de au mod\u00e8le con\u00e7u pour cet appareil.<\/p>\n

Pourquoi le design responsive est important<\/h2>\n

Si vous \u00eates nouveau dans le domaine du design web, du d\u00e9veloppement<\/a> ou des blogs,<\/a> vous vous demandez peut-\u00eatre pourquoi le design responsive\u00a0 est si important.<\/p>\n

La r\u00e9ponse est simple. Il ne suffit plus de concevoir pour un seul appareil. Le trafic web mobile a d\u00e9pass\u00e9 celui des ordinateurs de bureau et repr\u00e9sente d\u00e9sormais la majorit\u00e9 du trafic des sites web,<\/a> soit plus de 51 %<\/a>.<\/p>\n

\"Part
Part de march\u00e9 des t\u00e9l\u00e9phones portables, des tablettes et des ordinateurs de bureau<\/figcaption><\/figure>\n

Lorsque plus de la moiti\u00e9 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\u00e7ue pour un ordinateur. Elle serait difficile \u00e0 lire et \u00e0 utiliser, et conduirait \u00e0 une mauvaise exp\u00e9rience utilisateur.<\/p>\n

Mais ce n’est pas tout. Les utilisateurs d’appareils mobiles repr\u00e9sentent \u00e9galement la majorit\u00e9 des visites sur les moteurs de recherche<\/a>.<\/p>\n

\"Trafic
Trafic de recherche mobile<\/figcaption><\/figure>\n

Enfin, ces derni\u00e8res ann\u00e9es, le mobile est devenu l’un des plus importants canaux publicitaires. M\u00eame dans un march\u00e9 post-pand\u00e9mique, les d\u00e9penses publicitaires sur les mobiles augmentent<\/a> de 4,8 % pour atteindre 91,52 milliards de dollars.<\/p>\n

Que vous choisissiez de faire de la publicit\u00e9 sur les r\u00e9seaux sociaux<\/a> ou d’utiliser une approche organique comme le r\u00e9f\u00e9rencement YouTube<\/a>, la grande majorit\u00e9 de votre trafic proviendra des utilisateurs mobiles.<\/p>\n

Si vos pages d\u2019atterrissage<\/a>\u00a0ne sont pas optimis\u00e9es pour le mobile et faciles \u00e0 utiliser, vous ne pourrez pas maximiser le retour sur investissement de vos efforts de marketing. De mauvais taux de conversion<\/a> entra\u00eeneront une diminution du nombre de prospects et des d\u00e9penses publicitaires inutiles.<\/p>\n

Les sites WordPress sont-ils responsives ?<\/h2>\n

Les sites WordPress sont responsives en fonction du th\u00e8me de votre site WP. Un th\u00e8me WordPress<\/a> est l’\u00e9quivalent d’un mod\u00e8le pour un site web statique et contr\u00f4le la conception et la mise en page de votre contenu.<\/p>\n

Si vous utilisez un th\u00e8me WordPress par d\u00e9faut, comme Twenty Twenty,<\/a> le design est responsive, mais comme il s’agit d’un design \u00e0 colonne unique, vous ne vous en rendrez peut-\u00eatre pas compte en le regardant sur diff\u00e9rents \u00e9crans.<\/p>\n

Si vous utilisez un autre th\u00e8me WordPress, vous pouvez tester s’il est responsive ou non en comparant son apparence sur diff\u00e9rents appareils ou en utilisant les outils de d\u00e9veloppement Chrome.<\/p>\n

Les \u00e9l\u00e9ments de base de la conception de sites web responsives<\/h2>\n

Dans cette section, nous aborderons les fondements d’une conception de site web responsive et ses diff\u00e9rents \u00e9l\u00e9ments.<\/p>\n

<\/div><\/kinsta-auto-toc>\n

CSS et HTML<\/h3>\n

Le fondement du design web responsive est la combinaison de HTML et de CSS<\/a>, deux langages qui contr\u00f4lent le contenu et la pr\u00e9sentation d’une page dans un navigateur web donn\u00e9.<\/p>\n

\"HTML
HTML vs CSS (Source de l’image : codingdojo.com)<\/figcaption><\/figure>\n

Le HTML contr\u00f4le principalement la structure, les \u00e9l\u00e9ments et le contenu d’une page web. Par exemple, pour ajouter une image \u00e0 un site web,<\/a> vous devez utiliser un code HTML comme celui-ci :<\/p>\n

<img src=\"image.gif\" alt=\"image\" class=\u201dfull-width-img\u201d><\/code><\/pre>\n
Vous pouvez d\u00e9finir une \u00ab\u00a0classe\u00a0\u00bb ou un \u00ab\u00a0id\u00a0\u00bb que vous pouvez cibler plus tard avec du code CSS<\/a>.<\/p>\n
Vous pouvez \u00e9galement contr\u00f4ler les attributs primaires tels que la hauteur et la largeur dans votre HTML, mais cela n’est plus consid\u00e9r\u00e9 comme une bonne pratique.<\/p>\n
Le CSS<\/a> est utilis\u00e9 \u00e0 la place pour modifier la conception et la mise en page des \u00e9l\u00e9ments que vous incluez dans une page avec du HTML. Le code CSS peut \u00eatre inclus dans une section <style><\/code> d’un document HTML, ou dans un fichier de feuille de style<\/a> s\u00e9par\u00e9.<\/p>\n
Par exemple, nous pourrions modifier la largeur de toutes les images HTML au niveau des \u00e9l\u00e9ments comme ceci :<\/p>\n
img {\nwidth: 100%;\n}<\/code><\/pre>\n
Ou nous pourrions cibler la classe sp\u00e9cifique \u00ab\u00a0full-width-img\u00a0\u00bb en ajoutant un point devant.<\/p>\n
.full-width-img {\nwidth: 100%;\n}<\/code><\/pre>\n
Vous pouvez \u00e9galement contr\u00f4ler le design au-del\u00e0 de la hauteur, de la largeur et de la couleur<\/a>. C’est en utilisant le CSS de cette mani\u00e8re que vous rendez un design responsive\u00a0 lorsque vous le combinez avec une technique appel\u00e9e \u00ab\u00a0media query\u00a0\u00bb.<\/p>\n
Media queries<\/h3>\n
Une media query<\/a> est une partie fondamentale de CSS3 qui vous permet de rendre le contenu pour l’adapter \u00e0 diff\u00e9rents facteurs comme la taille de l’\u00e9cran ou la r\u00e9solution.<\/p>\n
\"Media
Media queries pour ordinateur de bureau, tablette, smartphone<\/figcaption><\/figure>\n
Cela fonctionne de la m\u00eame mani\u00e8re qu’une clause \u00abif\u00a0\u00bb dans certains langages de programmation<\/a>, c’est-\u00e0-dire qu’il v\u00e9rifie si la fen\u00eatre de visualisation d’<\/em>un \u00e9cran est suffisamment ou trop large avant d’ex\u00e9cuter le code appropri\u00e9.<\/p>\n
@media screen and (min-width: 780px) {\n.full-width-img {\nmargin: auto;\nwidth: 90%;\n}<\/code><\/pre>\n
Si l’\u00e9cran fait au moins 780 pixels de large, les images de la classe \u00ab\u00a0full-width-img\u00a0\u00bb occuperont 90% de l’\u00e9cran et seront automatiquement centr\u00e9es par des marges de m\u00eame largeur.<\/p>\n
Mises en page fluides<\/h3>\n
Une mise en page fluide est un \u00e9l\u00e9ment essentiel d’un design moderne et responsive. Dans le bon vieux temps, on fixait une valeur statique pour chaque \u00e9l\u00e9ment HTML, par exemple 600 pixels.<\/p>\n
Une mise en page fluide repose plut\u00f4t sur des valeurs dynamiques comme un pourcentage de la largeur de la fen\u00eatre de visualisation.<\/p>\n
\"Exemple
Exemple de mise en page<\/figcaption><\/figure>\n
Cette approche permettra d’augmenter ou de diminuer dynamiquement les diff\u00e9rentes tailles des \u00e9l\u00e9ments du conteneur en fonction de la taille de l’\u00e9cran.<\/p>\n
Mise en page Flexbox<\/h3>\n
Si une mise en page bas\u00e9e sur un pourcentage est fluide, de nombreux concepteurs et d\u00e9veloppeurs web ont estim\u00e9 qu’elle n’\u00e9tait pas assez dynamique ou flexible. Flexbox est un module CSS con\u00e7u comme un moyen plus efficace de disposer plusieurs \u00e9l\u00e9ments, m\u00eame lorsque la taille du contenu \u00e0 l’int\u00e9rieur du conteneur est inconnue.<\/p>\n
Un conteneur flexible permet d’agrandir les articles pour remplir l’espace libre disponible ou de les r\u00e9tr\u00e9cir pour \u00e9viter le d\u00e9bordement. Ces conteneurs flex ont un certain nombre de propri\u00e9t\u00e9s uniques, comme le contenu justifi\u00e9, que vous ne pouvez pas modifier avec un \u00e9l\u00e9ment HTML ordinaire.<\/p>\n
\"Conteneur
Conteneur Flexbox<\/figcaption><\/figure>\n
C’est un sujet compliqu\u00e9, donc si vous voulez l’utiliser dans votre conception, vous devriez lire le guide flexbox de CSS Tricks<\/a>.<\/p>\n
Images responsives<\/h3>\n
L’it\u00e9ration la plus \u00e9l\u00e9mentaire des images responsives suit le m\u00eame concept qu’une mise en page fluide, en utilisant une unit\u00e9 dynamique pour contr\u00f4ler la largeur ou la hauteur. L’exemple de code CSS dont nous avons parl\u00e9 plus haut permet d\u00e9j\u00e0 d’atteindre cet objectif :<\/p>\n
img {\nwidth: 100%;\n}<\/code><\/pre>\n
L’unit\u00e9 % correspond \u00e0 un pourcentage unique de la largeur ou de la hauteur de la fen\u00eatre de visualisation et permet de s’assurer que l’image reste proportionnelle \u00e0 l’\u00e9cran.<\/p>\n
Le probl\u00e8me de cette approche est que chaque utilisateur doit t\u00e9l\u00e9charger l’image en taille r\u00e9elle, m\u00eame sur son t\u00e9l\u00e9phone portable.<\/p>\n
Pour servir diff\u00e9rentes versions mises \u00e0 l’\u00e9chelle pour diff\u00e9rents appareils, vous devez utiliser l’attribut HTML srcset<\/code> dans vos balises img, pour sp\u00e9cifier plus d’une taille d’image parmi lesquelles choisir.<\/p>\n
<img srcset=\"large-img.jpg 1024w,\nmiddle-img.jpg 640w,\nsmall-img.jpg \u00a0320w\"\nsrc=\"small.jpg\"\n\/><\/code><\/pre>\n
WordPress utilise automatiquement cette fonctionnalit\u00e9 pour les images incluses dans les articles ou les pages.<\/p>\n
Vitesse<\/h3>\n
Lorsque vous essayez de cr\u00e9er un design adapt\u00e9 \u00e0 votre site web, la vitesse de chargement doit \u00eatre une priorit\u00e9 absolue<\/a>.<\/p>\n
Les pages qui se chargent en 2 secondes ont un taux de rebond moyen de 9\u00a0%<\/a>, tandis que les pages qui prennent 5 secondes ont un taux de rebond de 38\u00a0%.<\/p>\n
Votre approche du responsive ne doit pas bloquer ou retarder le premier rendu de votre page plus qu’il n’est n\u00e9cessaire.<\/p>\n
Il existe plusieurs moyens de rendre vos pages plus rapides. L’optimisation de vos images<\/a>, la mise en cache<\/a>, la minification, l’utilisation d’une mise en page CSS plus efficace, le fait d’\u00e9viter le blocage du rendu JS<\/a> et l’am\u00e9lioration de votre chemin critique de rendu <\/a>sont autant d\u2019excellentes id\u00e9es que vous devriez envisager.<\/p>\n
Les clients de Kinsta<\/a> ont acc\u00e8s \u00e0 un moyen rapide et facile d’accomplir cela en utilisant la fonction de minification du code<\/a> qui est int\u00e9gr\u00e9e directement dans le tableau de bord MyKinsta<\/a>, permettant aux clients d’activer la minification automatique de CSS et JavaScript d’un simple clic.<\/p>\n
Vous pourriez \u00e9galement essayer d’impl\u00e9menter Google AMP pour vos pages mobiles, mais dans notre \u00e9tude de cas Google AMP,<\/a> nos prospects mobiles ont chut\u00e9 de 59\u00a0%.<\/p>\n
Points de rupture responsives communs<\/h2>\n
Pour travailler avec les media queries, vous devez d\u00e9cider des \u00ab\u00a0points de rupture responsive\u00a0\u00bb ou des points d’arr\u00eat de la taille de l’\u00e9cran. Un point de rupture est la largeur de l’\u00e9cran o\u00f9 vous utilisez une media query pour impl\u00e9menter de nouveaux styles CSS.<\/p>\n
Tailles d’\u00e9cran communes<\/h3>\n