Rafraîchissement CSSR2010 de mon site

Troisième refonte de mon site, à l’occasion du Cascading Style Summer Refresh 2010 !

23 septembre 2010,
par Romy Têtue

Mots-clefs associés à cet article :

Vous n’y verrez peut-être pas grande différence. J’avais envie de simplicité. Pas de grand changement, juste une amélioration de l’existant. Et je voulais surtout me faciliter la maintenance évolutive. Avoir un site, c’est bien, mais c’est drôlement chronophage : j’espère réduire les interventions techniques pour n’avoir plus à me préoccuper que d’éditorial. Publier sur le Web, c’est le but, non ?

Pour commencer, j’avais depuis longtemps envie d’améliorer le confort de lecture de l’ensemble de mon site. Trop de textes sont difficiles à lire de part le Web, parce que trop petits, vraies chiures de mouches. Pour m’y opposer, j’aurais aimé oser afficher le texte au naturel, à la taille par défaut de vos navigateurs (comme venté dans cet article : Lisibilité des sites web, font-size : 100% – 16px), mais après plusieurs longs essais je n’ai fait qu’augmenter un peu la taille de typo et surtout l’interlignage, passant d’une base de 0.76em/1.4em (soit 12.1667px) à 0.8125em/1.8em (soit 13px). Est-ce suffisamment lisible pour vous ?

Par contre, contrairement à la tendance actuelle, pas de police fantaisiste, pour diverses raisons, pas seulement perfo. En tant qu’utilisatrice du Web, je déteste tellement ne pas pouvoir copier-coller un titre (quand c’est une image typo), que je suis devenue allergique aux polices exotiques. J’ai failli me laisser séduire par les webfonts de google mais elles ont des hauteurs d’x inférieures à mes choix initiaux, ce qui réclamait de redéfinir toutes les tailles de texte, et leur chargement après affichage de la page est d’un effet désastreux. Finalement trop attachée à mon couple Lucida Grande et Century Gothic, j’ai longtemps cherché quelles familles déclarer pour essayer de préserver semblable harmonie sur toutes vos configurations, mais sans y arriver complètement. La typographie, ça m’a toujours gonflé.

Tarabustée par l’exaspération exprimée par Gilles Vauvarin lors de sa conférence à ParisWeb 2009 quant au saccage récurrent par les intégrateurs de la grille et en particulier du rythme vertical, je m’y essaye depuis avec entêtement et m’étais mise au défi d’en faire belle démonstration sur mon site perso — à défaut d’autres — puisque j’en maîtrise toute la chaîne de production. Bin... quel enfer ! Je me suis d’abord crue sauvée par Blueprint et sa belle harmonie, plutôt fière de découvrir que ma base typo en était très proche, puis j’ai cherché d’autres frameworks avant de préférer faire moi-même, commençant allègrement en em avant de les maudire pour essayer en pixels, et finalement faire le compromis de laisser les choses vivre leur vie, approximativement. Et je trouve que ça a déjà bien assez de gueule.

Grille spécifiquePour me faciliter la vie, j’ai voulu adopter une grille. J’ai essayé ooCSS, 960 Grid System et d’autres, mais j’étais contrainte par le choix historique d’un modulo de 150px (qui est la taille des vignettes de mes articles). Je me suis finalement fabriqué une grille sur mesure, qui comprend deux modèles de page (et leurs déclinaisons) et inclut la grille d’ooCSS, surchargée de valeurs fixes (bin ouais), ce qui me permet de produire rapidement une série de blocs correctement alignés. C’était le meilleur compromis possible. De cette façon je pourrais facilement introduire de nouvelles pages sans plus avoir à me préoccuper de leur CSS. Super !

J’avais envie de lisibilité, avec de gros boutons bien visibles, des blocs simples, des textes courts et écrits gros. Qu’on puisse y naviguer en cliquant avec ses gros doigts... Envie de pouvoir consulter mon site sur iPhone, mais sans m’encombrer d’une version dédiée. J’ai beaucoup travaillé les liens, qui me semblent trop souvent négligés et j’ai fait le maximum pour que le site soit entièrement et agréablement naviguable au clavier. Ce n’est pas pour l’esbroufe, mais pour les copains qui tabulent et parce que j’en ai marre de la souris qui me bousille le poignet. Ça passe par une gestion franche du focus et un ordre des blocs en cohérence avec leur affichage, quitte à structurer différemment d’un gabarit à l’autre. Au final on tabule plutôt bien, mais le code n’est pas idéalement mutualisé(sable).

Style des différents états des liens

