Reconception de StevePavlina.com – Partie 2

Le présent article est le 2^e de la série de 9 articles portant sur la reconception des sites wordpress de StevePavlina.com. (Voir la partie 1 ici)

À la recherche d’idées

Je ne savais pas exactement par où commencer ce projet, mais cela n’a pas été un frein pour moi. Beaucoup de personnes évitent de travailler sur des projets parce qu’ils ne savent pas par où commencer. Lorsque je me retrouve dans cette situation, je commence impulsivement n’importe où. Je suis convaincu que si je prends un mauvais départ, je le découvrirai rapidement, et je pourrai changer de cap. L’important, c’est d’entrer dans le flux de l’action et de s’y maintenir. N’évitez pas ou ne retardez pas la prise d’action simplement parce que vous ne savez pas quoi faire ensuite. Très souvent, les bonnes actions ne deviennent visibles que lorsque vous êtes en mouvement, même si vous vous dirigez dans la mauvaise direction. Il est important de surmonter l’immobilisme. Un projet ou une idée mourra si vous restez assis à beaucoup réfléchir.

J’ai pensé qu’un bon point de départ serait de consulter d’autres sites Web, en particulier les plus populaires dans mon domaine, afin d’avoir des idées. Je me suis dit que peut-être que je trouverais des parties de sites que j’aimerais et que je pourrais semi-modéliser pendant que je reconçois mon propre site.

Le défilement de parallaxe

Cela s’est avéré surtout une perte de temps, du moins en ce qui concerne l’aspect précis qui m’intéressait. Je suis peut-être simplement exigeant, mais je n’ai pas vu grand-chose qui me plaisait lorsque j’ai délibérément essayé de trouver des choses qui me plairaient. Ce que j’ai surtout vu, c’était beaucoup d’encombrement, d’éléments superflus, de publicités, d’interfaces qui portent à confusion et une complexité inutile. J’ai vu beaucoup de fioritures modernes qui allaient bien au-delà de ce que j’avais sur mon ancien site Web, mais j’estimais que ces éléments portaient atteinte à la facilité d’utilisation. En tant que nouveau visiteur d’un site Web, qu’est-ce que le défilement de parallaxe m’apporte ? Cela rend simplement le site plus compliqué qu’il n’a besoin de l’être. C’était intéressant de voir cela les premières fois — Oooh ! Comment ont-ils fait cela ? — mais par la suite, c’est surtout devenu ennuyeux.

D’un autre côté, je pourrais dire que cela s’est révélé être un excellent point de départ, car j’ai eu beaucoup d’inspiration quant à ce qu’il ne faut pas faire. Étant donné que j’avais vu tant de choses que je n’aimais pas, le moins que je pouvais faire, c’est d’éliminer directement ces possibilités. Cela m’a également aidé à perfectionner ma philosophie de conception. Je me suis rendu compte que je voulais un site qui montre un niveau élevé de respect pour les lecteurs et qui est simple, honnête et clair.

Je n’ai pas trouvé un seul site qui m’ait inspiré. J’ai vu des designs vraiment créatifs, mais aucun ne semblait approprié pour mon propre site.

Curieusement, ce n’est que beaucoup plus tard, lorsque j’ai arrêté délibérément d’essayer de chercher des idées inspirantes ailleurs, qu’il m’est arrivé de tomber par hasard sur un site Web qui avait un aspect que j’aimais vraiment.

Mise à niveau de mes connaissances sur WordPress

Une autre mesure vraisemblablement bonne à prendre au début était de mettre à niveau mes connaissances WordPress et de prendre connaissance des dernières fonctionnalités offertes. J’ai commencé à bloguer en octobre 2004 avec WordPress 1.2 qui n’était que la troisième mise à jour de WordPress après la sortie de la version 1.0 en janvier de cette même année. Plusieurs mois avant cela, WordPress n’était disponible qu’en version bêta. Au moment de la rédaction de cet article, WordPress 4.5 venait tout juste de sortir. Vous pouvez voir les dizaines de mises à jour WordPress qui se sont succédé à ce jour sur la page WordPress Releases.

Étant donné que j’ai commencé à utiliser WordPress alors qu’il n’offrait que le strict minium en matière de fonctionnalités, mon site a été initialement conçu pour cette période. Seulement neuf mois séparaient le lancement de la réelle version de WordPress du lancement de mon site. À l’époque, il n’était pas du tout évident que WordPress deviendrait la plateforme extrêmement populaire qu’elle est aujourd’hui, et elle avait aussi de nombreux concurrents. À l’époque, il ne s’agissait pas d’un système de gestion de contenu entièrement développé que vous utiliseriez pour l’ensemble d’un site Web. C’était juste pour le blogging. J’avais la conviction que le blogging allait finir par décoller, mais c’était tout de même risqué de parier que WordPress deviendrait une plateforme stable à long terme.

