Mon nouveau site en SPIP 1.9.2

3 mars 2007,
par Romy Têtue

Mots-clefs associés à cet article :

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.

Les sites qui m’ont inspirée

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.

  • Modèle pour les rubriques et la page d’accueil
  • Portfolio

    La présentation de galeries d’image est toujours une chose rébarbative. Pour mon portfolio, je me suis inspirée de celui, efficacement simple, de palaci.fr.

  • Ma page de suivi RSS

    Aucun agrégateur ne me satisfait pour ma revue de Web... si bien que j’ai préféré me construire cette page, qui me permet de suivre l’actualité de plusieurs sites d’un seul coup d’œil, en texte et en images.

  • Modèle pour les articles et les brèves

Vos commentaires

  • Le 4 mars 2007 à 15:37, par davduf En réponse à : Mon nouveau site en SPIP 1.9.2

    Hé bien Romy... encore bravo pour cette réalisation impeccable !

    A bientot ,-)

    D.

  • Le 5 mars 2007 à 11:34, par kloh En réponse à : Mon nouveau site en SPIP 1.9.2

    J’aime bien comme ça. J’aime surtout le fond des commentaires :p c’est une image libre d’utilisation ou non ? Je la récupererais bien pour un site lol

  • Le 5 mars 2007 à 16:27, par Romy Têtue En réponse à : Mon nouveau site en SPIP 1.9.2

    Eh bien justement, je me pose aussi la question, parce que je ne sais plus du tout d’où je sors cette image !

  • Le 7 mars 2007 à 09:14, par chacha En réponse à : Mon nouveau site en SPIP 1.9.2

    Bon, ben, y a pas grand chose a critiquer... je crois qu’en plus il est en cours de ravalement. Les aplats de couleur sans motif ton sur ton sont un poil trop sobres mais sinon, on est sensible au petits details d’approche typo, filet kaki 1px entre le fond blanc et le cadre orange...

  • Le 7 mars 2007 à 11:11, par Igor En réponse à : Mon nouveau site en SPIP 1.9.2

    Très bel habillage, minimaliste comme j’aime bien.

    Pour l’image de fonds on en trouvait sur http://www.squidfingers.com/patterns/ mais c’est fermé pour le moment.

    Merci a toi pour le toujours_paragrapher qui va me rendre bien des services.

  • Le 8 mars 2007 à 15:19, par Nicolas Hoizey En réponse à : Mon nouveau site en SPIP 1.9.2

    Félicitation, ce nouveau site est une pure merveille très lisible et au graphisme léger ! J’adore moi aussi le design de Veerle, je pensais justement m’en inspirer pour refondre un jour mon site.

  • Le 10 mars 2007 à 08:58, par Stéphane Deschamps En réponse à : Amusant les titres de formulaires cachés :)

    Sur toujours_paragraphe, c’est vrai que c’est une bonne idée que j’apprends ici.

    Pour ma part je m’étais enquiquiné depuis quelques versions de SPIP à écrire mes filtres en sortie pour justement tester ça histoire de m’acharner à être valide XHTML.

    Bon, il va falloir que je prenne du temps pour regarder la 1.9.2, même si mon petit doigt me dit que j’en entendrai parler bientôt pour un aute projet ;)

  • Le 10 mars 2007 à 09:12, par Stéphane Deschamps En réponse à : Mon nouveau site en SPIP 1.9.2

    J’oubliais : il manque un RSS pour suivre les commentaires... pense à ceux qui sont très mobiles et qui lisent 90% hors-ligne ;)

  • Le 10 mars 2007 à 10:38, par Vinch En réponse à : Mon nouveau site en SPIP 1.9.2

    Bravo ! Très réussi ! Moi aussi j’adore le motif de fond des commentaires...

  • Le 12 mars 2007 à 00:26, par Igor En réponse à : Mon nouveau site en SPIP 1.9.2

    Bon, il va falloir que je prenne du temps pour regarder la 1.9.2, meme si mon petit doigt me dit que j’en entendrai parler bientot pour un aute projet ;)

    En regardant bien les nouveautes de 1.9.2 il y a meme un filtre qui fait ca ;-), par exemple : [(#DESCRIPTIF|paragrapher)]

  • Le 14 mars 2007 à 17:25, par valery En réponse à : Mon nouveau site en SPIP 1.9.2

    Très beau travail qui donne envie de se replonger dans les anciens billets !

  • Le 21 mars 2007 à 23:17, par comradE Ogilvy En réponse à : Mon nouveau site en SPIP 1.9.2

    Encore une fois chapeau bas a la tete a tetue !

  • Le 4 janvier 2008 à 16:00, par didier En réponse à : Mon nouveau site en SPIP 1.9.2

    bravo j’aime bien ton site il fait retro et j’aimerais bien animer le mien mais je suis encore novice en la matiere et j’aimerais que vous m’aidiez.

  • Le 4 janvier 2008 à 18:13, par Romy Têtue En réponse à : Mon nouveau site en SPIP 1.9.2

    Pour répondre à Didier : Les squelettes de ce site ne sont pas distribués, contrairement à ceux présentés dans la rubrique dédiée de SPIP-Contrib : « Squelettes complets ».

    Pour obtenir de l’aide, voyez plutôt du côté des nombreux et dynamiques espaces d’entre-aide de SPIP.

Répondre à cet article

Qui êtes-vous ?

Pour afficher votre trombine avec votre message, enregistrez-la d’abord sur gravatar.com (gratuit et indolore) et n’oubliez pas d’indiquer votre adresse e-mail ici.

Ajoutez votre commentaire ici
  • Ce formulaire accepte les raccourcis SPIP [->url] {{gras}} {italique} <quote> <code> et le code HTML <q> <del> <ins>. Pour créer des paragraphes, laissez simplement des lignes vides.

Suivre les commentaires : RSS 2.0 | Atom