Megaptery version 5 : la baleine se paye une refonte technique

6 avril 2014

Megaptery.com sort la cinquième version de son propre thème WordPress avec une refonte technique conséquente. Pourquoi une mise à jour ? Principalement pour gagner en performance et en maintenabilité avec des technologies fiables et matures : Foundation, Sass (Compass) et Grunt.

megaptery_refonte_v5

Foundation pour sa grille responsive

Tout d’abord, j’ai migré sur la version 5 du framework Foundation (l’ancien thème utilisant la version 3), un outil que j’affectionne particulièrement qui permet de bénéficier d’une base solide pour la structure du template, notamment la grille et les media queries. J’ai opté pour une version « light » en utilisant uniquement les composants grid, forms et typography.

J’ai d’ailleurs testé une nouveauté puissante issue du composant grid de la version 5 : les « block grids ». Par exemple, il vous suffit d’indiquer à un ul par des classes qu’il doit afficher 4 éléments par ligne sur un grand écran, 3 sur un écran intermédiaire, et seulement 2 sur smartphone, et les li se mettront en place tout seul, avec la taille adéquate, sans besoin de CSS supplémentaire.

foundation5

Foundation, le meilleur framework front-end du monde

Sass (Compass) pour des CSS maintenables

Je suis tout naturellement passé au couple Sass / Compass, deux outils que j’utilise au quotidien et qui m’apportent un confort de travail considérable. Pour résumer, Sass est une « extension » CSS3, un méta-langage utilisé pour générer des feuilles de style ajoutant de nouvelles règles dans la façon d’intégrer : héritage de sélection, variables, ou encore mixins.

Ainsi, Megaptery est découpé en plusieurs fichiers .scss qui structurent le thème (header, sidebar, article, etc) et utilisent des variables définissant les principales couleurs, les polices et certaines images. Le maître-mot : la maintenabilité.

sass

« Avant, j’étais nul en CSS. Mais ça, c’était avant. »

Compass est un framework CSS3 pour Sass, autrement dit une collection de mixins qui rendent l’utilisation de CSS3 facile d’accès. Je m’en suis donc servi pour toutes les propriétés CSS3 utilisées (transition, radius, shadow, opacity, etc), ainsi que pour la génération automatique d’un sprite CSS. Fini la prise de tête avec les préfixes « propriétaires ».

compass

Compass, pour ne pas perdre le Nord

Grunt pour automatiser les tâches

J’ai utilisé le task runner JavaScript Grunt qui permet d’automatiser des tâches répétitives via des modules Node.js, en l’occurence contrib-compass pour bénéficier du framework Compass, contrib-cssmin pour fusionner et compresser les fichiers CSS, contrib-uglify pour concaténer et minifier les fichiers JS, contrib-imagemin pour compresser les images et contrib-watch pour exécuter des tâches lorsque des fichiers sont modifiés.

Ces cinq modules, développés par l’équipe de Grunt, m’ont permis d’obtenir un résultat plutôt satisfaisant ; le site fait désormais appel à deux fichiers minifiés au lieu d’une quinzaine : une feuille de style contenant toutes les CSS (y compris ceux des plugins jQuery) et un fichier JS contenant jQuery et ses plugins.

grunt

Grunt, le phacochère qui vous veut du bien

Et d’autres petits trucs…

Le logo a subi une légère retouche graphique avec une baleine à bosse plus « épaissie » et un changement de police, passant de Lobster à Express. L’ensemble des fichiers favicon a été généré avec le service Real Favicon Generator et la page 404, elle, a simplement été traduite en français.

La typograhie a été mise à jour avec du Open Sans pour le corps du texte, quant aux titres, ils restent en Oswald ; les deux polices sont utilisées via Google Fonts. J’en ai aussi profité pour mettre en place une police d’icônes, à savoir IcoMoon, pour remplacer le sprite d’icônes des réseaux sociaux, du bouton de recherche et des informations complémentaires d’un article (date de publication, catégorie, etc).

Conclusion et remerciements

Pour conclure, le trio Foundation / Sass (Compass) / Grunt m’a permis d’obtenir un thème WordPress plus optimisé et plus maintenable, tout en réduisant considérablement le nombre de requêtes effectuées. Cela se traduit sur les performances du site qui a gagné quelques points au Page Speed de Google, même si la mise en cache est encore à travailler.

La suite ? Pourquoi pas tester le task runner Gulp, sérieux concurrent à Grunt, et le gestionnaire de dépendances Bower ; deux outils dont j’entends beaucoup parler en ce moment mais que je n’ai pas encore eu l’occasion d’essayer. En espérant aussi trouver plus de temps pour vous partager davantage de ressources, car c’est avant tout la priorité de ce blog.

Enfin, j’en profite pour remercier tous les lecteurs de Megaptery qui contribuent à la vie du blog de par leurs visites et leurs commentaires. Vous pouvez d’ailleurs suivre Megaptery sur Facebook, Twitter, Google+, ou vous abonner au flux RSS. Si vous avez des remarques, suggestions ou retours de bugs sur cette nouvelle version, n’hésitez pas à m’en faire part dans les commentaires de ce billet.

Commentaires

  • Franchement, génial. Merci pour ton site. N’étant pas dev, je ne comprends pas tout, mais la qualité de la rédaction et la qualité graphique & fonctionnelle de ton site en font un de mes favoris!

  • Il faut essayer yeoman, il y’a des générateurs de projets qui sont très bien foutu pour WordPress, angular JS etc… http://yeoman.io/official-generators.html très bonne article au passage

  • Ronan

    Je découvre le site et c’est d’une qualité exemplaire ! J’ai hâte de le parcourir ;) Bonne continuation

  • Sybio

    Thumb up pour la nouvelle version o/

  • mouton

    bien joué gamin :)

  • Gaby22

    C’est moi ou le menu principal n’est pas responsive contrairement au reste du site ! C’est dommage ça génère une scroll-bar en bas.

    • Bien vu, je corrige ça rapidement ;-)

  • Jean

    Pourquoi ne pas avoir continué dans ta lancé d’optimisation du code en minimisant également le html ?

  • William Krieg

    Excellent site mais peut maintenu a jour dommage