On ravale

Un beau jour, ou était-ce une nuit, lassé par l’incompatibilité évidente entre Repro, mon rythme d’écriture, et mon style aussi personnel qu’inimitable, je me décidais à bidouiller quelque chose de moche sur une base de Twitter Bootstrap. Repro est un thème magazine créé pour Wordpress par Orman Clark qui présente trois inconvénients majeurs : le format magazine implique une fréquence de publication élevée, la taille de la font utilisée diminue la lisibilité du texte et comme tout thème Wordpress un peu chiadé, il est utilisé sur des milliers de sites, paye ton originalité.

Question originalité, Twitter Bootstrap se pose là. Cette librairie a été créée pour offrir un cadre de démarrage pour un site ou une application Web, pas pour être utilisé tel quel en production. Et ça tombe bien, puisque Bootstrap est tres facilement personnalisable.

J’ai monté la première version du thème à la Rache©®™, en privilégiant la disposition et l’accès aux informations. J’ai laissé de côté tout sens esthétique, chose dont je ne suis pas dépourvu à 100% dès qu’il s’agit de manier un appareil photo, mais dont je manque cruellement quand on parle de design Web.

Thème Bootstrap, avant

C’était tout sauf terrible, mais comme disent nos amis anglo-saxons, it did the job, and it did it well. Tous les éléments étaient bien identifiables : titre, menu, zone de recherche, espace abonnement, bloc à propos… Pour le reste, c’étaient à plats de couleurs, pas de texture, aucun élément graphique, une typographie minimaliste, et oubliez les fioritures CSS disponibles sur les navigateurs modernes.

Au bout de quelques mois, j’en ai eu ras le bol, mais je n’ai pas voulu tout reprendre de zéro. J’ai profité d’une panne de mon RER entre deux gares pour attaquer une refonte du thème, en partant des possibilités offertes par Bootstrap et de Customize Twitter Bootstrap To Not Look Bootstrap-y que j’avais lu quelques jours avant.

1. Changer les couleurs

Bootstrap offre une fonctionnalité trop peu usitée : celle de personnaliser la feuille de style sur le site avant de télécharger le package. Ce n’est pas parfait, mais ça fait déjà pas mal de choses vite, et sans mettre les mains dans le cambouis.

Changer les couleurs du thème est d’une simplicité enfantine, à condition de trouver la bonne combinaison. Manquant cruellement d’idées, j’aime beaucoup Colour Lovers qui propose pas mal de palettes et d’idées de couleurs. J’utilise ensuite Color Scheme Designer qui me propose le bon assemblage à partir d’une couleur de base.

Color Scheme Designer

Durée : 10 minutes, je ne suis pas patient et n’ai pas trouvé de couleur qui me plaise. Je suis donc resté sur le schéma de base, au temps pour la personnalisation.

2 Adapter la typographie

