Ressources (beta)

M.-à-J. 04/08/2020

La mise-en-ligne sépare la conception qui dure 8-10 semaines et la maintenance qui s'étend sur le long terme. Une maintenance de qualité est nécessaire pour assurer une interface qui reste pratique et un site internet durable. Elle inclut le support technique, les ajustements, la résolution de bugs techniques, les révisions sur demande, la garantie que le site évoluera en harmonie avec les technologies (min. 5 ans) et les ressources ci-dessous pour aider les personnes gérant le contenu via WordPress. Contactez-moi pour toute question ou remarque.

Ajouter du texte

Style de rédaction

La rédaction de textes dédiés au web ne suit pas forcément les mêmes règles que la rédaction de textes créatifs. Par exemple, dans un texte créatif, il est bien vu d'utiliser des synonymes pour éviter de se répéter, mais dans le cas d'un site internet, la répétition est un bon moyen pour faire comprendre aux moteurs de recherche quels sont les mots clés qui résument notre site.


Hiérarchie du texte

Vous avez à dispositions plusieurs balises HTML pour hiérarchiser votre texte, des balises de titre ou d'en-tête (h1, h2, h3 jusqu'à h6) et la balise de bloc ou de paragraphe p. Ces balises permettent de structurer votre page et sont indispensables pour un bon référencement sur les moteurs de recherche (SEO).


Style de police dans les paragraphes

Évitez la multiplication de styles de polices de caractères dans les blocs/paragraphes pour faire ressortir l'information. Pour capter l'attention des lecteur.ice.s, préférez la rédaction de paragraphes courts et concis et mettez les mots-clés dans les titres/en-têtes.


Nomenclature des noms propres et lexique

Nomenclature des noms propres
Prenons les exemples de Build Up et de L-Étagère. Pour ces deux noms propres, plusieurs façons de les écrire sont envisageables: "Build Up", "BuildUp" dans le premier cas, "L-Étagère", "L-Etagère", "L'Étagère", "L'Etagère" (etc.) dans le second cas. Choisissez une syntaxe pour vos noms propres et ne changez plus. Outre un rendu plus professionnel, c'est important pour votre référencement sur les moteurs de recherche (SEO). Utilisez systématiquement les espaces insécables pour les noms propres composés (par ex: Build Up): même si le mot concerné n'est pas coupé sur votre écran d'ordinateur, il pourrait l'être sur mobile ou tablette.

Lexique
Évitez d'utiliser des termes différents pour décrire la même chose. Reprenons l'exemple de L-Étagère et de son espace culturel. On s'est décidées entre "espace culturel", "lieu d'exposition", "centre culturel" et on ne fait aucune variante dans les menus et les textes. Cette habitude permet aux lecteur.ice.s de bien comprendre le concept et contribue à un bon référencement (SEO).


Ajouter des images

Nomenclature des images

Pour évitez de potentiels problèmes techniques qui peuvent casser votre site internet, il est interdit d'utiliser des accents et des espaces dans la nomenclature de vos images (par ex: "letagere.jpg" et non "l Etagere.jpg"). Si vous ne suivez pas ces règles, il est probable qu'il ne se passe rien de visible, mais cela affaiblit votre site internet sur le long terme. Pour une accessibilité optimale, veillez aussi à donner un vrai nom à vos images (par ex: "equipe-au-complet.jpg" et non "img 0005.jpg"). Pour éviter de devoir renommer une bibliothèque entière à moyen terme, il est recommandé de prendre directement les bonnes habitudes.


Accessibilité des images

Les images doivent êtres accessibles aux personnes avec un handicap visuel. Pour avoir un site internet accessible et bien référencé (SEO), il est important de remplir les trois champs "texte alternatif", "légende" et description" dans la médiathèque WordPress. Le texte-alternatif explique ce que l'image communique. Il n'est pas visible sur le site mais apparait si l'image est manquante par exemple. La légende peut ou non être visible et contient typiquement le titre (si l'image représente une œuvre d'art par exemple) et/ou le nom l'illustrateur.ice/photographe et/ou les copytights. La description permet aux personnes qui utilisent un lecteur d'écran de lire l'image.


Poids et qualité des images images

C'est plus compliqué qu'il n'y parait d'avoir des images au bon format. Il faut une qualité suffisante pour éviter des images pixelisées et il faut éviter des images trop lourdes pour ne pas ralentir le site sur le long terme. Les téléphones mobiles font aujourd'hui des photos de si bonne qualité qu'il est peut probable que vous vous retrouviez avec des photos pixelisées. Mais faites attention aux images trop lourdes. Une seule image trop lourde n'y changera pas grand chose, mais quand le serveur sera saturé, il faudra alléger toute la médiathèque. Ci-dessous, la fenêtre d'exportation web sur Photoshop. Que vous ayez accès à Photoshop ou non, veillez à respecter les points suivants. Je reste à disposition pour recadrer vos images si besoin. Si il n'y en a qu'une, envoyez-la moi par email et si vous souhaitez que je recadre un lot, renommez les images correctement (voir entrée ci-dessus) puis rassemblez-les dans un dossier que vous compressez puis m'envoyez par Wetransfer.


Améliorer les performances

Améliorer le SEO

Le SEO est dépendant de dizaines de facteurs et être doté du meilleur référencement imaginable est un mandat en soi. Dans le cas d'un projet non-commercial, il faut respecter les règles du b.a-ba et laisser le temps faire le reste. Pour contribuer à un bon référencement, le lexique que vous utilisez a une impact directe. Faites l'exercice de lister les mots-clés qui catégorisent votre organisation et assurez-vous qu'ils apparaissent régulièrement dans vos textes. Sur chaque page, assurez vous que les mots-clés les plus importants pour décrire le contenu de la page soient présents dans le titre (h1). Dans le sous-titre (h2, h3), résumez le contenu de la page. Vous développez ensuite dans les paragraphes/blocs (p). L'information qui est mentionnée dans le titre/en-tête devraient être développée dans le sous-titre et développée d'avantage dans le texte qui suit. Le travail a faire dans la médiathèque (voir Accessibilité des images) contribue aussi au référencement.


Améliorer l'accessibilité

À la mise-en-ligne, j'installe sur votre site internet le widget gratuit de User Way (icône flottante sur le côté gauche de la page). Ce menu permet aux personnes avec un handicap visuel et/ou auditif d'adapter l'apparence du site à leurs besoins (taille du texte, contrastes, police de caractère facilitante pour les personnes dyslexiques, etc). En parallèle, il est important de remplir tous les champs dans la médiathèque (voir Accessibilité des images). Ces deux choses combinées ne suffisent pas toujours à atteindre les exigences fixées par les normes WCAG 2.0 qui sont difficiles à atteindre à moindre frais. Je vous encourage donc à ne pas négliger la médiathèque en attendant que je trouve une solution pour offrir une garantie accessibilité à mes client.e.s qui serait inclue dans la maintenance annuelle.


Conclusion

Suivre ces quelques conseils demande du temps et de la discipline et je suis prête à parier que ce sera pas parfait. Ce n'est pas grave, mon site ne l'est pas non plus! Respecter ces notions nous permettra à toustes de gagner ou d'éviter de perdre du temps sur le long terme. Alors faites de votre mieux, tout simplement. Comme vous le savez, je reste à vos côtés une fois que le site internet est en ligne pour la maintenance. Vous pouvez me contactez par email ou prendre rendez-vous sur Zoom en cas de doutes et de questions. Bonne chance!