Les titres en images

Le web offre peu de fantaisie en matière de recherche typographique. Afin de maîtriser l’affichage des polices sur des supports multiples, les webmasters sont contraints d’utiliser un nombre restreint de polices. Bonjour l’originalité ! Pour sortir de cette contrainte technique, il existe une solution parmi d’autres: substituer le texte des grands titres par des images.

Les avantages:

  • choix illimité des polices
  • personnalisation et recherche artistique
  • affichage fidèle quelque soit la plateforme
  • qualité esthétique indéniable, beauté typographique
  • meilleure gestion des niveaux de lecture, de lisibilité
  • mise en évidence de certaines valeurs: sobre, fougueux, dynamique…

Les inconvénients:

  • poids de fichier plus importante au chargement
  • réactivité diminuée au survol de la souris
  • rendu approximatif sur les vieux écrans, cartes graphiques
  • affichage inexistant en cas de blocage des images
  • référencement difficile
  • sélection du texte inefficace: pas de recherche, copié-collé
  • problème au multilinguisme et les outils de traduction automatique
  • correction et mise à jour contraignantes
  • taille du texte figée
  • feuille de style de l’utilisateur ignorée

Les inconvénients sont nombreux mais semblent s’estomper avec l’évolution des navigateurs. Les connexions haut débit se sont généralisées et la taille de quelques images ne présente plus un frein majeur. L’attribut alt permet d’être bien référencé et de substituer le visuel en cas de blocage par le navigateur ou de lecture par un synthétiseur vocal. Malgré ses évolutions, et comme je l’ai déjà dit, il existe d’autres solutions plus pérennes.

Titre en image
Thème Wilderness sur CSS Zen Garden

Reste à voir la solution technique pour intégrer ses images. La méthode la plus simple est l’ajout d’une image entre les balises du titre avec un Alt correctement renseigné. De cette manière, l’image reste accessible pour les navigateurs ou les médias non graphiques. Une autre méthode consiste à masquer le titre textuel et de laisser apparaître l’image placée en fond. Mais les lecteurs d’écran ne réagissent pas toujours correctement et les résultats sont variables. D’autres techniques existent mais elles sont parfois tirées par les cheveux et ne sont pas toujours correctement interprétées par les navigateurs.

{code type=html}

Hausse des prix...

{/code}

Publicités

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s