Pourquoi faire une refonte de son site ?
Les 3 points clefs Ă garder en tĂŞte
Internaliser ou sous-traiter ?
La méthodologie de refonte à suivre en 12 étapes
Le choix du CMS WordPress, Drupal, Liferay et les autres…
Des exemples de refonte de site
Prix et budget en refonte de site internet
Refonte de site internet dans l’assurance ou les mutuelles
Opter pour une refonte majeure ou une amélioration continue ?
Les 5 erreurs Ă ne pas commettre
Entrez le nombre de jours que vous souhaitez allouer à chaque poste et obtenez un budget immédiatement. Bonus ! Vous pouvez même télécharger le fichier Excel éditable.
Une refonte de site web vise Ă modifier l’apparence en profondeur du site avec un nouveau front (l’apparence perçue par l’utilisateur, le visuel). Elle va souvent de pair avec une modification sur le back, la structure du site. La refonte d’un site internet a le plus souvent pour objectif principal d’amĂ©liorer la performance et le service rendu au visiteur du site. On amĂ©liore alors le fonctionnel.
Les 7 bonnes raisons de refondre son site
Une refonte de site internet a donc in fine trois axes principaux
 UNE REFONTE ESTHÉTIQUE   une nouvelle charte graphique ou identitĂ© visuelle a Ă©tĂ© promue dans votre organisation. Nouveau logo. Nouveau nom mĂŞme. Votre site internet doit donc reflĂ©ter la stratĂ©gie de communication, vos nouveaux enjeux. Les dĂ©lais seront courts et l’aspect crĂ©atif et esthĂ©tique primeront. Votre image de marque est en jeu. C’est un vĂ©ritable relooking de site web qu’il faut entreprendre ! Une refonte « relookage » s’impose aussi car l’environnement externe Ă©volue (arrivĂ©e du flat design il y a quelques annĂ©es par exemple, montĂ©e en puissance de la video, changements de typos…). Bref le web suit la mode !
 UNE REFONTE TECHNIQUE   changement de CMS pour rĂ©pondre Ă des contraintes de plateformes ou imposĂ©es par une direction informatique. Cela peut ĂŞtre liĂ© Ă la mise en place d’un nouveau CRM (Hubspot par exemple est Ă la fois un CRM et et un CMS). Il peut aussi se poser le cas d’une obsolescence du CMS (ou fin de support) ce qui peut conduire Ă des failles de sĂ©curitĂ© graves. L’optimisation passe aussi par les performances pour une expĂ©rience plus simple et plus fluide.
 UNE REFONTE UX / PARCOURS  on est plus lĂ dans une orientation business. De plus en plus, on vise des parcours 100% digitaux. En e-commerce Ă©videmment mais aussi pour la souscription de services (banque, assurance…). Il y a alors obligation Ă opĂ©rer une vĂ©ritable transformation digitale. On peut en profiter pour coordonner une refonte Ă©ditoriale complète. Le but est d’avoir un site plus engageant et plus conversationnel crĂ©ant ainsi une relation de confiance avec les visiteurs de votre site. De plus en plus, il faut ĂŞtre user centric, voire adopter une approche « service design » comme nous l’expliquons dans notre article sur la conception d’un site. L’explosion de l’usage des smartphones imposera Ă©galement souvent une philosophie mobile first, voire mobile only.
En un mot, vous allez moderniser votre site internet !
Une refonte de site internet est appelée aussi relookage, relooking ou restylage |
 POINT 1  Une refonte de site internet est un investissement : de l’argent Ă©videmment mais aussi du temps. C’est un chantier majeur qui impliquera de nombreuses interactions avec tous les services de l’entreprise. Il n’est pas absurde pour une entreprise de taille moyenne (environ 500 salariĂ©s, budget de refonte de site autour de 50K€) qu’il faille allouer une ressource en interne (type chef de projets, chargĂ© de marketing digital, digital manager…) Ă mi-temps pendant 6 mois pour assurer une prĂ©paration puis un suivi correct du projet.
 POINT 2  Une refonte de site web est un exercice transversal : mĂŞlant Ă la fois communication, marketing et (beaucoup) d’informatique. Il y a 2 chantiers Ă ne pas nĂ©gliger : le rĂ©dactionnel et l’intĂ©gration. RĂ©diger prend du temps. Trop souvent, nous voyons des clients qui Ă question du contenu sortent quelques slides Powerpoint. Il faut penser son message, l’articuler, identifier les points saillants. Et ensuite confier le tout Ă un vrai rĂ©dacteur web.
 POINT 3  Une refonte de site n’est pas une fin en soi : c’est un commencement. Il faut voir votre site comme le visage digital de l’entreprise ou de l’organisation. Tout comme l’entreprise ne s’arrĂŞte jamais et se rĂ©invente en permanence, Il en va de mĂŞme pour votre site. PrĂ©voyez dès le dĂ©but les phases de maintenances correctives et surtout Ă©volutives. Vous devez avoir une vision Ă 3/5 ans.
