sIFR, un terrain d’entente entre designers et SEO?
Vous êtes fatigué de toujours avoir à utiliser les mêmes polices sur le Web? Lisez ce qui suit.La méthode sIFR (Scalable Inman Flash Replacement) permet d’afficher de courts passages de texte HTML sans être obligé de se restreindre aux polices " standards " du Web. Ainsi, les intégrateurs Web peuvent dorénavant utiliser d’autres polices que les traditionnelles Arial ou Verdana pour leurs sites Internet.
Les avantages
Avant le développement de cette méthode, les intégrateurs, pour respecter le travail des designers, devaient intégrer certaines parties du texte en image. Cette façon de faire est généralement déconseillée pour plusieurs raisons : la création d’images pour des sites volumineux est une lourde tâche, les mises à jour sont laborieuses, mais surtout, le texte en image n’est pas accessible aux moteurs de recherche. Étant donné que les titres (h1, h2, h3, etc.) sont probablement les balises ayant le plus grand impact au niveau du référencement organique, les effets peuvent être ravageurs. Mais dorénavant, les intégrateurs pourront respecter les choix esthétiques des designers tout en restant sensibles aux contraintes liées au référencement. Les designers et les professionnels du marketing de recherche ont-ils enfin trouvé un terrain d’entente?
Le fonctionnement de la méthode sIFR
L’implantation de cette méthode est très simple, même si ses rouages sont plutôt complexes. En combinant le langage JavaScript, le DOM et la technologie Flash, cette approche permet de toutes les polices disponibles, et ce, tout en respectant les balises HTML. Voici les grandes lignes de son fonctionnement:
- Une page xhtml est préalablement chargée.
- Une fonction JavaScript détecte ensuite si le plug-in Flash est installé.
- Si oui, le JavaScript crée automatiquement un Flash .swf de la même dimension que les balises préalablement définies et le superpose sur le texte HTML.
Ainsi, même si le JavaScript de l’usager est désactivé, ou si celui-ci n’a pas le plug-in Flash, il pourra tout de même lire le texte dans la police par défaut.
L’implantation
Tout d’abord, télécharger les éléments nécessaires. Ensuite, assurez-vous que les fichiers customize_me.as, dont_customize_me.as et sifr.fla sont dans le même répertoire (vous n’avez pas à placer ces fichiers sur votre serveur, mais ils doivent être dans le même répertoire lorsque vous exporterez votre .swf ). Ouvrez sifr.fla avec Flash, double-cliquez sur le movieclip " holder " et changez la police. Exportez ensuite (en Flash 6!) le .swf en le nommant suivant le nom de la police choisie. Copier-coller ensuite les styles CSS contenus dans le fichier sIFR-print.css et sIFR-screen.css dans votre propre feuille de style. Placez le fichier JavaScript sifr.js sur votre serveur et apposez le lien suivant dans la section <HEAD> des pages qui utiliseront la méthode sIFR :
—
<script xsrc= »sifr.js » mce_src= »sifr.js » type= »text/javascript »></script>
—
Enfin, insérez cette fonction JavaScript juste avant le </body>
—
<script type= »text/javascript »>
if(typeof sIFR == « function »){
sIFR.replaceElement(named({sSelector: »body h1″, sFlashSrc: »vandenkeere.swf », sColor: »#000000″, sLinkColor: »#000000″, sBgColor: »#FFFFFF », sHoverColor: »#CCCCCC », nPaddingTop:20, nPaddingBottom:20, sFlashVars: »textalign=center&offsetTop=6″}));
};
—
Tout ces éléments sont tous personnalisables :
sSelector: La balise CSS vise par la méthode sIFR
sFlashSrc: Location du fichier de la police Flash
sColor: La couleur du texte
sLinkColor: La couleur du lien
sHoverColor: La couleur du lien en survol
sBgColor: La couleur de fond
nPadding...: Le padding de l'élément visée
sFlashVars: D'autres variables que vous voulez transmettre au fichier Flash
Et voilà ! Vous n'avez plus qu'à créer vos pages Web normalement puisque cette fonction produira automatiquement les Flashs contenant la police choisie...
Les inconvénients?
Pour les sceptiques, je peux vous assurer que cette approche est 100 % compatible avec les contraintes liées au référencement. Les moteurs de recherche accèderont à votre texte puisqu'il existe réellement, il est seulement " en-dessous " du fichier Flash. Notons tout de même que cela augmentera très légèrement le temps de chargement de votre page...
Pour de plus amples renseignements, n'hésitez pas à visiter les liens suivants :
Mike Davidson -- sIFR 2.0: Rich Accessible Typography for the Masses (le créateur de la méthode)
Download the official sIFR 2.0.2 release
sIFR Documentation & FAQ (Wiki)
TextDrive Community Forum / sIFR
Julien Raby
Plus sur:
