Bonnes pratiques, Site internet, Web

Refonte de site internet, adoptez les bonnes pratiques

Par , le

Refonte de site internet, adoptez les bonnes pratiques

Vous avez décidé de mettre à jour votre site web ? lui donner un coup de jeune ? de changer votre charte graphique ? de modifier votre CMS ou tout simplement votre thème ? Ceci est une très bonne idée !  Néanmoins, pour éviter tout déboire, lenteurs ou journées à rallonge, quelques règles simples doivent être suivies pour réussir la refonte de son site internet. 

Constituez un cahier des charges étoffé

Votre site est dépassé, possède des bugs ou ne correspond plus à l’image ou aux services de votre entreprise. Très bien, il est l’heure de penser à une refonte. Mais pas n’importe comment !

Première étape ESSENTIELLE, vous devez recueillir tous les éléments en votre possession et idées que vous avez, pour créer un cahier des charges le plus exhaustif possible. Le but de ce processus est de constituer une base de travail, un fil rouge sur lequel vous pourrez revenir lorsque vous aurez des doutes sur votre démarche. Il vous permettra également si besoin, de présenter sous forme de brief, votre projet de refonte à un prestataire. À l’aide de ce document, celui-ci comprendra votre besoin, l’étoffera si nécessaire et pourra vous proposer une offre, un devis.

Votre cahier des charges doit être constitué de 4 parties :

  • la genèse de la refonte, avec les parties prenantes (votre entreprise et la personne dédiée au projet, le nom de vos partenaires s’il y en a et leur domaine d’intervention) et un retro-planning
  • une partie éditoriale avec les contenus en votre possession (ceux que vous souhaitez garder) et dans le meilleur des cas une arborescence de site web
  • une partie technique avec l’existant et tous vos besoins (nom de domaine, hébergement, particularités techniques, CMS, thèmes, extensions, …)
  • une partie graphique avec les éléments en votre possession et les éléments à créer (logos, couleurs, typos, banque d’images, template de pages …)

Même s’il est parfois délicat de se projeter simplement sur une idée, n’hésitez pas à perdre du temps sur cette étape quitte à vous faire accompagner par un prestataire. 

Vous rattraperez largement ce temps perdu dans le processus de création et gagnerez en sérénité.

Définissez votre arborescence et créez au mot près vos contenus, pensez SEO

Votre cahier des charges est prêt ? Parfait ! Passons à la rédaction des contenus. 

Si vous n’avez pas encore défini l’arborescence de votre nouveau site internet, vous ne pouvez plus reculer car nous en avons besoin pour toutes les étapes qui suivent. 

En fonction du ton que vous souhaitez adopter, une architecture de site internet peut prendre de nombreuses formes. D’une manière classique, pour une entreprise de service, il peut s’articuler de la manière suivante :

  • Accueil
  • À propos
  • Service
    • Service 1
      • Service 1.1
      • Service 1.2
    • Service 2
  • Actualités
  • Contact

Exemple d’arborescence de site internet de prestation de service – wecrea

L’arborescence doit être didactique et claire, ne pas porter à confusion. Une fois définit, elle vous servira de socle à la rédaction de vos contenus. 

À partir de là, vous allez déterminer les grandes sections de chaque page et créer le squelette de celles-ci sur le format éditorial : 

  • h1 : titre principal de la page
    • h2 : sous-titre 1
      • h3 : sous-titre 1.1
        • p : mots-clés
      • h3 : sous-titre 1.2
        • p : mots-clés
    • h2 : sous-titre 2
      • p : mots-clés

Cette création en cascade suivra les « guidelines » Google  et assurera à votre site web un bon « crawl » de son contenu. 

Le squelette est sur pied, passez à la rédaction de vos paragraphes en vous appuyant sur vos mots-clés. Ne faites pas de « bourrage », privilégiez des synonymes. 

En parallèle, profitez-en pour créer les données metas de chacune de vos pages. Les plus importantes sont les « meta title » et « meta description ». 