Côté CMS, je suis très tentée par WordPress pour son confort d’utilisation et pour ses capacités de diffusion (versions mobiles front et back, microblogging, abonnement courriel aux commentaires, etc.) qui en font un excellent outil de publication, efficace et contemporain, en adéquation avec mon besoin réel sur ce site. J’avais une certaine fainéantise à faire le pas. Un récent script de migration de SPIP vers WP aurait du me rassurer, mais en y regardant de plus près, WP m’a semblé manquer de souplesse en templating et je n’ai pas vu comment garder égale maîtrise de mes feuilles de styles et gabarits de page. La frustration induite n’aurait certes duré qu’un temps court, celui de la refonte de ce site, mais je ne saurais m’y résoudre, habituée que je suis à la grande malléabilité de SPIP. Ce dernier prétend proposer encore mieux avec ZPIP que je n’ai cependant pas mis en œuvre ici parce que sa complexité reste supérieure à l’avantage concrètement apporté. Ma méthode de squeletisation page à page, bien que techniquement perfectible, reste plus pratique — rappelez-moi d’écrire un article documentaire à ce sujet. En résumé, je voudrais les squelettes de SPIP et son métalangage, sans ZPIP, avec l’interface de WordPress et ses fonctionnalités sympas. Je peux rêver ?

Bref, tout cela tend clairement vers le framework, tant CSS, HTML que CMS, même si j’ai encore, sur mon petit site perso, une approche assez artisanale. En perpétuelle refonte, ce site est surtout le prétexte d’expérimentations en situation réelle, et je n’aurai peut-être pas finalisé une version publiable, s’il n’y avait eu le Cascading Style Summer Refresh 2010.

Il faudrait aussi dire que j’ai saupoudré mon site de CSS3 comme on sale son assiette, point trop, que je continue sagement en XHTML 1.0 Strict valide juste par habitude, que j’essaye des métadonnées Dublin Core sur le blog, par curiosité, et... comment dites-vous ? IE6 ? Je n’ai pas eu le courage de déboguer pour ce vieux navigateur qui affiche donc pour le moment un message invitant à mettre à jour, en lieu et place du site. Chose importante : j’ai supprimé les pubs et traqué les scripts qui fliquent l’internaute, comme le fameux bouton « J’aime » de Facebook, bientôt remplacé par un bouton Flattr, car j’avais envie que mon site soit un endroit agréable, pas seulement en apparence.

Vos critiques sont bienvenues pour m’aider à améliorer tout ça !

