Partis pris graphiques

L'idée maitresse de ce design consiste à mettre l'accent sur la lisibilité. Ce site étant un blog, tout tourne autour des articles qui y sont écris, tout le reste n'est qu'accessoire. L'entête et le pied de page sont donc réduit au minimum, la zone de lecture principal prend l'essentielle de la surface visible, et la colonne de gauche ne sert quasiment que d'aide à la navigation sauf sur la page d'accueil ou je m'étale un peu.

L'idée secondaire de ce design consiste à simplifier au maximum la navigation. Pour cela, étant donné la place que prend le contenu principal, j'ai choisi de rendre l'en-tête et le pied de page fixe. La colonne de gauche est partiellement fixe. En fait, cela dépend de son contenu, si elle est trop grande, elle se déplacera avec le contenu de la page, si elle est assez petite, elle restera fixe.

Couleurs

Les dominantes de couleur sont le noir est blanc, là encore pour rendre la lecture plus confortable. Néanmoins, je nuance le site à l'aide de rouge et de vert, des couleurs très naturelles, alliance de chaleur et de fraicheur. Le rouge est utilisé pour toutes les zones d'action (essentiellement les liens). Il est assombris ou affadis selon les cas afin de ne pas trop interférer avec le contenu et donc la lisibilité. Le vert est utilisé pour les zones de repos (Affichage de code source), et les actions à retardement (bouton de validation des formulaires)

Typographie

Afin de gagner en expressivité, j'utilise deux polices typographiques : Georgia pour la titraille des articles et Molengo pour tout le reste. Molengo est une police de caractère sans empattement, ronde et équilibré. Même si elle souffre de quelques défaut de hinting (regardez la largeur des futs des i et f par rapport à celle des m et n), elle supporte remarquablement bien la réduction et est très adaptée aux usages web. Elle permet de donner de la douceur au texte et de rendre la lecture plus fluide. C'est important dans la mesure ou j'ai tendance à écrire des articles long. Ce choix typographique me permet de limiter la fatigue visuel et de mieux "faire passer la pilule". Dans le même ordre d'idée, au rayon des subtilités, vous n'aurez peut être pas remarqué, mais les bandeaux noir en en-tête et pied de page sont en fait gris très foncé. Cela permet de rééquilibrer le contraste avec le gris typographique naturel et  d'éviter qu'ils n'écrasent (trop) le texte.

Partis pris techniques

L'idée sous-jacente de ce re-design, c'est bien sur d'exploiter au mieux les capacités des navigateurs en terme de support de CSS2/3 et de HTML5. Pour HTML5, cela se résume à l'utilisation de certaines nouvelles balises (section, article, aside, header, footer). Pour ce qui est de CSS, J'essaye au maximum d'utiliser les capacité de CSS2 (max-width, position : fixed, sélecteur d'attribut) et un peu de CSS3 pour rajouter quelques effets, ce qui me permet d'obtenir un design fluide qui s'adapte assez bien à tous les types de navigateurs et d'écrans.

media queries

L'utilisation du module "Media Queries" de CSS3 me permet de contrôler la façon dont mon design va se dégrader selon les capacités du terminal qui affiche ma page. Ainsi, les écrans haute résolution afficherons les polices typographiques dans un corps de texte plus important afin que le texte reste toujours aussi confortable à lire. D'un autre coté, pour les écrans de très petite dimension (smartphone et écran à faible résolution), le design est simplifié et linéarisé... encore et toujours pour améliorer la lisibilité.

Couleurs transparente

Une des nouveauté de CSS3 les plus facile à utiliser, ce sont les couleurs transparentes. Elles permettent de créer des effets assez subtile de superposition sans avoir à multiplier les images. Ainsi, mes images d'arrière plan sont toujours visibles mais affadies lorsque du texte est affiché par dessus. Pour cela, il suffit d'avoir un blanc ou un gris légèrement transparent en arrière plan des textes qui viendront se superposer aux images.

transitions

Les transitions me permettent ici de rajouter un peu de douceur au design en créant des transitions de couleur un peu moins abrupte que ce que permet CSS seul d'ordinaire.

Arrière-plans multiples

La possibilité de définir des valeurs multiples pour les propriétés CSS est sans doute une des plus remarquable avancée de CSS3. Je l'utilise ici pour définir des images multiples d'arrière-plan. Cela permet dans le cadre d'un design fluide de pouvoir placer mes deux fleurs à chaque extrémité de l'écran, sans avoir à me soucier de la taille de l'écran et sans avoir à recourir à un sur-balisage HTML inutile.

Enrichissement progressif et dégradation harmonieuse

Globalement, ce design se dégrade très bien dans un navigateur qui supporte correctement CSS2 (et donc, il se dégrade très bien dans IE8, qui ne bénéficie tout simplement pas des amélioration de CSS3)

Les seuls vrais problèmes interviennent avec le cauchemar du web designer : IE6 et 7. Pour ces deux navigateurs, j'ai rajouté quelques styles spécifiques pour s'assurer que la dégradation n'est pas trop déconnante.

Pour vous faire une idée, le navigateur de référence lorsque j'ai créer ce design fut Firefox 3.6. Tous les navigateurs plus récent bénéficieront de tout ou partie des avancés des CSS3 pour avoir un design un peu plus léché et/ou subtile. A l'inverse, la dégradation se fait très bien dans IE8 (le design est un peu plus grossier mais conforme à la logique global) et IE6 et 7 sont clairement moins jolis mais toujours aussi utilisable et les prérequis du design (lisibilité et navigation simplifié) sont respectés.