{"id":36970,"date":"2020-02-19T00:32:16","date_gmt":"2020-02-19T08:32:16","guid":{"rendered":"https:\/\/kinsta.com\/?p=63976"},"modified":"2023-08-22T14:50:54","modified_gmt":"2023-08-22T13:50:54","slug":"meilleures-pratiques-design-web","status":"publish","type":"post","link":"https:\/\/kinsta.com\/fr\/blog\/meilleures-pratiques-design-web\/","title":{"rendered":"Meilleures pratiques de web design pour votre prochain projet de site"},"content":{"rendered":"<p>Quelle est la cause de l&rsquo;\u00e9cart important entre ce que certains <a href=\"https:\/\/kinsta.com\/fr\/blog\/cout-site-web-wordpress\/\">d\u00e9veloppeurs WordPress facturent par rapport aux autres<\/a> ? Pour r\u00e9pondre \u00e0 cette question, il faut d&rsquo;abord se demander pourquoi vous voulez un site web.<\/p>\n<p>Certains d\u00e9veloppeurs se concentrent sur le produit final : la combinaison de code qui permet d&rsquo;obtenir un site web au design assez agr\u00e9able.<\/p>\n<p>Mais les d\u00e9veloppeurs ayant des connaissances en marketing ne se contentent pas de construire quelque chose qui a l&rsquo;air beau. Ils agissent en tant que consultants aupr\u00e8s de clients qui cherchent \u00e0 atteindre des objectifs sp\u00e9cifiques avec leurs sites web.<\/p>\n<figure style=\"width: 1321px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2020\/03\/conception-sites-web-strictement-connextee-objectifs-commerciaux.jpg\" alt=\"La conception de sites web est strictement connext\u00e9e avec vos objectifs commerciaux\" width=\"1321\" height=\"732\"><figcaption class=\"wp-caption-text\">Le design de sites web est strictement connect\u00e9 avec vos objectifs commerciaux<\/figcaption><\/figure>\n<p>Dans cette optique, <a href=\"https:\/\/kinsta.com\/fr\/blog\/engager-developpeur-wordpress\/\">engager quelqu&rsquo;un pour construire un site web<\/a> qui ne semble pas int\u00e9ress\u00e9 par vos objectifs finaux ou qui ne pose pas de questions \u00e0 ce sujet est <strong>un signal d&rsquo;alarme<\/strong>. Il est important de souligner que m\u00eame le plus beau des designs web n&rsquo;est <em>pas forc\u00e9ment <\/em>id\u00e9al pour convertir les visiteurs en clients.<\/p>\n<p>Cela dit, 94 % des personnes <a href=\"https:\/\/www.business.com\/articles\/tyler-horvath-responsive-web-design\/\">jugent de votre cr\u00e9dibilit\u00e9 en fonction<\/a> du design de votre site web.<\/p>\n<p>Vous devez donc plut\u00f4t vous concentrer sur l&rsquo;utilisation de votre design pour offrir une exp\u00e9rience utilisateur id\u00e9ale. En premier lieu, vous devez permettre aux visiteurs de trouver facilement les informations qu&rsquo;ils recherchent en visitant votre site web tout en les guidant vers les activit\u00e9s de <a href=\"https:\/\/kinsta.com\/fr\/blog\/suivi-des-conversions\/\">conversion des objectifs<\/a>.<\/p>\n<p>Ces meilleures pratiques de design web se concentrent sur l&rsquo;intersection entre la cr\u00e9ation d&rsquo;un beau site web et celle d&rsquo;un site qui sert votre entreprise.<\/p>\n<div><\/div><kinsta-auto-toc heading=\"Table of Contents\" exclude=\"last\" list-style=\"arrow\" selector=\"h2\" count-number=\"-1\"><\/kinsta-auto-toc>\n<h3>Vous pr\u00e9f\u00e9rez regarder <a href=\"https:\/\/www.youtube.com\/watch?v=uS9wnNsamzA\">la version vid\u00e9o<\/a> ?<\/h3>\n<kinsta-video src=\"https:\/\/www.youtube.com\/watch?v=uS9wnNsamzA\"><\/kinsta-video>\n<h2>Qu&rsquo;est-ce qui d\u00e9finit les meilleures pratiques en mati\u00e8re de design web ?<\/h2>\n<p>Pour \u00eatre s\u00fbr, tout le monde a des opinions sur ce qui constitue un site web bien con\u00e7u.<\/p>\n\n<p>Mais limitons les opinions de chacun en nous en remettant aux experts.<\/p>\n<p>Selon <a href=\"https:\/\/www.orbitmedia.com\/blog\/web-design-standards\/\">Orbit Media<\/a>, vous pouvez regrouper les meilleures pratiques de design web dans ces trois cat\u00e9gories de normes de base :<\/p>\n<ul>\n<li><strong>Normes de marque : <\/strong>Vous connaissez peut-\u00eatre mieux ce concept que celui de \u00ab\u00a0marque\u00a0\u00bb, de \u00ab\u00a0guide de style\u00a0\u00bb ou de \u00ab\u00a0tableau d&rsquo;ambiance\u00a0\u00bb. Ces normes comprennent tout ce qui a trait \u00e0 l&rsquo;aspect d&rsquo;un site web et implique l&rsquo;utilisation de couleurs, de typographie et d&rsquo;\u00e9l\u00e9ments sp\u00e9cifiques \u00e0 l&rsquo;entreprise concern\u00e9e.<\/li>\n<li><strong>Normes de codage : <\/strong>Les sites web doivent \u00eatre construits conform\u00e9ment aux <a href=\"http:\/\/www.w3.org\/standards\/\">normes de programmation<\/a> convenues par le W3C, la communaut\u00e9 internationale qui travaille ensemble pour d\u00e9velopper des normes pour le web.<\/li>\n<li><strong>Normes d&rsquo;accessibilit\u00e9 : <\/strong>L&rsquo;acc\u00e8s \u00e0 l&rsquo;information est un droit humain fondamental, qui a \u00e9t\u00e9 reconnu par la Convention des Nations Unies pour les droits des personnes handicap\u00e9es. En outre, le fait de rendre votre site accessible a <a href=\"https:\/\/www.searchenginejournal.com\/accessibility-seo-and-sales\/281899\/\">des effets positifs<\/a> &#8211; non seulement sur les ventes mais sur le <a href=\"https:\/\/kinsta.com\/fr\/blog\/que-veut-dire-referencement-seo\/\">SEO<\/a> \u00e9galement. Le W3C partage une liste de base de normes que vous devez suivre pour <a href=\"http:\/\/www.w3.org\/standards\/webdesign\/accessibility\">concevoir un site web accessible<\/a>. Nous d\u00e9taillerons plus loin dans cet article les meilleures pratiques en mati\u00e8re de design de sites web.<\/li>\n<\/ul>\n<p>Examinons comment d\u00e9velopper des pratiques de design web bas\u00e9es sur chacune de ces normes :<\/p>\n<h2>Normes de marque<\/h2>\n<p>Les sites web dont l&rsquo;image de marque n&rsquo;est pas coh\u00e9rente peuvent \u00eatre stressants et pr\u00eater \u00e0 confusion. Il n&rsquo;est donc pas surprenant que quelque 38 % des visiteurs aient d\u00e9clar\u00e9 qu&rsquo;ils <a href=\"https:\/\/blogs.adobe.com\/creative\/files\/2015\/12\/Adobe-State-of-Content-Report.pdf\">cessent de s&rsquo;engager sur un site web<\/a> si le contenu ou la pr\u00e9sentation sont peu attrayants.<\/p>\n<p>En gardant \u00e0 l&rsquo;esprit que l&rsquo;apparence n&rsquo;est pas <em>tout<\/em>, voici quelques principes de base \u00e0 prendre en compte pour cr\u00e9er un site web que les gens veulent utiliser :<\/p>\n<h3>L\u2019\u00e9quilibre<\/h3>\n<p><em>L&rsquo;\u00e9quilibre<\/em> est le principe de design qui prescrit la mani\u00e8re de distribuer efficacement les \u00e9l\u00e9ments visuels. En g\u00e9n\u00e9ral, un design \u00e9quilibr\u00e9 semble propre et naturel et pr\u00e9sente une bonne sym\u00e9trie (m\u00eame si \u00e7a n&rsquo;est <a href=\"https:\/\/wpamelia.com\/visual-design-guide\/\">pas n\u00e9cessairement une <em>condition d&rsquo;<\/em>\u00e9quilibre<\/a>).<\/p>\n<p>Vous pouvez int\u00e9grer un \u00e9quilibre dans le design du site web en termes de mise en page.<\/p>\n<p>Le centrage du texte ou d&rsquo;autres \u00e9l\u00e9ments sur la page est un moyen simple de le faire. En g\u00e9n\u00e9ral, les pages web sont construites sur un syst\u00e8me de grille, ce qui cr\u00e9e une forme d&rsquo;\u00e9quilibre. Vous pouvez utiliser la propri\u00e9t\u00e9<em> CSS float<\/em> pour positionner les \u00e9l\u00e9ments et les \u00e9quilibrer dans la page.<\/p>\n<p>L&rsquo;\u00e9quilibre peut \u00eatre atteint de trois fa\u00e7ons :<\/p>\n<h4>1. Design sym\u00e9trique<\/h4>\n<figure style=\"width: 1321px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2020\/02\/exemple-design-symetrique.jpg\" alt=\"Exemple de design sym\u00e9trique\" width=\"1321\" height=\"944\"><figcaption class=\"wp-caption-text\">Exemple de design sym\u00e9trique<\/figcaption><\/figure>\n<p>Disposer les \u00e9l\u00e9ments de mani\u00e8re \u00e9gale sur toute la page web. Par exemple, si vous avez un \u00e9l\u00e9ment lourd \u00e0 gauche, vous devriez avoir un \u00e9l\u00e9ment lourd \u00e0 droite. Comme mentionn\u00e9, le centrage est le moyen le plus simple d&rsquo;obtenir la sym\u00e9trie, mais il peut parfois sembler plat ou ennuyeux.<\/p>\n<p>Pour \u00e9viter de donner \u00e0 la page un aspect monotone, vous pouvez cr\u00e9er un \u00e9quilibre en utilisant diff\u00e9rents \u00e9l\u00e9ments, par exemple en \u00e9quilibrant une grande image avec un bloc de texte. Il existe \u00e9galement un type d&rsquo;\u00e9quilibre sym\u00e9trique appel\u00e9 <em>\u00e9quilibre radial<\/em>, o\u00f9 les objets rayonnent \u00e0 partir d&rsquo;un point central.<\/p>\n<h4>2. Design asym\u00e9trique<\/h4>\n<figure style=\"width: 1321px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2020\/02\/exemple-design-asymetrique.jpg\" alt=\"Exemple de design asym\u00e9trique\" width=\"1321\" height=\"944\"><figcaption class=\"wp-caption-text\">Exemple de design asym\u00e9trique<\/figcaption><\/figure>\n<p>Plus difficile \u00e0 r\u00e9aliser, le design asym\u00e9trique implique une r\u00e9partition in\u00e9gale des \u00e9l\u00e9ments sur une page. Par exemple, vous pouvez avoir un grand \u00e9l\u00e9ment au centre, qui est \u00e9quilibr\u00e9 par un \u00e9l\u00e9ment plus petit plus loin.<\/p>\n<p>Vous pouvez utiliser d&rsquo;autres \u00e9l\u00e9ments de design, tels que la couleur ou la texture, pour \u00e9quilibrer un design asym\u00e9trique.<\/p>\n<h4>3. D\u00e9s\u00e9quilibre<\/h4>\n<figure style=\"width: 1321px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2020\/02\/exemple-design-desequilibre.jpg\" alt=\"Exemple de design en d\u00e9s\u00e9quilibre\" width=\"1321\" height=\"944\"><figcaption class=\"wp-caption-text\">Exemple de design en d\u00e9s\u00e9quilibre<\/figcaption><\/figure>\n<p>Ces types de designs sugg\u00e8rent le mouvement et l&rsquo;action, ce qui peut mettre les gens mal \u00e0 l&rsquo;aise. Si votre site web a pour but de faire r\u00e9fl\u00e9chir les gens, alors un design d\u00e9s\u00e9quilibr\u00e9 est fait pour vous.<\/p>\n<h3>Composition<\/h3>\n<p>Le terme \u00ab\u00a0<em>composition\u00a0\u00bb fait<\/em> r\u00e9f\u00e9rence \u00e0 l&#8217;emplacement et \u00e0 l&rsquo;organisation des \u00e9l\u00e9ments du design.<\/p>\n<figure style=\"width: 1320px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2020\/02\/composition.jpg\" alt=\"Composition\" width=\"1320\" height=\"883\"><figcaption class=\"wp-caption-text\">Composition<\/figcaption><\/figure>\n<p><a href=\"https:\/\/www.photographymad.com\/pages\/view\/rule-of-thirds\">La r\u00e8gle des tiers<\/a> est couramment utilis\u00e9e pour cr\u00e9er une composition \u00e9quilibr\u00e9e, en particulier avec des photos.<\/p>\n<h3>Espacement<\/h3>\n<p>Les \u00e9l\u00e9ments doivent \u00eatre espac\u00e9s de mani\u00e8re r\u00e9guli\u00e8re afin que les utilisateurs puissent diff\u00e9rencier les sections ou les blocs.<\/p>\n<figure style=\"width: 1321px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2020\/02\/role-espacement-design-sites-web.jpg\" alt=\"Le r\u00f4le de l'espacement dans le design des sites web\" width=\"1321\" height=\"684\"><figcaption class=\"wp-caption-text\">Le r\u00f4le de l&rsquo;espacement dans le design des sites web<\/figcaption><\/figure>\n<p>Vous devez \u00e9galement introduire un espace n\u00e9gatif ou l&rsquo;espace entre et autour du sujet d&rsquo;une image. L&rsquo;espace n\u00e9gatif peut r\u00e9duire le bruit visuel, augmenter la lisibilit\u00e9 et apporter un \u00e9quilibre.<\/p>\n<p>Vous pouvez introduire un espace n\u00e9gatif en ajoutant des marges (margin) et des marges internes (padding) autour de vos \u00e9l\u00e9ments de design.<\/p>\n<h3>Point focal<\/h3>\n<figure style=\"width: 1321px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2020\/02\/attirer-attention-sur-element.jpg\" alt=\"Attirer l'attention sur un \u00e9l\u00e9ment\" width=\"1321\" height=\"732\"><figcaption class=\"wp-caption-text\">Attirer l&rsquo;attention sur un \u00e9l\u00e9ment<\/figcaption><\/figure>\n<p>Cr\u00e9ez une zone sur laquelle vous souhaitez attirer l&rsquo;attention. Elle doit \u00eatre la partie la plus importante de votre page et, dans l&rsquo;id\u00e9al, chaque page doit se concentrer sur <em>un seul<\/em> point focal.<\/p>\n<h3>Couleur<\/h3>\n<p><em>La couleur<\/em> est un \u00e9l\u00e9ment de design important lorsqu&rsquo;il s&rsquo;agit de la marque. Id\u00e9alement, vous entrez dans le processus de design de sites web avec une compr\u00e9hension des <a href=\"https:\/\/kinsta.com\/fr\/blog\/palettes-couleurs-site\/\">couleurs<\/a> que vous voulez associer \u00e0 votre marque.<\/p>\n<p>Pour le design de sites web en particulier, il est utile de commencer par un tableau de couleurs pour votre marque.<\/p>\n<figure style=\"width: 1320px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2020\/02\/exemple-palette-couleurs-kinsta.jpg\" alt=\"Exemple de la palette de couleurs de Kinsta\" width=\"1320\" height=\"443\"><figcaption class=\"wp-caption-text\">Exemple de la palette de couleurs de Kinsta<\/figcaption><\/figure>\n<p>Choisissez une couleur primaire et secondaire (la couleur secondaire peut <em>compl\u00e9ter <\/em>ou <em>contraster<\/em> la couleur primaire), et une teinte plus claire et plus fonc\u00e9e pour chacune. Limitez votre utilisation de la couleur afin que les diff\u00e9rentes accentuations ne deviennent pas une plaie pour les yeux.<\/p>\n<p><a href=\"https:\/\/color.adobe.com\/create\">Adobe Color<\/a> est un excellent outil gratuit pour tester diff\u00e9rentes combinaisons de couleurs afin de cr\u00e9er une palette de travail pour les \u00e9l\u00e9ments d&rsquo;un site web.<\/p>\n<p>En outre, lorsqu&rsquo;on d\u00e9cide de la couleur, il est important de tenir compte des daltoniens, qui repr\u00e9sentent jusqu&rsquo;\u00e0 <a href=\"http:\/\/www.colourblindawareness.org\/colour-blindness\/\">4,5 % de la population mondiale<\/a>.<\/p>\n<figure style=\"width: 1320px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2020\/02\/exemple-aspect-design-utilisateurs-daltoniens.jpg\" alt=\"Exemple de l'aspect d'un design pour les utilisateurs daltoniens\" width=\"1320\" height=\"441\"><figcaption class=\"wp-caption-text\">Exemple de l&rsquo;aspect d&rsquo;un design pour les utilisateurs daltoniens<\/figcaption><\/figure>\n<p>Il existe trois types de daltonisme (daltonisme total, vision bicolore et vision des couleurs d\u00e9ficiente). Assurez-vous donc que votre design est toujours utilisable en tenant compte de ceux qui ne sont pas en mesure de diff\u00e9rencier les couleurs.<\/p>\n<h4>Contraste<\/h4>\n<p>Lors du choix de la couleur, il est important d&rsquo;\u00eatre conscient des ratios de couleur et du <strong>contraste<\/strong>.<\/p>\n<p><em>Le contraste des couleurs fait <\/em>r\u00e9f\u00e9rence \u00e0 la diff\u00e9rence de lumi\u00e8re entre l&rsquo;avant-plan et l&rsquo;arri\u00e8re-plan. L&rsquo;utilisation de couleurs suffisamment contrast\u00e9es permet de distinguer facilement la visibilit\u00e9 du site web. En g\u00e9n\u00e9ral, utilisez des options de couleur \u00e0 fort contraste &#8211; comme du texte noir sur un fond blanc &#8211; pour rendre votre site lisible.<\/p>\n<figure style=\"width: 1320px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2020\/02\/mauvais-contraste-problematique.jpg\" alt=\"Un mauvais contraste peut \u00eatre probl\u00e9matique\" width=\"1320\" height=\"1299\"><figcaption class=\"wp-caption-text\">Un mauvais contraste peut \u00eatre probl\u00e9matique<\/figcaption><\/figure>\n<p>Le<em> ratio de contraste<\/em> est la valeur num\u00e9rique attribu\u00e9e \u00e0 la diff\u00e9rence de contraste entre les \u00e9l\u00e9ments de la page.<\/p>\n<p>Les <a href=\"https:\/\/www.w3.org\/TR\/WCAG20\/\">World Content Accessibility Guidelines (WCAG) 2.0<\/a> recommandent un ratio de contraste de 4,5:1 pour le texte normal. WebAIM partage quelques <a href=\"https:\/\/webaim.org\/articles\/contrast\/#ratio\">combinaisons pr\u00e9d\u00e9termin\u00e9es<\/a> qui correspondent au rapport de contraste id\u00e9al pour vous aider \u00e0 visualiser cette meilleure pratique de design web.<\/p>\n<p>Pour faciliter la navigation en utilisant ce ratio, assurez-vous que lorsque vous concevez votre site web, vous envisagez tous les publics (y compris ceux qui ont des probl\u00e8mes d&rsquo;accessibilit\u00e9). Il est plus facile d&rsquo;agir ainsi que de pr\u00e9voir de traiter ces questions apr\u00e8s coup.<\/p>\n<p>Prenez en compte tous les aspects du site web avec lequel les gens vont interagir, notamment <a href=\"https:\/\/kinsta.com\/fr\/blog\/ajouter-code-wordpress-header-footer\/\">en-t\u00eates, pieds de page<\/a>, <a href=\"https:\/\/kinsta.com\/fr\/blog\/plugins-menu-wordpress\/\">menus<\/a> &#8211; qui doivent tous \u00eatre facilement visibles pour \u00eatre utilisables.<\/p>\n<p>Voici quelques outils que vous pouvez utiliser pour v\u00e9rifier les rapports de contraste des couleurs :<\/p>\n<ul>\n<li><a href=\"https:\/\/www.levelaccess.com\/color-contrast-checker\/\">Color Contrast Checker<\/a> par Lebel Access.<\/li>\n<li>Contrast Ratio<\/li>\n<li>Color Contrast Checker de <a href=\"https:\/\/webaim.org\/resources\/contrastchecker\/\">WCAG 2.0 AA &#038; AAA<\/a>, outil qui est bas\u00e9 sur les directives WCAG 2.0.<\/li>\n<\/ul>\n<h3>Typographie<\/h3>\n<p>La typographie du site est une autre consid\u00e9ration importante pour l&rsquo;image de marque.<\/p>\n<p>Bien qu&rsquo;il existe de nombreuses sources diff\u00e9rentes pour <a href=\"https:\/\/kinsta.com\/fr\/blog\/polices-modernes\/\">trouver des polices de caract\u00e8res<\/a> potentielles \u00e0 utiliser sur votre site web, vous devez d&rsquo;abord consid\u00e9rer les options qui s&rsquo;afficheront de mani\u00e8re coh\u00e9rente, quelles que soient les polices que l&rsquo;utilisateur final a install\u00e9es sur son ordinateur.<\/p>\n<p><a href=\"https:\/\/kinsta.com\/fr\/blog\/polices-wordpress\/#google-fonts\">Google Fonts<\/a> offre une grande vari\u00e9t\u00e9 de polices gratuites et s\u00e9curis\u00e9es pour le web, sur lesquelles vous pouvez compter pour un affichage correct, ind\u00e9pendamment des polices\/programmes install\u00e9s par l&rsquo;utilisateur. Assurez-vous d&rsquo;inclure des polices dans votre tableau pour voir si elles correspondent \u00e0 votre esth\u00e9tique des couleurs.<\/p>\n<p>Si vous avez du mal \u00e0 trouver des combinaisons, les polices de Google peuvent vous sugg\u00e9rer des combinaisons populaires. Vous pouvez \u00e9galement utiliser un site tel que <a href=\"https:\/\/fontpair.co\/\">FontPair<\/a> pour obtenir des suggestions.<\/p>\n<p>Essayez de limiter le poids des polices que vous utilisez, car le fait de devoir charger trop de fichiers peut contribuer \u00e0 ralentir la vitesse de la page. Sur ce point, il faut envisager <a href=\"https:\/\/kinsta.com\/fr\/blog\/polices-local\/\">l&rsquo;h\u00e9bergement des polices Google en local<\/a> afin d&rsquo;introduire des avantages suppl\u00e9mentaires en termes de performances.<\/p>\n<figure style=\"width: 1320px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2020\/02\/mauvaise-typographie-contre-typographie-ideale.jpg\" alt=\"Une mauvaise typographie contre une typographie id\u00e9ale\" width=\"1320\" height=\"386\"><figcaption class=\"wp-caption-text\">Une mauvaise typographie contre une typographie id\u00e9ale<\/figcaption><\/figure>\n<p>Lorsqu&rsquo;il s&rsquo;agit de s\u00e9lectionner des \u00e9l\u00e9ments typographiques sur la base des meilleures pratiques en mati\u00e8re de design de sites web, en r\u00e8gle g\u00e9n\u00e9rale, il convient d&rsquo;utiliser <a href=\"https:\/\/www.invisionapp.com\/inside-design\/best-practices-pairing-fonts\/\">des polices sans empattement <\/a>(sans-serif) pour les titres et des polices avec empattement pour le contenu. Au minimum, n&rsquo;utilisez pas de polices d\u00e9coratives pour le contenu du corps, car il sera difficile \u00e0 lire.<\/p>\n<p>De plus, ne soyez pas tent\u00e9 d&rsquo;utiliser une grande vari\u00e9t\u00e9 de polices de caract\u00e8res sur votre site web. Une bonne r\u00e8gle de base consiste \u00e0 utiliser une police pour votre logo, une autre pour vos menus\/rubriques et une autre pour le contenu du corps. Sur ce point, essayez d&rsquo;apparier des polices qui se compl\u00e8tent, comme celles de la m\u00eame famille de polices.<\/p>\n<h3>Hi\u00e9rarchie des \u00e9l\u00e9ments<\/h3>\n<p><em>La hi\u00e9rarchie fait<\/em> r\u00e9f\u00e9rence \u00e0 la disposition des \u00e9l\u00e9ments de design qui mettent en \u00e9vidence l&rsquo;importance relative. Pour ce faire, on manipule des \u00e9l\u00e9ments tels que le contraste visuel, la taille et l&#8217;emplacement pour attirer l&rsquo;attention.<\/p>\n<figure style=\"width: 1321px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2020\/03\/exemple-hierarchie-elements.jpg\" alt=\"Exemple de hi\u00e9rarchie des \u00e9l\u00e9ments\" width=\"1321\" height=\"1177\"><figcaption class=\"wp-caption-text\">Exemple de hi\u00e9rarchie des \u00e9l\u00e9ments<\/figcaption><\/figure>\n<p>Par exemple, <a href=\"https:\/\/kinsta.com\/fr\/blog\/comment-reduire-le-taux-de-rebond\/#14-structure-your-content-wisely\">le contenu doit \u00eatre d\u00e9compos\u00e9 en blocs logiques<\/a> afin que les utilisateurs puissent distinguer les sections les unes des autres.<\/p>\n<p>Vous pouvez le faire gr\u00e2ce \u00e0 l&rsquo;utilisation de <strong>contenu d\u2019en-t\u00eates<\/strong>, qui permettent non seulement aux utilisateurs d\u2019aller facilement aux parties qu&rsquo;ils veulent lire, mais aussi de diviser de grandes quantit\u00e9s de texte en morceaux lisibles afin que les lecteurs d&rsquo;\u00e9cran puissent d\u00e9terminer le contexte de chaque section.<\/p>\n<p>Si vous cherchez des illustrations visuelles utiles de ces concepts de design et bien plus encore, le blog de Tilda Publishing couvre certaines des <a href=\"http:\/\/blog-en.tilda.cc\/articles-website-design-mistakes\">erreurs de design de pages web les plus courantes<\/a> et comment les corriger.<\/p>\n<h2>Meilleures pratiques de design\/formatage du Web<\/h2>\n<p>Selon <a href=\"https:\/\/www.orbitmedia.com\/blog\/web-design-standards\/\">une \u00e9tude d&rsquo;Orbit Media<\/a>, il existe des normes communes de design de sites web observ\u00e9es dans les 50 premiers sites de marketing.<\/p>\n<figure style=\"width: 1320px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2020\/02\/normes-conception-web.jpg\" alt=\"Normes de conception web\" width=\"1320\" height=\"1158\"><figcaption class=\"wp-caption-text\">Normes de design web<\/figcaption><\/figure>\n<p>Par \u00ab\u00a0normes\u00a0\u00bb, on entend que 80 % des sites web utilisent une approche de design similaire :<\/p>\n<ul>\n<li>Logo dans le coin sup\u00e9rieur gauche.<\/li>\n<li>Navigation horizontale principale en haut de chaque page.<\/li>\n<li>Proposition de valeur en haut de la page d&rsquo;accueil situ\u00e9e \u00ab\u00a0au-dessus du pli\u00a0\u00bb. Notez que la plupart des designers de sites web vous diront qu&rsquo;il n&rsquo;y a pas de hauteur de pixel standard pour les navigateurs, et techniquement pas de \u00ab\u00a0fold\u00a0\u00bb. Mais, en g\u00e9n\u00e9ral, les \u00e9l\u00e9ments importants du design doivent appara\u00eetre en hauteur sur les pages qui sont g\u00e9n\u00e9ralement visibles par la majorit\u00e9 des visiteurs, m\u00eame sans d\u00e9filement.<\/li>\n<\/ul>\n<p>Voici quelques bonnes pratiques de design de sites web pour les \u00e9l\u00e9ments communs :<\/p>\n<h3>Images<\/h3>\n<p>Les meilleures pratiques de design de sites web pour<a href=\"https:\/\/kinsta.com\/fr\/blog\/optimiser-les-images-pour-le-web\/\"> l<\/a>&lsquo;utilisation d&rsquo;images pourraient inspirer de nombreux conseils, mais concentrons-nous sur le strict minimum dans cette discussion sur les meilleures pratiques de design web :<\/p>\n<ul>\n<li><strong>Ajout du texte ALT. <\/strong>Les images <em>ne peuvent pas<\/em> \u00eatre trait\u00e9es \u00e0 l&rsquo;aide de lecteurs d&rsquo;\u00e9cran, sauf si le texte ALT est utilis\u00e9. l\u2019ajout du <a href=\"https:\/\/kinsta.com\/fr\/blog\/seo-wordpress\/#9-image-alt-text\">texte ALT contribue \u00e9galement au r\u00e9f\u00e9rencement<\/a>, mais certaines personnes n&rsquo;utilisent le texte ALT que pour compl\u00e9ter leur strat\u00e9gie de mots-cl\u00e9s. Une utilisation plus utile du texte ALT serait de d\u00e9crire l&rsquo;image &#8211; bien que vous puissiez certainement satisfaire les robots de recherche et les lecteurs d&rsquo;\u00e9cran en m\u00eame temps avec la bonne approche.<\/li>\n<li><strong>L&rsquo;utilisation d&rsquo;images repr\u00e9sentant des visages humains <\/strong>tend \u00e0 \u00eatre plus efficace que d&rsquo;autres graphiques ou animations. Cela rend les gens plus enclins \u00e0 s&rsquo;int\u00e9resser \u00e0 l&rsquo;image, car les humains sont attir\u00e9s par ce qu&rsquo;ils per\u00e7oivent comme une empathie et des \u00e9motions r\u00e9elles.<\/li>\n<li><strong>Utilisez des images r\u00e9actives, <\/strong>qui grandissent ou diminuent selon la taille du navigateur<strong>. <\/strong>Cela contribue \u00e0 la fois \u00e0 la vitesse du site et au r\u00e9f\u00e9rencement.<\/li>\n<li><strong>N&rsquo;oubliez jamais les <a href=\"https:\/\/kinsta.com\/fr\/blog\/favicon-wordpress\/\">favicons<\/a><\/strong>. Les favicons sont les petites ic\u00f4nes qui s&rsquo;affichent \u00e0 c\u00f4t\u00e9 du titre du site web, ainsi que dans les r\u00e9sultats de recherche. Elles contribuent \u00e0 la reconnaissance de la marque et am\u00e9liorent l&rsquo;interface utilisateur du site.<\/li>\n<\/ul>\n<h3>Navigation du site web<\/h3>\n<p>Les utilisateurs s&rsquo;attendent \u00e0 pouvoir trouver facilement le contenu qu&rsquo;ils recherchent sur un site. Il est donc important que la navigation sur les sites web soit simple et directe.<\/p>\n<p><em>La navigation sur les sites web<\/em> est un terme g\u00e9n\u00e9ral qui d\u00e9signe <a href=\"https:\/\/kinsta.com\/fr\/blog\/sitelinks-google\/#6-build-internal-links\">l&rsquo;architecture des liens internes d&rsquo;un site web<\/a>. N&rsquo;oubliez pas que l&rsquo;objectif principal de la navigation est d&rsquo;<em>aider les<\/em> utilisateurs \u00e0 trouver facilement le contenu pertinent sur votre site web.<\/p>\n<p>L&rsquo;architecture des liens internes de votre site constitue la <a href=\"https:\/\/kinsta.com\/fr\/blog\/sitemap-wordpress\/\">base de votre plan de site,<\/a> ce qui permet aux moteurs de recherche d&rsquo;acc\u00e9der plus facilement \u00e0 votre contenu. Il a \u00e9t\u00e9 constat\u00e9 qu&rsquo;un site bien con\u00e7u, dont le contenu est facile \u00e0 trouver, a un effet positif sur le trafic que vous obtiendrez des moteurs de recherche (ainsi qu&rsquo;une plus grande probabilit\u00e9 d\u2019<a href=\"https:\/\/kinsta.com\/fr\/blog\/sitelinks-google\/\">obtenir des sitelinks Google<\/a>).<\/p>\n<h3>Navigation du menu<\/h3>\n<p>Il y a plusieurs aspects qui constituent la <a href=\"https:\/\/kinsta.com\/fr\/blog\/personnaliser-menu-wordpress\/\">navigation de site<\/a> mais votre menu principal doit \u00eatre le point central, car c&rsquo;est l&rsquo;une des premi\u00e8res choses avec lesquelles les utilisateurs interagissent lorsqu&rsquo;ils visitent votre site web.<\/p>\n<p>Il existe diff\u00e9rentes heuristiques pour le design des menus de sites web, mais les plus populaires sont celles qui sont utilis\u00e9es :<\/p>\n<h4>Menu de navigation<\/h4>\n<p>L&rsquo;id\u00e9al serait qu&rsquo;il soit situ\u00e9 au centre d&rsquo;un site web. Cela pourrait impliquer l\u2019<a href=\"https:\/\/kinsta.com\/fr\/blog\/menu-deroulant-wordpress\/\">utilisation d&rsquo;un menu d\u00e9roulant<\/a> s\u2019il y a plusieurs cat\u00e9gories. Toutefois, les menus d\u00e9roulants ne sont <a href=\"https:\/\/www.websaucestudio.com\/website-navigation-best-practices-and-seo-value\/\">pas recommand\u00e9s<\/a>, surtout en ce qui concerne le r\u00e9f\u00e9rencement technique (ils sont plus difficiles \u00e0 crawler). En outre, il a \u00e9t\u00e9 constat\u00e9 que la plupart des personnes <a href=\"http:\/\/www.useit.com\/alertbox\/annoyances.html\">n&rsquo;aiment pas les menus d\u00e9roulants<\/a>.<\/p>\n<p>En effet, l&rsquo;\u0153il humain travaille plus vite que la main, et les gens trouvent donc ennuyeux de devoir cliquer sur quelque chose d&rsquo;autre, ce qui peut entra\u00eener une diminution des visites sur les pages.<\/p>\n<h4>Menu Hamburger<\/h4>\n<p>Principalement utilis\u00e9 pour un design optimis\u00e9 pour les t\u00e9l\u00e9phones portables, le menu hamburger est g\u00e9n\u00e9ralement situ\u00e9 en haut \u00e0 gauche ou \u00e0 droite de la page. Il appara\u00eet sous la forme d&rsquo;un carr\u00e9 de trois lignes qui peut \u00eatre agrandi d&rsquo;un clic. Cependant, de nombreux cr\u00e9ateurs <a href=\"https:\/\/speckyboy.com\/analyzing-effectiveness-hamburger-menus-web-design\/\">m\u00e9prisent le menu hamburger<\/a>, ce qui a inspir\u00e9 les d\u00e9veloppeurs web \u00e0 envisager de nouvelles fa\u00e7ons de rendre la navigation sur les sites web mobiles amusante et fonctionnelle.<\/p>\n<p>Voici quelques conseils pour concevoir une navigation bas\u00e9e sur les meilleures pratiques en mati\u00e8re de design web :<\/p>\n<ul>\n<li><strong>Ajouter une barre de recherche <\/strong>pour aider les utilisateurs \u00e0 trouver facilement le contenu (voici comment <a href=\"https:\/\/kinsta.com\/fr\/blog\/recherche-wordpress\/\">am\u00e9liorer la fonctionnalit\u00e9 de recherche de WordPress<\/a>). Cela est particuli\u00e8rement utile pour les sites web qui ont beaucoup de contenu, comme un blog d&rsquo;information.<\/li>\n<li>Concevez votre site en <strong>suivant la r\u00e8gle des trois clics<\/strong> qui stipule que les utilisateurs doivent pouvoir trouver les informations souhait\u00e9es en trois clics de souris au maximum. Cela s&rsquo;explique par le fait que les utilisateurs <a href=\"https:\/\/www.cludo.com\/blog\/search-vs-navigate-people-behave-websites-search-navigate\/\">pr\u00e9f\u00e8rent naviguer sur un site<\/a> plut\u00f4t que de consulter les r\u00e9sultats de recherche, lorsque cela est possible.<\/li>\n<li><strong>Rendez les titres de vos menus descriptifs<\/strong> (avec les mots cl\u00e9s \u00e0 l\u2019esprit), ce qui aide les utilisateurs \u00e0 trouver plus facilement les articles et contribue \u00e9galement de mani\u00e8re positive au r\u00e9f\u00e9rencement.<\/li>\n<li><strong>La position des \u00e9l\u00e9ments du menu est importante. <\/strong>Placez les pages les plus importantes en t\u00eate de votre menu afin qu&rsquo;elles soient facilement accessibles.<\/li>\n<li><strong>Maintenez le nombre d&rsquo;\u00e9l\u00e9ments de menu \u00e0 un maximum de 7, <\/strong>non seulement pour garder le design du site propre, mais aussi parce qu&rsquo;un trop grand nombre de cat\u00e9gories d&rsquo;\u00e9l\u00e9ments de menu peut potentiellement affecter votre capacit\u00e9 \u00e0 vous classer dans les recherches. Google peut interpr\u00e9ter ces cat\u00e9gories apparemment sans rapport comme un signe que votre site web n&rsquo;a pas choisi une niche particuli\u00e8re.<\/li>\n<\/ul>\n<p>Pour un format plus pratique, voici un infographique pratique :<\/p>\n<figure style=\"width: 1320px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2020\/03\/meilleures-pratiques-design-web-menu-navigation.jpg\" alt=\"Meilleures pratiques de design web pour le menu de navigation\" width=\"1320\" height=\"1802\"><figcaption class=\"wp-caption-text\">Meilleures pratiques de design web pour le menu de navigation<\/figcaption><\/figure>\n<h2>Normes de codage<\/h2>\n<p>Avec un si grand nombre de sites web cr\u00e9\u00e9s et consomm\u00e9s dans le monde entier, il est certainement n\u00e9cessaire de disposer d&rsquo;un ensemble standardis\u00e9 de principes de codage. Voici quelques aspects de ces normes web :<\/p>\n<h3>SEO<\/h3>\n<p><a href=\"https:\/\/kinsta.com\/fr\/blog\/que-veut-dire-referencement-seo\/\">Le r\u00e9f\u00e9rencement<\/a> peut \u00eatre utilis\u00e9 pour augmenter le nombre de visiteurs sur votre site de mani\u00e8re <em>organique <\/em>(sans utiliser de publicit\u00e9). Comme il est trop compliqu\u00e9 d&rsquo;approfondir le r\u00e9f\u00e9rencement dans une petite sous-section d&rsquo;un article, consultez notre<a href=\"https:\/\/kinsta.com\/fr\/blog\/seo-wordpress\/\"> l<\/a>iste de contr\u00f4le pour le r\u00e9f\u00e9rencement et nos conseils sur les <a href=\"https:\/\/kinsta.com\/fr\/blog\/meilleurs-plugins-wordpress-seo\/\">meilleures extensions WordPress de SEO<\/a> pour vous familiariser avec cet aspect des meilleures pratiques de design web.<\/p>\n<p>Notez que les conseils suivants sur les normes de codage fonctionnent main dans la main avec le r\u00e9f\u00e9rencement.<\/p>\n<h3>R\u00e9activit\u00e9 mobile<\/h3>\n<p><a href=\"https:\/\/kinsta.com\/fr\/apprendre\/accelerer-wordpress\/#make-sure-your-site-is-responsive\">Le design responsive<\/a> vise \u00e0 cr\u00e9er une exp\u00e9rience utilisateur agr\u00e9able, quel que soit le dispositif ou le navigateur utilis\u00e9 pour acc\u00e9der \u00e0 votre site web.<\/p>\n<p>Il est aujourd&rsquo;hui plus important que jamais de concevoir votre site web de mani\u00e8re \u00e0 ce qu&rsquo;il soit r\u00e9actif, car plus de 60 % des internautes <a href=\"https:\/\/www.ciodive.com\/news\/70-of-internet-traffic-comes-from-mobile-phones\/510120\/\">acc\u00e8dent \u00e0 l&rsquo;internet via leur t\u00e9l\u00e9phone portable<\/a>, et <a href=\"https:\/\/www.infront.com\/blog\/the-blog\/8-statistics-that-prove-responsive-web-design-is-essential-to-seo\">la moiti\u00e9 des transactions de commerce \u00e9lectronique<\/a> se font par le biais de plateformes mobiles. En outre, le nouvel algorithme de recherche de Google <a href=\"https:\/\/www.businessnewsdaily.com\/7808-google-search-ranking-mobile.html\">donne la priorit\u00e9 aux sites adapt\u00e9s aux t\u00e9l\u00e9phones portables<\/a>.<\/p>\n<figure style=\"width: 210px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2020\/03\/exemple-conception-reactive.jpg\" alt=\"Exemple de conception r\u00e9active\" width=\"210\" height=\"365\"><figcaption class=\"wp-caption-text\">Exemple de design responsive<\/figcaption><\/figure>\n<p>Avoir un site r\u00e9actif n&rsquo;aide pas seulement les utilisateurs \u00e0 naviguer plus facilement sur votre site, mais contribue \u00e9galement \u00e0 accro\u00eetre l&rsquo;engagement et les conversions. <a href=\"https:\/\/www.thinkwithgoogle.com\/\">Les utilisateurs recommandent des marques<\/a> avec lesquelles ils ont une exp\u00e9rience positive des sites adapt\u00e9s aux t\u00e9l\u00e9phones portables et, inversement, non seulement ils <a href=\"https:\/\/www.socpub.com\/articles\/the-5-mobile-marketing-mistakes-infographic-14849\">cessent d&rsquo;acheter aupr\u00e8s de marques<\/a> ayant une mauvaise exp\u00e9rience des sites mobiles, mais aussi d\u00e9couragent activement les autres de le faire.<\/p>\n<p>Toutefois, malgr\u00e9 la demande d&rsquo;un site r\u00e9actif, on estime que le nombre de <a href=\"https:\/\/bpstudios.com\/Blog\/March-2017\/15-Web-Design-Statistics-You-Should-Know\">91 % des petites entreprises n&rsquo;en ont pas<\/a>. Elles devraient le faire &#8211; car le design d&rsquo;un site web adapt\u00e9 aux t\u00e9l\u00e9phones portables est certainement payante. 62 % des entreprises ont <a href=\"https:\/\/econsultancy.com\/blog\/11044-more-companies-are-designing-their-sites-for-tablet-and-mobile-stats\/\">fait \u00e9tat d&rsquo;une augmentation des ventes<\/a> apr\u00e8s avoir con\u00e7u un site adapt\u00e9 aux t\u00e9l\u00e9phones portables.<\/p>\n<p>Lisez la ressource de Kinsta sur la fa\u00e7on de <a href=\"https:\/\/kinsta.com\/fr\/blog\/index-google-mobile-first\/\">rendre votre site plus convivial pour les utilisateurs mobiles,<\/a> ce qui inclut une liste des meilleures <a href=\"https:\/\/kinsta.com\/fr\/blog\/plugins-wordpress-mobile\/\">extensions WordPress pour les <\/a>mobiles \u00e0 t\u00e9l\u00e9charger, et n&rsquo;oubliez pas de consulter cette <a href=\"https:\/\/kinsta.com\/fr\/blog\/theme-wordpress-plus-rapide\/\">liste des meilleurs th\u00e8mes WordPress<\/a>, o\u00f9 vous pourrez naviguer \u00e0 travers de nombreux th\u00e8mes r\u00e9actifs.<\/p>\n<p>Google propose \u00e9galement quelques conseils pour <a href=\"https:\/\/developers.google.com\/web\/fundamentals\/design-and-ux\/responsive\/\">concevoir un site web r\u00e9actif<\/a>.<\/p>\n<h3>S\u00e9curit\u00e9 du site web<\/h3>\n<p>Une autre pratique de codage importante ? Cr\u00e9er des programmes et des sites web s\u00e9curis\u00e9s auxquels les utilisateurs peuvent faire confiance avec leurs informations personnelles sensibles. Contrairement \u00e0 la croyance populaire, les pirates ne recherchent pas activement des sites web<em> sp\u00e9cifiques \u00e0<\/em> pirater, c&rsquo;est pourquoi m\u00eame les petits sites web sont <a href=\"https:\/\/kinsta.com\/fr\/blog\/wordpress-pirate\/\">vuln\u00e9rables aux attaques<\/a>.<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>Kinsta offre un <a href=\"https:\/\/kinsta.com\/fr\/docs\/information-service\/suppression-logiciel-malveillant\/\">engagement de s\u00e9curit\u00e9 contre les logiciels malveillants<\/a> avec chaque plan et, en cas de probl\u00e8me, des sp\u00e9cialistes de la s\u00e9curit\u00e9 r\u00e9pareront votre site.<\/p>\n<\/aside>\n\n<p>Dans l\u2019ensemble, WordPress est <a href=\"https:\/\/kinsta.com\/fr\/blog\/wordpress-est-il-securise\/\">g\u00e9n\u00e9ralement s\u00e9curis\u00e9,<\/a> mais il est utile de prendre des pr\u00e9cautions suppl\u00e9mentaires pour prot\u00e9ger votre site web contre les attaques.<\/p>\n<p>Voici quelques-unes des meilleures pratiques en mati\u00e8re de s\u00e9curit\u00e9 des sites web :<\/p>\n<ul>\n<li><strong>Obtenez un certificat SSL, <\/strong>ce qui est particuli\u00e8rement important pour les sites qui traitent des paiements et des informations personnelles. Le <a href=\"https:\/\/kinsta.com\/fr\/blog\/comment-fonctionne-ssl\/\">certificat SSL<\/a> crypte les informations envoy\u00e9es sur les r\u00e9seaux, de sorte que les pirates ont du mal \u00e0 les d\u00e9coder. En outre, il s&rsquo;agit d&rsquo;une norme de l\u2019industrie. Chrome avertit les visiteurs lorsque le site qu&rsquo;ils visitent ne dispose pas d&rsquo;un certificat SSL. En outre, Chrome <a href=\"https:\/\/kinsta.com\/fr\/blog\/err_ssl_obsolete-version\/\">d\u00e9pr\u00e9cie maintenant les anciennes versions de TLS<\/a> et a commenc\u00e9 \u00e0 afficher des avertissements suppl\u00e9mentaires. <a href=\"https:\/\/kinsta.com\/fr\/blog\/http-vers-https\/\">L&rsquo;activation du HTTPS<\/a> (qui fait partie de l&rsquo;installation d&rsquo;un certificat SSL) est \u00e9galement un facteur de classement officiel de Google.<\/li>\n<li><strong>Gardez vos identifiants de connexion en lieu s\u00fbr. <\/strong>Plusieurs attaques sont caus\u00e9es par des pirates informatiques qui tentent d&rsquo;acc\u00e9der par la force \u00e0 un site web. Il est utile d&rsquo;avoir un <a href=\"https:\/\/kinsta.com\/fr\/blog\/url-connexion-wordpress\/\">page de connexion s\u00e9par\u00e9e\/masqu\u00e9e<\/a> (utilisez l\u2019extension <a href=\"https:\/\/wordpress.org\/plugins\/wps-hide-login\/\">WP Hide Login<\/a>) et pour limiter le nombre de tentatives de connexion. Utilisez l\u2019extension <a href=\"https:\/\/wordpress.org\/plugins\/login-lockdown\/\">Login LockDown<\/a>, qui enregistre l&rsquo;adresse IP et l&rsquo;horodatage de chaque tentative de connexion \u00e9chou\u00e9e et verrouille la fonction de connexion si le nombre de tentatives \u00e9chou\u00e9es de la m\u00eame plage d&rsquo;IP est atteint dans un court laps de temps. De plus, cr\u00e9ez un mot de passe s\u00e9curis\u00e9 de plus de 6 caract\u00e8res, compos\u00e9 de lettres majuscules et minuscules, de chiffres et de caract\u00e8res sp\u00e9ciaux. Changez souvent votre mot de passe. Vous pouvez \u00e9galement utiliser l&rsquo;authentification \u00e0 deux facteurs pour vous connecter si vous recherchez une s\u00e9curit\u00e9 suppl\u00e9mentaire.<\/li>\n<li><strong>Maintenez le noyau, les extensions et les th\u00e8mes de WordPress \u00e0 jour. <\/strong>N&rsquo;oubliez pas de t\u00e9l\u00e9charger des extensions ou des th\u00e8mes depuis une source r\u00e9put\u00e9e. Un bon signe est si l\u2019extension ou le th\u00e8me a plusieurs installations et a \u00e9t\u00e9 r\u00e9cemment mis \u00e0 jour. Vous devriez \u00e9galement lire les avis pour d\u00e9cider par vous-m\u00eame si l\u2019extension est digne de confiance (assurez-vous de <a href=\"https:\/\/kinsta.com\/fr\/sujets\/extensions-wordpress\/\">v\u00e9rifier celles qui sont list\u00e9es ici<\/a>). Sur ce point, t\u00e9l\u00e9chargez une extension WordPress de s\u00e9curit\u00e9 telles que <a href=\"https:\/\/kinsta.com\/fr\/blog\/plugins-securite-wordpress\/#wordfence-security\">Wordfence<\/a>,<a href=\"https:\/\/kinsta.com\/fr\/blog\/plugins-securite-wordpress\/#sucuri\"> Sucuri<\/a>, ou <a href=\"https:\/\/kinsta.com\/fr\/blog\/plugins-securite-wordpress\/#defender\">Defender<\/a>, car 73,2 % des installations WordPress les plus populaires et les plus vuln\u00e9rables peuvent \u00eatre d\u00e9tect\u00e9es <a href=\"https:\/\/www.wpwhitesecurity.com\/wordpress-security-news-updates\/statistics-70-percent-wordpress-installations-vulnerable\/\">en utilisant des outils automatis\u00e9s gratuits<\/a>. Voici une liste plus d\u00e9taill\u00e9e des <a href=\"https:\/\/kinsta.com\/fr\/blog\/plugins-securite-wordpress\/\">meilleures extensions de s\u00e9curit\u00e9<\/a>.<\/li>\n<li><strong>Utilisez un h\u00f4te web s\u00e9curis\u00e9. <\/strong>Pour ceux qui ne sont pas au courant, il peut sembler que votre h\u00e9bergeur n&rsquo;ait rien \u00e0 voir avec la s\u00e9curit\u00e9 du site, mais <a href=\"https:\/\/www.wpwhitesecurity.com\/state-of-security-of-wordpress-blogs-and-websites\/\">41 % des attaques<\/a> se produisent \u00e0 travers une faille de s\u00e9curit\u00e9 sur la plateforme d&rsquo;h\u00e9bergement. Recherchez un fournisseur d&rsquo;h\u00e9bergement qui inclut des fonctionnalit\u00e9s telles que : pare-feu c\u00f4t\u00e9 serveur et cryptage, <a href=\"https:\/\/kinsta.com\/fr\/blog\/nginx-vs-apache\/\">NGINX ou serveurs web Apache<\/a>, logiciels antivirus et anti-malware, syst\u00e8mes de s\u00e9curit\u00e9 sur site, et disponibilit\u00e9 de certificats SSL et d&rsquo;un CDN.<\/li>\n<\/ul>\n<p>Pour plus d&rsquo;informations sur la s\u00e9curit\u00e9 de WordPress, consultez notre ressource compl\u00e8te sur <a href=\"https:\/\/kinsta.com\/fr\/blog\/securite-wordpress\/\">comment assurer la s\u00e9curit\u00e9 de votre site WordPress<\/a>.<\/p>\n<h3>Vitesse de la page<\/h3>\n<p>Environ la moiti\u00e9 des utilisateurs s&rsquo;attendent \u00e0 ce qu&rsquo;un site se charge en <a href=\"https:\/\/www.bluecorona.com\/blog\/20-web-design-facts-small-business-owners\/\">2 secondes ou moins<\/a>, et si cela prend plus de temps, 40 % des gens n&rsquo;h\u00e9siteront pas \u00e0 quitter la page, (probablement) pour ne jamais y revenir.<\/p>\n<p>Outre les visites sur le site web, la vitesse des pages est importante car elle a \u00e9galement une incidence sur la conversion et les revenus. Pour chaque seconde de vitesse de chargement de page ajout\u00e9e, les ventes <a href=\"https:\/\/www.lyfemarketing.com\/blog\/web-design-best-practices\/\">chutent jusqu&rsquo;\u00e0 27 %<\/a>. L&rsquo;augmentation de la vitesse du site web peut \u00e9viter la perte de <a href=\"https:\/\/www.infront.com\/blog\/the-blog\/8-statistics-that-prove-responsive-web-design-is-essential-to-seo\">7 % des conversions possibles<\/a>.<\/p>\n<p>Voici quelques moyens de rendre vos pages web plus rapides \u00e0 charger :<\/p>\n<ul>\n<li>Utiliser un <strong>r\u00e9seau de diffusion de contenu (CDN)<\/strong>, qui prend des fichiers statiques comme des images, des CSS et des JavaScript, et <a href=\"https:\/\/kinsta.com\/fr\/blog\/cdn-wordpress\/\">les livre sur les serveurs les plus proches de l&#8217;emplacement physique de l&rsquo;utilisateur<\/a>.<\/li>\n<li><strong>R\u00e9fl\u00e9chissez \u00e0 la fa\u00e7on dont vous utilisez les images. <\/strong>Le site web moyen utilise 1,8 Mo d&rsquo;images, ce qui repr\u00e9sente <a href=\"https:\/\/speedcurve.com\/blog\/web-performance-page-bloat\/\">60 % de la taille d&rsquo;un site<\/a>. Pour y parvenir, reconsid\u00e9rez la fa\u00e7on dont vous disposez de votre page web. Si vous souhaitez conserver une vitesse de page \u00e9lev\u00e9e, essayez de r\u00e9duire le nombre de grandes images utilis\u00e9es dans votre design et veillez \u00e0 <a href=\"https:\/\/kinsta.com\/fr\/blog\/optimiser-les-images-pour-le-web\/\">les optimiser<\/a>.<\/li>\n<li>Si votre site web doit utiliser beaucoup de grandes images, <strong>utilisez des extensions <\/strong>qui incluent des fonctionnalit\u00e9s pour <a href=\"https:\/\/kinsta.com\/fr\/blog\/activer-gzip-compression\/\">la compression GZIP<\/a>, la mise en cache ou l&rsquo;optimisation des images, comme <a href=\"https:\/\/wp-rocket.me\/\">WP Rocket<\/a> et <a href=\"https:\/\/imagify.io\/\">Imagify<\/a>. Elles peuvent vous aider \u00e0 r\u00e9duire la taille de vos fichiers (sans sacrifier la qualit\u00e9) afin qu&rsquo;ils se chargent plus rapidement.<\/li>\n<li><strong>Tenez compte du nombre d\u2019extensions et de fichiers que vous conservez dans votre base de donn\u00e9es WordPress,<\/strong> car cela peut \u00e9galement affecter la vitesse de chargement des pages. Nettoyez celles que vous n&rsquo;utilisez pas. Tant que vous y \u00eates, gardez votre PHP, <a href=\"https:\/\/kinsta.com\/fr\/blog\/maintenance-wordpress\/#keeping-your-wordpress-site-updated\">noyau WordPress, et extensions \u00e0 jour dans leurs derni\u00e8res versions<\/a>.<\/li>\n<\/ul>\n<p>Consultez notre ressource compl\u00e8te pour <a href=\"https:\/\/kinsta.com\/fr\/apprendre\/vitesse-de-site\/\">l&rsquo;optimisation de la vitesse des sites web<\/a>.<\/p>\n<h2>Normes d&rsquo;accessibilit\u00e9<\/h2>\n<p>L&rsquo;internet a \u00e9t\u00e9 con\u00e7u pour fonctionner pour tous, quels que soient le mat\u00e9riel, les logiciels, la langue utilis\u00e9e ou la localisation. Cependant, beaucoup sacrifient l&rsquo;accessibilit\u00e9 pour un beau design.<\/p>\n<figure style=\"width: 1320px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2020\/03\/accessibilite-essentielle-chaque-site-web.jpg\" alt=\"L'accessibilit\u00e9 est essentielle pour chaque site web\" width=\"1320\" height=\"732\"><figcaption class=\"wp-caption-text\">L&rsquo;accessibilit\u00e9 est essentielle pour chaque site web<\/figcaption><\/figure>\n<p><em>L&rsquo;accessibilit\u00e9 d\u00e9signe la<\/em> pratique consistant \u00e0 rendre votre site web utilisable par <em>tous<\/em>.<\/p>\n<p>En plus des personnes handicap\u00e9es qui affectent l&rsquo;acc\u00e8s, Selon le <a href=\"https:\/\/www.w3.org\/WAI\/intro\/accessibility.php\">W3<\/a>, l\u2019accessibilit\u00e9 des sites web est \u00e9galement b\u00e9n\u00e9fique pour :<\/p>\n<ul>\n<li>Ceux qui utilisent des appareils avec de petits \u00e9crans, diff\u00e9rents modes d&rsquo;entr\u00e9e, etc.<\/li>\n<li>Les personnes \u00e2g\u00e9es.<\/li>\n<li>Les personnes souffrant d&rsquo;un \u00ab\u00a0handicap temporaire\u00a0\u00bb, notamment un membre cass\u00e9, la perte de lunettes ou un probl\u00e8me m\u00e9dical.<\/li>\n<li>Les utilisateurs pr\u00e9sentant des \u00ab\u00a0limitations situationnelles\u00a0\u00bb, comme ceux qui acc\u00e8dent \u00e0 l&rsquo;internet sur des appareils en plein soleil ou dans un environnement o\u00f9 ils ne peuvent pas \u00e9couter le son, comme les transports publics.<\/li>\n<li>Les personnes ayant une connexion Internet lente.<\/li>\n<\/ul>\n<p>L&rsquo;accessibilit\u00e9 devrait \u00eatre l&rsquo;affaire de tous, car nous sommes tous concern\u00e9s d&rsquo;une mani\u00e8re ou d&rsquo;une autre.<\/p>\n<h3>Raisons de rendre votre site accessible<\/h3>\n<p>Vous n&rsquo;\u00eates toujours pas s\u00fbr qu&rsquo;il vaille la peine de consacrer votre temps \u00e0 l&rsquo;accessibilit\u00e9 dans cette discussion sur les meilleures pratiques en mati\u00e8re de design web ?<\/p>\n<p>Consid\u00e9rez ces raisons :<\/p>\n<ul>\n<li><strong>C&rsquo;est une exigence de l&rsquo;ADA. <\/strong>L&rsquo;Americans with Disabilities Act (ADA) a \u00e9t\u00e9 adopt\u00e9 en 1990 pour prot\u00e9ger les droits civils des personnes handicap\u00e9es contre la discrimination. Elle couvre des domaines tels que les transports, les t\u00e9l\u00e9communications, l&#8217;emploi et m\u00eame les codes de construction. Comme cette loi a \u00e9t\u00e9 adopt\u00e9e il y a pr\u00e8s de 30 ans &#8211; \u00e0 une \u00e9poque o\u00f9 l&rsquo;internet n&rsquo;\u00e9tait pas aussi omnipr\u00e9sent &#8211; les l\u00e9gislateurs sont en voie de la modifier.<\/li>\n<li><strong>Cela favorise l&rsquo;inclusion. <\/strong>Une enqu\u00eate du Pew Research Center montre que les personnes handicap\u00e9es ont <a href=\"http:\/\/www.pewresearch.org\/fact-tank\/2017\/04\/07\/disabled-americans-are-less-likely-to-use-technology\/\">trois fois moins de chances<\/a> d\u2019aller en ligne que leurs homologues non handicap\u00e9s, ce qui est dommage car les statistiques montrent qu&rsquo;environ <a href=\"http:\/\/www.talentinnovation.org\/_private\/assets\/DisabilitiesInclusion_PressRelease.pdf\">30 % des professionnels<\/a> ont un handicap, et 62 % des personnes handicap\u00e9es \u00ab\u00a0volent sous le radar\u00a0\u00bb par crainte de pr\u00e9jug\u00e9s n\u00e9gatifs.<\/li>\n<li><strong>Cela vous aidera \u00e0 gagner plus d&rsquo;affaires. <\/strong>En \u00e9tant plus inclusif, vous ferez entrer un r\u00e9seau de personnes handicap\u00e9es, qui repr\u00e9sente <a href=\"https:\/\/www.boia.org\/blog\/how-to-prevent-a-web-accessibility-lawsuit\">7 000 milliards de dollars de revenu disponible<\/a><\/li>\n<li><strong>C\u2019est un avantage SEO. <\/strong>Les moteurs de recherche r\u00e9compensent les sites web qui sont conformes \u00e0 l&rsquo;accessibilit\u00e9 afin d&rsquo;encourager un plus grand nombre de sites web \u00e0 \u00eatre accessibles.<\/li>\n<\/ul>\n<h3>Comment rendre votre site web plus accessible<\/h3>\n<p>Un moyen simple de rendre votre site web plus accessible est d&rsquo;installer l\u2019extension <a href=\"https:\/\/wordpress.org\/plugins\/wp-accessibility\/\">WP Accessibility<\/a>, qui ajoute des fonctionnalit\u00e9s d&rsquo;accessibilit\u00e9, notamment<\/p>\n<ul>\n<li>Une barre d&rsquo;outils o\u00f9 les utilisateurs peuvent redimensionner les polices et visualiser votre site en contraste \u00e9lev\u00e9 et en niveaux de gris.<\/li>\n<li>Comparer le contraste des couleurs pour v\u00e9rifier s&rsquo;il correspond \u00e0 la norme de l&rsquo;ADA.<\/li>\n<li>Supprimer les attributs de titre des images ins\u00e9r\u00e9es dans le contenu. La plupart des lecteurs d&rsquo;\u00e9cran ne sont pas capables de le ressentir et lisent plut\u00f4t le texte d&rsquo;ancrage.<\/li>\n<li>Activer les liens de saut, qui sont des liens de page interne permettant aux utilisateurs de passer directement au contenu, ce qui est utile pour les personnes utilisant des lecteurs d&rsquo;\u00e9cran.<\/li>\n<\/ul>\n<p>Quelques mesures suppl\u00e9mentaires \u00e0 prendre :<\/p>\n<ul>\n<li><strong>Ajoutez des sous-titres ou une transcription<\/strong> si votre site produit des m\u00e9dias tels que audio, livres <a href=\"https:\/\/kinsta.com\/fr\/blog\/lecteurs-audio-wordpress\/\">audio<\/a>, vid\u00e9os, <a href=\"https:\/\/kinsta.com\/fr\/blog\/podcast-wordpress\/\">podcasts<\/a>, etc., au profit des sourds\/muets, ainsi que des personnes qui veulent consommer vos contenus mais ne peuvent pas consommer les m\u00e9dias en public.<\/li>\n<li><strong>Cr\u00e9ez des liens et des menus accessibles par clavier <\/strong>pour les personnes ayant un handicap moteur et ne pouvant utiliser qu&rsquo;un clavier (pas de souris) pour naviguer sur votre site. Les menus d\u00e9roulants sont d\u00e9conseill\u00e9s, mais vous pouvez y rem\u00e9dier en attribuant des raccourcis pour chaque \u00e9l\u00e9ment du menu d\u00e9roulant (comme : appuyez sur \u00ab\u00a01\u00a0\u00bb pour la page d&rsquo;accueil, \u00ab\u00a02\u00a0\u00bb pour la page \u00ab\u00a0\u00e0 propos\u00a0\u00bb, etc.)<\/li>\n<li>Enfin, <strong>testez votre site pour v\u00e9rifier son accessibilit\u00e9. <\/strong>L&rsquo;initiative pour l&rsquo;accessibilit\u00e9 du web ne cautionne aucun outil sp\u00e9cifique mais propose plut\u00f4t une <a href=\"https:\/\/www.w3.org\/WAI\/ER\/tools\/\">liste d\u2019outils<\/a> que vous pouvez utiliser pour contr\u00f4ler vos efforts.<\/li>\n<\/ul>\n<h2>Derni\u00e8res r\u00e9flexions : Meilleures pratiques de design de sites web pour votre prochain projet de site<\/h2>\n<p>Les bons sites web ne doivent pas \u00eatre d\u00e9finis par un design objectivement bon. La convivialit\u00e9 du site, la facilit\u00e9 de navigation et l&rsquo;accessibilit\u00e9 sont tout aussi importantes. Gr\u00e2ce \u00e0 ces meilleures pratiques de design web, vous avez tout ce qu&rsquo;il faut pour <strong>cr\u00e9er quelque chose qui a de l&rsquo;allure et qui fonctionne bien<\/strong>.<\/p>\n\n<p>Gardez simplement \u00e0 l&rsquo;esprit qu&rsquo;il s&rsquo;agit l\u00e0 des <em>meilleures pratiques en mati\u00e8re de design de sites web<\/em>. Il est probable que vous ne puissiez pas suivre exactement chacune d&rsquo;entre elles, selon la nature de votre site web. Mais avant de pouvoir enfreindre les r\u00e8gles, il est utile de savoir au moins pourquoi elles existent.<\/p>\n<p>Avons-nous manqu\u00e9 quelque chose d&rsquo;important ? Partagez vos meilleures pratiques de design web dans les commentaires ci-dessous !<\/p>\n<p>Lecture sugg\u00e9r\u00e9e : <a href=\"https:\/\/kinsta.com\/fr\/blog\/cours-web-design\/\">Les meilleurs cours de conception web en ligne<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Quelle est la cause de l&rsquo;\u00e9cart important entre ce que certains d\u00e9veloppeurs WordPress facturent par rapport aux autres ? Pour r\u00e9pondre \u00e0 cette question, il faut &#8230;<\/p>\n","protected":false},"author":48,"featured_media":36988,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[372,112],"topic":[1041,1017,1021],"class_list":["post-36970","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","tag-accessibilite","tag-webdesign","topic-conception-site-web-wordpress","topic-conception-web","topic-marque-site-web"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v24.6 (Yoast SEO v24.6) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Meilleures pratiques de web design pour votre prochain projet de site<\/title>\n<meta name=\"description\" content=\"Un bon design n&#039;est pas seulement une question d&#039;esth\u00e9tique. Tout aussi important : la convivialit\u00e9 du site, la facilit\u00e9 de navigation et l&#039;accessibilit\u00e9. En savoir plus sur les meilleures pratiques en mati\u00e8re de design de sites web.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kinsta.com\/fr\/blog\/meilleures-pratiques-design-web\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Meilleures pratiques de web design pour votre prochain projet de site\" \/>\n<meta property=\"og:description\" content=\"Un bon design n&#039;est pas seulement une question d&#039;esth\u00e9tique. Tout aussi important : la convivialit\u00e9 du site, la facilit\u00e9 de navigation et l&#039;accessibilit\u00e9. En savoir plus sur les meilleures pratiques en mati\u00e8re de design de sites web.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/fr\/blog\/meilleures-pratiques-design-web\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/kinstafrance\/\" \/>\n<meta property=\"article:published_time\" content=\"2020-02-19T08:32:16+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-08-22T13:50:54+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2020\/02\/meilleures-pratiques-web-design.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1460\" \/>\n\t<meta property=\"og:image:height\" content=\"730\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Maddy Osman\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Un bon design n&#039;est pas seulement une question d&#039;esth\u00e9tique. Tout aussi important : la convivialit\u00e9 du site, la facilit\u00e9 de navigation et l&#039;accessibilit\u00e9. En savoir plus sur les meilleures pratiques en mati\u00e8re de design de sites web.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2020\/02\/meilleures-pratiques-web-design.jpg\" \/>\n<meta name=\"twitter:creator\" content=\"@maddyosman\" \/>\n<meta name=\"twitter:site\" content=\"@kinsta_fr\" \/>\n<meta name=\"twitter:label1\" content=\"\u00c9crit par\" \/>\n\t<meta name=\"twitter:data1\" content=\"Maddy Osman\" \/>\n\t<meta name=\"twitter:label2\" content=\"Dur\u00e9e de lecture estim\u00e9e\" \/>\n\t<meta name=\"twitter:data2\" content=\"27 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/meilleures-pratiques-design-web\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/meilleures-pratiques-design-web\/\"},\"author\":{\"name\":\"Maddy Osman\",\"@id\":\"https:\/\/kinsta.com\/fr\/#\/schema\/person\/8ebe30416d11374fc13b3a0d0b25cb89\"},\"headline\":\"Meilleures pratiques de web design pour votre prochain projet de site\",\"datePublished\":\"2020-02-19T08:32:16+00:00\",\"dateModified\":\"2023-08-22T13:50:54+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/meilleures-pratiques-design-web\/\"},\"wordCount\":5928,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/fr\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/meilleures-pratiques-design-web\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2020\/02\/meilleures-pratiques-web-design.jpg\",\"keywords\":[\"accessibilite\",\"webdesign\"],\"articleSection\":[\"D\u00e9veloppement WordPress\"],\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/fr\/blog\/meilleures-pratiques-design-web\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/meilleures-pratiques-design-web\/\",\"url\":\"https:\/\/kinsta.com\/fr\/blog\/meilleures-pratiques-design-web\/\",\"name\":\"Meilleures pratiques de web design pour votre prochain projet de site\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/fr\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/meilleures-pratiques-design-web\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/meilleures-pratiques-design-web\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2020\/02\/meilleures-pratiques-web-design.jpg\",\"datePublished\":\"2020-02-19T08:32:16+00:00\",\"dateModified\":\"2023-08-22T13:50:54+00:00\",\"description\":\"Un bon design n'est pas seulement une question d'esth\u00e9tique. Tout aussi important : la convivialit\u00e9 du site, la facilit\u00e9 de navigation et l'accessibilit\u00e9. En savoir plus sur les meilleures pratiques en mati\u00e8re de design de sites web.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/meilleures-pratiques-design-web\/#breadcrumb\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/fr\/blog\/meilleures-pratiques-design-web\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/meilleures-pratiques-design-web\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2020\/02\/meilleures-pratiques-web-design.jpg\",\"contentUrl\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2020\/02\/meilleures-pratiques-web-design.jpg\",\"width\":1460,\"height\":730,\"caption\":\"Meilleures pratiques de web design pour votre prochain projet de site\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/meilleures-pratiques-design-web\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/fr\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Conception web\",\"item\":\"https:\/\/kinsta.com\/fr\/sujets\/conception-web\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Meilleures pratiques de web design pour votre prochain projet de site\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/fr\/#website\",\"url\":\"https:\/\/kinsta.com\/fr\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Solutions d&#039;h\u00e9bergement premium, rapides et s\u00e9curis\u00e9es\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/fr\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/fr\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"fr-FR\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/fr\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/fr\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/kinsta.com\/fr\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/fr\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/kinstafrance\/\",\"https:\/\/x.com\/kinsta_fr\",\"https:\/\/www.instagram.com\/kinstahosting\/\",\"https:\/\/www.linkedin.com\/company\/kinsta\/\",\"https:\/\/www.pinterest.com\/kinstahosting\/\",\"https:\/\/www.youtube.com\/c\/Kinsta\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/kinsta.com\/fr\/#\/schema\/person\/8ebe30416d11374fc13b3a0d0b25cb89\",\"name\":\"Maddy Osman\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/kinsta.com\/fr\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/6dd84956bec2e4b407d1b071a666ba85?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/6dd84956bec2e4b407d1b071a666ba85?s=96&d=mm&r=g\",\"caption\":\"Maddy Osman\"},\"description\":\"Maddy Osman creates engaging content with SEO best practices for marketing thought leaders and agencies that have their hands full with clients and projects. Learn more about her process and experience on her website, The Blogsmith and read her latest articles on Twitter: @MaddyOsman.\",\"sameAs\":[\"http:\/\/www.the-blogsmith.com\",\"https:\/\/x.com\/maddyosman\"],\"url\":\"https:\/\/kinsta.com\/fr\/blog\/author\/maddy\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Meilleures pratiques de web design pour votre prochain projet de site","description":"Un bon design n'est pas seulement une question d'esth\u00e9tique. Tout aussi important : la convivialit\u00e9 du site, la facilit\u00e9 de navigation et l'accessibilit\u00e9. En savoir plus sur les meilleures pratiques en mati\u00e8re de design de sites web.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kinsta.com\/fr\/blog\/meilleures-pratiques-design-web\/","og_locale":"fr_FR","og_type":"article","og_title":"Meilleures pratiques de web design pour votre prochain projet de site","og_description":"Un bon design n'est pas seulement une question d'esth\u00e9tique. Tout aussi important : la convivialit\u00e9 du site, la facilit\u00e9 de navigation et l'accessibilit\u00e9. En savoir plus sur les meilleures pratiques en mati\u00e8re de design de sites web.","og_url":"https:\/\/kinsta.com\/fr\/blog\/meilleures-pratiques-design-web\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinstafrance\/","article_published_time":"2020-02-19T08:32:16+00:00","article_modified_time":"2023-08-22T13:50:54+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2020\/02\/meilleures-pratiques-web-design.jpg","type":"image\/jpeg"}],"author":"Maddy Osman","twitter_card":"summary_large_image","twitter_description":"Un bon design n'est pas seulement une question d'esth\u00e9tique. Tout aussi important : la convivialit\u00e9 du site, la facilit\u00e9 de navigation et l'accessibilit\u00e9. En savoir plus sur les meilleures pratiques en mati\u00e8re de design de sites web.","twitter_image":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2020\/02\/meilleures-pratiques-web-design.jpg","twitter_creator":"@maddyosman","twitter_site":"@kinsta_fr","twitter_misc":{"\u00c9crit par":"Maddy Osman","Dur\u00e9e de lecture estim\u00e9e":"27 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/fr\/blog\/meilleures-pratiques-design-web\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/fr\/blog\/meilleures-pratiques-design-web\/"},"author":{"name":"Maddy Osman","@id":"https:\/\/kinsta.com\/fr\/#\/schema\/person\/8ebe30416d11374fc13b3a0d0b25cb89"},"headline":"Meilleures pratiques de web design pour votre prochain projet de site","datePublished":"2020-02-19T08:32:16+00:00","dateModified":"2023-08-22T13:50:54+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/fr\/blog\/meilleures-pratiques-design-web\/"},"wordCount":5928,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/fr\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/fr\/blog\/meilleures-pratiques-design-web\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2020\/02\/meilleures-pratiques-web-design.jpg","keywords":["accessibilite","webdesign"],"articleSection":["D\u00e9veloppement WordPress"],"inLanguage":"fr-FR","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/fr\/blog\/meilleures-pratiques-design-web\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/fr\/blog\/meilleures-pratiques-design-web\/","url":"https:\/\/kinsta.com\/fr\/blog\/meilleures-pratiques-design-web\/","name":"Meilleures pratiques de web design pour votre prochain projet de site","isPartOf":{"@id":"https:\/\/kinsta.com\/fr\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/fr\/blog\/meilleures-pratiques-design-web\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/fr\/blog\/meilleures-pratiques-design-web\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2020\/02\/meilleures-pratiques-web-design.jpg","datePublished":"2020-02-19T08:32:16+00:00","dateModified":"2023-08-22T13:50:54+00:00","description":"Un bon design n'est pas seulement une question d'esth\u00e9tique. Tout aussi important : la convivialit\u00e9 du site, la facilit\u00e9 de navigation et l'accessibilit\u00e9. En savoir plus sur les meilleures pratiques en mati\u00e8re de design de sites web.","breadcrumb":{"@id":"https:\/\/kinsta.com\/fr\/blog\/meilleures-pratiques-design-web\/#breadcrumb"},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/fr\/blog\/meilleures-pratiques-design-web\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/kinsta.com\/fr\/blog\/meilleures-pratiques-design-web\/#primaryimage","url":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2020\/02\/meilleures-pratiques-web-design.jpg","contentUrl":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2020\/02\/meilleures-pratiques-web-design.jpg","width":1460,"height":730,"caption":"Meilleures pratiques de web design pour votre prochain projet de site"},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/fr\/blog\/meilleures-pratiques-design-web\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/fr\/"},{"@type":"ListItem","position":2,"name":"Conception web","item":"https:\/\/kinsta.com\/fr\/sujets\/conception-web\/"},{"@type":"ListItem","position":3,"name":"Meilleures pratiques de web design pour votre prochain projet de site"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/fr\/#website","url":"https:\/\/kinsta.com\/fr\/","name":"Kinsta\u00ae","description":"Solutions d&#039;h\u00e9bergement premium, rapides et s\u00e9curis\u00e9es","publisher":{"@id":"https:\/\/kinsta.com\/fr\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/fr\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"fr-FR"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/fr\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/fr\/","logo":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/kinsta.com\/fr\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/fr\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/kinstafrance\/","https:\/\/x.com\/kinsta_fr","https:\/\/www.instagram.com\/kinstahosting\/","https:\/\/www.linkedin.com\/company\/kinsta\/","https:\/\/www.pinterest.com\/kinstahosting\/","https:\/\/www.youtube.com\/c\/Kinsta"]},{"@type":"Person","@id":"https:\/\/kinsta.com\/fr\/#\/schema\/person\/8ebe30416d11374fc13b3a0d0b25cb89","name":"Maddy Osman","image":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/kinsta.com\/fr\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/6dd84956bec2e4b407d1b071a666ba85?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/6dd84956bec2e4b407d1b071a666ba85?s=96&d=mm&r=g","caption":"Maddy Osman"},"description":"Maddy Osman creates engaging content with SEO best practices for marketing thought leaders and agencies that have their hands full with clients and projects. Learn more about her process and experience on her website, The Blogsmith and read her latest articles on Twitter: @MaddyOsman.","sameAs":["http:\/\/www.the-blogsmith.com","https:\/\/x.com\/maddyosman"],"url":"https:\/\/kinsta.com\/fr\/blog\/author\/maddy\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/posts\/36970","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/users\/48"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/comments?post=36970"}],"version-history":[{"count":13,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/posts\/36970\/revisions"}],"predecessor-version":[{"id":59669,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/posts\/36970\/revisions\/59669"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/36970\/translations\/en"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/36970\/translations\/pt"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/36970\/translations\/es"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/36970\/translations\/fr"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/36970\/translations\/it"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/36970\/translations\/de"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/36970\/translations\/nl"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/36970\/translations\/jp"},{"embeddable":true,"hreflang":"da","title":"Danish","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/36970\/translations\/dk"},{"embeddable":true,"hreflang":"sv","title":"Swedish","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/36970\/translations\/se"},{"href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/36970\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/media\/36988"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/media?parent=36970"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/tags?post=36970"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/topic?post=36970"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}