Google font API: une autre solution pour des polices web originales

En complément d’un récent article sur les technologies permettant la mise en oeuvre de polices orginiales sur le web, j’ai découvert il y a peu le service google font (béta). Il s’agit là d’un service gratuit concurrent de TypeKit ou FontDeck utilisant un appel distant, permettant la selection de la police avec le curseur de la souris (pas de remplacement image ou flash).

Les avantages de cette technologie sont:

• grand choix de polices open sources, donc pas de problèmes de droits…
• compatibilité sur quasiment tous les navigateurs
• facilité de mise en oeuvre
• hébergé par google, donc le service est fiable et charge rapidement)

Il n’y a qu’une vingtaine de polices disponibles à ce jour, mais il y a de grandes chances que de nouvelles soit ajoutées dans les prochaines semaines (certains typographes y trouveront un moyen de se faire connaître).

Webfont Loader: une librarie javascript pour améliorer le chargement des polices

La où le service google va encore plus loin, c’est avec le webfont loader, créé en partenariat avec Typekit.
Cette librairie Javascript vous permet d’utiliser des polices en provenance de plusieurs fonderies (pas uniquement google font) et de paramétrer l’affichage de ces dernières.

En effet, en fonction des navigateurs, la police de « secours » sera affichée provisoirement, le temps que la police choisie soit chargée entièrement. D’autres navigateurs ont aussi la fâcheuse tendance à ne pas afficher le texte tant que la police n’est pas chargée… Le webfont Loader permet d’éviter ces désagrément en quelques lignes de code!

L’initiative est très intéressante et va permettre l’utilisation de plus nombreuses polices de manière simple et propre. Je salue l’initiative de google qui me semble prendre la bonne direction et j’espère qu’elle aura autant de succès que leurs autres services afin que de nombreux designer l’utilisent et de nombreux typographes y contribuent.

Une chose est sure, j’envisage définitivement d’utiliser cette solution pour mes prochains projets web (y compris ce blog)!

Mon avis sur le Smashing Book (review)

Je suis, de par mon métier (e-marketing manager) passionné par le web design. C’est surtout pour les aspects d’expériences utilisateurs. Certes, le coté esthétique de cette discipline touche mon âme d’artiste. Mais comme pour une oeuvre d’art, un site peut être très simple, mais terriblement efficace.
C’est pour cette raison que je lis souvent des livres de web design, le dernier en date étant The Smashing Book, pour lequel je vous propose ici une petite critique.

It’s a book, not a livre

J’arrête tout de suite ceux qui ne parlent pas anglais, ce n’est pas fait pour vous et il existe plein d’autres ressources francophones. Si vous doutez de votre niveau, je vous rassure, c’est assez simple et cela vous permettra de vous entraîner ou vous remettre à niveau sur la langue de Shakespeare.

La forme

Le smashing book est arrivé chez moi après une petite semaine de voyage depuis l’Allemagne (en payant en dollars, original… Mais imprimé en Chine tout de même). Bien emballé dans une boite cartonnée au couleurs du livre (utilité?), le livre est assez beau. Un format poche amélioré, papier glacé avec une mise en page très agréable (couleur, de nombreuses illustrations).

Là où le lire se démarque, c’est qu’il n’est pas une compilation des meilleurs articles du smashing blog. Il s’agit bien de nouveautés, bien que certains concepts m’étaient déjà plus que familiers.

Le fond

On en vient au plus important… Il y a en tout 8 chapitres :

