Catégories
Blogs à lire
Archives
Blog
juil
21
Les titres en images
Catégorie: Webmastering | 470 lectures
Pour sortir du choix restreint des polices sur le net, il existe une solution pour donner un peu de peps à ses titres et ajouter sa petite touche personnelle: les images. Contrairement à l’épineux problème du choix typographique, l’image à l’immense avantage de restituer plus ou moins fidèlement le rendu initial. L’idée n’est pas nouvelle mais ne semble pas convaincre les foules.
Les avantages:
- choix illimité dans les polices de caractère
- personnalisation et recherche artistique
- affichage fidèle quelque soit la plateforme
- originalité par rapport au noyau dur: Verdana, Arial
- dynamise le site, apporte une beauté typographique
- meilleure gestion des niveaux de lecture, de lisibilité
- véhicule des valeurs: sobre, fougueux, dynamique…
Les inconvénients:
- charge plus importante au téléchargement
- le lien sur image ne réagit pas au survol
- rendu approximatif sur les vieux écrans, cartes graphiques
- format PNG pas pris en charge par certains navigateurs
- titres invisibles pour les vieux navigateurs ou les lecteurs d’écran
- référencement absent
- sélection du texte inefficace, pas de copié-collé
- recherche par mot-clé difficile
- correction et mise à jour contraignantes
- taille du texte figée, la navigateur est impuissant
- feuille de style de l’utilisateur ignorée
On se rend compte qu’au final les inconvénients sont de taille. Voyons voir s’il n’est pas possible de corriger le tir et profiter des avantages. L’exemple ci-dessous est tiré d’un modèle proposé pour CSS Zen Garden: Wilderness. Il existe de nombreux autres exemples. La liste complète des templates se trouve sur Mezzoblue.
Exemple d’utilisation d’un titre en image
Reprenons les inconvénients. Certes une image est plus lourde que du texte mais ce ne sont pas quelques centaines d’octets qui feront la différence. Le survol réactif n’est pas un obstacle si les titres sont mis en valeur. Les cartes graphiques en 256 couleurs sont très rares. Le PNG 24 bits est à éviter, le PNG 16 bits n’est pas toujours bien restitué. L’attribut Alt sur l’image dissout les problèmes de référencement et d’accessibilité. Les autres difficultés sont toutefois relatives. Reste le côté technique: comment ajouter une image pour un titre ?
La méthode la plus simple est d’ajouter une image entre les balises du titre sans oublier de spécifier le Alt. 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.
Au boulot on a adopté une technique pour ne pas être restreint graphiquement tout en gardant la possibilité de mettre à jour les titres facilement. Celle-ci consiste à écrire créer les images avec php. On passe en paramètre le texte qui doit se trouver dans l’image et çà fonctionne nickel! Techniquement aucune idée de comment çà a été fait, merci aux dév…
J’imagine effectivement que des solutions de cet ordre sont mises en place, sinon ça deviendrait vite agaçant d’ouvrir Photoshop et d’appliquer un script.
Cette technique php est incluse dans la library GD.
en fait on créée une première image avec le texte (de nombreuses fonctions GD permettent cela) puis on la fusionne avec l’image JPEG (ou un autre format) par la fonction imagecreatefromjpeg() (et qui porte un autre nom en fonction du type ed fichier image.
et la technique flash via sifr ?
dans le code, on met des balises h1, h2, … normalement, avec du texte classique, et un javascript les remplace par un fichier flash pour ceux qui ont javascript et flash.
donc google lit les balises normales, niveau accessibilité ça marche aussi.
vous ne parlez pas de cette solution, la déconseillez-vous ?
http://www.journaldunet.com/de.....sifr.shtml