La typographie est un des éléments les plus critiques et les plus délicats à mettre en place sur un site Web. C’est aussi ce qui va différencier un thème “Bootstrap” d’un thème “non Bootstrap” du premier coup d’oeil (avec la barre de menu noire et les zones grises utilisant la classe well.

Google Web fontsSi comme moi vous n’y connaissez strictement rien en typographie, vous pouvez aller faire un tour du côté de chez Swan du côté des Google Web fonts pour trouver police à votre pied.

En fonction de ce que vous cherchez, filtrez sur les polices avec ou sans serif (fait moi peur), manuscrites ou non. J’ai filtré sur “sans serif”, “latin”, et “par popularité”. J’ai hésité entre Ubuntu, Comic Sans MS et Open Sans. Ubuntu me plaisait bien, mais elle était vraiment trop connotée… Ubuntu. Je suis finalement parti sur Open Sans pour la lisibilité sur écran et le rendu en grandes tailles.

Avant : Aucun logiciel ne peut être garanti 100% bug free. Même un “hello world” peut planter dans des cas extrêmes malgré son apparente simplicité.

Après : Aucun logiciel ne peut être garanti 100% bug free. Même un “hello world” peut planter dans des cas extrêmes malgré son apparente simplicité.

Attention avec les polices non standard : vous devrez souvent embarquer un fichier pour chaque graisse. Le poids des pages risque d’exploser et vos performances s’en ressentiront. Open Sans et Open Sans Bold pèsent chacune 16k, ce qui rajoute 32k à vos pages.

Afin de ne pas dépendre de Google, j’ai téléchargé les polices sur mon serveur, et j’ai rajouté le code suivant dans ma CSS principale :

<typo:code lang=”css”> @font-face { font-family: ‘Open Sans’; font-style: normal; font-weight: 400; src: local(‘Open Sans’), local(‘OpenSans’), url(http://t37.net/images/theme/open-sans.woff) format(‘woff’); }

@font-face { font-family: ‘Open Sans’; font-style: normal; font-weight: 700; src: local(‘Open Sans Bold’), local(‘OpenSans-Bold’), url(http://t37.net/images/theme/open-sans-bold.woff) format(‘woff’); } </typo:code>

Pour les titres, je suis parti sur une graisse de 400, au lieu de l’habituelle graisse de 800 (ou gras même si le gras c’est la vie). L’absence de gros paté gras allège considérablement la page. Je n’étais pas super convaincu en le faisant, mais avec une taille de base de 15px, je me retrouve avec des titres de premier niveau de 41px et le rendu est vraiment excellent.

Ceci est un titre en Helvetica Neue gras.

Ceci est un titre en Open Sans pas gras.

Durée : 10 minutes, le temps de choisir entre Open Sans et Ubuntu. En dehors du font face, la feuille de style n’a absolument pas changé.

3. Personnaliser Bootstrap

La zone de recherche avant et après retouche J’ai ensuite mis Bootstrap à jour. Celle-ci n’était pas indispensable, mais en passant de la 2.0 à la 2.2.2, je récupérais les nouvelles classes input-append, qui permet de bien alignes le champ de saisie et le bouton de validation pour les formulaires sur une seule ligne, et search-query qui offre un formatage permettant de mettre en valeur la zone de recherche.

Personnaliser Bootstrap sans installer la suite Less est d’une simplicité enfantine. Rendez-vous sur le site du framework, onglet customize, et remplacez les valeurs standard par celles que vous souhaitez utiliser.

Personnaliser Bootstrap

Durée de l’opération : 4 minutes, le temps d’adapter Bootstrap à mes besoins : taille par défaut de la police (15px), polices (Open Sans, Helvetica, sans serif), et taille d’une colonne de la grille ramenée à 60px comme sur Bootstrap 2.0.

4. Ajouter des éléments graphiques

Afin de me débarrasser du côté trop brut de décoffrage de Bootstrap, je suis parti à la recherche de quelques éléments graphiques. Il existe plusieurs sites proposant des textures gratuites, j’ai opté pour Subtle Patterns qui en propose des gratuites de très grande qualité.

Une texture façon ardoises a remplacé le noir du menu du haut de la page et des bords sont venus séparer les éléments du menu. Afin de leur donner un peu de relief, les bords gauche et droit sont de deux couleurs différentes.

Le menu avant / après

L’à plat gris du début a été remplacé par une texture plus claire. Sur les conseils d’Écribouille et la zone principale a été agrémentée d’une ombre et les coins légèrement arrondis. Afin d’éviter d’alourdir encore la page, j’ai utilisé les propriétés CSS box-shadow et border-radius.

La boite principale, avant

La boite principale, après

Durée : 5 minutes, le temps d’ajuster la taille des coins et de l’ombre.

5. Réorganiser la partie supérieure de la page

Cela ne fait pas vraiment partie de la personnalisation de Bootstrap

Dans un premier temps, j’ai souhaité réorganiser le haut de la page. La disposition était purement utilitaire, mais faisait un peu trop “assemblage de rectangles”. Je voulais quelque chose qui me permette de conserver la lisibilité, ne rogne pas sur la quantité d’information présente sur la première page, tout en faisant moins pile de boites à contenu.

Pour cela, j’ai :

  • Placé la liste des catégories en haut de page.
  • Sorti le titre, la punchline et la zone de recherche de la partie principale de la page.
  • Établi une distinction visuelle nette entre l’en-tête et la zone principale.

En-tête avant / après

Durée : moins d’une minute, le temps de réorganiser les blocs dans le thème. Aucune balise HTML n’a été modifiée durant l’opération.

Résultat final

Le résultat final

Et voilà, c’est fait. Il est bien entendu possible d’aller beaucoup plus loin dans la personnalisation de Bootstrap, et je pourrais certainement encore faire pas mal de choses de ce côté là, mais je suis plutôt satisfait du résultat. Je pense profiter des vacances de Noël pour nettoyer le code, et porter ce thème sur Wordpress. Si jamais cela intéressait quelqu’un de l’utiliser, il ne va pas tarder à finir sur Github.