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 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.
Prenez rendez-vous dès à présent si vous voulez que nous définissions ensemble votre cahier des charges sur la base de notre proposition de réalisation de site Internet ou de notre document d’organisation de projet de site Internet et/ou consulter notre livre blanc sur la création d’un site web pour prolonger votre réflexion.
Voir les commentaires (3)
Bonjour, article intéressant et qui résume plutôt bien la chose mais pour lequel je mettrais un bémol. A l'étape d'intégration, vous appuyez sur le fait qu'il faille un bon CMS. Je ne suis pas d'accord.
Le CMS n'est pas toujours utile et même parfois bien au contraire il complexifie le développement par la suite. Pour un site vitrine par exemple, nul besoin d'utiliser Wordpress. Et parfois avec des clients qui veulent absolument certaines fonctionnalités (même s'ils ne le le savent pas à l'avance), créer un site de zéro sur la base d'un bon framework permet de gagner un temps considérable de maintenance et d'évolution lorsqu'il s'agit de développer une fonctionnalité spécifique plutôt que d'utiliser un plugin Wordpress. Également, le code HTML généré par les CMS n'est pas toujours SEO friendly.
En bref, un bon CMS oui, mais pour les utiliser pour ce à quoi ils sont destinés : Wordpress pour de la publication d'articles, Prestashop pour un site e-commerce, ... Une maquette bien intégrée en HTML suffit parfois pour développer rapidement un site avec un framework derrière.
Merci pour ce commentaire.
Nous sommes d'accord. Un bon CMS est utile pour mettre en place un blog ou realiser un site ecommerce. Pour un site vitrine simple ce n'est pas nécessaire mais c'est vrai aussi que nous privilégions des sites vivants facile a faire évoluer par nos clients directement pour qu'ils puissent être animer et générer du trafic.
Bien cordialement,
Gabriel
Bonjour,
Merci pour cet article enrichissant . Je suis assez d'accord avec Minion, les CMS ont beaucoup d'avantages puis au vue des évolutions requises deviennent rapidement des inconvénients.
Le cahier des charges reste pour moi le point primordial dans la mise en place d'un site ou même plus généralement d'un projet Web. En décrivant sur un document le besoin actuel puis les évolutions souhaitées le prestataire pourra apporter la solution adéquate au besoin.
Pour ne pas me laisser influencer par un prestataire qui voudra absolument me vendre sa solution j'ai téléchargé un modèle de cahier des charges que j'ai complété moi-même et je lui ai ensuite envoyé.
Il y a des modèles un peu partout sur le net, pour ma part je suis allée sur http://www.moncdc.fr