Inspiration nouvelle dist SPIP 3

Je n’ai jamais trop aimé les squelettes par défaut de la « dist » de SPIP 2 parce qu’elle conservait la laideur de la précédente — qui se voulait pédagogique et avait privilégié la simplicité et la lisibilité du code au détriment de l’apparence. Bref : ouin !

Du passé faisons table rase !

Quitte à faire moche et compliqué, autant tout casser et repartir de zéro. J’ai commencé par refaire la dist à ma façon, d’abord pour mon usage personnel, puis en partage dans un coin de la Zone, en y rassemblant mes bonnes habitudes de ces dernières années. Ce projet « de destruction de la dist de SPIP » s’est naturellement appelé « Distroy ». Il est visible sur distroy.tetue.net.

Pour commencer, il fallait absolument réorganiser toutes les feuilles de styles par défaut, surtout l’abominable spip_style.css, source de tracas dès lors que l’on souhaite personnaliser l’apparence graphique du site. J’ai construit un framework CSS pour SPIP, très proche de Blueprint, pour son approche typographique, appliquant la méthode Daisy pour une davantage de modularité des feuilles de styles, dans l’idée toutefois de ne distribuer au final que deux ou trois feuilles CSS, pour que cela reste simple à appréhender.

Pour ne rien oublier, j’ai travaillé sur un échantillonnage de contenus représentatifs, dont cette « charte typo », que je partage dans la Base de démarrage.

Au passage j’ai adopté une nouvelle structure HTML de base qui anticipe le HTML5 et j’ai ajouté des sélecteurs conditionnels pour coder CSS à l’aise.

Côté squelettes, une organisation plus fragmentée, décomplexée sur les inclure, se rapprochant autant que possible des squelettes Z, qui menacent de devenir la nouvelle norme de templating dans SPIP.

Ce sont les changements les plus importants de ces nouveaux squelettes, mais ils demeuraient invisibles : un relooking s’avérait nécessaire pour marquer le coup.

Bandeau ?

Pour les caractéristiques formelles : réduire à deux colonnes, avec le contenu en premier, ajouter un bandeau, un vrai, pour éviter la confusion avec le logo de site, trop souvent détourné à cet usage, le tout dans un habillage sobre, noir et blanc, qui valorise le texte.

J’aime beaucoup le bandeau de la Grange Blanche, dont la surface (1000 x 288 px) préserve la beauté de l’image. Puis je suis tombée en amour d’Helvetica… comme sur le blog de Wilson Miner, qui tourne sous Django, sur une base de « 16px/1.125em "Helvetica Neue", Helvetica, Arial, sans-serif » :

Après le premier jet, je réalise que ça ressemble beaucoup à un thème WordPress existant, plus précisément au thème par défaut, appelé Twenty Ten (par Matt Thomas), en « Georgia, "Bitstream Charter", serif » avec titraille en « "Helvetica Neue", Arial, Helvetica, "Nimbus Sans L", sans-serif ».

Je cherche donc une autre voie, pour éviter cette ressemblance involontaire… De plus, rien ne permettant de gérer, nativement et facilement, un bandeau dans SPIP, j’abandonne. Et je rétropédale pour revenir à l’essentiel.

SPIP aime la typo

Cette année, inspirée par ces remarquables conférences de Paris Web 2010, a été marquée par la typographie sur le Web — voir ce compte-rendu sur la typographie à Paris Web. C’est aussi une préoccupation fondamentale de SPIP, notamment par son traitement typographique des contenus textuels (espaces insécables, guillemets, etc.). Mais on ne s’en doute pas tant SPIP a sale mine. Il faut donc montrer ce soin qu’à SPIP de la typo !

Excédée par les sites miniatures écrits en Arial 11px, — ce qui est typique des administrations françaises, parce qu’elles fuckent leurs internautes, mais aussi de certains sites commerciaux plus ou moins fashion mais surtout très conservateurs —, je rêve, à force d’admirer le magnifique site Information Architects, d’une dist SPIP qui assumerait son amour du texte en s’affichant en taille naturelle non contrainte, c’est-à-dire à 100 % (cf. : Texte à 16px : trop grand ?).