Enfin, pour éviter toute perte de traffic, créez un tableau de redirections. Renseignez vos anciennes urls et associez leurs les nouvelles. 

Vos contenus sont prêts ? Vous avez corrigé les fautes ? Passons à la création graphique !

 

Créez un environnement graphique clair et des templates de pages au pixel près

 

Wireframes création de template de page

Photo par Sigmund sur Unsplash

Vous êtes un as d’InDesign ou d’Illustrator ? C’est top ! Si ce n’est pas le cas, vous devrez certainement recourir à l’intervention d’un webdesigner. 

Celui-ci s’appuiera sur vos intentions graphiques et les éléments recueillis dans votre cahier des charges pour produire un template par type de page. La production préalable de tous les textes lui permettra de gérer les proportions et l’homogénéité de la création. Si nous reprenons notre modèle d’une société de service, nous aurons :

  • Template 1 : Accueil
  • Template 2 : Service
  • Template 3 : Service 1, Service 1.1, Service 1.2, Service 2
  • Template 4 : Actualités
  • Template 5 : Article
  • Template 6 : Contact

N’oubliez pas que Google pense « Mobile first ». Il est essentiel de créer également des vues mobiles et idéalement tablettes, en plus de vos vues « desktop ». 

Votre site internet est à ce stade visuellement complet et ne nécessitera (en principe…) plus d’intervention de votre part. Le travail du développeur peut commencer.

 

Mise en développement, vous pouvez souffler !

 

Sur la base du travail réalisé par vos soins et celui du webdesigner, le développeur reçoit les éléments pour commencer le développement du site internet. Il s’agit d’une étape un petit peu plus passive pour vous, à moins que vous ayez envie de mettre les mains dans le code !

Afin de ne pas bloquer l’utilisation courante de votre site actuel, le nouveau site est réalisé sur ce que l’on appelle un « serveur de développement ».  Des accès vous sont ouverts pour suivre l’évolution et des points d’avancement sont effectués. 

Outre la configuration du CMS ou la création d’un socle, le développeur s’appuiera sur les templates de pages produits par le webdesigner.  Sur notre exemple, le développeur concevra 6 templates de pages qu’il pourra associer aux différentes pages comme défini dans l’arborescence, puis intégrera les contenus préalablement écris. 

C’est la naissance de votre site internet. Le développeur a TRÈS bien travaillé et est dans les temps (toujours 🙂 ) ! Passons aux retours…

 

Retours et itérations, un interlocuteur unique et la nécessité d’un espace partagé 

 

 

Nous n’allons pas nous attarder ici sur les différents retours que peuvent comporter une refonte de site internet, ils seraient beaucoup trop nombreux. Mais en principe, si le travail effectué en amont a été correctement suivi et réalisé, il ne devrait pas rester énormément de discussion. Néanmoins, l’erreur étant humaine, des évolutions ou des coquilles peuvent apparaitre.

Pour cela, il nous faut un cadre strict. Un interlocuteur de votre côté, un interlocuteur chez votre prestataire et une plateforme d’échange. Cela peut être un Trello ou tout simplement un Google Doc. Chaque élément apporter dans cette espace d’échange doit être définitif et réfléchi pour ne pas avoir à répéter le processus de création. 

Fin de la discussion ! Votre site est tout beau, tout neuf, on peut le passer en ligne. Mais attendez… 

 

Mise en production, évitez la précipitation

 

Photo par Clay Banks sur Unsplash

La mise en production est une étape clé à ne pas négliger. Il ne s’agit pas juste de changer des DNS ou de switcher le site internet sur son serveur de production.

Il faut penser SEO et utilisateurs, et donc réaliser des tests en production. On devra en réduire l’impact mais il y a une nécessité de passer ce nouveau site en maintenance quelques minutes/heures. Le temps de régler les dernières questions en suspens : Avez-vous passé vos redirections ? Avez-vous installé votre Google Analytics, configuré votre Webmaster Tools ? Est-ce que vous recevez bien vos emails ? …

