« css 4 design » — Nouvelle charte graphique et redesign du logo

La nouvelle version de css 4 design que j’avais évoqué dans Screenshot de mon prochain design est en ligne. Il reste des ajustements à faire et quelques pétouilles que je corrige au fur et à mesure. Comme vous pouvez le constater la mise en page est sobre avec une palette de couleurs blanche et grise rehaussée de teintes chaudes. Ce thème se situe à mi-chemin entre le format blog et le style magazine dont j’ai beaucoup parlé à une époque. J’ai gardé la succession des billets et la traditionnelle sidebar qui fait tous le charme d’un blog, avec au-dessus, le début d’un article qui se distingue par une illustration généreuse accompagnée de sa légende.

Grille de mise en page

Ces proportions ont un rapport avec le fait que 42 — comme chacun sait — est la réponse à toutes les questions 😉 Je voulais surtout sortir des sentiers battus, c’est-à-dire des designs en 960 ou 950 pixels que l’on trouve généralement dans les frameworks CSS. S’il suffisait de tomber sur des dizaines entières pour avoir des proportions harmonieuses, ça se saurait ! En matière de web design, quelques pixels de plus ou de moins peuvent faire la différence.

Grille horizontale ou verticale ?

Établir une grille verticale n’est pas difficile en soi : il suffit de s’assurer que les valeurs de line-height, de padding et de margin top et bottom, etc. soient des multiples de l’interlignage de base. Dans mon cas, la taille par défaut est de 14px pour le corps du texte et 1.5em pour l’interlignage, soit 21px de hauteur de ligne. Facile, d’autant plus que la plupart des frameworks CSS possède une section typography qui fait presque tout le le travail…

Le problème, c’est que si je trouve que l’alignement des blocs sur une grille horizontale est harmonieux, je suis rarement satisfait par la verticale. Non pas que globalement l’harmonie n’y est pas, mais lorsqu’on se met à lire une page web au lieu de la regarder, il y a souvent des espaces à revoir. Par ailleurs, je n’ai pas envie de m’assurer que la hauteur de mes images est elle aussi un multiple de ma grille verticale…

16 colonnes à la une ?

Ce n’est pas tout d’avoir 16 colonnes à disposition, encore faut-il organiser le contenu dans le respect de l’ergonomie et de la lisibilité globale et résister à la tentation d’utiliser toutes les combinaisons permises par la grille. Tout comme il ne faut pas multiplier le nombre de polices de caractère, il ne faut pas trop disperser l’attention du lecteur.

La page d’accueil

Une grille,  c’est bien à condition qu’on ne voit pas qu’elle ! Pour cela, j’ai divisé le header en 4 blocs de largeurs inégales tout en faisant en sorte que le point d’équilibre se situe au mileu de la page.

A la une

Ensuite, un article mis en avant occupe toute la largeur disponible tout en étant lui-même découpé en deux blocs de 8 colonnes chacun. Un pour le résumé de l’article et un pour le visuel qui l’accompagne.

Les champs personnalisés (custom fields) en ont encore sous le pied

Ce dernier est ajouté via les champs personnalisés. Ils ont mauvaise presse depuis quelques temps mais sont d’une efficacité redoutable lorsqu’il s’agit d’ajouter plusieurs éléments en rapport avec l’article comme c’est le cas ici avec le visuel et sa légende, avec la possibilité d’avoir des éléments par défaut. Le tout est de ne pas en abuser.

Les miniatures

En revanche, l’affichage de la miniature qui flotte au début des résumés des articles est confié à l’excellent get_post_images() proposé par Mehdi Kabab. Ce script est composé d’un jeu de fonctions à mettre dans functions.php. A noter que  timthumb est prêt à être utilisé pour redimensionner les images afin d’alléger la page. A ce propos, je regarderais plus tard ce que WordPress 2.9 à dans le ventre en matière de miniatures.

Les billets et la sidebar

Sur la page d’accueil, les billets et la navigation alternative sont à égalité

