Les 12 étapes essentielles de réalisation d’un site internet !

Suite à l’article précédent sur " Comment avoir le meilleur site Internet ?", je vous propose aujourd’hui de voir quelles sont les étapes de réalisation d’un projet web (site vitrine / Boutique / ou plus complexe).

La première chose à savoir, c’est qu’il n’y a pas de méthode officielle que tous les développeurs ou webdesigners suivraient pas à pas.

En effet, en réalisation web, il existe des dizaines de méthodes de travail possibles…

Certaines d’entre elles sont très académiques, d’autres au contraire sont basées sur le feeling…Certains privilégieront un code propre et optimisé, d’autres miseront tout sur le graphisme et les effets visuels.

Quoi qu’il en soit, pour arriver au résultat final, il est indispensable de s’appuyer sur des étapes claires qui permettront de bien baliser le projet !

1) Définition d’un cahier des charges

Bien souvent, le porteur de projet à une idée précise de ce qu’il souhaite et il est important de bien transmettre celle-ci au professionnel qui devra la mettre en œuvre.

Pour cela, la méthode la plus simple, est d’établir un cahier des charges écrit qui devra contenir :
  La présentation du projet
  Le type de réalisation souhaité (vitrine, boutique, etc.)
  Une analyse du contexte (marché, concurrence)
  Les objectifs et résultats attendus (vendre en ligne ? récupérer des contacts ? promouvoir un service ?)
  Les cibles (particuliers ?, professionnels ? Administrations ?)
  Le budget envisagé ? (Fourchette envisagée)
  L’arborescence souhaitée ? (rubriques principales, sous-rubriques)
  Les spécifications fonctionnelles (options et modules souhaités)
  Le nom de domaine souhaité ?

2) Réalisation de la maquette Graphique

Cette étape débute le plus souvent par une réunion entre le graphiste et le porteur de projet afin d’établir de manière précise les codes graphiques souhaités.

L’idée est de transmettre au professionnel tout l’univers graphique souhaité en tenant compte :
  De l’existant : logo, charte graphique, etc.
  Des codes graphiques liés à l’activité (vert pour l’écologie, etc.)
  Des idées proposées par le client
  Des suggestions proposées par le graphiste
  Des exemples de sites existants qui s’approchent du résultat souhaité

Ensuite, le graphiste va réaliser une ou plusieurs propositions de maquettes graphiques en s’appuyant sur les éléments fournis (cahier des charges + contenu de la réunion avec le porteur de projet)

Cliquez-ici pour avoir plus d’informations sur les étapes de réalisation d’une maquette graphique : Zoning, wireframe, Mockup (source :romy.tetue.net)

Concernant Cyber NETTIC, cette étape est réalisée par des partenaires graphistes indépendants.

3) Réalisation du prototype HTML

Une fois la maquette graphique validée par le porteur de projet, le graphiste transmet les éléments à l’intégrateur/développeur qui aura pour tâche de convertir les éléments graphiques fournis (au format Adobe Illustrator, Indesign, Photoshop, etc.) en pages HTML visualisable dans un navigateur.

Bien souvent, afin de ne pas perdre de temps, cette étape est réalisée à l’aide d’un logiciel d’édition web ou WYSIWYG (Dreamviewer, Frontpage, Magix WebDesigner, etc. ) qui permet d’éditer rapidement des pages HTML simples.

4) Hébergement et nom de domaine

En parallèle de la réalisation du prototype HTML, il est important de mettre en place l’infrastructure du site, à commencer par l’Hébergement (mutualisé ou Dédié sur les plateformes telles que 1and1.fr, OVH) et la réservation du nom de domaine choisi en faisant attention aux règles d’usages (définies par l’Afnic pour les .fr par exemples) et en vérifiant bien la disponibilité de celui-ci !

5) Intégration du tableau de bord (CMS) et des bases de données

Une fois l’hébergement et le nom de domaine activés, il faut installer les bases de données (SQL) et le système de gestion de contenu CMS (SPIP, Drupal, Joomla,etc.) qui fera le lien entre les données de la base et le site définitif.

Le choix du CMS dépend de nombreux facteurs tels que le type de projets (Blog, vitrine, e-commerce,etc.), les habitudes du développeur ou encore la facilité d’administration pour l’utilisateur final.

Chez Cyber NETTIC par exemple, nous travaillons sans problèmes avec la plupart des CMS habituels, néanmoins nous sommes plus spécialisés sur le CMS Français SPIP.

