Le nouveau gabarit HTML5/CSS3

L'inspiration m'est venue à la lecture d'un livre de recettes de cuisine.

En fait j'avais 2 livres en mains. Si tous les deux étaient récents la mise en page de l'un m'a tout de suite séduit. Sobre, élégante, sans aucune photo, la typo seule me permettait de bien m'orienter dans la lecture. Il m'a immédiatement fait penser à ces vieux livres que je garde précieusement dans ma bibliothèque tandis que la mise en page de l'autre, très moderne, ne m'inspirait que de l'affliction pour son auteur. Bref, il ressemblait à un magazine qu'on jette après sa lecture.
Et surtout il y avait ce gros problème que j'avais à régler : celui de la compatibilité des différents codes avec certains navigateurs (en particulier pour les clients Safari sous Mac). Un comble pour un mec qui a bossé pour Apple !

Comme je n'avais pour seule ambition que d'y tester des méthodes de référencement et de coder en HTML5 pour voir ce dont j'étais capable, je n'en avais pas fait la promotion. Et puis je me suis pris au jeu. Je ne sais (pas bien) coder. Je ne suis pas un designer. Vous vous en êtes tous aperçus. Ça tombait bien : je n'ai rien à cacher.
Oui mais voilà : des visiteurs plus nombreux chaque jour qui doivent se demander dans quel cirque ils ont débarqué pour y voir un tel clown. Il fallait faire quelque chose et ce quelque chose c'était de tout de refaire.

• • •

De
l'autre
côté
du miroir

Il était reveneure ; les slictueux toves
Sur l’alloinde gyraient et vriblaient ;
Tout flivoreux étaient les borogoves
Les vergons fourgus bourniflaient.

L'affaire des lettrines en CSS

Des lettrines en CSS3

J'en ai cherché des lettrines. J'en ai trouvé des enluminures. Mais mettre en page via la CSS les initiales ornées d'un arrière-plan ne fut pas chose aisée. La difficulté était de donner à ce background une valeur fixe pour que le caractère y soit centré. Las, leurs chasses et leurs talus empêchaient leurs impressions de manière régulière. Il existe des solutions en Javascript telles que jquery.dropj.js, Multiple Fancy Drop Caps, ou encore, Hot and graceful jQuery dropcaps, et meilleure même, comme ce superbe Using the dom with my image replacement technique to create drop caps on the fly, mais, même cette dernière ne me satisfaisait pas. Pourquoi passer par Javascript ?

J'avais trouvé dans ce grenier d'alphabets anciens de belles enluminures. Comme je disposais maintenant d'une planche de lettrines à mon goût il suffisait d'utiliser la technique (que je n'avais jamais mise en œuvre) des CSS Sprites. Eh bien c'est pas simple, croyez-moi. Il m'a fallu chercher des exemples adaptés à mon objectif. J'ai finalement trouvé sur le blog d'une agence Web angliche, celle de Mark Boulton, la solution : il fallait ceindre l'initiale par un span et utiliser ensuite l'attribut title pour désigner la Lettre. Dans la feuille de styles la classe .cap[title="R"] renvoie aux coordonnées de la Lettre dans la planche. Et le tour est joué. Bien sûr il fallait chasser la « vraie » lettre pour qu'elle ne s'affiche pas sur la lettrine. Ainsi, la page demeure accessible et le texte respecté. J'ai toutefois réservé ces enluminures aux pages des articles seuls. Sur celles qui sont paginées ne s'affichent que des lettrines simples pour ne pas trop les encombrer.

Tout le mérite de cette technique en revient à son auteur. Qu'il en soit ici remercié.

L'affaire des colonnes en CSS3

Des colonnes en CSS3 et Javascript

Cela faisait un moment que j'envisageais de mettre certains paragraphes en colonnes. La lecture de textes dont les lignes sont trop longues pose en effet toujours des problèmes aux lecteurs. Les yeux mettant trop de temps pour aller de la fin d'une ligne au début de ligne suivante, le fil du texte est perdu. Le lecteur aussi. Et le visiteur abandonne. La mise en page en colonnes s'imposait donc.

Nous nous étions penché sur le sujet avec mon copain Fred qui est un redoutable designer. C'est ensemble (et avec d'autres aussi) que nous avons décidé de passer nos blogs en HTML5. Le sien, inkpattern.com est une petite merveille. Son code HTML5 est parfait. La CSS3, un bijou. Il utilise sur cette page 2 colonnes pour sa mise en page et il a pris le parti de justifier le texte. C'est son choix mais ce n'est pas le mien. Je trouve un texte en drapeau, ferré à gauche ou à droite — peu importe —, plus agréable au regard.