J’ai ensuite centré les éléments sur deux blocs principaux occupant 8 colonnes chacun en page d’accueil : un bloc pour l’affichage du résumé des articles et un autre pour la barre latérale qui se divise encore en deux à la fin pour accueillir des contenus de faible largeur, comme les listes de lien, par exemple.

Le footer

Pour le pied de page, je suis parti sur un découpage en 4 colonnes occupant toute la largeur pour rompre avec la monotonie (parfois nécessaire pour une lecture tranquille) et relancer l’attention. C’est peut-être subjectif mais je trouve qu’un découpage en 4 colonnes pour le footer donne un ancrage à la page dans son ensemble. D’autres informations suivent sur la largeur de la page ou la moitié, comme le colophon par exemple.

La page des articles

Lorsqu’on se trouve dans la page affichant l’article seul, l’article mis en avant disparait ; les proportions changent pour améliorer la lisibilité du billet : 11 colonnes pour le texte et 5 colonnes pour la barre latérale.

Intégration de la grille

Pour rebondir encore un peu sur les questions récurrentes concernant l’utilité d’un framework CSS lors de la phase d’intégration HTML & CSS, je rappelle qu’il est tout à fait possible de travailler avec une grille pour le placement des différents blocs sans pour autant utiliser un framework, comme je le suggère dans Framework CSS sémantique ? Comment je vois les choses.

C’est d’ailleurs ce que j’ai fait ici. Au lieu d’utiliser Blueprint et son fichier grid.css pour caler les blocs sur la grille de base, j’ai opté pour Boilerplate créé par l’un des concepteurs de Blueprint qui propose — mieux qu’un framework — un redesign CSS global ! A charge pour l’intégrateur web d’ajouter les règles CSS de son choix pour que la page web suive la maquette !

Et HTML5, il pue du bec ?

Lorsque j’ai commencé à travailler sur Illustrator, j’avais en tête de réaliser l’intégration en utilisant au maximum les nouvelles balises proposées par HTML5. Comme vous pouvez le voir, à l’exception du Doctype et d’une balise `time` qui doit trainer quelque part, je suis resté au bon vieux XHML 1.0 ou XHML5 si vous préférez. Les raisons sont à la fois triviales et complexes :

– Triviales — malgré ce que j’ai lu — et écris sur ce blog également — sur le fonctionnement du script html5shiv pour qu’Internet Explorer reconnaisse les nouvelles balises, le résultat est parfois aléatoire. Dans mon cas, les problèmes de mise en page rencontrés sur IE8 disparaissaient en basculant sur le mode compatibilité avec IE7… Un comble, qui a suffit pour que j’envoie balader toutes les balises sémantiques.

– Complexes — en parlant de sémantique, je me suis bien pris la tête avec ses histoires de `header`, `footer`, `nav` et `aside`. Sur le papier, c’est assez simple. En revanche, je me suis heurté à des problèmes d’interprétation in real life.

En effet, les balises `header` et `footer` ne concernent pas uniquement l’en-tête et le pied du document HTML. Ainsi, au sein d’un article, on peut regrouper le titre et le nom de l’auteur dans une balise `header` et réserver une balise `footer` pour les meta-informations comme la date de publication, les tags ou les catégories.

Pour compliquer encore un peu les choses, si l’envie vous prend de mettre une date juste en dessous du titre de l’article, vous pourrez également utiliser un balise `footer` quand bien même elle serait placée juste en dessous du `header` de l’article et au-dessus du texte du billet. Et oui, puisque on vous dit que c’est sémantique et que ça n’a rien à voir avec la position ou l’apparence des éléments !

Pour faire court, au bout d’un moment, pour ne pas différer encore la mise en ligne du nouveau thème et prendre le temps de la réflexion pour apprendre les bonnes manières pour baliser correctement un document en HTML5, j’ai repris quelques cuillères à soupe de `div` !

Peu d’éléments graphiques

Un logo en flamme ?

C’est un logo en flamme, on étudie notre stratégie internet.

