PubliĂ© par le 10 octobre 2018 ‱ 10 Commentaires

Aaah, la refonte d’un site WordPress


Quand on pense aux différentes problématiques que cette mission implique, on a généralement tendance à stresser un peu.

La refonte d'un site WordPress : un gros moment de stress

Inspirez
 expirez
 inspirez…

Qui ne rĂȘve pas, dans ce moment-clĂ©, de faire un simple Ctlr+Alt+Suppr sur son serveur, et tout reprendre Ă  zĂ©ro aisĂ©ment ?

Malheureusement, la refonte de votre site web est toujours un peu plus complexe que ça. Et un oubli, une erreur, une bourde, est si vite arrivĂ©e


La Marmite a donc voulu vous partager ses bonnes pratiques pour aborder sereinement ce grand projet.

Avec l’équipe, on est d’ailleurs en plein dedans, puisque le blog prĂ©pare sa refonte. Au programme : un design modernisĂ©, une optimisation des pages de prĂ©sentation des formations, et surtout une nouvelle structure qui vous aide Ă  mieux tirer le meilleur de WordPress.

Il faut dire que la Marmite a bien grossi ces derniers mois. Un nouvel article est publié chaque semaine, la plupart des vidéos sont retranscrites, sans oublier le glossaire et les snippets.

Allez vous ĂȘtes prĂȘts ? Dans cet article, je vous dĂ©taille tous les Ă©lĂ©ments auxquels vous devez penser pendant votre refonte de site Internet WordPress, de la stratĂ©gie en amont jusqu’à la mise en ligne.

Les 4 Ă©tapes en amont de la refonte de son site Internet WordPress

Avant mĂȘme de mettre les mains dans WordPress pour refondre votre site, il va vous falloir plancher sur diffĂ©rents Ă©lĂ©ments structurants.

Eh oui : vous ne pensiez tout de mĂȘme pas vous lancer sans savoir oĂč vous alliez mettre les pieds ?

1. Poser les objectifs de sa refonte

Comme tout projet, la refonte d’un site WordPress a des objectifs, qu’il s’agit de dĂ©finir bien prĂ©cisĂ©ment. Ce sont ces objectifs, concis et clairs, qui vont guider vos pas par la suite.

On peut avoir de nombreuses raisons de vouloir faire la refonte d’un site web.

Voulez-vous donc :

  • Changer le design de votre site, en sĂ©lectionnant un nouveau thĂšme ?
  • Mettre Ă  jour l’administration de votre site ? Ça peut ĂȘtre le cas si vos plugins ou votre version de WordPress n’ont jamais Ă©tĂ© mis Ă  jour, s’il existe des conflits entre diffĂ©rents plugins, ou encore si votre thĂšme a Ă©tĂ© modifiĂ© de maniĂšre erratique. Autant de soucis qui peuvent nuire Ă  la performance de votre site web, et Ă  sa gestion au quotidien.
  • Optimiser votre rĂ©fĂ©rencement ? Un objectif Ă  vous poser, notamment si votre expĂ©rience utilisateur est actuellement bancale, si votre HTML n’est pas optimisĂ© pour les robots de Google, ou encore si vous rencontrez des problĂšmes d’intĂ©gration d’AMP.
  • Ajouter de nouvelles fonctionnalitĂ©s Ă  votre site, que votre design actuel ne peut pas intĂ©grer ?
  • Migrer votre site sur un autre serveur ?

Notez bien, dans un document bien structurĂ©, ces diffĂ©rents objectifs. Vous verrez qu’ils constitueront des Ă©lĂ©ments structurants, pour bien organiser votre refonte de site web.

2. Structurer votre projet de refonte

Maintenant que vous avez les idées claires sur la finalité de votre refonte, parlons un peu des différentes étapes qui déterminent les grandes lignes de votre projet.

Créer ses wireframes

Le terme de wireframes, ça vous dit quelque chose ?

Des wireframes : qu'est-ce que c'est que ça ?

Un petit point sur le sujet s’impose, tant cette Ă©tape est cruciale.