Une fois les derniers doutes levés, vous pouvez enlever le mode de maintenance, vous félicitez et félicitez vos collaborateurs pour le travail accompli (avec une petite bouteille de champagne pas loin 😉 ) et profitez de votre tout nouveau site internet !

Et après la refonte…

Après ? On communique, on track, on maintient, mais c’est une autre matière.

 

La refonte d’un site internet reprend peu ou proue le processus de création d’un site internet. La différence étant que vous ne travaillez pas sur une base vierge mais avez déjà des éléments d’efficacités. Pour ne pas les perdre, il vous faut les recenser sur un cahier des charges dans lequel vous associerez toutes les nouvelles idées et besoins que vous avez. Ce brief servira de base à la création de vos contenus et de vos interfaces graphiques. Deux étapes essentielles pour la mise en développement de votre nouveau site internet. Pensez à constituer un cadre de travail strict avec un interlocuteur unique de part et d’autres. Il vous permettra de travailler avec efficacité, rigueur et créativité. Enfin, avant la mise en ligne définitive, n’hésitez pas à tester et re-tester votre nouvelle création pour vous assurer de son bon fonctionnement. 

Téléchargez notre kit de refonte !

@font-face { font-display: block; font-family: Roboto; src: url(https://assets.sendinblue.com/font/Roboto/Latin/normal/normal/7529907e9eaf8ebb5220c5f9850e3811.woff2) format("woff2"), url(https://assets.sendinblue.com/font/Roboto/Latin/normal/normal/25c678feafdc175a70922a116c9be3e7.woff) format("woff") }@font-face { font-display: fallback; font-family: Roboto; font-weight: 600; src: url(https://assets.sendinblue.com/font/Roboto/Latin/medium/normal/6e9caeeafb1f3491be3e32744bc30440.woff2) format("woff2"), url(https://assets.sendinblue.com/font/Roboto/Latin/medium/normal/71501f0d8d5aa95960f6475d5487d4c2.woff) format("woff") }@font-face { font-display: fallback; font-family: Roboto; font-weight: 700; src: url(https://assets.sendinblue.com/font/Roboto/Latin/bold/normal/3ef7cf158f310cf752d5ad08cd0e7e60.woff2) format("woff2"), url(https://assets.sendinblue.com/font/Roboto/Latin/bold/normal/ece3a1d82f18b60bcce0211725c476aa.woff) format("woff") }#sib-container input:-ms-input-placeholder { text-align: left; font-family: "Helvetica", sans-serif; color: #c0ccda; }#sib-container input::placeholder { text-align: left; font-family: "Helvetica", sans-serif; color: #c0ccda; }#sib-container textarea::placeholder { text-align: left; font-family: "Helvetica", sans-serif; color: #c0ccda; }
Nous n'avons pas pu confirmer votre inscription.
Votre email est valide. L'email contenant le lien de téléchargement est en cours d'envoi !

Vous souhaitez mettre à jour votre site internet ? Vous avez un projet de refonte ? N’hésitez pas à télécharger notre kit de refonte pour vous aider dans ce processus. 

function handleCaptchaResponse() { var event = new Event('captchaChange'); document.getElementById('sib-captcha').dispatchEvent(event); }
window.REQUIRED_CODE_ERROR_MESSAGE = 'Veuillez choisir un code pays'; window.LOCALE = 'fr'; window.EMAIL_INVALID_MESSAGE = window.SMS_INVALID_MESSAGE = "Les informations que vous avez fournies ne sont pas valides. Veuillez vérifier le format du champ et réessayer.";window.REQUIRED_ERROR_MESSAGE = "Vous devez renseigner ce champ. ";window.GENERIC_INVALID_MESSAGE = "Les informations que vous avez fournies ne sont pas valides. Veuillez vérifier le format du champ et réessayer.";window.translation = { common: { selectedList: '{quantity} liste sélectionnée', selectedLists: '{quantity} listes sélectionnées' } };var AUTOHIDE = Boolean(0);

Nos dernières actualités

Suivez notre actualité !

Inscrivez-vous à notre newsletter et restez informé.

Nous nous soucions de la protection de vos données. Lisez notre Politique de confidentialité