On nous pose souvent la question. Clairement, en 2020, l’amĂ©lioration permanente et continue d’un site web devrait ĂŞtre la norme. Il ne devrait pas se passer une semaine sans que vous n’amĂ©lioriez votre site, et naturellement que vous ajoutiez du contenu.
NĂ©anmoins, la refonte complète de site s’impose dans les cas suivants :
Les inconvénients de la refonte complète :
L’approche en amĂ©lioration continue (souvent associĂ©e Ă la mĂ©thode agile en SCRUM avec des runs de dĂ©veloppement courts) est de loin Ă privilĂ©gier. Elle permet notamment :
Notre recommandation : fixez vous un plan d’amĂ©liorations rĂ©gulières Ă apporter en permanence. 2 Ă 3 amĂ©liorations fonctionnelles par semaine est un bon objectif.
Des améliorations continues donnent un gros boost à votre SEO ! |
Les grandes étapes clefs et le processus de la décision de refonte à la mise en ligne
 ÉTAPE 1  DĂ©finition et expression du besoin et rĂ©daction d’un cahier des charges (mĂŞme si vous rĂ©alisez votre site en interne). Cela passera par la rĂ©daction d’un cahier des charges dĂ©taillĂ©. On trouve dans ce cahier des charges les grands paragraphes suivants : fiche signalĂ©tique du donneur d’ordres, objectifs de la refonte et du projet, pĂ©rimètre du projet, environnement graphique (charte graphique), informatique et technique, description fonctionnelle et technique, attendus de la rĂ©ponse, contraintes techniques, modalitĂ©s de sĂ©lection du prestataire, planning, ressources allouĂ©es. L’analyse de l’existant doit bien sĂ»r ĂŞtre faite. Une arborescence mĂŞme lĂ©gère doit ĂŞtre fournie. Des exemples d’inspirations peuvent aussi ĂŞtre communiquĂ©s : sites qu’on aime ou qu’au contraire, on dĂ©teste. Un moodboard peut servir.
Ce cahier des charges servira de base Ă votre processus d’appel d’offres (qui, s’il est officiel, va constituer la base d’une rĂ©daction CCTP web par exemple). Vous pouvez tĂ©lĂ©charger ici un gabarit de cahier des charges de refonte de site web.
 ÉTAPE 2  Etude des réponses à votre consultation (étude technique, méthodologique, organisationnelle). Soyez particulièrement vigilants aux points suivants :
Puis, une fois le choix fait du prestataire et de la mĂ©thode, vous pourrez envisager d’entrer dans le dur !
 ÉTAPE 3  Calage du planning : cette phase est importante car elle dĂ©termine toutes les Ă©tapes, les interactions, les livrables et les phases de review. L’utilisation d’outil de gestion de projet ou de roadmap est clef (MS Project, Gantter, Roadmunk). En terme d’outils, il sera aussi nĂ©cessaire d’adjoindre des outils d’allocation de tâches (comme Trello) puis un peu plus tard de bug-tracking. Nous y reviendrons.
 ÉTAPE 4 Meeting de kick-off : c’est le dĂ©marrage officiel du projet. Toutes les parties prenantes sont lĂ . Le planning est validĂ©. Cela permet de mieux connaĂ®tre le contexte, ses spĂ©cificitĂ©s, ses valeurs.
 ÉTAPE 5 Conception gĂ©nĂ©rale. Cela va dĂ©terminer la structure du site, les niveaux et profondeurs de navigation clefs (exemple d’arborescence), les gabarits de page nĂ©cessaires, le header, le footer, les breakpoints. L’architecture du site web est figĂ©e durant cette Ă©tape. Cela passe le plus souvent par des ateliers de co-crĂ©ation avec les diffĂ©rentes parties prenantes. Cela permet de cerner les enjeux de chacun. A ce stade, un Benchmark de votre concurrence est souvent rĂ©alisĂ©.
