Bonjour et bienvenue à tous dans ce nouveau tuto !

Après avoir vu l’architecture ainsi que les différentes pages qui vont composer votre site web esport, nous allons voir les différents points à suivre et à éviter pour bien les habiller. Cela passera par le menu de navigation de votre site web, les textes, les images ainsi que les vidéos

Accrochez vos ceintures, c’est parti !

• • 1Le contenu texte

Conseils :

• Doit être bref mais efficace sur une page d’accueil. Il faut qu’en un seul coup d’œil on sache de quoi il s’agit.
• On ne fait pas de blog donc pas d’article. On ne dépassera ici pas 100 mots, sauf exception.
• Se concentrer sur des mots clés, sans spam. En moyenne 3 fois le mot par page.
• Dans ce cas-là, les mots clés peuvent être le nom de votre structure, LAN, esport, équipe, ou tout autre en rapport avec votre activité.
• Les légendes des images sont importantes pour leSEO (le référencement naturel), il ne faut pas les négliger, ce sont les balises alt que l’on voit lorsque l’on survole l’image.
• Chapitrez vos textes et les différentes parties de votre page (titre  en balise h1, titre 2 en balise h2, texte en balise p, etc.).

À éviter :

Il ne faut pas copier de contenu d’un autre site, sinon vous serez blacklist par google et vous perdrez de la crédibilité. Vous ne serez plus visible sur les moteurs de recherche. De la même manière, il ne faut pas qu’il y ait deux pages similaires sur votre site. C’est ce que l’on nomme le duplicate content.

Evitez les fonts trop originales. On peut voir tous les choix disponibles sur Google font. Une typo qui n’est pas dessus ne fonctionnera pas, elle sera remplacée par la typo de base sur les navigateurs des utilisateurs se rendant sur votre site.

• • 2Le contenu visuel

Conseils :

• Il y a des bibliothèques d’images libres que vous pouvez télécharger et utiliser sans risque. On peut utiliser Unsplash, Pixabay, et bien d’autres.
• Essayez d’inclure nativement des images au bon format et aux bonnes dimensions, même si WordPress vous redimensionne automatiquement les images, votre site sera un peu ralenti.
• Il existe des compresseurs en ligne, mais on peut aussi passer par d’autres logiciels pour recadrer et retoucher les photos.
• Si vous avez opté pour le Creative Cloud, il faut utiliser Adobe Bridge, ce logiciel est ultra puissant pour organiser ses photos, pour les retoucher et les recadrer.
• Pour la description des images, on met dans les champs les mots clés en rapport avec la page. Par exemple dans la page palmarès on essaie de mettre les mots clés adéquats, comme par exemple « classement lan esport ». On le fait dans le gestionnaire de médias WordPress. Il faut le faire dès le début, sinon il faudra tout faire après, et la tâche est longue. Si on le fait au fur et à mesure on gagne du temps.
• Ne pas hésiter à supprimer les médias inutilisés du gestionnaire de médias WordPress. Le site sera plus rapide et léger. Par extension, plus optimisé.
• Au niveau des icons si vous avez des SVG, c’est très bien. Ils ne perdront jamais en qualité quel que soit le device utilisé. Les SVG vont permettre d’alléger la taille du site web et de rendre les contenus en format vectoriels parfaitement responsive. Sans perte de qualité ni bug de pixels.
• Il y a des plugins qui compressent les images. Nous verrons ça dans le prochain article.

À éviter :

On ne prend pas d’images qui ne nous appartiennent pas. Sinon l’auteur de l’image peut vous attaquer en justice. Vous risquerez très cher.

• • 3Le contenu vidéo

Vous serez sans doute tenté de mettre une vidéo dans la bannière pour rendre votre site web encore plus esthétique. Mais attention au format et à la taille de votre vidéo. Une vidéo trop longue et trop grosse ralentira votre site ! Mais attention. Si vous la compressez trop, le résultat sera en basse résolution, et le résultat sera peu satisfaisant…

• • 4Les menus

Au niveau des menus, vous avez un choix très large ! L’objectif est de proposer l’expérience utilisateur la plus agréable possible. Eviitez les Méga menu qui prennent toute la page quand on le survole. C’est très pénible.
Faisons un petit tour d’horizon de ce qu’il est possible de faire :

Les menus en-têtes : classiques mais efficaces.

Les menus ancres, idéal pour les sites one page. Ça permet de scroller directement au contenu sans changer de page.

Les menus hamburgers, que l’on retrouve le plus souvent sur les versions mobiles.

Les à menus à onglets et / ou avec sous menu.

Les menus en sidebar statique verticale.

Vous avez maintenant un aperçu de l’architecture de votre site web ! Vous pouvez dorénavant créer les différentes pages de votre site. Nous verrons dans le prochain article comment habiller ces pages ! Cela passera donc par le placement des éléments, la longueur des textes et l’agencement général des items sur votre site !

See you soon !

Luc – Media Manager