Les wireframes sont des maquettes structurelles, qui vous aident à disposer les différents éléments de vos pages web sur un document unique.

L’idĂ©e est vraiment de bien poser la charpente de vos diffĂ©rentes pages, pour avoir une idĂ©e claire de l’expĂ©rience utilisateur que vous allez crĂ©er.

Je vous en donnais un exemple dans cet article, que voici de nouveau pour illustrer mon propos :

Balsamiq Mockups 3 : une solution payante pour qui conçoit réguliÚrement des wireframes de site WordPress

L’interface de crĂ©ation de wireframes dans Balsamiq Mockups 3

Si la mĂ©thode millĂ©naire papier + crayon peut suffire pour une refonte lĂ©gĂšre, je vous recommande tout de mĂȘme d’utiliser un outil digital pour concevoir vos wireframes.

Cela vous permettra non seulement de les modifier facilement si besoin, mais aussi de partager ces wireframes avec votre Ă©quipe (ou avec votre cousine qui bosse dans le webmarketing).

Je ne peux que vous recommander 2 outils pour ce faire :

  • MockFlow, un outil en ligne bien pratique et gratuit.
  • Balsamiq Mockups 3, un logiciel payant, mais dont la version d’essai gratuite de 30 jours vous laisse aisĂ©ment le temps de concevoir des wireframes bien ficelĂ©s.

Et à ce stade, vous avez une idée un peu plus claire de ce qui vous attend pour la refonte de votre site.

Concevoir ses maquettes

LĂ  oĂč les wireframes vont vous donner une vision de la structure de vos pages refondues, les maquettes vont y intĂ©grer le design en tant que tel.

Créé via un logiciel de mise en page (comme par exemple InDesign), le maquettage de vos pages web peut demander une certaine technicité, et est une étape assez chronophage.

La question suivante se pose donc : avez-vous réellement besoin de créer des maquettes graphiques pour votre refonte ? La réponse est simple :

  • Oui, si vous voulez crĂ©er votre propre thĂšme. Dans ce cas, il va vous falloir designer votre site web refondu de A Ă  Z, et donc pouvoir visualiser tous les Ă©lĂ©ments graphiques aisĂ©ment.
  • Non, si vous souhaitez simplement utiliser un thĂšme existant et le relooker. Une solution plus simple, surtout avec l’ebook qu’a crĂ©Ă© Alex, “Relooker son thĂšme”. Mais dans ce cas, veillez Ă  bien choisir votre nouveau thĂšme au regard de vos objectifs.

L’astuce de Maxence Barbou, dĂ©veloppeur WordPress aguerri :
“Parmi les Ă©lĂ©ments Ă  surveiller lors de votre choix de thĂšme, n’oubliez pas de vĂ©rifier :

  • Que votre thĂšme est optimisĂ© pour le rĂ©fĂ©rencement ;
  • Qu’il soit optimisĂ© pour tous les navigateurs utilisĂ©s par les internautes (a minima Chrome, Safari, Firefox, Internet Explorer 11, et EDGE) ;
  • Qu’il soit responsive, c’est-Ă -dire optimisĂ© pour tous les supports (Ă©cran de bureau, smartphone et tablette).

Cela vous Ă©vitera des dĂ©boires lors de la refonte de votre site !”

Bien penser sa nouvelle arborescence

Oui, je vous rassure, on parle toujours bien de refonte de site web, et non d’horticulture !

Concevoir son arborescence, c’est imaginer les liens qui vont exister entre les diffĂ©rentes pages, et rĂ©flĂ©chir Ă  toutes les maniĂšres dont un visiteur peut s’orienter dans son site.

En somme, en créant votre arborescence, vous réfléchissez aux différents parcours de navigations de vos utilisateurs.

Alors comment faire ?

Concevez un schĂ©ma d’arborescence, en pensant notamment Ă  y inclure :

  • Votre menu de navigation principal, ainsi que vos potentiels menus secondaires ;
  • Votre pied de page (ou footer), et les liens qu’il peut contenir ;
  • Vos Ă©ventuelles barres latĂ©rales, notamment sur votre blog ;
  • Les diffĂ©rentes catĂ©gories de votre blog