J’abandonne Helvetica pour généraliser l’empattement, avec la belle Georgia, une police websafe d’autant plus recommandable qu’elle a été dessinée pour l’écran, où elle bénéficie d’une bonne lisibilité. Optimisée pour les écrans, elle est facile et agréable à lire, recommandée pour les textes longs, immersifs, et apporte une connotation chaleureuse et élégante. C’est ce qu’il nous faut !

Propulsé par Dotclear, le blog d’Emmanuel Clément, qui parle aussi bien de compost que de l’entité   (hélas suspendu depuis 2011) est d’une très belle simplicité, qui met en valeur le texte et sa typo, ici « georgia, sans-serif » en 1em, soient 16px calculés :

Ce sera mon inspiration principale : une mise en page sobre, épurée, qui valorise le contenu, le texte, point.

En rouge et noir

Mais il n’était pas du goût des utilisateurs qui ont suggéré des choses assez diverses, certaines assez moches et d’autres plus jolies, comme le site d’Andy Rutledge, assez chargé en polices. La propriété CSS @font-face permet bien des fantaisies, mais il n’est pas pertinent de distribuer une police dans la dist. Car celle-ci doit rester simple et légère, sans fichiers graphiques additionnels. Ni bandeau, ni polices.

Bien qu’il ne soit pas exemplaire pour l’interlignage ni le code CSS, le site infokiosques.net est graphiquement intéressant pour sa bichromie noir-blanc-jaune #EED235 :

S’exprime une certaine nostalgie de la première dist, que je trouvais classe, en orange #FF9900 et noir, bien d’équerre, ce qui me pousse à agrémenter le choix du noir et blanc d’une couleur chaude, entre orange et rouge, tendance anar-gauchiste.

Sorte de blog entièrement consacré à l’UX, 52 Weeks of UX est écrit par deux designers, qui traitent d’une problématique par semaine. Les illustrations au trait collent bien avec l’ensemble old school, presque vieille presse, en noir #121212 et rouge #8C0806. La navigation est simplissime, et sert la métaphore du calendrier qui fait le concept du site.

Ce sont aussi les couleurs du Monde diplomatique, un des premiers sites sous SPIP, qui prépare justement une nouvelle version, adoptant une texture de fond, sur laquelle se pose la page du journal, en « Georgia,'Times new roman', serif » agrémenté d’Helvetica, mais avec un interlignage étonnamment à 1.2… beaucoup trop serré !

J’en retiens le rouge #990000.

Page responsive

Pour la typo, je préfère le site kle·pas, en « Georgia, "DejaVu Serif", Times, "Times New Roman", serif; », idéalement interligné à 1.5, traité avec exigence (lettrines, alinéa, petites capitales, etc.), avec une pointe saignante de rouge #bb0000 :

Passing Curiosity, le blog de Thomas Sutton, développeur australien, en « Palatino, georgia, "times new roman", serif » fixé en 16px avec un « line-height: 1.5em; », est remarquable par son élégante discrétion :

Mais éclatons la page qui rappelle trop les limites finies du papier, et posons le texte à fond perdu ! La nouvelle dist s’affichera sur tous les écrans, dans toutes les largeurs, responsive, sans toutefois imposer de grille de composition, mais au moins en linéarisant le tout.

Les fonds texturés reviennent à la mode, comme le montre ce florilège de textures signalé par renyonparis) où je remarque le bien joli portfolio de James Li :

J’opte pour un fond texturé, gris sable, pour adoucir la luminosité de l’écran et améliorer le confort de lecture. C’est finalement DenisB qui fera le fond de la nouvelle dist, plus clair, moins texturé.

Nouvelle dist SPIP 3

Appréciez cette base typo complète (fièrement citée au slide 34 de cette prez à Paris Web), où tous les éléments sont stylés et calés sur la grille verticale (interlignages réguliers, toussa) :

Le projet Distroy rejoint SPIP en août 2011, pour en constituer les squelettes par défaut, identifiés par une jolie icône de crâne à 3 dents (ah ah ah) dessinée par Manu2.11, qui nous fait des tee-shirts assortis pour l’occasion.