1. L’interface utilisateur dans les applications web modernes : un chapitre qui rappelle qu’une appli web n’est pas qu’un site et que l’on doit aller à l’essentiel, ne pas surcharger l’interface… Intéressant, mais cela reste du bon sens (ce que beaucoup de designer semble oublier dans une optique application).
2. L’art et la science des designs en CSS: quel format de design choisir, fixe, liquide (s’adaptant à la taille de l’écran), hybride, basé ou non sur des grilles? Il y a de nombreuses années, quant les CSS étaient à leurs débuts, la question se posaient déjà (et se posera probablement tant que nous auront une telle disparité de tailles d’écrans). Les réponses apportés ici sont plus d’ordre techniques, à destination des développeurs / designers.
3. Règles de typogaphie: de loin le chapitre que j’ai préféré, probablement car ma connaissance en la matière étaient très limitées. L’auteur fait un excellent travail d’explications des différentes notions, de l’utilisation des blancs, de la hiérarchie, du « rythme vertical »… Cela montre réellement ce qui peut rendre un site (ou un document) plus lisible et donne envie d’en savoir plus sur la typographie (sujet inépuisable depuis Guntenberg!).
4. Principes d’ergonomie pour les sites web modernes : un rappel des grandes règles d’ergonomie. Là encore, rien de nouveau, mais cela fait toujours du bien de relire (c’est fou comme on oublie vite).
5. Le guide ultime de l’utilisation de la couleur: un chapitre assez basique. Voire creux. Quelque notions de couleurs, quelques exemples de coloriels et deux ou trois infos sur l’impact de la couleur sur l’utilisateur. Il existe de bien meilleures ressources en ligne.
6. Optimisations des performances des sites web: du technique, qui reprend les techniques suggérées par Yahoo Slow dont j’ai déjà parlé dans un article précédent… Peu profitable et assez décalé par rapport aux autres sujets.
7. Designer pour vendre – augmenter les taux de conversion : là on parle marketing (l’auteur commence par expliquer l’AIDA – Awareness, Interest, Desire, Action). Pour moi, c’est un peu trop basique, mais le concept peut avoir son intérêt pour une personne n’ayant aucune notion de marketing (un pur designer). L’auteur conseille d’utiliser la vidéo pour vendre, de faire des listes de fonctionnalités de vos produits/servcices qui soient faciles à « scanner » (et non lire)… et pleins d’autres conseils qui pourront ou ne pourront pas s’appliquer à votre business… On trouve là un mélange de marketing et d’ergonomie, un peu fourre-tout il est vrai, mais toujours quelques point à conserver dans un coin du cerveau.
8. Comment faire d’un site une marque remarquable : ambitieux et peu utile quand on ne veut pas faire un marque de son site (mais plutôt l’inverse): l’auteur propose de se différentier, d’offrir des goodies à la communauté (ex: thèmes wordpress gratuits si c’est un site de design). C’est le chapitre que j’ai clairement trouvé le moins utile.

A ces chapitres viennent s’ajouter des interviews de designers (intéressant pour comprendre comment ils travaillent) et l’histoire du smashing magazine (ils se sont fait plaisir, je n’y ai pas vu beaucoup d’intérêt).

Verdict : le bon grain et l’ivraie

Le smashing book se veut un synthèse des meilleurs pratiques pour le web desgn moderne. A vrai dire, le livre en donne beaucoup, mais c’est souvent assez décousu, certains chapitre n’ayant pas à mon sens leur place dans ce livre.

C’est peut être difficile de constuire un livre cohérent du début à la fin lorsque l’on travaille en mode collaboratif (chaque auteur a écrit son chapitre et ce sont les lecteurs du smashing magazine qui ont voté pour élire les chapitre ayant leur place dans le livre). En soit c’est une sorte de livre 2.0, avec tous ses mauvais cotés.

A mon avis, ce livre est assez intéressant, mais certains chapitres pourront n’êtres que survolés, surtout si vous n’êtes pas et ne voulez pas devenir designer mais plutôt comprendre l’influence du design sur l’efficacité de votre communication (ce qui est mon cas).

Le livre m’a couté 24€, ce n’est probablement pas la meilleure dépense que j’ai faite dans ce type de domaine. A vrai dire, j’aurais été prêt à payer 10€ pour une version ebook a consulter sur Ipad (mais ils ne proposent pas de ebook pour le moment et je n’ai toujours pas d’Ipad).

Donc pour finir : designer débutants, ce livre peut vous intéresser fortement. Marketers et Designers avancés, vous n’apprendrez probablement pas grand chose de très utile (mais vous aurez la chance de vous ouvrir à de nouveaux sujets).

Choix des polices pour le web – comment aller plus loin?

Le choix des polices pour le web a toujours été très limité. Certaines technologies de remplacement ont été inventées, pour palier au problème d’alignement des différentes navigateurs sur un modèle standard de la gestion de la typographie… L’avenir s’annonce meilleur avec l’adoption du Module CSS3 Fonts… si l’histoire ne se répète pas!
Un attendant, un petit panorama des techniques envisageables pour gérer la typographie sur le web.