Le contrôle de WordPress

Par conséquent, à cette époque, je ne voulais pas trop me retrouver dans une forme de dépendance vis-à-vis de WordPress. La version originale de mon site n’était donc que partiellement gérée par WordPress. Ma page d’accueil, ma page « À propos », le formulaire de contact et plusieurs autres pages ont tous été codés à la main en HTML. Elles n’étaient pas du tout gérées par WordPress. Il semble évident, avec le recul, que j’aurais dû mettre le site entier sous le contrôle de WordPress il y a plusieurs années, mais même avec le mélange de contenu géré par WordPress et codé à la main, le site fonctionnait toujours très bien, et c’était toujours plus facile de continuer d’utiliser cette structure plutôt que de la refaire. Bien sûr, chaque pas de plus avec cette formule impliquait qu’il serait plus difficile d’effectuer une refonte complète de la conception.

Au fil du temps, je mettais quelquefois à jour mes connaissances WordPress en apprenant à maitriser de nouvelles fonctionnalités, mais seulement de manière aléatoire. J’ai commencé avec le thème Kubrick en 2004, puis je l’ai personnalisé au fil du temps. C’était un bon thème pour l’époque, mais il lui manquait des fonctionnalités modernes comme un design Web réactif. Je me souviens avoir modifié le thème il y a de nombreuses années juste pour ajouter le support pour widgets.

J’ai compris que mes connaissances sur WordPress étaient devenues obsolètes, et que j’avais besoin de faire une mise à niveau. J’ai donc passé des heures à lire des articles et à naviguer sur WordPress.org pour découvrir les dernières fonctionnalités et m’habituer aux nouvelles possibilités. Je voulais aussi en savoir plus sur l’orientation de WordPress.

Démarrer l’expérience

Je me suis lancé le défi d’essayer d’oublier que je connaissais et utilisais déjà WordPress et d’imaginer que je ne faisais que démarrer l’expérience. Comment pourrais-je utiliser différemment WordPress si je ne bloguais pas déjà depuis 2004 ? Cela m’a mené à certaines conclusions. Par exemple, je devrais mieux profiter des plug-ins disponibles et peut-être même apprendre à écrire mes propres plug-ins. J’ai réfléchi à un certain nombre de fonctionnalités inclus dans WordPress que je devrais vraiment utiliser, mais que je n’ai jamais pris la peine d’intégrer dans mon travail. J’admis que si je faisais vraiment cette reconception de façon intelligente, je devrais aussi changer certaines parties de mon mode de travail, et ne pas seulement me focaliser sur l’aspect du site Web.

J’ai également passé un peu de temps à parcourir le répertoire des plug-ins. Actuellement, il contient plus de 44 000 plug-ins. J’ai jeté un coup d’œil à certains des plug-ins les plus populaires pour me faire une meilleure idée de ce qui était disponible. J’ai commencé à élaborer une liste de plug-ins à essayer plus tard, et j’ai imaginé comment je pourrais utiliser quelques-uns parmi eux sur mon nouveau site.

Udemy sur WordPress

De plus, j’ai suivi un cours Udemy sur WordPress et je l’ai relu en deux jours. C’était un peu basique pour moi, mais cela m’a permis de rafraichir et de mettre à jour certaines de mes connaissances. Ce cours m’a permis de découvrir encore plus de plug-ins que je devrais essayer. J’ai eu une meilleure idée de ce qui était possible pour un site WordPress moderne.

Mettre à jour mes connaissances de la plateforme était une idée judicieuse. Cela m’a fait réfléchir à quelques fonctionnalités pratiques que je pourrais inclure. Cette mise à niveau m’a aussi aidé à commencer à visualiser quelques-unes des nouvelles fonctionnalités que mon site Web mis à jour pourrait avoir.

Desktop Server outil de wordpress

Desktop Server est un exceptionnel outil logiciel que j’ai commencé à utiliser au début de ce projet. Je l’ai découvert lorsque quelqu’un a fait une démonstration en s’en servant à la réunion WordPress du mois d’aout, et j’ai pu constater que ce serait un excellent moyen de gagner du temps. Desktop Server vous permet d’exécuter un serveur Web Apache sur votre propre ordinateur, y compris PHP et MySQL. Il installera aussi WordPress pour vous. Cela signifiait que je pouvais développer mon nouveau site entièrement sur mon Mac sans même avoir besoin d’un accès Internet pour le tester.

