POLICES, SEO ET COMPATIBILITÉ : LE DILEMME DU DESIGNER

POLICES, SEO ET COMPATIBILITÉ : LE DILEMME DU DESIGNER

Dans mon expérience professionnelle précédente, j’ai conçu et créé des pages et des graphiques pour l’intranet d’une entreprise. Dans ce contexte, les pratiques de référencement ne figuraient pas en tête de ma liste de priorités. Il suffisait d’ajouter quelques mots clés pour aider le moteur de recherche interne à trier les pages. En venant sur SEO.com depuis cet environnement, j’ai pu constater l’importance d’appliquer de bonnes pratiques de référencement pendant la phase de conception. Malheureusement, l’optimisation du contenu pour les moteurs de recherche peut souvent conduire à des difficultés pour maintenir un design souhaité.

Rendu de texte : SEO vs. design

Une zone d’incertitude sur laquelle je voudrais me concentrer est le rendu du texte, car le texte est également un élément important du classement d’une page dans les recherches. Il est important d’essayer de conserver le contenu de la page codé en HTML avec les balises appropriées (h1, p, etc) pour les moteurs de recherche et l’accessibilité. Comment cela peut-il limiter un concepteur, alors que le texte est codé en HTML et stylisé avec des CSS ? Comme pour l’ensemble des systèmes d’exploitation, navigateurs, écrans et paramètres disponibles, qui peuvent tous modifier la façon dont une page web est affichée, il existe des variations dans les polices de caractères que les utilisateurs ont installées sur leurs ordinateurs. Par conséquent, le choix d’une police particulière ne garantit pas que votre texte s’affichera effectivement dans cette police pour tous vos utilisateurs.

Pourquoi est-il important que le texte apparaisse en Times New Roman au lieu de Papyrus ? Pas nécessairement, mais si vous vous préoccupez de l’expérience de l’utilisateur (et pourquoi ne le seriez-vous pas ?), alors c’est certainement le cas. Les polices que vous utilisez peuvent, par exemple, mettre l’accent sur un texte important, établir l’image de marque de votre site ou rendre le contenu plus ou moins lisible, ce qui a une incidence sur la durée de présence sur votre site et sur les décisions des visiteurs. Quelle est donc la meilleure façon d’afficher les polices que vous souhaitez tout en maintenant la compatibilité avec plusieurs systèmes et en restant convivial pour les moteurs de recherche ?

CSS

Tout d’abord, le CSS a un piège si vous souhaitez utiliser une police que l’utilisateur ne possède pas. Vous pouvez lister le nom de la police souhaitée, les polices alternatives, et même une famille de polices que vous souhaitez appliquer au texte si votre premier choix n’est pas disponible. Toutefois, si la police idéale n’est pas celle qui finit par s’afficher, des problèmes de mise en page peuvent survenir en raison des variations d’espacement et de taille des polices.

Remplacement des images

Une autre façon pour les concepteurs de sites web de faire face à la situation est le remplacement des images. Vous pouvez créer une image du texte dans la police que vous souhaitez utiliser et cette image affichera le contenu au lieu du texte codé. Problème résolu, n’est-ce pas ? Pas nécessairement. L’utilisation d’images avec des balises « alt » rendra ce texte moins pertinent pour les moteurs de recherche que s’il était codé et étiqueté de manière appropriée. Il existe quelques techniques pour résoudre ce problème, notamment le placement d’images en arrière-plan et l’indentation du texte codé hors de la page et hors de vue, le réglage de l’affichage du texte codé sur « aucun », ou l’utilisation de la mise en page CSS pour cacher le texte codé derrière les images. Toutefois, Google avertit que « le fait de cacher du texte ou des liens dans votre contenu peut faire en sorte que votre site soit perçu comme peu fiable, car il présente les informations aux moteurs de recherche différemment des visiteurs ». Il est donc possible que même ces techniques adaptées puissent avoir un effet négatif sur votre classement dans les moteurs de recherche, et interférer avec l’accessibilité des lecteurs d’écran.

FLIR

FLIR (Face Lift Image Replacement) joue sur le concept de remplacement d’image, mais le fait de manière dynamique en utilisant PHP. Le texte peut toujours être codé de manière appropriée en HTML pour les moteurs de recherche, même s’il est échangé avec une image pour le spectateur. Parmi les inconvénients possibles de cette méthode, on peut citer sa dépendance à PHP et le fait que le texte ne peut pas être sélectionné, ce qui réduit la convivialité du site.

sIFR

Une autre méthode consiste à utiliser le système de remplacement évolutif des flashes internes (sIFR). Cette méthode combine Flash, Javascript et CSS pour effectuer également un remplacement dynamique du texte. Comme pour FLIR, le texte reste compatible avec le référencement mais le texte est remplacé par un fichier Flash au lieu d’une image. Cette technique, comme les autres, n’est pas sans inconvénients, notamment un temps de chargement plus long et l’obligation pour le spectateur d’avoir un lecteur Flash installé.

Cufon

Cufon est une autre méthode populaire qui permet de rendre les polices de caractères en utilisant Javascript. Cette technique permet des temps de chargement plus rapides, mais utilise des polices intégrées, ce qui peut entraîner des problèmes de copyright avec certains accords de licence de police. De plus, contrairement à sIFR, le texte ne sera pas sélectionnable.

CSS3 et polices intégrées

Les navigateurs commencent à prendre en charge la prochaine version du CSS (niveau 3), qui permet également de télécharger des polices sur le web. Les violations des droits d’auteur sont également un sujet de préoccupation, de même que les éventuels problèmes de sécurité.

Conclusion

Bien qu’aucune de ces méthodes ne soit parfaite, les nouvelles technologies et techniques se rapprochent chaque jour un peu plus de la nécessité d’une bonne conception et d’un contenu interrogeable. À ce stade, il appartient au concepteur de naviguer parmi ces options et d’adapter leur conception en fonction des exigences du projet.

Pour en savoir plus sur ces techniques de typographie web, cliquez ici :

http://thinkclay.com/technology/cufon-sifr-flir

Fonts and the Web