Mon nouveau site en SPIP 1.9.2

Comme annoncé, cette nouvelle version de mon site se voulait très légère : elle est réalisée avec un SPIP nature, sans fonctionnalité additionnelle, et dotée d’un habillage graphique minimal, employant un strict minimum d’images et de sélecteurs CSS.

Histoire de voir ce qu’on peut déjà faire avec ce minimum...

C’est quoi ce design ?

Mon site avait trop l’allure d’un blog perso, de plus en plus à l’étroit dans sa colonne de 650 pixels de large (voir la version précédente). J’avais drôlement envie de lui faire prendre l’air, c’est-à-dire d’aérer sa mise en page en la simplifiant et en l’étalant davantage dans la largeur de la fenêtre. J’ai d’abord joliment travaillé en largeurs relatives, en em avec min-width et max-width, pour finalement abandonner à cause de cette saleté d’IE. L’ami Toggg va me maudire !

Côté design... J’avais été séduite par le Veerle’s blog et d’autres sites semblables, pour deux raisons : leur façon de tirer profit de la syndication de contenu et des services tels que flickr, last.fm, ou del.icio.us, et leur mise en page en bandes horizontales, en deux ou plusieurs registres superposés.

J’ai notamment jeté un œil sur ces sites : Rob Goodlatte, vinch.be, 456 Berea Street, sumLife et davduf.net qui vient de changer ses squelettes dans le même esprit. Mais c’est finalement CSS beauty que je trouve être le plus exemplaire.

Cependant, en prenant pour modèle ces sites qui accordent une place plus importante aux contenus externes, il me semblait essentiel d’être d’autant plus explicite sur la provenance des contenus affichés, pour éviter la confusion chez l’internaute. Je m’en suis donc tenue à deux registres horizontaux de couleurs différentes, utilisés strictement de cette façon :

• fond clair (blanc ou vert de gris) pour exposer les contenus propres au site ;
• fond foncé (tapisserie marron) pour tout ce qui vient d’ailleurs : les listes de liens externes et d’articles issus de la syndication, mais aussi les commentaires ;
• pour être exhaustive, une troisième tonalité caractérise le bandeau (nom du site et navigation principale), les titres et éléments de sous-navigation ; c’est une vieille habitude chez moi qui suis maniaque de la couleur #CC3300 !

Habillage graphique minimal

Je ne suis pas graphiste et, quand j’ai le choix, j’évite de m’embarrasser de fichiers images pour réaliser l’habillage d’un site : c’est trop rigide ! Je préfère tirer parti des possibilités du CSS pour éviter l’addition d’éléments graphiques, souvent inutiles, puisqu’en effet quelques aplats colorés suffisent à rendre un site non seulement lisible mais aussi agréable à visiter. Une seule image est donc employée ici, un bout de tapisserie marron, qui amène un peu de fantaisie superflue. Ceci dit, ami-e-s graphistes, si ça vous démange d’embellir un peu tout ça, allez-y !

Coté typo, évidemment en em, je n’ai pas résisté à la mode actuelle de la « Century Gothic », que j’affectionne depuis trop longue date, bien que je sache que vous n’en bénéficierez pas tous et toutes (voir la charte typo complète).

Code léger et coquet !

J’avais pour ambition initiale de n’employer aucun sélecteur CSS (chiche !) et de m’appuyer uniquement sur le balisage XHTML, celui-ci se voulant simple, bien structuré et sémantiquement correct. Affichez le code généré : vous trouverez effectivement très peu de class et d’ID. Pour ce faire, il a fallut se débarrasser des sélecteurs propres à SPIP, ce qui est aussi l’occasion de questionner leur nécessité (cf. : « La coquette se passe des class="spip" »).

Migration vers SPIP 1.9.2

style='float:right;'>
Une nouvelle version de SPIP vient de sortir. C’est donc de SPIP 1.8.3 vers SPIP 1.9.2 que je migre : ça se fait les doigts dans le nez et les yeux fermés, merci spip_loader.php !

Comme à chaque montée de version, les formulaires explosent, surtout ceux personnalisés. Ici, il faut renommer quelques sélecteurs CSS (#previsu en .previsu) et fichiers (formulaire_forum.html en forum.html, etc.). Le formulaire de recherche est tellement chiant à caler que je renonce à en faire usage (et au diable la bonne pratique n°60 !).

Par contre, je me suis empressée d’ajouter $toujours_paragrapher = true; dans ecrire/mes_options.php [1], pour régler le problème des paragraphes de SPIP. J’avoue que j’attendais après ça pour me remettre à faire des squelettes SPIP, ô bonheur ;-)

Skel in progress…

Côté squelettes, et si vous voulez les mêmes, ce n’est pas très compliqué : toutes les astuces utilisées sont expliquées dans cette rubrique. Il n’y a aucune fonctionnalité additionnelle : ni script, ni filtre, ni plugin. Pourquoi se compliquer la vie quand on peut faire simple ?

Tout cela est trop beau pour durer, et je m’en vais d’ailleurs de ce pas tester quelques plugins (argl !)... Il manque encore pas mal de choses à ce site, que j’ajouterais quand j’aurais le temps : le champ de recherche, un logo de site (gasp !), un nuage de tags, une feuille de style pour l’impression, des flux RSS explicités, une limitation du nombre de caractères des commentaires, une gestion des acronymes et abbr, des mini captures d’écran de prévisualisation visibles au survol des liens sortants, etc.