J’ai installé la version gratuite de Desktop Server le 14 septembre 2015. Ensuite, j’ai installé la dernière version de WordPress et j’ai importé la base de données de mon site Web existant. Cela m’a fourni une copie locale du blog que je pouvais utiliser pour bricoler. Si je faisais une erreur et qu’un élément quelconque était endommagé, aucun problème ne se poserait parce que tout se trouvait sur mon ordinateur portable, pas sur le serveur Web public. Ma base de données WordPress pèse plus de 100 Mo, et il ne m’a fallu que 2 secondes pour faire une copie de sauvegarde. À plusieurs reprises, j’ai endommagé la base de données pendant que je bricolais ; par chance il n’a fallu que quelques secondes pour restaurer une copie de sauvegarde. Cette approche correspondait parfaitement à mon désir de faire beaucoup d’expérimentations.

Accès aux site Web

En utilisant Desktop Server, je pouvais accéder à mon site Web en développement via n’importe quel navigateur Web via une URL spéciale. Cette URL n’était pas accessible à l’ensemble d’internet ; elle ne fonctionnait que sur mon ordinateur personnel. Je ne pouvais pas y accéder depuis mon iPad ou mon iPhone non plus étant donné qu’elle ne fonctionne que sur une seule machine, mais c’était suffisant pour la grande partie du processus de développement. Beaucoup plus tard, j’ai mis le nouveau site sur un serveur intermédiaire, afin de pouvoir le tester avec d’autres appareils via Internet.

Desktop Server wordpress

J’utilisais comme ordinateur principal un MacBook Pro daté de fin 2013 avec un processeur quad-core cadencé à 2,6 GHz, 16 Go de mémoire vive et une mémoire interne de 1 To. C’était exagéré d’utiliser une telle machine pour exécuter un site WordPress auquel une seule personne (moi en l’occurrence) pouvait accéder. Par conséquent, tout était super rapide et réactif. L’utilisation de WordPress au niveau local a rendu chaque itération d’idées de test beaucoup plus rapide. J’ai une bonne connexion Internet, mais elle ne me permettait pas de tout exécuter depuis mon ordinateur, et je n’arrivais pas non plus à transmettre des données sur Internet pendant le développement.

Desktop Server m’a fait gagner beaucoup de temps, car je n’avais pas besoin d’effectuer des transferts FTP pour tester mes idées, et je pouvais installer et essayer différents thèmes et plug-ins autant que je le voulais sans risquer d’affecter le site en direct. Si je faisais des erreurs en cours de chemin, ce n’était pas grave.

J’utilise toujours Desktop Server pour tester quelques idées sur mon ordinateur si j’ai des doutes quant à leur fonctionnement sur le site en direct. Une fois que je trouve une solution satisfaisante qui marche sur mon ordinateur, je peux la transférer sur le site en direct avec beaucoup de facilité.

Desktop server comporte même une boite de réception locale que j’utilisais pour tester mon formulaire de contact. J’étais en mesure de voir immédiatement le résultat des courriels dans la boite de réception locale sans avoir à envoyer de courriels de test sur Internet. Cela signifiait que je pouvais tester et modifier le formulaire de contact même lorsque je n’étais pas en ligne, par exemple dans un avion ou dans un aéroport ou même dans un café avec une très mauvaise connexion Wifi.

Sublime

À peu près au même moment, j’ai également découvert le logiciel d’édition Sublime, à nouveau grâce au — vous l’avez deviné — groupe de rencontre WordPress. J’ai essayé la démo gratuite et j’ai tellement aimé le logiciel que j’ai acheté la version complète que j’utilise depuis. Elle a beaucoup de fonctionnalités que je n’utilise pas, mais Sublime est rapide et présente un excellent codage couleur (même pour une personne daltonienne). Le codage couleur m’aide à éviter les erreurs comme exclure accidentellement un code que je prévois exécuter ; j’ai commis plus d’une fois cette erreur.

J’utilisais principalement Sublime pour éditer des fichiers CSS et PHP. Plus tard, je l’ai utilisé pour écrire mes propres plug-ins WordPress. Je l’ai aussi utilisé pour éditer le fichier .htaccess. Je devrais vraiment prendre le temps d’en apprendre davantage sur les fonctionnalités de Sublime. Il y a certainement d’intéressantes fonctionnalités que j’utiliserais régulièrement si je m’entrainais un peu.

Le codage wordpress

Lorsque j’écris de nouveaux articles en prose, j’utilise toujours un éditeur avec un texte foncé sur un fond blanc. Curieusement, lorsque j’écris du code, je préfère le faire avec un texte de couleur claire sur un fond noir. Je pense que c’est aussi le cas de beaucoup de codeurs, mais je ne sais vraiment pas pourquoi. Je pense que l’obscurité m’aide à mieux me concentrer, et c’est moins fatigant pour les yeux, surtout lorsque l’on est concentré sur des blocs de code pendant un certain temps. Le codage implique souvent qu’on passe beaucoup de temps devant un écran. J’ai rencontré une fois un programmeur qui aimait travailler dans une pièce noire avec seulement la lumière de son écran ; c’était en fait un excellent moyen d’éliminer complètement les distractions.