So 1997, non ? Pour ceux qui s’en souviennent, il s’agit d’un clin d’oeil concernant une publicité pour les solutions internet d’IBM (voir le pitch). La flamme est un des rares éléments graphiques présent dans le design. L’idée est de laisser le champ libre pour le contenu qui contiendra du texte, des images et des mises en exergues de texte, ce qui sera largement suffisant pour détourner l’attention des plus distraits 😉

Une autre flamme couchée sur le côté répond à la première dans le footer en direction des éléments de copyright et dans un mouvement circulaire pour diriger l’oeil du lecteur vers la partie Miscéllanées.

Les articles sont le nerf de la guerre

Laisser parler le contenu et laissez-lui une chance de se transformer en message

La raison de cette relative pauvreté dans les visuels de la maquette, c’est que je compte travailler graphiquement certains articles pour accentuer le style magazine du blog. Il s’agit de soigner le traitement éditorial et visuel des textes plutôt que multiplier les accroches, les visuels imposants, voire les fils d’information en continu en page d’accueil ! En matière de mise en page, comme dans beaucoup d’autres, il faut laisser parler le contenu pour lui laisser une chance de se transformer en message.

Améliorer les performances globales

Même si les performances web sortent du cadre de cet article, il est intéressant de noter que depuis quelques temps Google met la pression sur tous les fronts concernant les questions liées à la rapidité d’affichage des sites web. De l’amélioration des protocoles réseaux existants, à la mise en place d’outils d’évaluation du temps de chargement des pages, Google devrait intégrer ces données dans son algorithme pour favoriser les pages répondant plus rapidement aux attentes des utilisateurs. Le chemin du designer web est tracé et l’intégrateur doit suivre le mouvement (ou le contraire).

Une des clés pour améliorer les performances se trouve dans la charte graphique

A cet égard, une visite récente sur Google Webmaster Tools m’indiquait un temps moyen de chargement de 4.2 secondes par page avec le thème WordPress Hybrid. (thème minimaliste sans aucune image que j’avais laissé tel quel en attendant). La surprise est venue aujourd’hui, avec un temps moyen de chargement divisé par deux depuis l’installation du thème actuel ! Sans compter la marge de progression : si j’ai commencé à réunir les fichiers CSS dans style.css et il reste la même chose à faire avec les fichiers Javascript.

Application de la grille pour les images des articles

Cette fois, j’ai essayé d’utiliser les outils proposés par WordPress pour l’affichage des légendes des images. Voici tout d’abord un exemple d’une image accompagnée d’une légende à laquelle j’ai ajouté un hors-texte sous la forme d’une balise d’en-tête de niveau 6 (h6) qui flotte à droite de l’ensemble composé par l’image et sa légende (ou tout simplement du texte comme je l’ai utilisé plus haut). Il est aussi possible de faire flotter ce hors-texte à côté d’une  image qui ne serait pas accompagné d’une légende.

Parmi les contraintes qui s’imposent lors d’un redesign (6 ou 7 de mémoire sur ce blog en plus de 3 ans), l’historique de la base d’articles existants et les différentes tailles d’images qui les composent n’est pas à négliger. Pas question que les anciens articles voient leur mise en page partir en sucette ! Ce qui est certainement le cas pour certains d’entre eux ; des interventions manuelles seront nécessaires pendant un certain temps… No pain, no gain!

C’est tout pour le moment

Il reste encore beaucoup à dire sur la mise en place du thème. Comme je viens d’installer la beta 2 de WordPress 2.9, je vais laisser passer un peu de temps pour découvrir les nouvelles fonctionnalités avant de les introduire dans le thème.

Je reviendrais vers vous pour une deuxième partie de cet article qui est déjà bien assez long (je m’étais promis de faire court) où j’aborderais les aspects plus techniques comme les boucles WordPress que j’ai utilisées, etc.

N’hésitez pas à intervenir dans les commentaires pour me signaler les éventuels dysfonctionnements qui auraient échappés à ma vigilance ou simplement me dire tout le mal que vous pensez de ma nouvelle charte graphique 😉

Stay tuned and mind the gap!