Mot-clef : Blog

Fil des billets

Forcer l’anti-aliasing avec Chrome sur Windows

Pour un projet de site web associatif, tout comme pour le blog ici, j’utilise des fontes provenant de la plateforme Google Web Fonts.
C’est un service très pratique qui permet d’utiliser la propriété @font-face de CSS pour utiliser une police d’écriture personnalisée.

Seulement, l’affichage n’était pas terrible du tout sur Windows, et uniquement avec le navigateur Chrome.
J’ai été très surpris qu’Internet Explorer affiche correctement les fontes, mais pas Chrome. Je me suis rendu compte que Chrome ne « forçait » pas le lissage de la police, ce qui donnait un aspect rugueux au rendu.

Comparatif fonte avec Chrome et IE 10

Mais j’ai trouvé une solution en suivant les conseils de Kévin décrits dans son article. Il suffit d’ajouter cette ligne (en adaptant la couleur naturellement) :

-webkit-text-stroke: 0.5px #333;

Chrome sans/avec -webkit-text-stroke

Le rendu est ce qu’il est, mais c’est déjà plus joli et agréable à l’œil.

Pour une prochaine refonte graphique

Paint par ArtCriminal sur Flickr.com

Quand j’aurais envie de refaire ou modifier le design, il faut que je pense à remplacer :

  • “billets précédents” par “retourner dans le passé” ;
  • “billets suivants” par “revenir dans le présent” ;
  • “aucun commentaire” par “ajouter son grain de sel”.

Photo : Art Criminal sur Flickr.

De l’art de changer son design

Pots de peinture

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.

Notes

[1] En réalité le second trait n’est pas un trait d’union, mais un demi-cadratin : – (utilisé notamment pour les énumérations). Seul le - est un trait d’union, qui permet d’accoler deux mots (par exemple : c’est-à-dire). Plus de précisons sur la page Wikipédia.