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

Rigueur. Et passion !

Ne dites pas à ma mère que je suis artisan en architecture de l'information appliquée aux sites web : elle croit que je suis webdesigner, intégrateur HTML & CSS, rédacteur web, formateur NTIC et consultant en webmarketing depuis 2001 ! Voulez-vous en savoir plus ?

Le blog de l'intégrateur web

« 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

La grille de mise en page est divisée en 16 colonnes de 42 pixels séparées par une gouttière de 18 pixels pour une largeur de 942 pixels

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.

Des blocs inégaux, mais équilibrés

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

Cliquez sur l'image pour l'agrandir

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é

Cliquez pour agrandir l'image.

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.

Un footer en 4 colonnes pour asseoir la page avec un retour de flamme pour inciter à poursuivre la lecture. vers le haut.

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!

Articles sur le même sujet

PS : Le respect de la vie privée sur internet est important : j'ai décidé d'échanger mon bouton Like de Facebook par un bouton Faire un don de Paypal car
Il n'y pas d'amour, il n'y a que des preuves d'amour (Jean Cocteau) ;) Merci d'avance.



23 commentaires pour “« css 4 design » — Nouvelle charte graphique et redesign du logo”

  1. Francis dit :

    Salut Bruno,

    J’aime beaucoup cette nouvelle ambiance. Tout se tient, c’est bien proportionné, l’ergonomie est top, les couleurs sont chaleureuses. Bref, pas grand chose à dire si ce n’est que je trouve que tu utilises trop Century Gothic et du coup, c’est pas toujours super lisible. Personnellement, j’en serais resté au titres par exemple.

    Mais ce n’est qu’un détail ! ;-)

    Félicitations, beau boulot !! :P

  2. [...] This post was mentioned on Twitter by Hamtaro and Gaz, ۞ Bruno Bichet. ۞ Bruno Bichet said: « css 4 design » — Nouvelle charte graphique et redesign du logo | Le blog de l'intégrateur web http://j.mp/6GKSGW [...]

  3. Francis dit :

    PS: je ne vois pas Subscribe To Comments !! O_o

    • Bruno Bichet Intégrateur Web dit :

      Merci pour tous ces compliments : tu as bien mérité que j’ajoute Subscribe To Comments :D <3

  4. Salut,

    Je trouve le nouveau design vraiment sympa. Épuré comme il faut. Les articles bien mis en avant et bien lisibles, juste un petit bémol sur la page d’accueil où la colonne de droite est assez imposante, mais ce n’est pas un vrai problème. Félicitation pour le respect des grilles ! Pour ma part je galère toujours à trouver une solution satisfaisante à ce sujet sur mon blog. Par contre je n’ai pas eu de réels problèmes à tout passer en html5, je me suis pas mal aidé du site http://html5doctor.com/ pour aiguiller ma réflexion sur l’utilisation des nouvelles balises.

    Bonne journée.

    • Bruno Bichet Intégrateur Web dit :

      Merci. J’étais également parti des tutos et conseils donnés sur html5doctor, mais bon, j’ai peut-être abandonné trop tôt mais je ne voulais pas trop perdre de temps. Je m’y remettrais à tête reposée plus tard, le plus gros est fait.

  5. Sébastien dit :

    Intéressant, très intéressant !

    Ton billet à répondu à une des questions que je me posais concernant le code, et je dois dire que je suis surpris. Je ne connais pas wordpress, mais il me parait bien rigide ? Par exemple, pourquoi englober le couple a/img du logo dans une div ?, idem pour l’img de la photo ? Il suffisait de donner de bonnes règles CSS non ?

    En tout cas, je trouve que tu illustres très bien toutes les facettes (ou casquettes) du métier ! Cette rigueur et cette recherche d’ergonomie donne vraiment envie d’envoyer balader le client qui te dit comment faire…

    Pour les curieux, comme moi, il serait possible de connaître tes outils de travail ?

    • Bruno Bichet Intégrateur Web dit :

      Merci à toi aussi ;) Pour les div qui englobent, WordPress n’y est pour rien, c’est juste une contrainte/habitude que je m’impose pour faire flotter des blocs avec une largeur par rapport aux autres blocs qui suivent.

      Comme outils, j’utilise actuellement l’éditeur NetBeans pour l’intégration du code, illustrator et Photoshop pour la maquette. Filezilla pour uploader les fichiers. Sans oublier les navigateurs IE8, Firefox et Chrome ;)

  6. Ombre dit :

    C’est très joli mais pourquoi avoir enlevé le outline sur les liens ? Quand on navigue au clavier on ne sait pas du tout où on se trouve sur la page. C’est pas très bon pour l’accessibilité. ;-)

  7. Thierry V. dit :

    Juste un petit commentaire pour signaler une petite chose : title du logo = « Le blog de intégrateur front-end [..]« . Bravo pour cette nouvelle version ;)

  8. Aurélien dit :

    C’est très clair et très épuré ; je trouve ce design vraiment sympa !

  9. mixka13 dit :

    Design vraiment sympathique, léger mais très clair, on a directement l’essentiel, qui est d’ailleurs un contenu riche.

  10. Nickel chrome, j’adore. Simple et aéré, avec tout ce q’uil faut. Tu ferais pas une release par hasard ? ;)

  11. Jonas Luthi dit :

    Pas fan de la police utilisée mais sinon j’aime vraiment beaucoup, beau travail :D

  12. Mikachudesign dit :

    Salut,

    Je voulais juste faire une petite remarque concernant le logo.

    Je trouve les petits retours des lettres C, S(x3) et G un peu perturbants, je pense qu’il gagnerait en efficacité de lecture sans eux, sans que le logo ne soit vraiment dénaturé.

  13. Buzz dit :

    Bravo pour cette nouvelle charte graphique, c’est beau, classe et clean. J’aime beaucoup le footer qui est beau et fonctionnel, ca me donne des idées :)

  14. RaDe dit :

    J’aime bien :)

  15. [...] ou professionnels du développement. Je l’ai utilisé sur ce blog en attendant de créer 942, mon nouveau thème WordPress à partir d’une toute nouvelle charte graphique. J’ai laissé Thematic en l’état [...]

  16. [...] 3px 3px 3px; -moz-box-shadow: #aaa 3px 3px 3px; box-shadow: #aaa 3px 3px 3px; } En fonction de la grille de mise en page que j’ai mise en place sur ce blog, j’ai opté pour l’affichage de 8 liens [...]

  17. [...] les exemples qui suivent, j’ai utilisé la grille que j’ai conçu lors du redesign de ce blog : 16 colonnes de 42px séparées par une gouttière de 18px pour une largeur totale de [...]

  18. [...] souvent la grille de mise en page créée à l’occasion du redesign de ce blog : 16 colonnes de 42 pixels, gouttières de 18 pixels, largeur totale de 942 pixels. [...]

  19. [...] « css 4 design » — Nouvelle charte graphique et redesign du logo [...]

Laissez un commentaire

Vous pouvez utiliser les balises HTML suivantes : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Les commentaires sont publiés sous votre pleine et entière responsabilité et ne doivent pas contrevenir aux lois et règlementations en vigueur. Les propos racistes ou antisémites, diffamatoire ou injurieux, divulguant des informations fausses, relatives à la vie privée d'une personne ou utilisant des oeuvres protégées par les droits d'auteurs ne sont pas les bienvenus et seront modérés sans modération.

Merci d'être constructif et n'oubliez pas : « sans la liberté de ramer il n'est point d'éloge flotteur ! »



Colophon

CSS & Webdesign est une publication irrégulomadaire à tendance hebdomadaire
éditée par Bruno Bichet qui carbure à WordPress et au café équitable.
Tous droits réservés © 2006 - 2011.

Contactez l'auteur du site