Centre des communautés
Advertisement
Centre des communautés

Vous envisagez de personnaliser l'apparence de votre communauté grâce aux merveilles du CSS ? Lorsque vous élaborez une stratégie CSS, vous voulez faire des choix qui soient largement attrayants et qui accueillent le plus grand nombre possible de contributeurs et de lecteurs. Voici quelques bonnes pratiques qui vous aideront.

Avant de commencer, veuillez également lire notre article Règles de personnalisation.

Conseils[]

Utilisez le concepteur de thème[]

La façon la plus simple de personnaliser votre communauté est d'utiliser le concepteur de thème de Fandom. Il vous permet de modifier facilement la palette de couleurs de base de votre site, symbole, favicon et arrière-plan. Tout ce qui peut être modifié avec le concepteur de thème doit l'être avec lui. Commencez donc par là avant de passer par le CSS.

Couleurs[]

Évitez faibles contrastes, les couleurs conflictuelles ou vives — surtout dans la zone de contenu. Vous souhaitez que les gens puissent lire facilement vos articles afin qu'ils restent plus longtemps. Vous pouvez utiliser des sites web tels que WCAG Contrast Checker pour vérifier si vous utilisez un bon contraste.

Démarrez avec le concepteur de thème avant d'écrire du CSS.

Rappelez-vous :

  • Tout le monde n'a pas la même vue que vous. Un nombre important de personnes ont des problèmes de vue et de perception des couleurs.
  • Différents appareils se comportent différemment. Les couleurs que vous voyez sur votre propre écran peuvent ne pas fonctionner aussi bien sur d'autres.
  • Avoir un bon contraste entre le texte et l'arrière-plan.
  • Les images d'arrière-plan sont sympas, mais pas si vous ne pouvez pas lire le texte qui se trouve au-dessus d'elles. Utilisez le curseur de transparence du Concepteur de thème avec précaution, surtout avec un arrière-plan chargé. Ajoutez également une couleur de fond appropriée.
  • Essayez d'éviter les images d'arrière-plan chargés.
  • Essayez de ne pas faire des tailles de police trop petites, surtout dans la zone de texte principale. Il est préférable de conserver la taille de la police d'origine dans la zone de texte principale. Il est préférable de ne pas changer la police du contenu des pages, car elles doivent être facilement lisibles.

Polices de caractères[]

  • Les polices de caractères personnalisées sont les bienvenues, mais moins on en met, mieux c'est. Évitez de fatiguer les yeux. Faites attention aux endroits où vous êtes autorisé à changer le type de police : Règles de personnalisation.
  • Vous pouvez trouver de nombreuses polices gratuites qui permettent une utilisation commerciale. Vous pouvez également consulter le site Google Fonts. Si vous avez besoin d'aide, veuillez suivre ce guide : Importer des polices de Google.

Simplicité avant tout[]

Le CSS vous offre une multitude d'effets possibles pour faire en sorte qu'un site se démarque vraiment. Mais il ne faut pas en faire trop.

L'objectif du CSS est de rendre la communauté largement attrayante, et une conception visuelle trop tape-à-l'œil risque de rebuter les nouveaux visiteurs.

  • Utilisez des éléments décoratifs seulement si nécessaire.
  • Évitez tout ce qui est trop « flashy » sur les pages. Vous pouvez ajouter des effets de survol, par exemple pour faire ressortir les icônes, mais gardez à l'esprit que les wikis concernent surtout l'information. Le wiki doit bien sûr représenter le sujet sur lequel vous écrivez d'une manière visuellement attrayante, mais aussi de manière à éviter tout ce qui pourrait distraire ou repousser le visiteur.

Conception adaptative[]

Les pages Fandom ont une largeur fluide. Cela signifie qu'elles changent un peu en fonction de la taille de la fenêtre du navigateur. Assurez-vous que votre conception fonctionne entièrement en faisant varier la largeur de votre navigateur pendant les tests. Si vous le pouvez, testez également votre design sur une vraie tablette.

Écrivez des codes lisibles[]

Écrivez un code qui peut être lu et compris facilement. Puisque votre CSS sera sûrement lu par d'autres à un moment donné :

  • annotez le avec des commentaires clairs comme /* Ce code fait x, y et z */ (ce doit être quelque chose que non seulement vous comprenez avec le contexte, mais aussi toute personne qui lira et modifiera le code avec lequel il n'est pas familiarisé)
  • donnez à vos classes et identifiants personnalisés des noms compréhensibles. Si elle forme une boîte autour de quelque chose, pensez à l'appeler .box ou .boite, et non .tlk328
  • ajoutez des espacements et indentations aux goûts de votre communauté — mais choisissez un format et tenez-vous-en
  • organisez le code de manière logique, en gardant ensemble le code qui affecte la même partie du wiki.

Liens utiles[]

Plus d'aide

Advertisement