Refonte de BrieF'R Formation, RÖCSSTI en version Sass

Refonte de BrieF'R Formation, RÖCSSTI en version Sass (le 28 septembre 2013)

J'ai eu le plaisir de refondre un site conséquent, à savoir le site de BrieF'R Formations, un institut international de formations en Coaching, PNL, Hypnose ericksonienne, etc. basé à Genève.

J'avais réalisé le précédent site à grands coups de XHTML il y a 4 ans. Le nouveau site a d'ailleurs bénéficié de ce travail : toute l'administration du site a pu être reprise telle quelle. Le grand avantage de gérer une activité au lieu de gérer des pages.

Mais ce n'est bien évidemment pas de cela dont je veux parler : c'est la première réalisation conséquente à bénéficier de RÖCSSTI en version Sass, autrement dit mon micro-framework CSS propulsé par le pré-processeur Sass.

Je pourrais mentionner les variables qui apportent un certain côté pratique, mais ce n'est vraiment pas le point le plus important, même si ce dernier est agréable.

Les extend et les classes utilitaires

Le gros avantage des classes utilitaires de mon micro-framework combiné aux extend de Sass est le suivant : on peut construire ses classes avec ces briques élémentaires, le tout de manière très simple. Exemple :

.maClasse {
@extend .w10;
@extend .redborder;
}

Ce qui donnera :

.w10, .maClasse {
width: 10%;
}
.redborder, .maClasse {
border: 1px solid red;
}

Charger la structure ou la CSS ?

À très grosse échelle, cela peut permettre d'économiser sur les déclarations et de factoriser de manière redoutable. Autre conséquence, l'intégrateur a le choix de reporter la complexité des classes soit sur la CSS soit sur la structure HTML (p class="w10 redborder" peut se voir remplacé par p class="maClasse").

Encore un super-pouvoir de l'intégrateur : en faisant ainsi, il décidera de qui aura le plus les mains libres, la personnne qui gère la structure ou celle qui gère la CSS. Les fans des classes sémantiques y trouveront leur compte également.

La cohérence du projet

Globalement, le projet peut bénéficier d'une meilleure cohérence via les @extend et autres variables. Le graphisme ayant été particulièrement bien pensé par la graphiste (quasiment réalisé sans aucune image, un bonheur en CSS), l'intégration n'en a été que plus aisée.

Par contre, Sass ne fera pas de miracle si votre projet n'a pas de forte cohérence à la base.

La sensation que j'en tire est l'impression de mieux maitriser l'évolution du site. Encore une fois, maîtriser CSS vous fera apprécier d'utiliser les pré-processeurs , mais utiliser les pré-processeurs ne vous fera pas maîtriser CSS.

Retour sur le projet proprement dit

Performances web

Sur cette refonte, je dois reconnaître que Sass allié à RÖCSSTI m'ont apporté une certaine puissance et un côté pratique, c'est le premier projet où j'utilise autant le display:table, qui se dégrade plutôt bien sur le vieil IE7, le concept de dégradation gracieuse prenant réellement tout son sens. Encore une fois, le graphisme ayant été bien pensé, j'arrive à des résultats assez impressionnants : la page d'accueil pèse 146 petits ko (jQuery et utilisation de data-uri compris), et se charge en moins de 2 secondes sur un navigateur comme Firefox. Je ne parle même pas d'une seconde vue qui se fait en moins d'une seconde. La CSS minifiée et compressée (avec des data-uri dedans) ne pèse que 21 ko, ce qui reste très raisonnable.

Autrement dit, question rapidité, même si l'ancienne version était plutôt rapide, la nouvelle version la bat à plates coutures. Ajoutons que le nouveau design est beaucoup plus clair, aéré, et, disons-le clairement, cela fait du bien.

Le diable se cache dans les détails

De petits détails agréables : si vous naviguez dans une sous-navigation, vous aurez noté que le lien n'est pas juste situé sur le texte, mais sur toute la cellule qui l'entoure, comme illustré par la capture d'écran ci-dessous.

Lien survolé sur une cellule complète

Avouez quand même que c'est bien agréable, pas besoin de viser le texte uniquement pour naviguer !

Sinon question « bricoles au passage », le logo en SVG, l'utilisation des micro-datas sur le pied de page, l'amélioration discrète de l'accessibilité de l'ancienne version, etc.

Pas responsive, quoi que…

Dommage, le site n'a pas été demandé en responsive. Ceci dit, si cela devait venir, le site n'aurait pas de contre-indication pour le devenir, étant bâti en largeur relative et étant plutôt léger au chargement. Coquin de sort, même si aucune optimisation particulière n'a été prévue pour tablette, ce dernier fonctionne parfaitement sur iPad par exemple.

Ce tour de magie est possible grâce… à la non-utilisation de la balise viewport. En fait, l'iPad adapte le site en conséquence, et cette adaptation automatique se passe très bien, autant en portrait qu'en paysage.