WebSafe

Il s’agit ici de choisir une police qui sera présent sur les ordinateurs de tous les visiteurs de votre site, qu’ils aient un PC, un MAC, un LINUX (et toutes les déclinaisons de distributions)… L’idéal étant de choisir une police présente sur toutes les plateformes, il est aussi possible de choisir une famille de police et de préciser une police de secours.

Bien que les technologies évoluent, le choix d’une police websafe pour la police principale de votre site reste toujours la meilleure façon de conserver l’intégrité du design de votre site, tout en garantissant une bonne interprétation par les moteurs et une bonne accessibilité. Certes, le choix est limité, mais certaines polices « standard » permettent de faire des choses très jolies.

sIfr

En combinant Javascript, DOM et conteneurs flash, Shaun Inman, Mike Davidson et Mark Wubben ont créé sIfr (pour Scalable Inman Flash Replacement). Cette technique, désormais disponible en version 3 permet tout simplement le remplacement des textes par du flash.

Au niveau du code, on retrouve le texte, donc pas de problème concernant le référencement (il s’agit d’une classe de style appliquée à un conteneur html).

Si l’on ne peut pas remplacer tout un texte avec cette technique, cela permet néanmoins à deux nombreux sites et blogs d’avoir des titres et sous-titres plus attractifs.

Avantages :

• Beaucoup plus de choix de polices qu’en web-safe
• Utilisation du flash, présent chez 97% des utilisateurs
• Possibilité de sélectionner le texte

Inconvénients :

• lenteur de chargement
• difficile à mettre en oeuvre
• difficultés à faire évoluer la police une fois mise en oeuvre (si vous voulez grossir le texte, en comparaisont avec un texte standard dont le format peut être changer rapidement dans les CSS).
• Attention aux notions de droits d’auteurs sur les polices.

FLIR

Flir permet de remplacer un texte par une image grâce à PHP et sa librairie GD. L’image contient donc le texte à afficher, dans la police souhaitée.

Avantage :

• Pas de problème de droits d’auteurs : le texte est contenu dans une image.

Inconvénients :

• Ne fonctionne qu’avec un site en PHP,
• Ne permet pas de sélectionner le texte.

Cufón et TypeFace.js

Cufon et TypeFace sont deux alternatives intéressantes à sIfr. Il s’agit là de convertir une police standard en un format spécifique qui permet de générer un texte de remplacement en CANVAS ou VML.

Avantages :

• Pas besoin de flash, s’affiche donc même si le plugin n’est pas activé,
• Plus léger et rapide que sIfr.

Inconvénients :

• l’impossibilité de sélectionner le texte,
• la lenteur sur Internet Explorer, dans certains cas,
• Attention aux notions de droits d’auteurs sur les polices.

Cufon a pris une longueur d’avance à Typeface grâce à la compatibilité avec IE8, 2Ko de moins au niveau du poids du script, le support d’un plus grand type de police (TTF, OTF, Postcript, PFB là où Typeface ne gère pour l’instant que le TTF). Cependant, TypeFace permet de gérer quelques attributs CSS complémentaires. A vous de choisir, ma préférence allant à Cufon.

@font-face

C’est l’avenir et le présent… Cette technique permettant d’appeler directement une police sur un serveur est déjà fonctionnelle sur Safari, Firefox, Opera, Chrome. Pour Internet Explorer, c’est à nouveau une autre histoire: Microsoft l’implémente pour un format de police bien spécifique (EOT).

Tant que Microsoft ne permettra pas d’utiliser d’autres types de polices, il faudra une fois encore adopter une mise en forme spécifique IE (et convertir une police TTF en EOT).

Avantages :

• Intégration directe des polices
• Facile à intégrer pour tout un site
• Assez rapide

Inconvénients :

• Mauvaise prise en charge par Internet Explorer
• Attention aux droits d’auteurs.

TYPEKIT: un service pour intégrer des polices légalement

TypeKit est un service en ligne payant (ou gratuit pour l’essai) qui permet de choisir parmi un grand nombre de polices (près de 500) et de les appeler par la technique @font-face. L’abonnement mensuel que vous payez (à partir de $25 / an) vous permet d’utiliser jusqu’à 5 polices différentes sur votre site, en total respect de la loi. Les polices sont hébergées sur le serveur de TYPEKIT.

