Dans la boîte à outils [Chapitre 3]

Bonjour ami lecteur (trice) et bon week-end.
Cette semaine je te propose une boîte a outils éclectique et allégée. éclectique parce que contrairement à la semaine dernière, je ne me soucierai même pas d’y mettre un semblant de cohérence et allégé car même si je n’y présente que deux outils, c’est du lourd. commençons.

Utiliser des caractères exotiques dans ses mises en page

Je vais tout d’abord te parler de polices de caractères et de Google. Comme tu le sait sans doute sur Internet les polices de caractères définies par le concepteur s’affichent uniquement si elles sont présentes sur l’ordinateur de celui qui consulte la page.

Ainsi si tu veux utiliser une police comme par exemple  IM Fell english tu peux :

• soit prier pour que le visiteur du site ai installé la police sur son ordinateur
• soit essayer de trouver une méthode alternative, 

ces méthodes alternatives sont :

L’utilisation d’une Image : ce qui est très simple a mettre en oeuve, mais pas du tout dynamique , en effet, impossible d’écrire (proprement) un titre a la collée avec cette méthode.

L’utilisation de Facelift qui fonctionne sur le même principe mais pour sa part génère les images à la volée à l’aide de PHP c’est on peut voir quelques exemples ici.

L’utilisation de Sifr qui croise le JavaScript, Flash et les CSS pour permettre l’emploi de n’importe quelle police (en effet il existe un générateur de polices capable de créer une police compatible avec Sifr Ici tu peux voir des exemples de résultats sur cette page.

Il existe aussi des alternatives qui travaillent à partir d’une image, de JavaScript et de CSS comme Fontjazz, ou s’appuie sur le rendu vectoriel du navigateur comme la librairie Typeface.

Cette semaine Google se lance dans le créneau de la police dynamique, avec son moteur de rendu Google Font API et un catalogue de polices compatibles, le Google font directory (qui devrait s’étoffer dans les semaine à venir) qui présente un double avantage : l’utilisation des serveurs de données de Google (ce qui vous permet de limiter l’utilisation de votre bande passante) et une mise en oeuvre assez simple. Le revers de la médaille étant de rendre chaque jour l’Internet un peu plus dépendant du géant du web.

Dans la pratique, cette méthode permet en 2 lignes de codes ( Typeface et Fontjazz ne demandent pas beaucoup plus de code) d’utiliser une police exotique pour ces titre, tu peux en voir un exemple en regardant les titres de ce blog. Pour arriver à cet effet, il suffit deux étapes :
ajouter un lien vers la police entre les balise de ta page, comme ceci

1. IM+Fell+English‘ rel=’stylesheet’ type=’text/css’>

et définir ta police de titrage dans la feuille de style en indiquant que tu souhaite utiliser la police IM Fell English

1.  h2 { font-family: ‘IM Fell English‘, arial, serif; }

ce qui permet de jouer sur tes titres comme tu le vois sur ceblog, si l’on en crois Google, le système est compatible avec tous les navigateurs (y compris IE6, ce qui n’est pas une mince affaire).

Jouer sur la vitesse de chargement de son site.

Il y a quelques semaines, Google (Qui ça ?) annonçait que la vitesse de chargement d’un site devenait l’un des paramètres de classement de son site. ainsi pour deux sites à contenus informatifs équivalents (pour les algorithmes de Google) le plus rapide sera classé en premier dans les résultats de recherche.

Cette semaine, c’est le Blogueur Gularu qui faisait le bilan des démarches d’optimisation de la vitesse de son blog, non pas par rapport aux moteurs de recherches mais par rapport a ses utilisateurs (ce qui est quand même le principal) son bilan : si le site est plus rapide, le trafic augmente.

Une bonne raison d’auditer la vitesse de son site (et d’améliorer ses performances) et une ocasion pour moi de te présenter un outil en version Beta, GTmetrix qui audite une page web  (et peut comparer deux pages dans le cadre d’une optimisation) , et indique les points fort et les points faible de la conception de votre page en matière de vitesse. à titre d’exemple tu peux voir le test de l’atelier ici.

Un peu de lecture pour le week-end

Je parlai à l’instant de Google et de son omniprésence, cette semaine se tenait une conférence qui présentait les outils et les stratégie de la marque , l’une de ses annonces a fait beaucoup de bruit, elle concernait la télévision  et je voudrai partager avec vous cet article de Véronique Rabuteau dont j’ai bien aimé l’analyse (qui m’a fait un peu froid dans le dos) j’en profite pour te faire une sortie avec une belle phrase bien creuse de chef de projets pour alimenter ta réflexion de petit padawan (ou de padawanette, c’est toi qui vois) :

«On fait des sites web avant tout pour ceux qui les consultent, pas pour les moteurs de recherche.»

à ce propos, que pense tu du site en police 16 Px ?
à bientôt pour la suite