Votre schéma d'arborescence vous permettra de créer vos parcours utilisateurs

Le schĂ©ma d’arborescence de la version actuelle de la Marmite

Avec un tel schĂ©ma, pas question d’oublier de crĂ©er un maillage bien ficelĂ© entre vos diffĂ©rentes pages, gage d’une expĂ©rience utilisateur fluide.

Tout comme les wireframes, vous pouvez créer ce schéma sur une feuille de papier, ou utiliser un outil en ligne comme GlooMaps.

Concevoir son cahier des charges

Bien, à cette étape, vous voilà bien fourni en éléments structurants. Il est donc temps de rassembler tout ceci dans un document-clé : un cahier des charges.

Le cahier des charges de la refonte de votre site web est un document trÚs extensif, qui vous permet de bien cibler les différentes attentes que vous avez pour votre refonte de site web.

Vous trouverez sur le web de nombreux modĂšles de cahiers des charges. Quoiqu’il en soit, le vĂŽtre doit impĂ©rativement contenir :

  • Une description de votre projet et de votre entreprise, ainsi que le rĂŽle que joue votre site dans ce projet
  • La cible Ă  laquelle s’adresse votre nouveau site, dĂ©crite avec prĂ©cision si possible
  • Les objectifs de votre refonte, illustrĂ©s autant que possible par des chiffres. Si l’un de vos objectifs est par exemple d’augmenter votre trafic, pensez Ă  prĂ©ciser le trafic de votre site actuel.
  • Les Ă©lĂ©ments Ă  rĂ©cupĂ©rer sur votre site actuel : le contenu de vos pages, les Ă©ventuelles images

  • Les pistes graphiques que vous souhaitez suivre. Pour cela, intĂ©grez vos wireframes et maquettes Ă  votre cahier des charges, ainsi que votre charte graphique.
  • Les Ă©lĂ©ments fonctionnels nouveaux de votre site refondu, comme l’ajout d’une boutique en ligne, d’un blog, d’un module d’opt-in, d’une nouvelle administration

  • Les grands jalons de votre projet de refonte : quand souhaitez-vous avoir un aperçu de votre site ? Quand souhaitez-vous qu’il soit mis en ligne ?

On y voit tout de suite beaucoup plus clair, n’est-ce pas ?

Votre cahier des charges guidera votre refonte de site WordPress tout au long du process

3. Penser aux ressources Ă  sa disposition

Allez, c’est le moment de rentrer dans le concret.

Votre dĂ©fi, si vous l’acceptez, est dĂ©sormais de lister les ressources que vous avez Ă  disposition en termes de :

  • Budget : combien voulez-vous investir dans votre refonte ?
  • Temps : combien de temps avez-vous face Ă  vous pour refondre votre site WordPress ?
  • CompĂ©tences : avez-vous la capacitĂ© d’atteindre vous-mĂȘme tous vos objectifs ?
  • Outils : plugins, thĂšmes, constructeurs de page
 Ce type d’outils peuvent-ils vous aider Ă  atteindre vos objectifs, mĂȘme si vos compĂ©tences techniques en matiĂšre de web sont limitĂ©es ?

Cette liste va vous permettre de savoir si vous allez devoir faire appel Ă  un prestataire externe, ou si vous estimez pouvoir travailler en autonomie, avec les membres de votre Ă©quipe ou par vos propres moyens.

4. Créer un plan de redirection

“Bon, on y va, ça y est !”

Tout doux ! Une derniĂšre Ă©tape, trop souvent nĂ©gligĂ©e pendant la refonte d’un site Internet, doit ĂȘtre suivie : celle de la crĂ©ation de votre plan de redirection.

Je m’explique.

Souvent, dans la refonte d’un site web, on constatera des changements d’URL. Ce sera notamment le cas si vous crĂ©ez de nouvelles pages.

