Pour ceux que ça pourrait intéresser, Pixelyzed.com en est maintenant à sa 6e itération majeure, mais la première avec une version française. Le site est passé par plusieurs phases à travers les années suivant l’évolution de mes intérêts et de mon expertise. Le site est propulsé par WordPress depuis avril 2010. Voici un aperçu des outils et éléments qui ont été utilisés pour bâtir ce site. Ils ont changé beaucoup dans les 2 dernières années.
Comment Pixelyzed.com a-t-il été conçu et bâti
La facture graphique de l’itération actuelle est une évolution du design original qui avait été créée avec Adobe Fireworks et Illustrator. Le visuel ne provient pas d’un thème WordPress ou d’un gabarit préconçu.
Depuis la version actuelle (6.0), Pixelyzed.com est propulsé par le thème GeneratePress (Premium). Tout codage personnalisé (CSS, PHP) a été écrit dans l’application PHPStorm. Le visuel est une évolution en simplification de la version précédente qui était propulsée par le “framework” de thème Genesis de StudioPress mais avec un thème de couleurs très différent.
Pour ce qui est de la typographie, les polices utilisées ont été réduites à une seule: Maven Pro (Google Fonts). C’est probablement ma police favorite qui a jamais été utilisée sur le site. Je l’ai choisie pour sa grande lisibilité et j’ai toujours aimé les polices aux formes arrondies de type “humanistes”. Le logo a aussi été simplifié. Le thème de couleurs est le même que la version précédente qui était basée sur des photographies de ciels d’automne que j’avais prises à l’automne 2004. Ces photographies ont été utilisées sur le site pendant longtemps, mais ont été retirées de cette version pour remettre l’accent exclusivement sur le contenu technique du site.
Pixelyzed.com est maintenant bilingue !
Le plus gros changement de cette version du site est que je l’ai finalement rendu bilingue. Le contenu du site fut publié exclusivement en anglais depuis 2005 mais, la version 6.0 introduit une version française où je publierai la traduction de tout nouveau contenu. Elle contient aussi des traductions de certains de mes articles passés que j’ai jugé toujours pertinents et adaptés au public francophone du Québec et de la communauté WordPress francophone. Comme je le fais avec tous les sites clients bilingues ou multilingues de mon agence, le bilinguisme de ce site est géré à l’aide de la fonctionnalité multisite de WordPress plutôt qu’une extension comme WPML. Pour moi, c’est de loin la façon la plus simple de monter des sites WordPress multilingues comme l’interface d’administration demeure 100% native sauf pour l’ajout d’une simple extension gratuite qui ajoute une seule boite supplémentaire dans les écrans d’édition d’articles et de pages pour sélectionne les pages et articles correspondants dans les sites d’autres langues sur le réseau multisite.
Cette solution offre, selon mon expérience, le moins de possibilités de conflits et de problèmes techniques possible en comparaison avec les extensions habituelles, mais surtout, une séparation canonique absolue des contenus (très important pour le SEO). Elle améliore aussi la performance du site comme les contenus de différentes langues sont stockés dans des tableaux de base de données séparés (par site sur le réseau multisite) plutôt que de laisser les contenus de toutes les langues pêles mêles dans un seul tableau “wp_posts”/”wp_postmeta” unique créant ainsi une masse quasi inextricable de contenus de laquelle il est très difficile d’extraire les contenus d’une langue spécifique. Avec le multisite, tous les contenus demeurent complètement séparés et gérables séparément très facilement, et ceci dans l’interface native de WordPress et non des interfaces de traduction alambiquées et souvent incomplètes si l’extension multilingue utilisée ne supporte pas une composante utilisée dans le site. Ceci a un impact réel dans notre entreprise comme ça simplifie grandement la formation de nos clients pour l’utilisation de leurs sites et la gestion continue de leurs contenus.
La petite histoire de Pixelyzed.com
Ce site est passé par plusieurs transformations depuis sa mise en ligne en décembre 2005. Je n’ai malheureusement pas gardé de captures d’écran des versions précédentes mais la version 1.0 a été en ligne très longtemps et elle avait reçu plusieurs accolades. Elle était de son temps avec des polices de type “pixel fonts” et un look en blocs. J’en garde un très bon souvenir mais j’ai retiré ce visuel lorsque le site a été converti à WordPress en avril 2010. Ce site me sert aussi souvent de lieu de tests pour de nouveaux thèmes ou extensions et c’est souvent ce qui a motivé une nouvelle version.
La version 2.0 sous WordPress était transitoire et il ya eu 4 versions distinctes si je tiens compte des 2 thèmes préconçus gratuits que j’ai utilisés immédiatement après la transition vers WordPress. J’avais décidé de les utiliser plutôt qu’un visuel personnalisé pendant mon apprentissage initial de WordPress. Ces versions seraient comme la version 2.0 “beta”. La première version 2.0 véritable utilisait le thème “Thesis” au début et je l’ai converti au thème “Headway” peu après avec quelques ajustements visuels mineurs. Mais la version 2.0 fut en ligne beaucoup trop longtemps et je n’ai jamais été satisfait d’aucune de ses itérations visuelles qui remplaçaient le visuel de la version 1.0. Mais mon travail avec mes clients avait préséance et la version 2.0 est restée en ligne telle quelle.
La version 3.0 a été lancée en juin 2011. Je suis finalement arrivé à un nouveau visuel qui me plaisait et c’est devenu la version 3.0. Elle était propulsée par le thème “Headway” après un court retour vers “Thesis” pour la version 2.0b. La version 3.0 fut surtout un exercice de simplification de la mise en page qui s’est poursuivi avec la version 4.0 qui était propulsée par le thème Canvas de WooThemes.
La version 4.0 fut aussi plutôt transitoire. Je m’éloignais des thèmes “Headway” et “Thesis” pour plusieurs raisons et le thème WooThemes Canvas a été une solution temporaire jusqu’à ce que je trouve un autre framework de thème pour mon entreprise. Cette solution était iThemes Builder que j’ai utilisé pour des sites clients pendant près de 2 ans mais il n’a jamais été utilisé ici sur Pixelyzed.com. Canvas est demeuré en place jusqu’à ce que je change de framework de thème à nouveau à la mi-2013.
La version 5.0 de ce site était un nouveau visuel de mon cru dont le thème de couleurs était un rappel de la version 1.0 et était montée sous le thème Genesis. J’ai utilisé le framework de thème Genesis exclusivement pour ce site et dans mon entreprise de la mi-2013 jusqu’au début 2018. La version 5.0 a été stable avec peu de changements visuels ou technologiques et elle m’a permis de me concentrer sur l’écriture d’articles quand j’avais du temps à consacrer à ce site.
Mais les besoins de notre agence et de ses clients m’ont poussé à chercher d’autres solutions de thèmes parents ou thèmes-cadres (theme frameworks). Au départ, je voulais simplement voir s’il y avait des alternatives à Genesis que j’aurais pu utiliser à sa place si genesis ne faisait plus l’affaire pour nous. C’était une simple question de ne pas mettre tous nos oeufs dans le même panier… Genesis est toujours un thème très solide et puissant mais notre équipe grandit et je voulais trouver une solution qui facilite l’intégration de nouveaux membres à notre équipe d’intégration et leur faciliter l’apprentissage de nos processus. Je voulais aussi trouver une solution qui nous permette d’intégrer, modifier et évoluer le visuel de sites clients plus rapidement sans toujours devoir coder des accroches et filtres PHP (hooks and filters) ou modifier du code CSS. Je voulais aussi qu’il travaille plus étroitement avec les constructeurs de pages et maintenant Gutenberg sans devoir requérir à des extensions ou à la création de code spécial. De plus, je voulais un thème qui serait plus facile à maintenir à long terme comme, par exemple, à la sortie de l’éditeur Gutenberg, il est devenu très clair que les thèmes-enfants de Genesis ne sont pas aussi stables sans besoin de mises à jour que StudioPress l’a prétendu pendant longtemps. Le nôtre aurait requis beaucoup de travail de réécriture pour supporter Gutenberg et les changements au thème Genesis.
Donc, GeneratePress fut intégré à notre coffre d’outils tôt en 2018 et il livre la marchandise encore mieux que je le prévoyais. GeneratePress est tout aussi puissant et flexible que Genesis pour les développeurs et beaucoup plus facile à travailler pour les utilisateurs moins techniques. Mais pour moi ça voulait aussi dire qu’il est beaucoup plus rapide et simple d’évoluer un visuel directement sur le site que nous le pouvions avec Genesis (surtout en combinaison avec GenerateBlocks Pro). Les thèmes-enfants sont aussi plus légers et auront rarement ou jamais besoin d’être mis à jour. Les thèmes-enfants de Genesis font une plus grande partie du travail comme Genesis lui-même est beaucoup plus dépouillé au niveau fonctionnel et l’ajout de nouvelles fonctionnalités de WordPress comme Gutenberg requiert que le support de cette fonctionnalité soit ajouté au thème-enfant plutôt que de pouvoir se fier au thème parent. Juste cet état de fait m’a forcé à repenser mon utilisation exclusive de Genesis pour les clients de mon agence et nous n’avons pas démarré un nouveau projet avec Genesis depuis le début 2018. Avec GeneratePress, les nouvelles fonctionnalités majeures proviennent du thème-parent (comme le support de Gutenberg) et ces nouvelles fonctionnalités sont ajoutées sans briser les sites existants ou requérir de modifications à nos thèmes-enfant.
Durant l’année 2021, j’ai aussi commencé à utiliser l’éditeur de blocs natif de WordPress Gutenberg et l’extension GenerateBlocks (Pro) a ainsi été ajouté à notre coffre d’outils avec le support occasionel de Kadence Blocks ou Stackable.
La version 6.0 actuelle de Pixelyzed.com est donc propulsée par GeneratePress (Premium). Visuellement, c’est un changement assez important en comparaison de la version 5.0 mais avec une typographie et une mise en page simplifiées, un meilleur rendu sur mobile et une meilleure expérience utilisateur (UX). Les modifications visuelles incluent le retrait des images de fond pleines pages, une palette de couleurs réduite, la taille de police de corps de texte augmentée et une conception des éléments visuels encore plus simplifiée que la version 5.0 sans dégradés, ombres portées ou coins arrondis.
Sous le capot du côté fonctionnel, c’est un autre pas en avant sur la version précédente. GeneratePress rend les modifications au site plus faciles et apporte des fonctionnalités plus modernes que le thème-enfant Dynamik de Genesis que j’utilisais pour la version 5.0. Celles-ci incluent la possibilité de rendre l’entête fixe, un meilleur contrôle centralisé des “hooks” et un meilleur support des constructeurs de pages. Malgré tout ceci, GeneratePress parvient à être encore plus léger sur les ressources que le combo Genesis/Dynamik ne l’était. Ses nombreux contrôles visuels sont intégrés directement au “Customizer” de WordPress ce qui permet de voir les changements directement sur la page. GeneratePress supporte aussi nativement WooCommerce mieux que Genesis (et sans avoir à recourir à une extension de “connexion” spéciale) ce qui est important pour moi comme je veux vendre des ressources plus avancées sur ce site éventuellement…
Je vais continuer à évoluer le site dans les prochains mois mais j’espère que vous allez aimer la version 6.0 de Pixelyzed.com.
Merci beaucoup de votre visite et bonne lecture !