Un peu d'OpQuast Desktop

Afin de peaufiner même si j'ai eu peu de temps, j'ai fait quelques vérifications avec l'extension Firefox Opquast Desktop. Cela m'a permis de corriger quelques menus oublis qu'il aurait été bien dommage de laisser passer.

Au final, il n'y a que 13 points signalés, et la plupart d'entre eux ne sont pas des erreurs à proprement parler. Vu le nombre de tests, c'est plutôt un bon signe.

En tout cas, c'est toujours un outil à garder dans sa trousse !

En conclusion

J'ai toujours un petit coup de coeur pour ce site, j'avais déjà énormément travaillé dessus il y a 4 ans, et le refondre ainsi en ayant l'oppurtunité de revenir à son travail d'il y a quelques années est une opportunité intéressante :

  • Je mesure le chemin parcouru, immense en 4 ans ;
  • Je suis encore plus convaincu que l'engagement sur la qualité d'un site et le retour sur investissement est sur du long terme ;
  • Et que de bonheur de continuer un chemin commencé avec une femme d'exception, même si le chemin se continue autrement.

C'est particulièrement agréable de voir l'évolution d'un site sur plus de 5 ans, on la voit aussi via les personnes, mais cela, c'est une toute autre histoire…

Permalien :

Flux RSS des commentaires de ce billet : https://www.nicolas-hoffmann.net/rss/commentaires.php?id_news=1588

2 commentaires

Posté par ReBleach le 28/09/2013 à 22:51:47
Bel article. Je me pose une question, c'est bien beau le extend, mais admettons que quelqu'un reprenne le site un jour, l'ajout de .maclasse partout dans le CSS le rend difficile à maintenir (je parle si quelqu'un reprend le site sans pré-precesseur). Rien ne dit que dans 2 ans un nouveau pre-processeur non rétro-compatible ne va pas sortir et faire de SASS un outil obsolète que personne n'utilise. C'est dans ce cas de figure que je m'interroge sur Extend et SASS.

Qu'en penses-tu ? Sinon pour ton chef d'œuvre c'est sympa, ça fonctionne effectivement bien sur iPad.

Peux-tu faire un petit retour de ton expérience sur l'utilisation du display table ? Je trouve que souvy ça surcharge un peu le DOM puisqu'il faut ajouter un élément en display table-row (à moins que je sois passé à côté d'un truc).

Merci pour cet article, encore une fois très intéressant.
Posté par Nico le 29/09/2013 à 9:38:09
Sass ne fait jamais que générer de la CSS, certes ce sera plus facile de le reprendre avec Sass (mais c'est le lot de tout intermédiaire), mais ça peut être repris en CSS.

Vise la CSS générée :
http://www.pnlcoach.com/layout/css/styles.css
depuis
http://www.pnlcoach.com/layout/css/styles.scss

(celle en prod est minifiée)

Je ne fais qu'utiliser quelques fonctions (rythme vertical, extend, qq mixins et variables etc.) qui peuvent être faites sans Sass (c'est très proche de RÖCSSTI en version CSS : un bon éditeur de code permet de faire les 9/10èmes de ce que j'ai fait).

Je ris même doucement quand on me montre certains exemples genre "vous avez vu comment on factorise avec Sass"… oui t'es gentil, si tu ne faisais pas déjà ça avec CSS, retourne apprendre les bases.

Quand au display: table, il permet justement d'éviter certains hacks un peu laborieux, typiquement, le layout en 2 vraies colonnes se fait avec du code assez naturel. Les positionnements sont vraiment simples.

Par contre, je n'utilise que display: table sur le conteneur et display: table-cell sur les colonnes.

Ajouter un commentaire









L'option « Se souvenir de mes informations » utilise un cookie, elle ne sera pas effective si vous les avez désactivés.

Les balises HTML ne seront pas interprétées, il est donc inutile d'en mettre. Par contre, les sauts de lignes de votre commentaire seront pris en compte, ne mettez donc pas de <br />, le site s'en chargera. Bien sûr, un commentaire vide ne sera pas ajouté !

L'auteur (autrement dit moi) n'est pas responsable des éventuelles fautes d'orthographe dans les commentaires.
Tout propos raciste et/ou insultant sera supprimé sans préavis. Les commentaires hors de propos destinés à faire de la pub pour des sites seront également supprimés sans ménagement.

Je vous prie de me pardonner, j'ai énormément de mal à lire le "langage" SMS, il n'est donc pas du tout interdit de s'abstenir de l'utiliser. Qui plus est, vous avez sûrement un clavier digne de ce nom et pas celui d'un téléphone portable. Ne vous gênez pas pour utiliser l'option "Prévisualiser" si vous voulez vous relire avant de poster, je vous en remercie d'avance !

Cet article a été écrit par Nicolas Hoffmann.

Ce site est la propriété de Nicolas Hoffmann.
Tous droits réservés, les textes du blog sont publiés sous licence CC BY-NC-SA.