Or, que se passe-t-il si vous mettez en ligne votre nouveau site sans penser Ă  faire vos redirections ? Des erreurs 404 Ă  la pelle, qui vont impacter votre SEO et la navigation de vos visiteurs. Ou comme le dirait si bien Maxence Barbou, “crĂ©er un creu intersidĂ©ral dans votre rĂ©fĂ©rencement”.

Pour concevoir votre plan de redirection, rien de plus simple : il vous suffit d’ouvrir Excel ou Google Sheets, et de crĂ©er un tableau comme suit :

Créer un plan de redirection pour votre refonte de site WordPress : l'étape trop négligée

Attention à ne pas faire n’importe quoi dans la structure de vos URL. Mieux vaut ne pas jouer avec le feu.

Une fois que votre site sera en ligne, vous pourrez mettre en place le plugin Redirection, et importer ce tableau directement.

Malin, n’est-ce pas ?

Allez : respirez donc un bon coup, et passons Ă  la refonte en tant que telle.

Les 3 Ă©tapes pour lancer sa refonte

Comment allez-vous donc passer Ă  l’action, maintenant que votre projet est bien structurĂ©, bien organisĂ© ? Ces 3 Ă©tapes indispensables vont vous guider.

1. Choisir de travailler en local ou directement sur son site actuel

Avant de vous lancer dans l’aspect technique, commencez par choisir de travailler :

  • soit directement sur votre site actuel, et d’y intĂ©grer les changements “en direct” ;
  • soit de travailler sur des serveurs de dĂ©veloppement et de prĂ©-production, pour tester en amont votre nouveau site avant de le donner Ă  voir Ă  votre public.

Qu’est-ce que ces deux options supposent ?

Travailler en ligne directement sur son site est barbare.

Dans ce cas, tous vos visiteurs voient les changements en direct, et font office de “cobayes” de vos nouvelles fonctionnalitĂ©s
 avec tous les bugs que cela peut induire. À noter Ă©galement que si une erreur survient lors des modifications, cela impactera le site jusqu’à ce que vous ayez dĂ©tectĂ© et rĂ©solu le problĂšme. Site indisponible, fonctionnalitĂ© qui ne marche pas
 outch.

Ne pas travailler en local pour sa refonte de site web : la fausse bonne idée

Pour éviter tous ces déboires, vous pouvez travailler en local.

Les avantages de travailler en local sont nombreux :

  • Faire vos modifications en toute sĂ©curitĂ© ;
  • Tester vos plugins sans risque ;
  • Avoir un aperçu du rendu final avant la mise en ligne.

C’est d’ailleurs la solution idĂ©ale si vous souhaitez garder l’administration de WordPress telle que vous l’avez actuellement configurĂ©e.

Si vous souhaitez cependant repartir de zĂ©ro, dans une administration totalement nouvelle, n’hĂ©sitez pas Ă  suivre le guide que la Marmite vous avez concoctĂ© Ă  ce sujet.

L’astuce de Maxence Barbou, qui travaille toujours en local : “Bien sĂ»r, vous pouvez rĂ©cupĂ©rer des Ă©lĂ©ments de votre ancien site, grĂące Ă  un plugin comme UpdraftPlus ou Duplicator. Ces plugins vous permettent d’importer de nouveau sur votre admin ce que vous souhaitez : votre contenu, vos thĂšmes, vos extensions, vos mĂ©dias
”

2. Acquérir les outils nécessaires à la refonte

VoilĂ  venu le moment pour vous de lister et de vous procurer tout ce dont vous aurez besoin pour prendre en charge votre refonte de site WordPress.

Souvenez-vous : vous en avez fait la liste dans votre cahier des charges.

Il peut s’agir :

  • D’un nouveau thĂšme, si l’un des nombreux disponibles sur le web vous a tapĂ© dans l’oeil (comme Divi);
  • D’un constructeur de page, comme Elementor ou Beaver Builder, si vous souhaitez Ă©viter de mettre les mains dans le code ;
  • De nouveaux plugins, pour intĂ©grer des fonctionnalitĂ©s Ă©patantes.

