CSS et media queries
On ne peut plus faire un site sans prévoir de design réactif (c’est comme ça que je dis responsive design), dont acte.
Je pars quand même du principe que vous avez une fenêtre qui fait au moins dans les 940 pixels de large à la base ; 922, précisément.
J’ai défini trois pas de rupture : les repères qu’on se pose en faisant du design réactif ne doivent pas être fixés dans le marbre, ils doivent dépendre de votre design. En gros, le principe, que j’ai lu je ne sais plus où et qui a vraiment beaucoup de sens, c’est de prendre votre design, de réduire la fenêtre, et dès que ça casse, c’est un point de rupture [1]. À ce point-là, on associe une règle de responsive.
Comme mon design est assez simple, il n’y a que deux points avant de faire des contenus linéarisés.
Il y a aussi une CSS « mobile », qu’on peut demander volontairement, et pour la peine je vous offre un cookie. L’explication est trop longue pour ce soir mais regardez sur Mezzoblue, on en reparle un de ces jours.
Polices
Évidemment j’ai abandonné les titres en images de Spip. C’était la meilleure façon qu’on avait de faire des titres avec des typos variées avant les webfonts, mais ça posait des soucis : perte de sémantique du HTML (cite, q, etc.), perte de changements de langue à l’intérieur d’un titre, requêtes serveur multipliées et bande passante gourmande.
À la place, comme tout le monde, j’ai mis des webfonts : j’ai choisi JosefinSlab parce que 1. le slab-serif c’est la mode, et 2. parce qu’elle est fine et élégante [2].
Du coup j’en ai profité pour jouer un peu avec Modernizr qui permet de tester les capacités d’un navigateur. Je sais que d’autres (Julien notamment) préfèrent has.js par exemple, mais j’aime l’idée que des classes sont ajoutées automatiquement à la balise html : c’est simple et efficace.
En l’occurence on peut faire des choses comme ça :
h1 q, [...] {
font-style: italic;
}
.fontface h1 q, [...] {
font-family:'JosefinSlabItalic';
font-style:normal;
}Je trouve ça pratique et pas bête : ainsi si on gère les font-face on n’a pas un double italique sur les variantes italiques d’une police, et si on ne les gère pas on retombe sur un principe normal. Et si le javascript ne s’exécute pas on se retrouve dans un contexte normal géré par le style de base du navigateur : de l’italique tout bête.
Mise à jour du 5 mars : Jérémie dans les commentaires souligne que ça ne sert à rien vu que tous les navigateurs actuels gèrent @font-face. Effectivement je me suis bien trompé sur ce coup-là :)
Brèves et articles
J’avais environ 450 brèves, qui sont une réminiscence de l’époque où je trouvais qu’une petite note devait être une brève et une longue note un article. Spip 3 va bientôt arriver, et la notion de brèves va se retrouver obsolète.
J’ai donc dû faire un travail de curation comme disent les anglais : supprimer une centaine de brèves soit trop personnelles (on ne publie pas en 2002 pour 10 personnes comme en 2011 pour quelques centaines), soit obsolètes et sans intérêt si longtemps après le moment (parler de l’ancienne page d’erreur 404 de Paris Web, par exemple, alors qu’elle n’existe plus). J’ai aussi supprimé des choses auxquelles je tenais, comme bon nombre de liens vers les articles si bien écrits de Grosse Fatigue, dont la prose d’époque a disparu du réseau il y a quelque temps déjà.
Enfin il a fallu reprendre une par une les brèves qui restaient pour réintégrer le cas échéant le lien qu’elles portaient (il existe un champ « Voir en ligne » dans lequel on peut coller une URL) à l’intérieur de la brève elle-même, vu qu’elles sont ensuite converties en articles via le plugin Spip de conversion des brèves en articles et que je voulais simplifier les squelettes en supprimant toutes les notions de surtitre/sous-titre, « Voir en ligne » (justement), etc. Les vacances de Noël ont du bon.
Au passage c’est amusant comme plus je remontais dans le temps, plus le texte de mes liens perdait en pertinence. On dira que faire des liens pertinents est un entraînement comme les autres...
(Peut-être que ce n’est pas si important, toutes ces brèves de deux lignes qui faisaient des liens vers des contenus variés dispersés aux quatre coins du Web, mais ils font partie de l’histoire et de la « chair » de ce site, je devais donc les garder).
Le design proprement dit
C’est de l’épuré, parce que je n’ai pas de talent.
Je l’ai tout de même soumis par acquit de conscience à la sagacité de quelques camarades qui ont bien voulu me donner leur avis, que soient donc publiquement remerciés Christophe et Emmanuel (petite mise à jour en passant : Vincent a mis son œil de lynx en jeu et ça m’a bien aidé à resserrer des petites vis).
L’idée traînait depuis des mois, la réalisation concrète a tenu en trois jours de furieux temps plein. Les curieux qui farfouillent dans les CSS s’en rendront compte : le ménage n’est pas parfait. Mais j’ai dû glaner une ou deux bonnes pratiques de performance en cours de route, Yslow me donne tout de même un B. Merci Yslow !
Et maintenant, dodo. Si vous avez des bugs je suis évidemment intéressé.