{#TITRE,#URL_ARTICLE,#INTRODUCTION}

Vos commentaires

  • Le 23 septembre 2010 à 12:47, par Maïeul En réponse à : Rafraîchissement de mon site / CSSR2010

    Honnêtement concernant la taille des textes je le trouvais pas trop petit. Maintenant je les trouves trop grand :)

    Mais on va dire que c’est ma jeunesse qui fait cela.

  • Le 23 septembre 2010 à 14:15, par Pierre Bertet En réponse à : Rafraîchissement de mon site / CSSR2010

    Maïeul : Mais non enfin, la taille des textes est très bien !

    Romy : Je ne sais pas si tu connais cet article sur ALA, je trouve que ce que tu as fait correspond très bien à cette notion de « ré-alignement » : Good Designers Redesign, Great Designers Realign

  • Le 23 septembre 2010 à 16:33, par Philippe En réponse à : Rafraîchissement de mon site / CSSR2010

    Hello
    c’est propre, c’est net, mais je trouve aussi la taille des polices trop petite.

  • Le 23 septembre 2010 à 18:39, par Valéry En réponse à : Rafraîchissement de mon site / CSSR2010

    "En résumé, je voudrais les squelettes de SPIP et son métalangage, sans ZPIP, avec l’interface de WordPress et ses fonctionnalités sympas. Je peux rêver ?"

    On doit pouvoir afficher le contenu des tables WP en installant un SPIP à côté et avec un frontoffice en utilisant le métalangage. J’avais fait l’expérience avec Dotclear : ça fonctionne. Bien prise de tête toutefois... Et on en bénéficie pas des chouettes plugins clés en main non plus.

  • Le 23 septembre 2010 à 20:33, par Pascale En réponse à : Rafraîchissement de mon site / CSSR2010

    Oui, oui, oui... ça le fait bien.
    J’aime bien le petit zest de CSS3, discret mais qui rehausse bien le tout :)

  • Le 24 septembre 2010 à 10:17, par tOnGAs En réponse à : Rafraîchissement de mon site / CSSR2010

    Belle mise à jour, le travail sur la typo et l’interlignage chatouille mon obsession d’avoir des pages lisibles à souhait.
    Par contre, pourquoi choisir une largeur de page de 850px ? Une raison particulière à cela ?

  • Le 24 septembre 2010 à 13:00, par vl En réponse à : Rafraîchissement de mon site / CSSR2010

    une petite coquille ... encoyer par courriel :)

    A part ça, parfait ! Taille des textes nickel ( et qui qu’il en soit le grossissement se fait sans douleur , si besoin.)
    C’est clair, propre, et ça respire ... Il va falloir vraiment que je me décide à me mettre au mien, et voilà qui me motive !

  • Le 24 septembre 2010 à 13:09, par Romy Têtue En réponse à : Rafraîchissement de mon site / CSSR2010

    @vl : hihi, c’est corrigé, merci !

    @tOnGAs : c’est trop large ? trop étroit ? hors norme ? Rien ne déborde pourtant...

    @Pierre Bertet : bien vu pour le « ré-alignement » et merci pour la référence.

    @Philippe : la petitesse du texte gêne-t-elle davantage l’esthétique ou la lisibilité ?

  • Le 24 septembre 2010 à 15:51, par tOnGAs En réponse à : Rafraîchissement de mon site / CSSR2010

    Personnellement, je trouve cela un peu étroit. Avec le temps, le bruit de grat-grat que fait la molette de ma souris - lorsque je fais défiler la page pour lire le contenu - devient de plus en plus horripilant.

    Tu parlais de frameworks css. Les rares que je connais (Blueprint, 960.gs) proposent des largeurs > 900px, si je me souviens bien ?

    Bon, c’est vrai que j’utilise rarement des résolutions d’écran inférieures à 1280x1024, alors je ne suis probablement pas un référence.

  • Le 27 septembre 2010 à 02:14, par bruno bichet En réponse à : Rafraîchissement de mon site / CSSR2010

    Salut Romy,

    Tu as bien fait d’augmenter la taille du texte : 13px est un bon début, mais n’hésite pas à tester avec 87.5% (14px), ça donne de bons résultats également. De toutes manières, l’essentiel est que ça soit lisible à la base et que l’on puisse agrandir la taille du texte sans tout casser ;)

    Pour ce qui est des polices « fantaisistes », j’ai fais la même chose sur css4design, mais avec le recul, je me dis qu’il existe des solutions comme typekit qui proposent des polices de qualité et les moyens de les incorporer facilement.

  • Le 28 septembre 2010 à 10:57, par Nicolas Hoizey En réponse à : Rafraîchissement de mon site / CSSR2010

    Très joli rafraichissement !

    Je trouve juste la police encore trop petite par défaut, mais l’agrandir ne casse presque rien (juste le bloc « Derniers articles » du pied), donc c’est parfait !

  • Le 28 septembre 2010 à 14:50, par Vincent En réponse à : Rafraîchissement de mon site / CSSR2010

    Tester 14 px pourquoi pas oui. En tout cas ton interlignage rend la lecture très agréable.

  • Le 29 septembre 2010 à 14:59, par Pascale En réponse à : Rafraîchissement de mon site / CSSR2010

    Romy y’a un petit bug sur ton form de commentaires qui n’existait pas au début : tous les champs se recouvrent !! tu as modifié qq chose ?

  • Le 29 septembre 2010 à 16:06, par Romy Têtue En réponse à : Rafraîchissement de mon site / CSSR2010

    Grml, satanés formulaires ! J’ai corrigé les petits défauts signalés ici ou et une de mes améliorations pour IE7 cassait ce formulaire sous FF/Win... Comme quoi, il faut toujours bien vérifier dans tous les navigateurs :-P

    Merci de l’avoir signalé, c’est désormais rétabli ;-)

  • Le 12 octobre 2010 à 15:25, par Romy Têtue En réponse à : Rafraîchissement CSSR2010 de mon site

    Le concours CSSR2010 est terminé et les trois premiers sites du classement sont Juslisen, Yokel’s world et Weasy Life. Bravo !

    Merci encore pour vos commentaires éclairés, ici mais aussi sur Alsacréations, qui encouragent à faire encore mieux.

  • Le 5 novembre 2010 à 09:53, par Nicolas Hoizey En réponse à : Zapper les squelettes par défaut de SPIP

    Romy, quelques remarques un peu hors sujet :

    • le cadre noir autour d’un champ de formulaire au hover c’est pas top, quand on a aussi le même cadre sur un autre champ qui a le focus
    • le flux RSS de suivi des commentaires a le même titre sur tous les items, pas très pratique

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
  • Raccourcis : {{gras}} {italique} -liste [bla->url] <q> <quote> <code>.

Suivre les commentaires : RSS 2.0 | Atom