![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-300329-63831d1ed236e.webp\")
<\/a><\/p>\n\n Cependant, il se transforme en une mise en page \u00e0 une seule colonne avec un menu cach\u00e9 \u00e0 la fois sur tablette et sur mobile. Le menu du site Web sur la version de bureau comprend \u00e9galement des \u00e9tiquettes et des ic\u00f4nes, ce qui facilite la compr\u00e9hension des g\u00e9n\u00e9rations plus \u00e2g\u00e9es (qui sont plus susceptibles d’utiliser un ordinateur de bureau ou un ordinateur portable).\n<\/p>\n
\n Une navigation fluide joue un r\u00f4le essentiel pour garder les prospects plus longtemps sur votre site Web. Les utilisateurs sont impatients. Ils n’attendront pas ind\u00e9finiment s’ils ne trouvent pas ce qu’ils veulent. Par cons\u00e9quent, une mauvaise navigation peut affecter directement votre taux de conversion, et donc vos profits. Ainsi, les utilisateurs doivent pouvoir acc\u00e9der \u00e0 votre site Web et naviguer de mani\u00e8re transparente sur tous les appareils.\n<\/p>\n \n Lorsqu’il s’agit de navigation sur un site Web, moins c’est g\u00e9n\u00e9ralement plus. Alors, minimisez autant que possible le nombre de liens de navigation. Vous ne voulez pas submerger les utilisateurs avec trop de choix. Offrir beaucoup de liens peut \u00e9galement nuire \u00e0 votre r\u00e9f\u00e9rencement, car les robots d’indexation ont du mal \u00e0 d\u00e9chiffrer ce contenu.\n<\/p>\n \n Assurez-vous donc d’ajouter des liens vers les mots cl\u00e9s et expressions appropri\u00e9s. Corrigez les liens bris\u00e9s d\u00e8s que possible. Si vous avez remplac\u00e9 une ancienne page Web par une nouvelle, assurez-vous de cr\u00e9er un lien de redirection appropri\u00e9.\n<\/p>\n \n \u00c9vitez de trop jouer avec votre cr\u00e9ativit\u00e9. Il est souvent pr\u00e9f\u00e9rable de s’en tenir \u00e0 l’architecture de navigation standard. Dans l’espoir de se d\u00e9marquer de la foule, les gens font souvent un usage excessif de l’animation ou des graphiques et finissent par avoir l’effet inverse sur les utilisateurs.\n<\/p>\n \n Il est toutefois souhaitable d’int\u00e9grer les derni\u00e8res tendances de navigation dans votre site Web. Par exemple, 2017 a vu une augmentation substantielle des barres de navigation collantes, des m\u00e9ga menus et des sous-menus de navigation r\u00e9actifs, entre autres. L’utilisation de l’une de ces fonctionnalit\u00e9s sur votre site Web est probablement une bonne id\u00e9e.\n<\/p>\n \n Le site Web du mus\u00e9e d’art moderne de San Francisco est peut-\u00eatre la meilleure combinaison de navigation facile et de graphismes \u00e9poustouflants. Le menu principal simple mais \u00e9l\u00e9gant fournit des liens vers tous les \u00e9l\u00e9ments essentiels, y compris les expositions, les projets, les \u0153uvres d’art pr\u00e9sent\u00e9es, les d\u00e9tails de la billetterie, les heures de visite et l’adh\u00e9sion.\n<\/p>\n \n Vous n’avez pas besoin de faire d\u00e9filer la page d’accueil pour voir tous ces liens. Au lieu de texte et d’images, ils ont utilis\u00e9 des vid\u00e9os qui vous donnent l’impression d’\u00eatre dans le mus\u00e9e.\n<\/p>\n \n Ils ont \u00e9galement conserv\u00e9 intact le cadre de navigation intuitif sur l’ensemble du site. Que vous regardiez les \u0153uvres d’art ou les projets, vous ne vous sentirez jamais perdu. Le site Web communique la complexit\u00e9 de l’art et des peintures d’une mani\u00e8re relativement simple, exactement comme les gens ordinaires voudraient en faire l’exp\u00e9rience.\n<\/p>\n \n Tout le monde sait que la vitesse du site Web est importante. Mais la vitesse \u00e0 laquelle votre site Web doit \u00eatre est un sujet de d\u00e9bat. Selon une \u00e9tude r\u00e9cente publi\u00e9e par Google, une seconde est le temps de chargement id\u00e9al d’une page Web. Cependant, si le chargement de votre site Web prend jusqu’\u00e0 trois secondes, vous vous d\u00e9brouillez toujours bien car le taux de rebond ne d\u00e9passe pas 32%. Mais, si le temps de chargement augmente encore, disons jusqu’\u00e0 cinq secondes, le taux de rebond sera de 90 %, tandis qu’un d\u00e9lai de dix secondes entra\u00eene une augmentation de 123 %.\n<\/p>\n \n Google accorde depuis un certain temps un traitement pr\u00e9f\u00e9rentiel aux sites Web \u00e0 chargement rapide. Cependant, il \u00e9tait limit\u00e9 aux seuls ordinateurs personnels. Mais, avec l’augmentation du trafic Web sur les t\u00e9l\u00e9phones mobiles, Google a d\u00e9cid\u00e9 de faire de la vitesse de page un facteur de classement pour les recherches mobiles \u00e0 partir de juillet 2018. Ainsi, la vitesse de chargement du site doit \u00eatre aussi \u00e9lev\u00e9e que possible.\n<\/p>\n \n La premi\u00e8re chose que vous devez faire est de savoir combien de temps il faut pour charger diff\u00e9rentes parties de chaque page Web sur votre site Web. Bien que vous puissiez utiliser des outils d’analyse de vitesse tels que WebPageTest<\/strong> ou Pingdom<\/strong>, ils ne suffisent pas.\n<\/p>\n \n Pour voir \u00e0 quelle vitesse chaque \u00e9l\u00e9ment de votre site se charge, vous pouvez cliquer avec le bouton droit de la souris sur la page que vous souhaitez analyser, cliquer sur \u00ab\u00a0Inspecter\u00a0\u00bb, puis sur l’onglet \u00ab\u00a0R\u00e9seau\u00a0\u00bb. Vous pouvez le faire sur n’importe quel navigateur. Par exemple, le chargement temps pour divers \u00e9l\u00e9ments sur la page Web http:\/\/www.instantshift.com\/category\/web-design\/<\/a> dans le navigateur Firefox est illustr\u00e9 ci-dessous. Cette analyse vous fournira les donn\u00e9es permettant d’identifier les \u00e9l\u00e9ments de chargement lent sur chaque page Web.\n<\/p>\n \n Il vous montrera \u00e9galement le nombre de requ\u00eates HTTP effectu\u00e9es par votre site. R\u00e9duire le nombre de requ\u00eates HTTP est un excellent moyen d’am\u00e9liorer sa vitesse. Identifiez et \u00e9liminez les images, textes ou graphiques inutiles, le cas \u00e9ch\u00e9ant.\n<\/p>\n \n D’autres \u00e9tapes d’am\u00e9lioration de la vitesse incluent l’utilisation d’un r\u00e9seau de diffusion de contenu (CDN), l’utilisation d’un domaine sans cookie soutenu par un CDN pour h\u00e9berger vos fichiers statiques, la r\u00e9duction et la combinaison de vos fichiers HTML, CSS et JavaScript, l’installation de Google PageSpeed \u200b\u200bsur votre serveur, et diff\u00e9rer le chargement de JavaScript, entre autres.\n<\/p>\n \n Le texte et les visuels sont des facteurs critiques d’un site Web. Cependant, votre site ne peut pas attirer plus de trafic Web sans trouver le bon \u00e9quilibre entre ces deux \u00e9l\u00e9ments. En d’autres termes, les graphiques ne doivent pas dominer le texte et vice versa.\n<\/p>\n \n Le cerveau humain, cependant, a tendance \u00e0 se souvenir mieux et plus longtemps des visuels. En fait, les gens peuvent se souvenir de 65 % des visuels pr\u00e8s de trois jours plus tard, contre 10 % du contenu textuel au cours de la m\u00eame p\u00e9riode. Votre contenu peut g\u00e9n\u00e9rer jusqu’\u00e0 94 % de vues suppl\u00e9mentaires si vous y ajoutez des \u00e9l\u00e9ments visuels et des graphiques attrayants.\n<\/p>\n \n De plus, le contenu visuel viral (vid\u00e9os, GIF et images) peut g\u00e9n\u00e9rer plus de liens entrants. En outre, un nombre croissant de personnes acc\u00e8dent au Web \u00e0 partir de leurs mobiles, en particulier la jeune g\u00e9n\u00e9ration. Utiliser plus de visuels est logique car regarder une vid\u00e9o est tellement plus facile que de lire un long paragraphe sur mobile.\n<\/p>\n \n Il y a cependant un hic. Plus de vid\u00e9os, de graphiques et d’images haute d\u00e9finition signifient que votre site Web se chargera plus lentement. Comme mentionn\u00e9 dans le point pr\u00e9c\u00e9dent, les sites Web \u00e0 chargement lent entra\u00eenent des taux de rebond plus \u00e9lev\u00e9s. Les moteurs de recherche ont \u00e9galement du mal \u00e0 reconna\u00eetre les visuels par rapport au texte. Une fa\u00e7on de surmonter ce probl\u00e8me consiste \u00e0 ajouter un \u00ab\u00a0texte alternatif\u00a0\u00bb appropri\u00e9 aux images.\n<\/p>\n \n Lorsque vous utilisez \u00ab\u00a0Alt Text\u00a0\u00bb, concentrez-vous non seulement sur le ciblage par mot-cl\u00e9, mais \u00e9galement sur l’intention de l’utilisateur. Par exemple, regardez l’image suivante. Cela pourrait signifier une vari\u00e9t\u00e9 de choses. Vous pouvez percevoir cette image comme un signe de bonheur ou de motivation ou m\u00eame un sentiment d’accomplissement.\n<\/p>\n \n Donc, si votre site Web traite de quelque chose comme la r\u00e9ussite personnelle ou professionnelle, mentionner \u00ab\u00a0les moyens d’atteindre votre objectif\u00a0\u00bb dans votre \u00ab\u00a0texte alternatif\u00a0\u00bb est bien mieux que de simplement dire \u00ab\u00a0une fille sautant au coucher du soleil\u00a0\u00bb.\n<\/p>\n \n D’un autre c\u00f4t\u00e9, un site Web sur la d\u00e9pression et le conseil devrait utiliser quelque chose comme \u00ab\u00a0surmonter la d\u00e9pression avec un bonheur inh\u00e9rent\u00a0\u00bb. Cependant, \u00e9vitez d’exag\u00e9rer avec la description. Cela ne devrait pas sembler anormal, car les moteurs de recherche n’aiment pas le bourrage de mots cl\u00e9s. Utilisez une description pertinente et significative.\n<\/p>\n \n L’\u00e9quilibre visuel et textuel ne doit pas n\u00e9cessairement \u00eatre sym\u00e9trique. Vous pouvez disposer ces deux \u00e9l\u00e9ments de mani\u00e8re asym\u00e9trique, surtout si vous avez l’intention de donner un aspect plus informel, moderne ou d\u00e9contract\u00e9 \u00e0 votre conception de sites Web.\n<\/p>\n \n La page d’accueil de Dropbox<\/strong> est un exemple de disposition asym\u00e9trique du texte et des \u00e9l\u00e9ments visuels. Il attire imm\u00e9diatement l’attention de l’utilisateur sur les points focaux. Mais, ni les visuels ni le texte ne semblent se surpasser.\n<\/p>\n \n Seedlip<\/strong>, une entreprise vendant des spiritueux distill\u00e9s sans alcool, utilise largement les espaces blancs ainsi que des polices en gras et du texte simple dans la mesure du possible. C’est le bon \u00e9quilibre entre le texte et le visuel qui est destin\u00e9 \u00e0 bien servir leur public cible.\n<\/p>\n \n Malgr\u00e9 toutes les pr\u00e9cautions prises, les choses peuvent toujours mal tourner, entra\u00eenant des erreurs sur le site Web. Bien que vous ne puissiez pas \u00e9viter compl\u00e8tement ces erreurs peu propices, vous pouvez certainement les accepter avec gr\u00e2ce. Vos clients potentiels se sentent d\u00e9j\u00e0 irrit\u00e9s apr\u00e8s avoir rencontr\u00e9 une page Web erron\u00e9e. Pourquoi mettre du sel dans leur blessure avec un message d’erreur monotone (ou carr\u00e9ment ennuyeux) ? Malheureusement, cet aspect de la conception Web reste largement n\u00e9glig\u00e9.\n<\/p>\n \n M\u00eame si vos utilisateurs ont tap\u00e9 un mauvais nom d’utilisateur ou une mauvaise adresse URL, \u00e9vitez \u00e0 tout prix de les bl\u00e2mer. Au contraire, les messages d’erreur doivent \u00eatre aussi conviviaux que possible. Utilisez toujours un langage poli lorsque vous signalez une erreur. Par exemple, au lieu d’utiliser un message standard tel que \u00ab\u00a0L’adresse e-mail que vous avez saisie est erron\u00e9e\u00a0\u00bb, Mail Chimp<\/strong> utilise la description de gestion des erreurs suivante.\n<\/p>\n \n Piccsy<\/strong> am\u00e8ne la gestion des erreurs \u00e0 un tout autre niveau avec l’aide d’un humour l\u00e9ger. Si vous rencontrez l’erreur \u00ab\u00a0404 – page introuvable\u00a0\u00bb sur leur site Web, voici ce que vous verrez.\n<\/p>\n<\/a><\/p>\n\n 2 Navigation facile
\n<\/h3>\n\n A. Moins c’est plus
\n<\/h5>\n\n B. Trop de cr\u00e9ativit\u00e9 peut \u00eatre pr\u00e9judiciable
\n<\/h5>\n<\/a><\/p>\n<\/a><\/p>\n\n 3 Site Web \u00e0 chargement rapide
\n<\/h3>\n<\/a><\/p>\n\n A. Identifier le temps de chargement de chaque \u00e9l\u00e9ment
\n<\/h5>\n<\/a><\/p>\n\n B. R\u00e9duire le nombre de requ\u00eates HTTP
\n<\/h5>\n\n 4 Utilisation \u00e9quilibr\u00e9e des visuels et du texte
\n<\/h3>\n\n A. Nous nous souvenons facilement des visuels
\n<\/h5>\n<\/a><\/p>\n\n B. Les visuels ont un co\u00fbt
\n<\/h5>\n<\/a><\/p>\n\n C. L’\u00e9quilibre visuel-texte asym\u00e9trique fonctionne \u00e9galement
\n<\/h5>\n<\/a><\/p>\n<\/a><\/p>\n\n 5 Gestion correcte des erreurs
\n<\/h3>\n\n A. Soyez poli
\n<\/h5>\n<\/a><\/p>\n\n B. Utilisez un humour l\u00e9ger
\n<\/h5>\n