Vous sĂ©chez un peu sur les plugins Ă  utiliser ? Peut-ĂȘtre que votre bonheur se trouve dans la sĂ©rie “Bonjour Plugin” de la Marmite : jetez-y un coup d’oeil avisĂ© !

Votre boĂźte Ă  outils est prĂȘte ? Installez-moi donc tout ça, et passons Ă  la derniĂšre Ă©tape cruciale de votre refonte : les contenus.

3. Préparer les contenus de son nouveau site

Tout d’abord, un point crucial à ne pas oublier.

Lors d’une refonte de site web, il y a forcĂ©ment des contenus du site prĂ©cĂ©dent que l’on peut rĂ©cupĂ©rer.

Images, textes, configuration de plugins
 Pensez-y !

Faites donc une sauvegarde de votre site WordPress actuel, et gardez ce que vous voulez mettre dans votre refonte sous le coude.

Cependant, j’imagine que, si vous faites une refonte, c’est Ă©galement pour modifier le contenu de votre site, pour le rendre plus pertinent, plus attractif pour vos cibles
 et pour les moteurs de recherche, bien sĂ»r !

Penchez-vous donc sur votre stratégie SEO, tellement importante pour bien référencer votre nouveau site, si canon.

S’il est complexe de rĂ©sumer la dĂ©marche Ă  suivre, je peux cependant vous en donner les grandes lignes ici :

  • D’une part, dĂ©finissez les mots-clĂ©s sur lesquels vous voulez vous positionner. Il s’agit des expressions que vos cibles entrent spontanĂ©ment sur Google, pour trouver les informations qu’elles recherchent.
  • D’autre part, dĂ©terminez oĂč il vous faut les intĂ©grer, sur chacune des pages. Vos balises de titre <hn>, ou le texte alternatif des images, doivent par exemple ĂȘtre optimisĂ©es pour le rĂ©fĂ©rencement : Google en est friand, c’est lĂ  qu’il va chercher Ă  comprendre votre site en prioritĂ© !
  • Une fois ces nouveaux contenus intĂ©grĂ©s au site web refondu, vous pourrez ainsi vĂ©rifier que tout est bien en place. Pensez notamment aux noms des images, aux titres et meta-descriptions des pages, qui sont trop souvent nĂ©gligĂ©s.

RĂ©fĂ©rencer un site est un mĂ©tier Ă  part entiĂšre. Cependant, avec quelques bonnes pratiques, il est possible de bien se dĂ©brouiller, et de remonter dans les requĂȘtes de ses cibles avec succĂšs.

Si ce sujet vous intĂ©resse, la Marmite vous propose une formation vraiment opĂ©rationnelle, qui vous donne des conseils concrets sur le SEO et WordPress. Et elle porte bien son nom : “Enfin visible grĂące au rĂ©fĂ©rencement” !

De fil en aiguille, sur votre serveur de développement, en local, et avec tous les outils WordPress nécessaires, vous voyez avancer votre projet
 et votre mise en ligne approche.

Une bonne stratĂ©gie SEO, et vous ĂȘtes prĂȘts Ă  faire la refonte de votre site web avec succĂšs

Les 3 Ă©tapes pour une mise en ligne optimale

Je vous sens fĂ©briles Ă  l’idĂ©e de dĂ©voiler Ă  la face du monde votre nouvelle crĂ©ation WordPress.

Prenez le temps de consulter ces 3 étapes, et de bien les suivre : vous vous en féliciterez par la suite, promis.

1. Choisir une mise en production directe, ou sur un serveur de pré-production

L’expression “serveur de prĂ©-production” ne vous dit rien ? Pas de souci, faisons une petite pause dĂ©finition.

Un serveur de prĂ©-production partage le mĂȘme serveur que celui sur lequel sera votre site une fois mis en ligne. Si la Marmite se mettait Ă  sa refonte, Alex pourrait par exemple choisir de mettre sa prĂ©-production Ă  l’adresse preprod.wpmarmite.com : il s’agirait du mĂȘme environnement que wpmarmite.com.