La conception gĂ©nĂ©rale est fondamentale car elle est le socle de l’architecture de l’information, du système de navigation, de l’agencement de la page d’accueil et de la ligne Ă©ditoriale.
 ÉTAPE 6 RĂ©daction du contenu : Ă ce stade, on doit avoir une bonne vision du contenu : home page, grandes rubriques, process Ă©ditorial. Le contenu est souvent le point le plus difficile car il touche çà l’essence mĂŞme de votre mĂ©tier. Et qui dit contenu, dit SEO ! L’expert rĂ©fĂ©rencement naturel interne ou externe doit absolument intervenir Ă cette phase.
 ÉTAPE 7 Zoning / UX : Ă partir de wireframes, on va poser l’organisation des pages, l’imbrication des ressources, la hiĂ©rarchisation des informations Ă afficher, les call to action, les parcours… Ce prototypage va nĂ©cessiter gĂ©nĂ©ralement plusieurs interactions.
 ÉTAPE 8 Direction Artistique gĂ©nĂ©rale. A partir de la charte de l’organisation et de sa dĂ©clinaison (charte graphique digitale), des maquettes vont ĂŞtre rĂ©alisĂ©es. Une attention particulière est portĂ©e Ă la page d’accueil ou home page, qui va induire le style et l’identitĂ© gĂ©nĂ©rale de tout le site. Une fois la DA posĂ©e et validĂ©e, toutes les autres pages (gabarits ou templates) seront dĂ©clinĂ©s. Naturellement, la version mobile et les version intermĂ©diaires en responsive doivent ĂŞtre maquettĂ©s ou des principes de construction donnĂ©es.
Maquettage de home (Source Eficiens – Avant-vente)
 ÉTAPE 9 Intégration et montage HTML : cette phase est en 2 étapes:
Une intégration front : montagne des pages à partir de leur codage HTML / CSS / Images : à partir des maquettes PSD, montage statique des pages, découpe et optimisation des images, polices (webfont), intégration en code HTML / CSS / JS avec utilisation de frameworks spécifiques si besoin.
Une intĂ©gration back : connexion aux bases de donnĂ©es, interactivitĂ© des formulaires, gĂ©nĂ©ration des pages dynamiquement. ImplĂ©mentation du CMS (WordPress, Liferay, Drupal…), choix des plug-in, branchement aux diffĂ©rentes API et web services (connexion aux espaces connectĂ©s, Ă l’ATS, Ă votre CRM…)
Cette phrase d’intĂ©gration puis de passage en serveur de dev / puis de prĂ©-prod seront souvent faites sur un outil de versionning comme GITHub.
C’est Ă ce stade que les performances techniques ultĂ©rieures – notamment pour le si important temps de chargement – seront mises en Ĺ“uvre. N’hĂ©sitez pas Ă challenger fortement vos Ă©quipes techniques !
 ÉTAPE 10 Tests et Q&A : cette phase est fondamentale. La phase de debugging prend du temps. Vous devrez utiliser des plateformes virtuelles de test (BrowserStack par exemple) mais aussi des devices fixes et mobiles pour une compatibilitĂ© responsive design parfaite. Tous les navigateurs du marchĂ© devront ĂŞtre testĂ©s (voir la liste que nous supportons de notre cĂ´tĂ©). En terme d’outils, un outil de ticketing comme Redmine, Mantis ou Jira est un plus.
 ÉTAPE 11 La recette ! Vous pouvez sortir le champagne et recevoir les fĂ©licitations du Comex. Profitez-en car dès le lendemain…
 ÉTAPE 12 Evolutions : comme dit plus haut, l’Ă©volution du site est Ă prĂ©voir dès la recette. On parle maintenance Ă©volutive ou corrective. Sur des sites techniquement complexes, on s’approche d’une logique de TMA (Tiers Maintenance Applicative). Cette TMA peut ĂŞtre de plusieurs types : une TMA au forfait, une TMA en rĂ©gie forfaitĂ©e ou une TMA via carnet de tickets.