En outre une justification idéale nécessite la césure des mots pour un bon confort de lecture, sinon, c'est le couloir — cet espace blanc non maîtrisé — assuré. Il existe des solutions pour la césure automatisée : cette page Practical solutions to hyphenate text on web pages offre des liens vers des scripts JS et/ou PHP. Je les ai testé. Il n'y en a qu'une qui permette la césure du français. C'est phpHyphenator. Mais en local j'ai rencontré des soucis pour le faire tourner et les césures automatisées par le script n'étaient pas toutes correctes. Rien ne vaut un bon dictionnaire des césures.

Revenons à la solution pour « mes » colonnes : les nouvelles propriétés des CSS3 contrôlent la présence et le nombre de colonnes qui seront affichées : -moz-column-count et -moz-column-width. Pour le centrage vertical simple et automatisé du contenu des colonnes il faut — si on souhaite pas utiliser les tableaux et la propriété display — passer par Javascript. Columnizer jQuery Plugin offre de nombreuses possibilités mais c'est finalement avec un script beaucoup plus simple, CSS3 Multi Column Layout, que j'ai trouvé mon bonheur. Oh ! ce n'est pas parfait. Loin de là. Se pose le problème des « veuves » et des « orphelins » qui brisent l'harmonie des colonnes, mais il faut l'accepter. C'est le prix à payer en attendant que les technologies évoluent.

Le cas du référencement

Le référencement en HTML5

Il faut prendre les robots pour ce qu'ils sont : des machines aveugles incapables d'apprécier le design d'une page. Les robots des moteurs de recherche ne lisant que le contenu de la page il faut leur servir pour qu'ils ne retiennent que l'essentiel.
L'essentiel c'est ce texte qui vous offrira un bon positionnement dans les résultats. Désactivez la feuille de styles ; vous allez voir la page telle que je la sers aux robots et comprendre immédiatement le propos qui suit. La lecture par les robots s'effectuant de haut en bas j'ai placé tous les vocables clés en début de page. La construction s'est faite ainsi :

  1. La barre de menus qui se présente sous le titre se trouve en bas de page.
  2. La barre latérale qui s'affiche à gauche est en fait située sous l'article.
  3. La propriété content : me sert (sans exagération) à afficher du contenu pour les internautes seuls.

Il y a bien d'autres astuces bien sûr mais celles que je vous indique ici — et dont la mise en œuvre est aisée — vous serviront pour un meilleur référencement de vos pages.

Résultat des courses

Au final, le code est plus léger, mieux organisé. Les pages se chargeront plus vite. Elles devraient être lisibles par tous les navigateurs modernes. Les robots des moteurs de recherche seront bien servis.
Enfin, après 10 années d'errance dans le XML et les XHTML avec HTML5 et CSS3 on tient le bon bout. Les designers de tout poil disposent dès maintenant d'un outil d'édition de pages Web digne de ce nom. Aux oubliettes de l'Histoire du Web les technologies propriétaires !
Il y aura bien d'autres articles dans ce blog. Sur les microformats. Sur les feuilles de styles CSS3. Sur le traitement par les moteurs de recherche des nouvelles balises qu'offre HTML5. Si ça vous intéresse vous savez ce qu'il faut faire : revenir. Et je vous en remercie d'avance.




Commentaires :