Voici donc un petit tour d’horizon… Le design du blog n’est pas encore retravaillé (vive le thème de base, génial pour se concentrer sur le fond et non la forme), mais je pense utiliser @font-face et/ou Cufon. Et vous, qu’utilisez-vous pour vos sites?

Pourquoi flash est nul (titre volontairement polémique)

En lisant un bouquin de webdesign compilé par Rob Ford (le créateur des Favourite Website Awards), je me suis aperçu que le flash était omniprésent dans les exemples… Ce livre (et le site de l’auteur), que ne cible que les designers web, ne présente quasiment que des exemples de sites en flash.

Je n’irais pas jusqu’à tenir les propos de Steve Jobs sur la technologie d’Adobe, mais je n’aime pas les sites en flash.

Bien que la technologie flash ait quelques avantages (animations, démonstrations interactives, navigations immersive), son utilisation doit à mon sens rester limitée à quelques cas… et surtout pas à l’intégralité d’un site.

Pour étayer mon point de vue, volontairement polémique, voici quelques raisons.

1. Où est mon clic droit?

Quoi de plus énervant dans un site tout flash, de ne pas pouvoir ouvrir un lien dans une autre fenêtre? Vous me direz, en matière d’ergonomie, il vaudrait mieux annoncer au client si le lien doit s’ouvrir ou non dans une nouvelle fenêtre. Mais quand l’utilisateur souhaite ouvrir un lien pour continuer sa lecture principale, comment fait-il?

2. Respect des standards et évolution

Un site conçu avec le respects des standards  (séparation fond/forme) peut évoluer facilement au niveau graphique sans avoir à remanier lourdement le contenu. Sur flash, même si la définition de styles permet une réutilisation simple des mises en forme, les modifications sont beaucoup plus lourdes à mettre en oeuvre.

3. Référencement limité

OK, cela s’améliore… Flash est de mieux en mieux pris en compte par les moteurs et l’indexation est de plus en plus profonde. C’est d’autant plus vrai lorsque l’on mélange texte de remplacement et flash. Mais au final, un texte en mode « html » reste toujours mieux indéxé.

4. Gestion de contenu compliquée

Là encore, il existe certaines iniatives de CMS en flash, cela reste assez complexe à mettre en oeuvre et très propriétaire.

5. Temps de chargement

Il est OK d’attendre qu’une page charge lorsque l’on a demandé à voir une vidéo ou une démonstration spécifique. Attendre plusieurs secondes pour que du flash se charge au démarrage d’un site, c’est déjà beaucoup plus pénible (et je ne parle même pas des introductions de site en flash sans intérêt réel pour le visiteur).

6. Mise à jour de plugin

« Vous devez avoir le plugin flash installé pour utiliser… » C’est frustrant, n’est-ce pas? Les mises à jour ne sont pas forcément très nombreuses, mais lorsque l’on consulte un site proposant du flash « dernière version », le processus de mise à jour casse le flux d’information (on est dérouté vers le site d’Adobe et il n’est pas toujours évident de retourner sur le site que l’on consultait).

7. Firewalls

Ceux qui travaillent dans une entreprise ayant une politique de sécurité restrictive de ses réseaux informatiques auront constaté que certains contenus flashs ne se chargent pas…

8. Accessibilité extrêmement limitée.

Une pensée pour un ancien collègue pour qui l’accessibilité était un must-have… Dans de nombreux pays, c’est une obligation légales. Dans la plupart des cas, c’est un simple respect pour la personne qui vous lit votre site. Cette dernière peut en effet être aveugle (ou avoir d’autres problème de vision ou de mobilité) et peut faire appel à des logiciel de lecture. Ces logiciels ne prennent pas en compte le contenu flash (de ce que j’en sais à ce jour). D’autre part, il est souvent impossible de naviguer dans un site en flash à l’aide du clavier (passer au lien suivant avec la touche tabulation).

Alors les flasheurs (et les autres), qu’en dites-vous?

Pour finir, un peu de lecture sur le sujet:

• http://flashsucks.org/
• http://www.useit.com/alertbox/20001029.html - à prendre avec des pincettes, comme tout ce qui sort de chez Jacob Nielsen