Je trouve que lorsque l’on utilise des outils de qualité cela facilite le bon déroulement d’un projet. C’est important pour moi d’utiliser des outils que j’apprécie. Si je n’aime pas les outils que j’utilise, je cède facilement à la procrastination. Cependant, si les outils sont agréables à utiliser et si je respecte leur élégance, je me laisse immédiatement entrainer par le travail sans attendre.

Choisir un thème

La première grande décision que je devais prendre était de choisir le thème que j’allais utiliser pour le nouveau site. Il y avait tellement d’options parmi lesquelles choisir !

Je ne voulais pas créer mon propre thème à partir de rien, car j’estimais que ce serait trop de travail. Cela aurait été peut-être utile sur le plan technique, mais j’estimais que le jeu n’en valait pas la chandelle. Par le passé, j’ai commencé avec un thème populaire que j’ai ensuite personnalisé à ma convenance, alors j’ai pensé que la même approche pourrait fonctionner à nouveau cette fois-ci.

J’ai commencé à parcourir le répertoire des thèmes de WordPress. J’ai installé des dizaines de thèmes gratuits sur mon site de test local. Puis je les ai activés et testés un par un pour voir à quoi ils ressembleraient combinés avec le contenu de mon blog. La plupart étaient nuls. Certains étaient affreux. D’autres étaient vraiment affreux.

Dans l’ensemble, j’ai été déçu. J’ai parcouru des centaines de thèmes et j’en ai essayé des dizaines, mais aucun n’était éligible pour servir de base pour mon propre site. Certains parmi les thèmes semblaient intéressants et créatifs, mais la majorité des thèmes semblaient avoir été conçus pour un type de site différent, comme un site de photographe, un blog de recettes ou de restaurant. J’ai pensé que ce serait trop de travail de les adapter à mes besoins. Je dirais que ma plus grande déception a été de constater que la plupart des thèmes que j’ai examinés manquaient simplement d’élégance, de clarté et de convivialité. J’ai un grand respect pour le design élégant, et je n’ai pas vu beaucoup d’élégance parmi les thèmes gratuits que j’ai parcourus.

Thèmes payants sur wordpress

J’ai cependant pensé que c’était peut-être une bonne chose. Cela signifiait en effet que j’allais devoir chercher ailleurs ou créer un thème personnalisé, ce qui serait bien, étant donné que mon site serait différent de tous les sites disponibles qui utilisent des thèmes gratuits.

Grâce au groupe de rencontre WordPress, j’ai entendu parler de quelques sources de thèmes payants, alors j’ai commencé à les consulter. Dans l’ensemble, j’ai été plutôt impressionné par les thèmes payants. J’ai vu de meilleurs designs, mais je ne trouvais toujours pas ce que je voulais pour mon propre site. Une fois encore, je n’arrêtais pas de penser que c’était de bons thèmes pour d’autres types de sites, mais aucun d’entre eux ne semblait me convenir. Parfois, j’avais l’impression d’aller acheter des vêtements dans le rayon réservé aux femmes — l’on y trouve beaucoup de belles choses, mais rien que je porterais personnellement.

J’ai passé beaucoup de temps à regarder les thèmes de Genesis étant donné que quelques-uns des développeurs du groupe de rencontre aimaient Genesis, mais je n’aimais pas vraiment ce que je voyais. Ils avaient l’air agréables et élégants à première vue, mais aucun ne m’a satisfait. J’ai également passé environ deux jours à faire des recherches sur l’infrastructure logicielle de Genesis, mais cela s’est révélé sans aucun intérêt, même si techniquement c’était une visite intéressante. J’ai donc fait une croix sur l’utilisation de Genesis ou de l’un de ses thèmes.

Développer et améliorer une heuristique interne

Le principal avantage que j’ai tiré de cette phase, c’est qu’elle m’a permis de mieux réaliser ce que je ne voulais pas. Je pense que cela m’a aidé à développer et améliorer une heuristique interne qui me permettrait plus tard de reconnaitre ce que je voulais. Cependant, à l’époque, je n’avais pas encore une vision claire de ce que je voulais créer. Je ne connaissais que des principes de base, des désirs et des intentions pour me guider.

Je n’allais pas simplement me contenter d’un thème que je n’aimais pas. Si j’avais un calendrier chargé, j’aurais été obligé de me mettre la pression pour prendre une décision à ce stade ; une décision que j’aurais probablement regrettée. Heureusement, dans ce cas, la patience a été mon allié.

Nous continuerons cette série dans la partie 3 qui sera publiée lorsqu’elle sera prête.

Ne la manquez pas !

Note : Cet article est une traduction de l’article Redesigning StevePavlina.com – Part 2 de Steve Pavlina. C’est donc lui qui s’exprime dans le « je » de cet article !