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