Pourquoi donc utiliseriez-vous ce serveur de preprod ?

  • Pour faire valider votre refonte Ă  votre client, si vous ĂȘtes dĂ©veloppeur WordPress ;
  • Pour tester les Ă©ventuels bugs avant que le site ne soit en ligne ;
  • Pour ajuster votre stratĂ©gie SEO, en vĂ©rifiant que tous vos mots-clĂ©s sont bien intĂ©grĂ©s Ă  chaque page.

Une fois que tout ceci est validĂ©, Ă  ce moment seulement, vous pourrez passer en production, et dĂ©ployer votre nouveau site. Si vous ĂȘtes sĂ»r de vous, vous pouvez bien sĂ»r choisir de passer en production directe.

L’astuce d’Alex, qui connaĂźt bien le sujet : “Pendant que votre site est en dĂ©ploiement, pensez bien au fait que vous devrez activer le mode maintenance, le temps de pouvoir redonner accĂšs Ă  votre site aux visiteurs.

Pour ce faire, n’hĂ©sitez pas Ă  consulter la sĂ©lection de plugins “Coming Soon que Thibaut avait faite sur la Marmite. Vous pourrez ainsi afficher des pages de maintenance, et mĂȘme continuer de convertir des visiteurs malgrĂ© votre refonte en cours.”

2. Faire un recettage des Ă©ventuels problĂšmes de votre nouveau site

Depuis votre serveur de prĂ©-production (ou en direct, si vous ĂȘtes un aventurier de WordPress), il vous faudra bien tester votre nouveau site web.

La clĂ© pour rĂ©ussir ce recettage d’éventuels problĂšmes : vous mettre dans la peau d’un visiteur lambda, cliquer partout, et noter tous les soucis rencontrĂ©s..

Vous verrez sans doute apparaĂźtre des problĂšmes de design et de structure. Mais n’oubliez pas Ă©galement de vĂ©rifier :

  • Les redirections qui n’ont pas Ă©tĂ© faites, et engendrent des liens morts ou des pages blanches ;
  • La performance du site, en le testant sur GTMetrix, Pingdom, ou encore le test PageSpeed de Google ;
  • Les points d’opt-in, en vĂ©rifiant s’ils fonctionnent bien ;
  • Les formulaires de contact, de devis… ;
  • Le paiement, si vous avez un site e-commerce (y compris les emails de confirmation, l’accĂšs au site membre
).

Tout est beau, fonctionnel, bien connectĂ© et bien ficelĂ© ? Bravo ! L’ultime Ă©tape va parfaire le grand sourire que je vois d’ici sur vos visages.

Vous avez presque fini la refonte de votre site WordPress : alors, heureux ?

3. RĂ©activer et reconnecter tous les services tiers

Courage, vous y ĂȘtes presque !

Vous allez pouvoir désormais réactiver tous les services et plugins liés à votre site WordPress. Pensez notamment à :

Et parce que la sĂ©curitĂ© est l’affaire de tous (et surtout de vous), pensez Ă  bien rĂ©activer tous les Ă©lĂ©ments qui sĂ©curisent votre site web. Mais si, souvenez-vous, tout ce dont vous parlaient Alex et Julio dans les Points Secu !

PrĂȘts ? Lancez finalement l’indexation de votre nouveau site sur la Google Search Console. Cette manipulation force les robots de Google Ă  passer voir votre nouveau bĂ©bĂ©, et Ă  ainsi le rĂ©fĂ©rencer plus rapidement dans sa nouvelle version.

Tadam ! RedesignĂ©, plus performant, plus percutant, mieux structurĂ©, votre nouveau site est prĂȘt Ă  accueillir le trafic qu’il mĂ©rite. C’était du boulot, mais ça valait le coup, n’est-ce pas ?

Et vous, vous avez menĂ© une refonte de site Internet WordPress rĂ©cemment ? Quelles sont les problĂšmes que vous avez rencontrĂ©, ou les fiertĂ©s que vous en avez tirĂ© ? Dites-nous tout en commentaire : l’équipe de la Marmite les lit tous avec attention.