Daniel||#1
Daniel
J'ai beaucoup la mise en page est le style de ce blog, il serait bien venu sur fileblog.com ce site ne référence normalement que les bon et beaux sites.
Tom||#2
Tom
Wow ! Cette page est superbe !!!
Toutes mes félicitations pour le boulot et les explications.
Un revenant||#3
Un revenant
Salut Philippe,

J'apprécie ton site et le temps que tu prends pour rédiger tes articles joliement illustrés. Tu es également courageux de continuer à rédiger des articles originaux quand les autres sites/blogs te les pompent et te prennent ensuite ta place.

Cela étant dit, bon boulot pour avoir recodé le site en HTML 5. Tu m'as donné envie de m'y mettre.

Au point de vue référencement, aujourd'hui rien ne prouve que les moteurs de recherche favorisent un peu plus les sites en HTML 5 et encore moins les sites respectant les normes W2C etc ...
Philippe||#4
Philippe
Un visiteur mystère !?
Bonjour visiteur mystère.

Merci de me lire et d'apprécier le gabarit du blog.
Content aussi qu'il ait réussit à te décider à tâter du HTML5.
S'il y a des preuves que les moteurs favorisent des sites en HTML5 ? Non : aucune.
Pourquoi y aurait-il une telle préférence d'ailleurs ?

Le code c'est l'écrin du contenu pour le robot comme le design l'est pour les visiteurs.
Que ce soit en HTML4 en XHTML, avec des tables, des styles intégrés dans les pages, qu'il y ait des erreurs de syntaxe, des scripts qui battent la campagne, seul le contenu compte.

Maintenant il faut savoir le présenter aux moteurs et leur dire ce qu'il y a d'intéressant à relever sur le site.

Alors HTML5 dans tout ça ?
Rien à voir avec le référencement.
Pour le moment en tous les cas :
1/ il y a si peu de sites codés en HTML5 que les moteurs ne vont pas changer de si tôt leurs algorithmes pour rebalancer les poids des nouvelles balises face aux anciennes.
2/ quand un mouvement apparaîtra dans cette direction il faudra beaucoup de tests et de temps pour appréhender le comportement des moteurs vis à vis de ces balises et de leurs rôles. D'autant plus que :
3/ HTML5 n'étant encore qu'à l'état de brouillon il conviendrait de patienter (au moins jusqu'à la fin 2010 ) : les big headed du W3C se seront accordés alors sur le rôle et l'interaction des nouvelles balises.

Bref il va falloir faire le pied de grue pour la synthèse de la publication pré-finale pour 2011.
Synthèse : priez pour nous !

Et à bientôt.
Virginie||#5
Virginie
Eh bien avec Chrome il n'y a aucun problème d'affichage.
Je me suis régalée d'ailleurs de voir cette page à l'ancienne. C'est très sympa et très original.
Bravo.
Patrick||#6
Patrick
Très sympa. J'aime bien, beaucoup même. C'est vraiment original et ça change des sites web habituels.
Eve||#7
Eve
Même si je n'ai pas tout compris j'adore cette page. C'est vraiment très chouette.
mary||#8
mary
La cuisine mène à tout. En tou cas pour vous , elle aura donné une magnifique page.

Il est vrai que les vieux livres sont très agréables.

Très belle mise en page.
Chauvet||#9
Chauvet
Géniales ces pages! Tant pour la technique que pour le fond!

J'aimerais être capable d'en faire autant!
agruidd Bruno LEFOG||#10
agruidd Bruno LEFOG
bonjour, je brode des initiales sous forme d'enluminures que je dessine,et j'avoue que ton site est source d'inspiration j'adore les enluminures medievales et aussi les arabesques "style 1900"je me suis bien balladé meme si je n'ai pas tout pigé ce fut instructif , merci, je garde en memo ton site .
Pierre||#11
Pierre
Moi aussi j'aime beaucoup ce style. Ce qui est intéressant c'est que c'est clair et surtout ça donne envie de lire.

Quant à comprendre ce qui est écrit c'est une autre paire de manches. Mais je ne suis technicien du code non plus.

Les commentaires pour ce billet sont fermés