En terme de budget, prĂ©voyez pour la maintenance corrective et quelques Ă©volutions, une enveloppe annuelle de 15 Ă 25% du budget initial de refonte. Ce n’est pas neutre ! Et ce qui prime par dessus tout est la sĂ©curitĂ© de votre site web, son intĂ©gritĂ©. Un PRA/PCA peuvent ĂŞtre prĂ©vus.
Voici la méthodologie et le rétro-planning que nous suivons. Vous pouvez la télécharger librement :
Il est important de bien avoir en tĂŞte ce qu’on peut changer Ă chaque Ă©tape et ce qui, une fois figĂ©, ne devra plus ĂŞtre changĂ© sous peine de gĂ©nĂ©rer des coĂ»ts et des retards consĂ©quents.
PHASE | MODIFICATIONS POSSIBLES SUR |
Conception initiale – Cadrage | Architecture du site, pĂ©rimètre, technologies front-back, arborescence |
UX – Zoning – Wireframe | Système de navigation, menus, header / footer, gabarits, home |
Direction Artistique | Choix d’identitĂ© visuelle, typo, illustration, visuels clefs, titraille, couleurs |
Intégration front / back | Animations et micro-interactions, calage responsive, cohérence et respect DA vs intégration, messages erreurs |
Après mise en ligne | En fonction des gabarits prĂ©vus et de leur modularitĂ©, modifications textes mineures – Ajout de page / Ajout / modifications de templates |
En crĂ©ation ou refonte de site, un point est trop souvent nĂ©gligĂ© : le contenu. Les Ă©quipes digitales partent du principe que c’est la responsabilitĂ© des Ă©quipes mĂ©tier, le mĂ©tier que leur job n’est pas d’Ă©crire et l’UX pose des zones contenus sans avoir une vision très claire de ce qui sera Ă©crit. La meilleure façon d’avoir un rĂ©sultat faible.
Pourtant tout part toujours du contenu. Vous devez donc :
Aujourd’hui, plus personne ne conteste de devoir se passer d’un CMS du marchĂ© pour gĂ©rer son site web
Quels sont les avantages d’un CMS ? On peut citer notamment :
Vous pourrez consulter notre article complet sur les CMS. Dans l’assurance, les CMS les plus populaires sont WordPress, Drupal, Joomla et Liferay DXP. On trouve Ă©galement EZ Platform, Jahia/Jalios, Typo3, SiteCore, Bolt et pour les plus fortunĂ©s AEM (Adobe Experience Manager).
Au delĂ du CMS qui est incontournable en 2020, on voit de plus en plus se dĂ©velopper l’usage de « page builder« , une façon simple et conviviale de crĂ©er des pages oĂą tous les effets sont prĂ©-codĂ©s. On pense parfois Ă Wix (Ă la rĂ©putation douteuse notamment en version gratuite) rĂ©servĂ© Ă de tous petits sites. Mais un autre acteur professionnel commence Ă devenir incontournable en terme de page builder, c’est Elementor. L’intĂ©rĂŞt est de rester sur un CMS standard (WordPress en l’occurence) mais d’accĂ©lĂ©rer Ă©normĂ©ment la phase d’intĂ©gration (de 30 Ă 50% de temps gagnĂ© en ayant des Ă©lĂ©ments – menus, gestion et effets sur images, video, responsive – prĂŞts Ă l’emploi).
Si votre budget est limité, partir sur un page builder est un bon choix |
La refonte d’une site internet est l’occasion de remettre Ă plat le SEO pour optimiser sa prĂ©sence sur les moteurs de recherche. A cette occasion, il faut prĂ©voir :
Au delĂ , en 2020, les fondamentaux en SEO sont les suivantes :
Plus de dĂ©tails sur le prix d’une prestation SEO dans l’article ci-contre.
Nous rencontrons de plus de en plus frĂ©quemment des demandes de changement de CMS (gĂ©nĂ©ralement pour aller vers un CMS plus « standard » comme WordPress ou Drupal) mais sans se lancer dans un changement complet d’architecture et/ou de design.
Cette approche est loin d’ĂŞtre dĂ©raisonnable. Elle de dĂ©coupler la partie purement technique de l’aspect fonctionnel, ergonomique, UX, identitĂ© visuelle. L’autre avantage est de rendre le projet plus court et plus « manageable » :
AnnĂ©e 1 : migration de site vers Drupal ou WordPress avec crĂ©ation de tous les templates Ă l’identique
Année 2 : nouvelle identité, UX et fonctionnel revus. Le dernier intérêt est de lisser le budget et le temps passé sur 2 ans.
C’est un peu l’inverse de la proposition prĂ©cĂ©dente et de loin le cas le plus frĂ©quent. C’est aussi le plus rapide car les changements concerneront l’UX, le fonctionnel, la DA voire l’architecture gĂ©nĂ©rale mais pas la « technique ». Les seuls points de vigilance Ă noter sont :
La question se pose de moins en moins. Mais, il est possible que vous ayez une équipe qui a réalisé le site il y a quelques années et qui peut assurer la refonte. Voici les avantages et inconvénients :
Réaliser son site en interne
Sous-traiter à une agence de stratégie internet en refonte de site
Enfin, last but not least, vous n’aurez souvent pas le choix. Vos Ă©quipes internes sont dĂ©jĂ surchargĂ©es ! Passer par une agence de stratĂ©gie experte en refonte de site web peut donc ĂŞtre fort salutaire.
La question est vite répondue ! Plus personne ne réalise son site en interne. Il faut trop de compétences différentes. |
Voici des exemples de budget et de coûts estimatifs pour la refonte de sites :
Exemples de budgets pour des refontes de sites
Type de site | Durée du projet | Budget |
---|---|---|
Site plaquette mono-page | 1 mois | 1,500 € à 5,000 € |
Site plaquette 3 Ă 5 gabarits – CMS WP | 3 mois | 5,000 € Ă 20,000 € |
Site plaquette complexe – 10 gabarits – CMS pro (Drupal, LifeRay…) | 3 Ă 6 mois | 25,000 € Ă 70,000 € |
Mais, le mieux est nĂ©anmoins d’utiliser notre configurateur pour vous faire votre propre idĂ©e
En effet, la refonte de site web des assurances *, des courtiers, de la rĂ©assurance, des agents gĂ©nĂ©raux, des acteurs de la prĂ©voyance et des mutuelles est très particulière. On distingue d’un cotĂ© un site vitrine ou plaquette oĂą les offres sont prĂ©sentĂ©es, un espace prĂ©vention gĂ©nĂ©ralement sous forme de blog, des simulateur de devis pour donner un prix par rapport Ă un besoin exprimĂ© et un espace souscription (le fameux parcours devis souscription). Les CMS sont aussi très particuliers au monde de l’assurance : Ă cĂ´tĂ© des grands standards (site WordPress, Drupal), on y trouve aussi des CMS plus exotiques (Liferay, Jahia, Jalios, Typo3…) ou en devenir (Adobe Experience Manager, Salesforce Content Management System…) Nous avons d’ailleurs Ă©crit un livre blanc Ă ce sujet.
*Cet article est centrĂ© sur la refonte de site. Un article similaire sur la crĂ©ation de site pour l’assurance existe Ă©galement. La grille tarifaire en crĂ©ation de site Internet est aussi disponible.
CMS WordPress
Pourquoi faire une refonte de son site Internet ?
On distingue gĂ©nĂ©ralement trois raisons : 1. Une Ă©volution de design, d’identitĂ© visuelle, de brading 2. Une Ă©volution technique (changement de CMS) 3. Une Ă©volution business dans une logique de transformation digitale (exemple digitalisation de parcours prospects / clients / devis / souscription
Comment faire une refonte de site ?
Avant tout, il faut bien poser les enjeux, écrire un cahier des charges précis (10 à 15 pages mini) puis faire un choix de prestataire efficace et fiable
Quelle méthode suivre pour une refonte de site web ?
Il faut s’adapter Ă votre enjeu et Ă vos spĂ©cificitĂ©s. Le process compte de 10 Ă 12 Ă©tapes. DĂ©couvrez-les plus haut
Quels sont les dangers à éviter dans une refonte de site internet ?
Il y en a de nombreux ! On peut en cite 5 principaux 1/ Ne pas y consacrer assez de temps 2/ NĂ©gliger la phase de rĂ©daction de contenu qui doit ĂŞtre faite par un spĂ©cialiste de la rĂ©daction web 3/ Faire un choix de CMS non standard. C’est la porte ouverte ensuite Ă beaucoup de problèmes. 4/ NĂ©gliger la phase intĂ©gration HTML front / back 5/ Penser que tout est fini Ă la recette. C’est au contraire le dĂ©but de l’optimisation fonctionnelle
Comment réussir une refonte de site Internet ?
Il n’y a pas de recette magique mais au moins 5 points importants. 1/ Bien planifier les grandes Ă©tapes 2/ Travailler avec des prestataires fiable et de qualitĂ© 3/ Ne pas trop tirer sur les prix- vous vous en mordriez les doigts 4/ Travailler en mode collaboratif avec des outils modernes 5/ Tester inlassablement
Se lancer dans la refonte de son site internet ne s’improvise pas. Avec d’innombrables refontes et crĂ©ations de sites, le dirigeant d’Eficiens vous fait dĂ©couvrir en video et en article les spĂ©cificitĂ©s de ces projets.
VidĂ©o verticale sous-titrĂ©e – Clic sur les flèches ou le carrĂ© pour plein Ă©cran – Video de 1’43”
Directement sur contact@eficiens.com, par tĂ©lĂ©phone au +33.(0)1.84.17.70.20 ou via la page contact de notre site. Vous pouvez aussi contacter directement le patron de l’agence Francis Mahut sur LinkedInÂ