nicolabricot’s blog

Il y a quelques temps, j’ajoutais un nouveau design pour le blog. Il se voulait plus agréable à lire, plus convival, et plus léger. Je me suis inspiré de nombreux sites pour lesquels j’appréciais particulièrement leur design, ou certains éléments de leur design. Entre autres : 5thirtyone dont j’affectionne tout particulièrement la colonne de gauche contenant les informations sur chaque article.

Mais voilà, je me suis rendu compte que le design ressemblait plus à des idées collées les unes aux autres, sans vraiment trop d’harmonie. Et que niveau accessibilité, ce n’était pas terrible non plus. Mettre la sidebar en bas comme le font certains blogs, nécessite plutôt d’afficher au plus un ou deux articles au-dessus.
Et qu’au départ, je voulais un design léger, très simple (j’adore la nudité du blog de Cyril Krylatov). Ce qui n’était plus le cas !

Et puis j’ai découvert la très intéressante initiative de Kozlika et de Franck (c’est Kozlika qui parle) :

Je voudrais réaliser un nouveau thème pour Dotclear. Je voudrais que celui-ci soit suffisamment robuste et présentable pour que nous puissions le joindre à la prochaine version.

[…]

À ces prémisses s’ajouterait l’une de mes marottes : le chantier public en direct, ouvert aux commentaires. Tu connais mon goût pour l’exégèse et je frétille d’avance des discussions à n’en plus finir sur le choix d’une valeur de marge gauche d’une liste à 1.5 ou 1.66em.

Je me suis donc inspiré des premières versions de ce nouveau design (en partiuclier les stickers), et j’ai essayé de ne pas ajouter des fioritures partout, tout comme des illustrations à tout bout de champ.

A la différence des autres thèmes que j’ai pu faire, dans lesquels je reprennais chaque template et je les modifiais à ma sauce, j’ai vraiment limité les modifications sur les fichiers. J’ai fait tout ce que j’ai pu en CSS, et j’ai gardé un certain nombre de comportement par défaut.
J’entends par là les formulations comme : Par Nicolas le lundi 4 mai 2011, 15:09 - Général. Je n’y ai pas touché (même si j’aurais préféré quelque chose comme Le lundi 4 mai 2011 – Général (notez la différence entre les traits « d’union »^[1])).

Je n’ai néanmois pas pu résister à modifier ces templates suivants :

• user_head.html : pour ajouter un favicon et des commentaires conditionnels (c’est toujours un plaisir de prendre en compte les navigateurs obsolètes…),
• _top.html : pour avoir un haut de page avec description et les stickers,
• post.html et page.html : j’ai uniquement modifié les commentaires pour afficher les images Gravatar des commentateurs,
• _footer.html : là je me suis laissé un peu aller, entre les dernières photos de Flickr et mon dernier Tweet,
• 404.html : pour personnaliser la page d’erreur 404, qui n’est vraiment pas agréable par défault.

J’espère que ce design ne me lassera pas trop vite, et qu’il est autant agréable pour vous que pour moi !

Photo : Frédéric Bisson.

Pour en voir plus, c’est sur Flickr.

Pour afficher ces petits smiley :

Y1=.15sin(x)
Y2=.30sin(x)
Y3=.45sin(x)
Y4=.60sin(x)
Y5=.75sin(x)
Y6=.90sin(x)
Y7=sin(x)
Y8=1.15sin(x)
Y9=1.30sin(x)
Y0=1.45sin(x)

Rendez-vous ensuite dans le menu zoom et sélectionnez l’affichage ZTrig.
On s’amuse comme on peut en prépa… ;-)

Vu chez fnordramen.