6) Intégration des effets visuels évolués (animations Jquery, Html5, etc.)

Une fois le prototype réalisé en HTML, ce n’est pas terminé !

En effet, le développeur devra intégrer manuellement toutes les interactions avec le CMS (liens vers données), ainsi que tous les scripts évolués permettant de jolies animations et effets spectaculaires (En utilisant des librairies JavaScript/Jquery par exemple ou encore en utilisant les nouvelles fonctionnalités du HTML5).

7) Développement des modules dynamiques optionnels (actualités, galeries photos/vidéos, liens vers réseaux sociaux, newsletter)

Comme pour le point précédent, tous les modules optionnels sont intégrés manuellement au code source par le développeur en les reliant proprement au CMS et aux bases de données afin que l’utilisateur final puisse les mettre à jours simplement (ajout d’actualités, nouvelles photos dans les galeries, etc.)

8) Développement des versions alternatives (Version mobile, autres langues)

Dans certains projets, il est nécessaire de faire plusieurs versions du site. Ces versions alternatives permettent, par exemple, d’optimiser l’affichage du site sur des supports spécifiques (mobiles, tablettes) ou encore d’avoir un accès multilingues.

Néanmoins de nos jours, les versions alternatives ont tendance à disparaître progressivement car il existe de nouvelles techniques permettant de prévoir, dès le début du projet, la réalisation d’un site capable de s’adapter automatiquement à l’environnement sur lequel il est affiché (responsive design).

9) Rédaction des textes et intégration du contenu

Une fois l’ensemble des interfaces graphiques et fonctionnelles mises en place, il ne reste plus qu’à « remplir » le site avec les contenus prévus (textes de présentation, images, vidéos, actualités, etc.).

Un bon contenu est important car c’est cette information que viennent chercher les internautes en venant sur votre site, et c’est aussi en partie grâce à ce contenu que votre site sera positionné correctement sur les moteurs de recherche.

10) Optimisation du référencement

Il serait dommage d’avoir une superbe vitrine internet si personne ne la trouve !

L’optimisation du référencement naturel (SEO) est une étape primordiale pour être visible sur la toile. Cette optimisation est réalisée en plus de 30 points que doivent respecter à la lettre les spécialistes SEO (Définition des Mots cléfs, optinimsation du contenu, sitemap, gestion des url, optimisation des balises, liens vers réseaux sociaux, etc.).

Une bonne optimisation et un suivi régulier vous permettent d’être positionné sur la première page de Google durablement ( Ex : Si vous tapez dans Google « réalisation site internet limousin », vous trouverez cybernettic dans les premiers résultats).

Certains professionnels, comme Cyber NETTIC, ont été formés directement par Google afin connaitre les meilleures pratiques permettant de référencer proprement et durablement les sites de leurs clients.

11) Intégration des modules de suivis (Statistiques, etc.)

Une fois votre site lancé, il est intéressant de connaitre la fréquentation de celui-ci. Pour cela, il est utile de mettre en place un module de suivi de statistiques tel que Google Analytics qui vous permet de connaitre :
  Le nombre de visiteurs
  L’origine de ceux-ci
  Le taux de rebond (qualité des visites)
  Les pages du site les plus consultées
  Les objectifs réalisés (Taux de conversion)

12) La finition

Dernière étape, la finition !

En effet, il reste encore quelques petites choses à faire pour rendre son site presque parfait :
  Optimisation du chargement des pages (un site doit charger en moins de 6s)
  Respect du W3C (pas toujours facile à respecter, mais un gage de qualité)
  Pages d’erreur alternatives (C’est plus agréable pour le visiteur)
  Sécurisation du serveur FTP (évitons d’être la cible de virus)

13) Etape bonus : une fois tout ça terminé il faut faire vivre et faire connaitre son site !

En 2014, Il n’y a rien de pire qu’un site statique qui tombe dans l’oubli !

Surveillez vos statistiques et si la fréquentation chute, il est important de réagir en :
 créant du contenu régulièrement (actualités, articles, photos, vidéos) afin de donner envie aux visiteurs de revenir !
 en parlant de votre site via les réseaux sociaux, les forums, vos supports de communication papiers (cartes de visite), etc.

Normalement si vous suivez toutes ces étapes, ça devrait aller !

Si vous souhaitez plus de conseils pour faire réaliser votre projet par un professionnel, contactez-nous !