Les 8 étapes d’un projet web

Cet article sera peut-être un simple rappel pour certains, pour d’autres une évidence mais je suis persuadé que cela ne fait jamais de mal de revenir sur le déroulement idéal d’un projet web. En effet quel que soit votre projet ( WordPress ou Prestashop ) vous devrez passer par ces étapes et vous poser les bonnes questions.

Alors faisons un passage chronologique sur ce que vous devrez faire pour atteindre votre objectif : un site internet performant.

1. Le brief / cahier des charges du site

Outils: Word, Excel, PowerPoint, Xmind

Trop souvent sur des petits projets cet aspect est sous-estimé mais il est primordial. C’est de la qualité de cette étape que dépendra la qualité de tout le reste. Elle peut prendre 1 journée ou plusieurs semaines parfois lorsque le projet demande l’intervention de plusieurs intervenants. Mon conseil : faites vous aider par un professionnel. Il vaut mieux prendre une journée de conseil maintenant que d’en perdre 10 fois plus dans la partie graphique ou sur les retours de validation.

Il convient pour rédiger un bon cahier des charges d’avoir:

• une idée de la concurrence
• un bookmark des sites qui vous plaisent et comprendre pourquoi
• un idée précise du contenu du site afin de définir son arborescence (je vous suggère d’utiliser xmind)
• une ligne éditoriale
• Une stratégie marketing – inbound de préférences 😉
• idéalement la totalité du contenu du site qu’on veut absolument voir présent au démarrage (texte, images, …), une partie pouvant être complété par l’agence web.

2. Le wireframe / zoning

Outils: Basalmiq, Axure, …

Vous savez à présent ce qu’il vous faut, reste à définir la mécanique qui donnera un site ergonomique. Il est possible que cette phase bouscule votre réflexion initiale sur l’arborescence mais c’est le prix à payer pour parvenir à un travail abouti.

Il vous faut en vrac : un menu (au moins), un bloc contenu, une sidebar (au moins), des call-to-actions, un logo, …

L’objectif ici est de définir comment cela s’articule et comment on passe d’un élément à un autre. Je vous conseille Axure plutôt que balsamiq car cet outil vous permet de faire des maquettes dynamiques (vous pouvez naviguer dans le site et tout de suite vous rendre compte du résultat). C’est cet outil que nous utilisons au sein de notre agence, il nous permet de mettre en ligne pour nos clients une maquette fonctionnelle dynamique qui est plus lisible qu’un zoning. C’est souvent à ce moment qu’une réunion s’impose pour redéfinir certains points du cahier des charges.

3. La maquette

Outils: Photoshop, Illustrator, Paint (nan soyons sérieux…)

Si vous donnez à un graphiste un zoning figé et du contenu (images et photos) vous l’utiliserez de la meilleure façon possible car son attention sera retenue sur l’aspect graphique uniquement. C’est ainsi que vous obtiendrez en un minimum d’allers-retours une maquette correspondant à vos attentes. Ne mélanger pas la réflexion amont et la phase de production.

Le graphiste doit rendre attrayant votre concept et surtout pas l’inventer à votre place.

Il est impératif de réaliser le nombre de maquettes justes. Trop souvent certaines pages, pourtant utiles, sont survolées dans la phase graphique  :

• la page 404
• la page de résultat de recherche
• la page de maintenance
• la page des mentions légales
• …

Ce sont tous ces petits détails qui font qu’un site est abouti ou pas.

4. L’intégration

Langages et outils: html, css, javascript et un bon CMS (WordPress, Drupal, Prestashop, RBS Change, …)

Nous y sommes votre site va commencer à être développé. Cette étape est souvent la plus longue, elle permet de transformer la maquette dans un langage compréhensible par le navigateur. Elle est d’autant plus longue si votre site est responsive design, compatible avec un grand nombre de navigateurs (surtout IE7, 8 et 9) et bien sûr en fonction du nombre de gabarits différents à réaliser.

5. Le développement

Langages et outils: PHP, javascript

Parfois les fonctionnalités du CMS suffisent et cette étape est rapide mais parfois il faut faire du développement spécifique pour atteindre vos objectifs. Si votre idée est du jamais vu, il sera d’autant plus important de passer du temps sur la question au moment du cahier des charges. Il sera même intéressant de faire intervenir un développeur ayant de l’expérience en développement web & mobile pour mesurer la complexité du projet et sa faisabilité technique.

6. La recette interne

Outils: Firefox, chrome, safari, des téléphones, … et même internet explorer

Cela peut prendre une semaine parfois pour faire passer votre site sous tous les navigateurs prévus et tester les fonctions, les affichages, puis corriger les écarts. Ne laissez pas de surprise et définissez ce point dès le cahier des charges…

7. La recette client

Outils: Firefox, chrome, safari, des téléphones, … et trop souvent internet explorer 9. Un bug tracker type mantis, …

C’est enfin le jour où vous recevez votre nouvel outil de travail, il va falloir le triturer dans tous les sens afin d’être sur qu’il correspond au brief initial. Faites vos retours à votre agence grâce à des outils dédiés comme Mantis, que nous utilisons. Cela vous permet de suivre le traitement des bugs et d’évaluer la date à laquelle votre site sera devenu « zéro bug« .

8. La mise en ligne

Outils: un hébergeur managé et sécurisé

Reste à mettre le site en ligne et à router les URLs de l’ancien site avec des redirections 301 pour ne pas perdre votre référencement déjà acquis.

Malgré tous nos efforts si l’hébergement n’est pas à la hauteur du trafic de votre site, il y aura des problèmes. Nous recommandons de ne pas choisir à la légère votre hébergeur car il existe de tout. Choisissez une hébergeur avec des solutions de bonne qualité notamment pour la protection face aux agressions externes. Évitez d’avoir votre site hébergé chez votre agence web car vous paierez souvent plus cher pour un service minimum (pas d’intervention le weekend, …).

Le bilan

Vous l’aurez compris, tout cela peut prendre un temps variable et c’est uniquement après avoir défini le cahier des charges que vous serez capable de mesurer l’étendu du chemin à parcourir pour avoir votre site web.

Si cet article vous a plu, nous vous invitons à découvrir notre agence developpement web et à télécharger notre livre blanc « Les 11 commandements d’un site internet qui convertit vos visiteurs en clients »