nota-bene.org > Sur le web > Version 6

Version 6

À propos de cet article

Un article de Stéphane

Publié le 3 mars 2012

URL courte : http://nota-bene.org/880

5 commentaires

Une liste d’évolutions entre la version 5 et la version 6 de ce site. On ne documente pas assez les migrations techniques, et l’influence des redesigns sur les données qui sont cachées derrière. Lecteur non technophile, passe ton chemin !

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à sourire

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é.


Notes

[1Pas bête, hein ?

[2J’allais dire « comme moi » mais l’ironie passe mal à l’écrit, j’entends d’ici les commentaires désobligeants... clin d'œil


Commentaires

  • Ben

    • 3 mars 2012

    "La notion de brève obsolète dans SPIP3" hum cela sort d où cette histoire ?

    Répondre à Ben

    • 3 mars 2012

    Il faut faire attention avec l’utilisation de Modernizr pour gérer les fontface : ça induit mécaniquement un temps pour l’utilisation de la police, vu que ça doit attendre que Modernizr ait bossé et ait ajouté la classe.

    Et ça va sans doute faire en plus un reflow dans ta face pour la peine sourire

    Pourquoi ne pas définir ta police comme étant une police italique (le font-weight dans le @font-face), ça te permettrait d’avoir une seule règle CSS. Et en même temps, ça ajouterait de l’eau à mon moulin que Modernizr n’est que rarement utile (même s’il l’est parfois, je l’admets).

    Répondre à Juju

    • 3 mars 2012
    • en réponse à Ben

    Ben : bon, c’est pluginisé, disons.

    Répondre à Stéphane

    • 4 mars 2012

    Mmmmh... c’est marrant mais je ne comprend absolument pas pourquoi tu utilises Modernizr pour conditionner l’utilisation de tes font-face. A part te faire plaisir pour le fun, objectivement, ça ne sert à rien du tout.

    De deux chose l’une : soit tu as tes styles appliqués et dans ce cas, à quoi bon tester le support de @font-face vu que tout les navigateurs sans exception le supporte. Soit tu n’as pas de styles appliqués et dans ce cas, la question ne se pose pas car même font-style sera ignoré.

    Le seul cas ou cela pourrait avoir du sens ce serait si tu avait du style appliqué mais que tes fontes ne soit pas chargées. Or, dans ce cas, Modernizr ne sait pas faire cette distinction.

    Si tu veux vraiment éviter ce cas de figure, tu ferais mieux de te tourner vers WebFont Loader qui est fait exactement pour cela clin d'œil

    Répondre à Jérémie

  • Jérémie : En fait tu as complètement raison. sourire

    Je viens de virer Modernizr et de suppprimer toutes les règles alambiquées à base de .fontface.

    Sans pouvoir expliquer pourquoi, je continuais à penser que tous les navigateurs ne supportaient pas @font-face au lieu d’aller vérifier sur When can I use font-face. Merci de l’avoir relevé.

    Répondre à Stéphane

Qui êtes-vous ?
Votre message
  • Pour créer des paragraphes, laissez simplement des lignes vides. Tous les liens sortants comporteront un attribut rel="nofollow". Merci de ne pas spammer.

Ceci est la version Bureau Afficher la version Mobile