Sinon, voici 4 bonnes pratiques \u00e0 suivre pour rendre votre site encore plus performant !<\/p>\n
1. Visez l\u2019optimisation maximale<\/h2>\n![\"\"](\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2018\/03\/web-1024x868.jpg\")
R\u00e9alisation de Jos\u00e9 Cielito Pfister – designspiration<\/figcaption><\/figure>\nUne vid\u00e9o trop lourde sur la page d\u2019accueil ou une image de fond qui met trop longtemps \u00e0 se charger\u2026 Trop tard, vous venez de perdre un client potentiel !<\/p>\n
Si l\u2019usage des visuels et des films est fortement recommand\u00e9 sur votre site, encore faut-il que leur format soit adapt\u00e9. Optimisez le temps de chargement de votre site web gr\u00e2ce au web design !<\/p>\n
Compressez les images afin qu\u2019elles soient adapt\u00e9es au format web<\/h3>\n
Vous n\u2019avez pas besoin de la m\u00eame qualit\u00e9 que pour le print : dans la majeure partie des cas, 72 pixels seront largement suffisants. Vos photos resteront agr\u00e9ables \u00e0 l\u2019\u0153il, sans pix\u00e9lisation excessive et, surtout, elles seront rapidement visibles.<\/p>\n
Choisir le bon format d’image<\/h3>\n
PNG, JPG, SVG… Ces formats sont les plus connus pour vos images. Sur le web, un autre format doit retenir votre attention : WEBP. Ce format vise \u00e0 r\u00e9duire au maximum la taille de vos images et donc optimiser leur vitesse de chargement.<\/p>\n
Restez dans le m\u00eame esprit pour les vid\u00e9os<\/h3>\n
\u00c9ventuellement, conservez-les pour des pages internes, pas pour la page d\u2019accueil. Les internautes auront plus de patience pour elles quand ils auront d\u00e9j\u00e0 appris \u00e0 vous conna\u00eetre.<\/p>\n
Vous pouvez pousser encore plus loin en vous interrogeant sur la n\u00e9cessit\u00e9 des applications JS que vous aurez impl\u00e9ment\u00e9e sur vos pages. Elles alourdissent les pages, et pas toujours \u00e0 bon escient.<\/p>\n
En optimisant les performances de votre site, vous participez \u00e0 la construction d’un site web plus \u00e9cologique<\/a>.<\/p>\n\u00c0 lire aussi : Le guide pratique de l\u2019image : 40 conseils et astuces !<\/a><\/p><\/blockquote>\n2. Pensez mobile first<\/h2>\n![\"\"](\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2022\/09\/Capture-decran-2023-03-06-a-11.50.45.png\")
Source : Creafresh Studio – Behance<\/figcaption><\/figure>\nCe n\u2019est plus un secret : Google favorise dans son r\u00e9f\u00e9rencement les pages adapt\u00e9es pour les mobiles<\/a>. Vous devez absolument penser \u00e0 ces utilisateurs lors de la mise en place du design de votre site.<\/p>\nPour plus d\u2019efficacit\u00e9, optez pour un texte \u00e9crit en plus gros caract\u00e8res (plus lisible sur petit \u00e9cran) et \u00e0 des boutons suffisamment larges pour \u00eatre cliqu\u00e9s du doigt sans difficult\u00e9.<\/p><\/blockquote>\n
De mani\u00e8re g\u00e9n\u00e9rale, l\u2019organisation de votre site doit \u00eatre diff\u00e9rente selon la taille de l\u2019\u00e9cran sur lequel il sera regard\u00e9. On appelle \u00e7a le responsive design ! Il s\u2019agit de passer d\u2019une mise en page horizontale \u00e0 une pr\u00e9sentation verticale. Mais c\u2019est la seule mani\u00e8re de toucher un maximum de public.<\/p>\n
Le responsive design est une technique de conception d\u2019interface digitale destin\u00e9e \u00e0 rendre l\u2019affichage de la page d\u2019un site web adapt\u00e9e \u00e0 la taille de l\u2019\u00e9cran du support utilis\u00e9 (t\u00e9l\u00e9phone portable, tablette, ordinateur, etc.).<\/p>\n
Pour vous aider, nous avons r\u00e9pertori\u00e9 9 erreurs \u00e0 ne pas faire sur un site responsive<\/a>.<\/p>\n\u00c0 lire aussi : Mobile : le guide ultime pour r\u00e9ussir tous vos designs<\/a><\/p><\/blockquote>\n3. Respectez les r\u00e8gles de l’UX<\/h2>\n
![\"\"](\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2022\/09\/original-44b92f6ec8efb43e3ed97d4b15b49821-e1678101220397.webp\")
<\/p>\n
D\u00e9ranger les habitudes peut \u00eatre un concept. Mais sur internet, il est trop souvent synonyme d\u2019internautes perdus. Et quand il est perdu, votre information ne se transmet pas efficacement.<\/p>\n
Le webdesign<\/a> r\u00e9pond \u00e0 deux objectifs :<\/p>\n\n- Donner des rep\u00e8res aux utilisateurs d\u2019un site web ;<\/li>\n
- Encourager l\u2019atteinte des objectifs commerciaux de l\u2019entreprise.<\/li>\n<\/ul>\n
Avec une grille de base qui respecte les codes du genre, vous pourrez vous permettre de nombreuses libert\u00e9s, \u00e0 condition que vous ayez au pr\u00e9alable int\u00e9gr\u00e9 :<\/p>\n
\n- Votre logo, cliquable, en haut \u00e0 gauche. Un rappel de votre identit\u00e9, mais aussi un moyen de revenir vers la page d\u2019accueil ;<\/li>\n
- Un menu clair et lisible, en haut de page (d\u00e9clinable en version hamburger<\/a> pour les versions mobiles de votre site) ;<\/li>\n
- Des boutons d\u2019action<\/a> contrast\u00e9s et bien visibles, etc.<\/li>\n<\/ul>\n
Il ne s\u2019agit que de quelques codes, mais ils rassureront les utilisateurs lors de votre premier contact. Personne n\u2019aime se sentir perdu sur un site internet !<\/p>\n
N\u00e9anmoins, si vous avez un concept ou une direction artistique qui n\u00e9cessite de casser ses codes, testez ! Ce sera le meilleur moyen de voir si votre id\u00e9e perd votre client et d\u00e9t\u00e9riore votre exp\u00e9rience utilisateur ou plut\u00f4t qu’elle vous d\u00e9marque de la concurrence et rend votre site encore plus attractif.<\/p>\n
Tous ces codes participent \u00e0 l\u2019am\u00e9lioration de l\u2019exp\u00e9rience utilisateur de votre site web !<\/p>\n
L\u2019exp\u00e9rience utilisateur, ou UX, d\u00e9signe la qualit\u00e9 de l\u2019exp\u00e9rience v\u00e9cue par l\u2019utilisateur sur votre site web. Il s\u2019agit en effet du ressenti de l\u2019internaute lors de l\u2019utilisation d\u2019une interface, d\u2019un appareil digital, etc.<\/p><\/blockquote>\n
\u00c0 lire aussi : UX\/UI Design : 7 id\u00e9es \u00e9cologiques pour votre webdesign<\/a><\/p><\/blockquote>\n4. Soignez votre landing page<\/h2>\n![\"\"](\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2018\/03\/landing-page-1024x768.png\")
Source : Outcrowd – Dribbble<\/figcaption><\/figure>\nLa page o\u00f9 les internautes atterriront lors de leur d\u00e9couverte de votre site doit \u00eatre particuli\u00e8rement travaill\u00e9e que ce soit suite \u00e0 :<\/p>\n
\n- Un lien ;<\/li>\n
- Une publicit\u00e9 ;<\/li>\n
- Une campagne promotionnelle, etc.<\/li>\n<\/ul>\n
Vous devez lui assigner un but, et un seul, mat\u00e9rialis\u00e9 par un bouton d\u2019action, appel\u00e9 bouton CTA<\/a>, clairement identifiable, et l\u2019habiller pour r\u00e9pondre \u00e0 cet objectif avec les images et les textes qui sauront convaincre les prospects.<\/p>\nUn bouton CTA, ou call-to-action, est un \u00e9l\u00e9ment positionn\u00e9 sur la page d\u2019un site web, un blog ou un email pour inciter vos utilisateurs, prospects ou clients \u00e0 effectuer une action (achat, demande de devis, etc.).<\/p><\/blockquote>\n
Source : Dribble<\/p>\n
Mais, surtout, m\u00eame si elle reprend les codes graphiques de l\u2019ensemble de votre site, elle doit en \u00eatre bien distincte : pas de menu de navigation<\/a> dans son cas. Une seule action possible, via le bouton (ou, en petit, un lien vers votre page d\u2019accueil. Mais rien de plus).<\/p>\n\u00c0 lire aussi : Web design : 5 r\u00e8gles pour vos boutons call-to-action<\/a><\/p><\/blockquote>\n![\"\"](\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2018\/03\/galshir-click-lemonade.gif\")
<\/p>\n
L\u2019apparence d\u2019un site, son design, influence ses performances. Ce n\u2019est pas seulement une notion vague, c\u2019est ce qui vous permettra de faire la diff\u00e9rence avant m\u00eame d\u2019avoir propos\u00e9 votre contenu.<\/p>\n
Une vid\u00e9o trop lourde sur la page d\u2019accueil ou une image de fond qui met trop longtemps \u00e0 se charger\u2026 Trop tard, vous venez de perdre un client potentiel !<\/p>\n
Si l\u2019usage des visuels et des films est fortement recommand\u00e9 sur votre site, encore faut-il que leur format soit adapt\u00e9. Optimisez le temps de chargement de votre site web gr\u00e2ce au web design !<\/p>\n
Compressez les images afin qu\u2019elles soient adapt\u00e9es au format web<\/h3>\n
Vous n\u2019avez pas besoin de la m\u00eame qualit\u00e9 que pour le print : dans la majeure partie des cas, 72 pixels seront largement suffisants. Vos photos resteront agr\u00e9ables \u00e0 l\u2019\u0153il, sans pix\u00e9lisation excessive et, surtout, elles seront rapidement visibles.<\/p>\n
Choisir le bon format d’image<\/h3>\n
PNG, JPG, SVG… Ces formats sont les plus connus pour vos images. Sur le web, un autre format doit retenir votre attention : WEBP. Ce format vise \u00e0 r\u00e9duire au maximum la taille de vos images et donc optimiser leur vitesse de chargement.<\/p>\n
Restez dans le m\u00eame esprit pour les vid\u00e9os<\/h3>\n
\u00c9ventuellement, conservez-les pour des pages internes, pas pour la page d\u2019accueil. Les internautes auront plus de patience pour elles quand ils auront d\u00e9j\u00e0 appris \u00e0 vous conna\u00eetre.<\/p>\n
Vous pouvez pousser encore plus loin en vous interrogeant sur la n\u00e9cessit\u00e9 des applications JS que vous aurez impl\u00e9ment\u00e9e sur vos pages. Elles alourdissent les pages, et pas toujours \u00e0 bon escient.<\/p>\n
En optimisant les performances de votre site, vous participez \u00e0 la construction d’un site web plus \u00e9cologique<\/a>.<\/p>\n \u00c0 lire aussi : Le guide pratique de l\u2019image : 40 conseils et astuces !<\/a><\/p><\/blockquote>\n Ce n\u2019est plus un secret : Google favorise dans son r\u00e9f\u00e9rencement les pages adapt\u00e9es pour les mobiles<\/a>. Vous devez absolument penser \u00e0 ces utilisateurs lors de la mise en place du design de votre site.<\/p>\n Pour plus d\u2019efficacit\u00e9, optez pour un texte \u00e9crit en plus gros caract\u00e8res (plus lisible sur petit \u00e9cran) et \u00e0 des boutons suffisamment larges pour \u00eatre cliqu\u00e9s du doigt sans difficult\u00e9.<\/p><\/blockquote>\n De mani\u00e8re g\u00e9n\u00e9rale, l\u2019organisation de votre site doit \u00eatre diff\u00e9rente selon la taille de l\u2019\u00e9cran sur lequel il sera regard\u00e9. On appelle \u00e7a le responsive design ! Il s\u2019agit de passer d\u2019une mise en page horizontale \u00e0 une pr\u00e9sentation verticale. Mais c\u2019est la seule mani\u00e8re de toucher un maximum de public.<\/p>\n Le responsive design est une technique de conception d\u2019interface digitale destin\u00e9e \u00e0 rendre l\u2019affichage de la page d\u2019un site web adapt\u00e9e \u00e0 la taille de l\u2019\u00e9cran du support utilis\u00e9 (t\u00e9l\u00e9phone portable, tablette, ordinateur, etc.).<\/p>\n Pour vous aider, nous avons r\u00e9pertori\u00e9 9 erreurs \u00e0 ne pas faire sur un site responsive<\/a>.<\/p>\n \u00c0 lire aussi : Mobile : le guide ultime pour r\u00e9ussir tous vos designs<\/a><\/p><\/blockquote>\n D\u00e9ranger les habitudes peut \u00eatre un concept. Mais sur internet, il est trop souvent synonyme d\u2019internautes perdus. Et quand il est perdu, votre information ne se transmet pas efficacement.<\/p>\n Le webdesign<\/a> r\u00e9pond \u00e0 deux objectifs :<\/p>\n Avec une grille de base qui respecte les codes du genre, vous pourrez vous permettre de nombreuses libert\u00e9s, \u00e0 condition que vous ayez au pr\u00e9alable int\u00e9gr\u00e9 :<\/p>\n Il ne s\u2019agit que de quelques codes, mais ils rassureront les utilisateurs lors de votre premier contact. Personne n\u2019aime se sentir perdu sur un site internet !<\/p>\n N\u00e9anmoins, si vous avez un concept ou une direction artistique qui n\u00e9cessite de casser ses codes, testez ! Ce sera le meilleur moyen de voir si votre id\u00e9e perd votre client et d\u00e9t\u00e9riore votre exp\u00e9rience utilisateur ou plut\u00f4t qu’elle vous d\u00e9marque de la concurrence et rend votre site encore plus attractif.<\/p>\n Tous ces codes participent \u00e0 l\u2019am\u00e9lioration de l\u2019exp\u00e9rience utilisateur de votre site web !<\/p>\n L\u2019exp\u00e9rience utilisateur, ou UX, d\u00e9signe la qualit\u00e9 de l\u2019exp\u00e9rience v\u00e9cue par l\u2019utilisateur sur votre site web. Il s\u2019agit en effet du ressenti de l\u2019internaute lors de l\u2019utilisation d\u2019une interface, d\u2019un appareil digital, etc.<\/p><\/blockquote>\n \u00c0 lire aussi : UX\/UI Design : 7 id\u00e9es \u00e9cologiques pour votre webdesign<\/a><\/p><\/blockquote>\n La page o\u00f9 les internautes atterriront lors de leur d\u00e9couverte de votre site doit \u00eatre particuli\u00e8rement travaill\u00e9e que ce soit suite \u00e0 :<\/p>\n Vous devez lui assigner un but, et un seul, mat\u00e9rialis\u00e9 par un bouton d\u2019action, appel\u00e9 bouton CTA<\/a>, clairement identifiable, et l\u2019habiller pour r\u00e9pondre \u00e0 cet objectif avec les images et les textes qui sauront convaincre les prospects.<\/p>\n Un bouton CTA, ou call-to-action, est un \u00e9l\u00e9ment positionn\u00e9 sur la page d\u2019un site web, un blog ou un email pour inciter vos utilisateurs, prospects ou clients \u00e0 effectuer une action (achat, demande de devis, etc.).<\/p><\/blockquote>\n Source : Dribble<\/p>\n Mais, surtout, m\u00eame si elle reprend les codes graphiques de l\u2019ensemble de votre site, elle doit en \u00eatre bien distincte : pas de menu de navigation<\/a> dans son cas. Une seule action possible, via le bouton (ou, en petit, un lien vers votre page d\u2019accueil. Mais rien de plus).<\/p>\n \u00c0 lire aussi : Web design : 5 r\u00e8gles pour vos boutons call-to-action<\/a><\/p><\/blockquote>\n L\u2019apparence d\u2019un site, son design, influence ses performances. Ce n\u2019est pas seulement une notion vague, c\u2019est ce qui vous permettra de faire la diff\u00e9rence avant m\u00eame d\u2019avoir propos\u00e9 votre contenu.<\/p>\n2. Pensez mobile first<\/h2>\n
3. Respectez les r\u00e8gles de l’UX<\/h2>\n
<\/p>\n\n
\n
4. Soignez votre landing page<\/h2>\n
\n
<\/p>\n