Les Etapes de Création de site

L’ épopée des 3 Suisses incarne l’amélioration brute mais continue de l’expérience d’achat (plus sur l’histoire des sites internet ?). En s’adossant aux pionniers de la mode, 3suisses.com assoit sa position de précurseur sur le marché et devient sans le savoir une marque-média. 

Les sites internet décuplent la visibilité des marques. Plus encore : les pure players* naissent dans les mains des communautés.

* Un pure player / (faux anglicisme, déformation de l’anglais américain pure play) est une entreprise non diversifiée exerçant dans un secteur d’activité unique.
En France, l’expression s’est popularisée pour désigner les entreprises œuvrant uniquement sur Internet. Par exemple les sites Web d’information sans édition papier. 

C’est l’avènement des “consommacteurs” et le nouveau comportement phygital que doivent comprendre les marques pour capter l’attention.
Sur cette page, Web Gardeners présente son process de construction d’un site depuis le point de vue d’un client.

L’agence répond ensuite aux questions les plus fréquemment posées.  

Bienvenue chez Web Gardeners, les jardiniers du web !

1. Quelles sont les étapes pour construire un projet web ?
2. Où s’entraîner gratuitement à créer un site ?
3. Combien de temps pour créer un site web?
4. Comment gagner de l’argent en créant des sites web ?
5. Quel prix pour faire un site internet ?

1. Quelles sont les étapes pour construire un projet web ?

Webgardeners livre son guide de création de projet web. Il déroule en cascade toutes les étapes de la planification jusqu’à la mise en ligne.

1.1. Projet et recherche

Un projet web démarre généralement avec des recherches sur les éléments suivants :

  • Marché
  • Utilisateurs
  • Concurrents
  • Exercice de l’activité 

Si vous avez déjà un site, vous pouvez déjà utiliser l’analyse d ‘audience pour comprendre s’ il répond bien aux besoins des visiteurs.
Observer les interactions existantes est le meilleur moyen de mesurer l’intérêt que vous portent les visiteurs.

Une étude de marché demeure un excellent moyen de mieux connaître le marché :

  • Activité : 
    • Quels sont les objectifs ?
    • Comment le site web y répond-il ?
  • Utilisateurs :
    • Qui sont-ils ?
    • À quel problème votre site web répond-il ?

Ces réponses servent à établir le projet, en s’assurant qu’il s’aligne pour rencontrer à la fois les besoins du client et les objectifs.
Lors de ces étapes, vous devriez aussi comprendre quelles actions et tâches le visiteur doit effectuer.

Exemple : Disponibilité de chambre dans un hôtel, s’abonner à une newsletter…

1.2. Choix, dépôt et enregistrement du nom de domaine (ndd)

Le nom de domaine est important car c’est une partie de l’adresse url :

www.nomdedomaine.com

La composition d’un nom de domaine

Beaucoup d’autres informations peuvent y figurer. Le ndd peut comporter les informations suivantes :

sousdomaine.domaine.tld/repertoire

  • Domaine : le nom enregistré pour votre site
  • Sous-domaine : un domaine qui faisant partie d’un autre domaine
  • Tld* : le premier niveau du domaine, le plus important dans l’url
  • Répertoire : un dossier pour organiser le contenu

Astuce : les noms de domaine devraient être faciles à mémoriser, et si possible contenir des mots clés liés à votre activité. Si vous créez un site pour un restaurant “la prairie”, “laprairierestaurant.com” sera un meilleur choix que “la prairie” grâce au mot clé “restaurant”.

*En informatique, nom de domaine de premier niveau, abrégé TLD (de l’anglais top-level domain) 

Les informations d’un nom de domaine

Le “TopLevelDomain” peut indiquer le pays dans lequel le nom de domaine est enregistré, mais peut aussi donner une information sur la nature du
domaine :

  • .com : le TLD le plus courant
  • .co.fr, .co.uk, .co.au,… : donne des informations sur le pays
  • .org : utilisé par des organisations à but non lucratif
  • .gov : utilisé par des gouvernements
  • .ac : utilisé par des institutions académiques

Le bureau d’enregistrement ou registraire de ndd

Les noms de domaine doivent être enregistrés et sont payants. Beaucoup d’agences le font pour vous, mais on peut le faire directement en ligne auprès du “registraire”. 

Celui-ci propose proposant donc des prestations de ndd :

  • Enregistrement
  • Transfert
  • Renouvellement

Une stratégie digitale démarre dès le travail sur le nom de domaine :

  • Marque
  • Intention consommateur 
  • Extension

Une partie de la visibilité se joue dès ces éléments qui influencent la vie de la marque, sans parler de la protection de la propriété où les litiges peuvent se solder en millions d’euros.

Si vous connaissez déjà le nom du site, découvrez comment :

1.3. UX & Stratégie de contenus

UX signifie User Experience. En Français, il s’agit de l’expérience utilisateur.

Avant que le site soit designé et développé, il doit être “maquetté” grâce à un modèle ou wireframe*. Toutes les personnes concernées doivent repasser sur le design et le développement pour être sûr qu’il soit réalisable.

* Le wireframe ou maquette fonctionnelle est un schéma utilisé lors de la conception d’une interface utilisateur. Il définit les zones et composants à contenir. À partir de ce wireframe le graphiste réalise l’interface.

La navigation 

Il est capital de rassembler, analyser et cartographier quel contenu doit figurer sur le site web. Cette architecture et son plan de site constituent la hiérarchie du contenu et la navigation (parcours visiteur).

La navigation doit être intuitive : l’internaute est guidé par des principes “UX Design” : ergonomie, facilité, clarté…

Grâce au brainstorming, on apporte des nouvelles idées et approches. Il est bien plus facile d’apporter du changement en phase de recherche et mise au point plutôt qu’en fin de programmation. 

Les contenus

A ce moment, il faut évaluer aussi quel types de contenus seront sur le site : contenu statique qui change peu. Ou bien un site avec CMS (gestionnaire  de contenu) pour ajouter régulièrement du contenu : articles de blog, images ou produits ?

Le site devrait alors avoir des fonctionnalités. Celles-ci doivent apparaître dans le cahier des charges du site utilisé pour communiquer toute contrainte de design.

Les objectifs

Les contenus servent les objectifs. Ceux-ci font l’objet peuvent varier, marketing ou commercial :

  • Télécharger
  • Inscription ou abonnement
  • Acheter

Il est maintenant temps de passer du plan à la construction.

1.4. Référencement & Visibilité

La catégorie “serre” du menu du site aborde en profondeur la thématique du référencement, elle-même une partie de la stratégie digitale abordée en catégorie “jardinerie”.
L’audience issue des moteurs de recherche (référencement ou seo) est vitale pour un site; sans trafic, les chances que le site remplisse ses objectifs marketing sont nulles. Les moteurs doivent parcourir le site entièrement pour l’indexer correctement et savoir ce qui est pertinent selon les mots clés.

Une page web comporte du texte et du code informatique, respectivement visible et invisible par les internautes. On utilise le langage “CSS” qui porte sur le style des pages.
Certains contenus visés par le langage “CSS” ne pourront pas être indexés, comme le texte :

  • dans un fichier image 
  • de souscription à un formulaire, connexion,…
  • tonditionné à l’exécution de code “Javascript” 

Il est préférable que ces scripts soient situés dans un fichier séparé pour ne pas perturber l’interprétation du code par le navigateur.

1.5. Wireframe Design

Le choix du design se fait avant la programmation. On appelle parfois cette étape le zoning ou zonage correspondant à l’organisation des contenus.

Le Moodboard

En guise d’inspiration, la création d’un moodboard ( tableau d’humeur ) se déroule en mode brainstorming en laissant libre cours à la créativité des acteurs.
Il rassemble et présente une vision colorée sur une thématique :

  • Images
  • Couverture de magazine
  • Couleurs 
  • Dessins 
  • Mots clés 

Du wireframe au design

Le rôle de cette étape consiste à transformer le wireframe et les choix basiques de mise en page concrète et visible :

  • Images statiques montrant à quoi ressemble le projet
  • Cadres avec leurs différentes proportions
  • Insertion de documents photos, formulaires, vidéos,…
  • Liens réseaux sociaux
  • Menu de navigation
  • Logo et slogan
  • Ligne de flottaison*
  • Pages essentielles de navigation : homepage, landing page, slider, carrousel…

*Sur une page web, la ligne de flottaison sépare la partie directement visible (haut de page) au chargement, de la partie invisible (reste de la page).

1.6. Hébergement serveur

Un hébergeur dispose d ‘ordinateurs et serveurs informatiques stockant des fichiers et fonctionnant H24/7, interconnectés via du haut débit, ils assurent les prestations supports de :

  • Mise à disposition des fichiers : sites, messageries, base de données…
  • Maintenance : sécurité, mise à jour, veille
  • Technologies informatiques : langages, protocoles 

A NOTER :

Différence entre “hébergeur” et “registraire” 

  • Le registraire où on achète le ndd : Godaddy, Ionos, OVH,…
  • L’hébergeur où les fichiers du site sont installés 

En réalité les deux proposent les deux types de prestations car cela simplifie la gestion pour les entreprises, les particuliers ou quelque soit l’administrateur de site web.

HTTP et FTP

L’hébergeur stocke les sites web sous forme de fichiers disponibles pour les internautes qui se rendent à l’adresse web dans la barre d’url via :

  • FTP :  File Transfert Protocol 
  • HTTP : HyperText Transfert Protocol

Critères de choix d’un hébergeur

  • Simplicité : CMS, guide de démarrage, assistance (selon les besoins)
  • Palette et souplesse de l’offre de prestations
  • Taux de service : rupture d’alimentation, voisinage
  • Technologie : cloud, sécurité
  • Prix

1.7. Développement

1.71. CMS : Content Management System 

Le web pour tous

La conception de site web couvre plusieurs technologies de langage et d’infrastructure.
Pour permettre leur harmonisation, des développeurs ont mis au point des logiciels qui dispensent de coder chaque page.
Ces solutions dites de CMS pour Content Management System (WordPress, Joomla) exploitent des langages tels que :

  • Php (Hypertext PreProcessor) 
  • Mysql

L’information stockée et les contenus des pages dynamiques changent selon les paramètres de navigation et de recherche de l’internaute.

 

Le succès des CMS 

Les CMS ont permis l’adoption du web dans tous les secteurs économiques grâce à :

  • Une solution globale
  • La gratuité : le concept “open-source” de l’industrie informatique
  • La communauté qui enrichit de fonctionnalités et sécurise les versions
  • La mutation de l’économie

1.7.2. Langage Frontend

Cette étape est bienvenue car on a déjà une bonne idée visuelle du projet.
Cependant le développeur peut d’ailleurs démarrer le projet dès les premières maquettes. 

Il utilise à cet effet des “templates“ dans le langage front-end choisi pour le projet :

  • Html : langage de structure 
  • Css : langage de style
  • Javascript : animation des pages

1.7.3. Langage backend

Un site professionnel, surtout s’ il est marchand, comporte aussi une partie non visible par l’internaute : d’où le terme ”backend”.
Cette partie fait appel à des concepts de programmation plus complexes :

  • Mysql
  • Php

Ils permettent de personnaliser et créer des pages dynamiques faisant appel à une base de données qui selon les paramètres, vont changer le contenu visible par l’internaute.

1.7.4. Bibliothèque et Frameworks

Enfin les frameworks et bibliothèques sont des solutions logicielles développées dans le langage cible et facilitent la manipulation du code. Chacun a ses spécificités et ses applications type :

  • Symfony Framework Php pour les sites ecommerce
  • Entity framework pour Mysql : simplifie l’accès aux données
  • React bibliothèque Javascript

Un beau site, bien designé, des bons contenus…Le meilleur moment arrive !

1.8. Test et Mise en ligne

Les tests sont une part entière du développement, et devraient se faire tout au long du début du projet, au design et à la construction.
Les tests doivent être faits par des utilisateurs, pas seulement par l’équipe qui a développé le projet.

Interopérabilité : même design sur tous navigateurs

Les tests doivent aussi être faits sur tous les différents navigateurs (qui interprètent le code informatique) pour s’assurer du bon déroulement sur des explorateurs web différents.
Il faut systématiquement tester les liens avant la mise en ligne du site.
Des outils de vérification du code tels que validator.W3.org sont à utiliser pour valider le code HTML.

Analyse d’audience

Selon les objectifs attendus, il faut paramétrer les balises de tracking (“tags analytics”) dans les pages.
Des tests doivent être réalisés pour faire remonter l’activité dans la plateforme d’analyse d’audience type Google Analytics, Google Search Console, AT Internet ou autre.

2. Où s’entraîner gratuitement à créer un site ?

Choix d’un éditeur de code

De nombreux éditeurs de code existent pour le plaisir des développeurs, surtout en fonction de leurs besoins, et leur niveau.
Historiquement Brackets ou Komodo, d’autres plus récents comme VSC pour Visual Studio Code offrent des fonctionnalités et une ergonomie très poussées.
Naturellement, parvenir à être autonome est difficile pour mener un projet entier avec ce type de solution. Ces solutions sont de la découverte un support professionnel.

 

Editeurs de code

https://code.visualstudio.com/

http://brackets.io/

 

Plateformes d’entraînement

https://python.developpez.com/cours/

https://fr.khanacademy.org/

https://www.codecademy.com/

https://www.wooclap.com/fr/

 

Plateforme de cours en ligne

https://www.my-mooc.com/

https://skillvalue.com/fr/

https://openclassrooms.com/fr/

 

Entraînement aux algorithmes

http://www.france-ioi.org/

3. Combien de temps pour créer un site web ?

D’une heure à une semaine, un mois…

Les facteurs sont :

  • Le nombre de pages du site en questions
  • Les objectifs du site : étude de marché, visibilité, fonctionnalités
  • La mise au point de la copy strategy
  • Les langages de programmation :
    • front-end (html, css, javascript) 
    • backend : php (page dynamique) , sql (base de données)

Un site vitrine pour un commerçant est assez rapide (1 semaine max) sous réserve que soient connus les éléments : 

  • Identité visuelle : logo, photos…
  • Charte graphique : couleurs, formes
  • Persona*
  • Plateforme de marque

*Un persona (en marketing) est un personnage imaginaire représentant le segment cible d’un nouveau produit ou service.

4. Comment gagner de l’argent avec des sites web ?

Les modèles de rémunération sont :

  • Affiliation : commission pour promotion d’un produit pour le site partenaire
  • Bannières publicitaires via Google AdSense : après paramétrage du partenariat, rémunération selon le nombre de vues ou “impressions” consommées sur le site en question,
  • Bannières annonceurs en direct : sans l’intermédiaire Google, le site diffuse des messages publicitaires auprès du trafic
  • E-commerce : boutique en ligne pour vendre des produits et prestations,
  • Acquisition de leads ou lead generation : négoce de mails acquis sur abonnement newsletter par exemple.

L’équipe Web Gardeners rappelle ici que le webmarketing est un métier concurrentiel de pointe. Rentabiliser un site prend du temps pour trouver et exploiter, tester et déployer des idées.

Et cela a un coût…D’où l’importance de faire appel à des professionnels !

5.Quel prix moyen pour faire un site professionnel ?

Un prix réaliste moyen est de 3.000 € en suivant les étapes de création mentionnées plus haut :

  • Recherches sur le projet
  • Choix du ndd
  • Contenus
  • Référencement 
  • UX design
  • Développement
  • Tests et mise en ligne

 

Maintenant que vous savez comment créer un site internet, Webgardeners vous propose :

Partager !

Politique de Confidentialités
QUI SOMMES-NOUS ?

L’adresse de notre site Web est : https://www.web-gardeners.fr

UTILISATION DES DONNÉES PERSONNELLES COLLECTÉES
COMMENTAIRES

Quand vous laissez un commentaire sur notre site web, les données inscrites dans le formulaire de commentaire, mais aussi votre adresse IP et l’agent utilisateur de votre navigateur sont collectés pour nous aider à la détection des commentaires indésirables.

Une chaîne anonymisée créée à partir de votre adresse de messagerie (également appelée hash) peut être envoyée au service Gravatar pour vérifier si vous utilisez ce dernier. Les clauses de confidentialité du service Gravatar sont disponibles ici : https://automattic.com/privacy/. Après validation de votre commentaire, votre photo de profil sera visible publiquement à coté de votre commentaire.

MÉDIAS

Si vous êtes un utilisateur ou une utilisatrice enregistrée et que vous téléversez des images sur le site web, nous vous conseillons d’éviter de téléverser des images contenant des données EXIF de coordonnées GPS. Les visiteurs de votre site web peuvent télécharger et extraire des données de localisation depuis ces images.

FORMULAIRES DE CONTACT
COOKIES

Si vous déposez un commentaire sur notre site, il vous sera proposé d’enregistrer votre nom, adresse de messagerie et site web dans des cookies. C’est uniquement pour votre confort afin de ne pas avoir à saisir ces informations si vous déposez un autre commentaire plus tard. Ces cookies expirent au bout d’un an.

Si vous avez un compte et que vous vous connectez sur ce site, un cookie temporaire sera créé afin de déterminer si votre navigateur accepte les cookies. Il ne contient pas de données personnelles et sera supprimé automatiquement à la fermeture de votre navigateur.

Lorsque vous vous connecterez, nous mettrons en place un certain nombre de cookies pour enregistrer vos informations de connexion et vos préférences d’écran. La durée de vie d’un cookie de connexion est de deux jours, celle d’un cookie d’option d’écran est d’un an. Si vous cochez « Se souvenir de moi », votre cookie de connexion sera conservé pendant deux semaines. Si vous vous déconnectez de votre compte, le cookie de connexion sera effacé.

En modifiant ou en publiant une publication, un cookie supplémentaire sera enregistré dans votre navigateur. Ce cookie ne comprend aucune donnée personnelle. Il indique simplement l’ID de la publication que vous venez de modifier. Il expire au bout d’un jour.

CONTENU EMBARQUÉ DEPUIS D’AUTRES SITES

Les articles de ce site peuvent inclure des contenus intégrés (par exemple des vidéos, images, articles…). Le contenu intégré depuis d’autres sites se comporte de la même manière que si le visiteur se rendait sur cet autre site.

Ces sites web pourraient collecter des données sur vous, utiliser des cookies, embarquer des outils de suivis tiers, suivre vos interactions avec ces contenus embarqués si vous disposez d’un compte connecté sur leur site web.

STATISTIQUES ET MESURES D’AUDIENCE
UTILISATION ET TRANSMISSION DE VOS DONNÉES PERSONNELLES
DURÉES DE STOCKAGE DE VOS DONNÉES

Si vous laissez un commentaire, le commentaire et ses métadonnées sont conservés indéfiniment. Cela permet de reconnaître et approuver automatiquement les commentaires suivants au lieu de les laisser dans la file de modération.

Pour les utilisateurs et utilisatrices qui s’enregistrent sur notre site (si cela est possible), nous stockons également les données personnelles indiquées dans leur profil. Tous les utilisateurs et utilisatrices peuvent voir, modifier ou supprimer leurs informations personnelles à tout moment (à l’exception de leur nom d’utilisateur, utilisatrice). Les gestionnaires du site peuvent aussi voir et modifier ces informations.

LES DROITS QUE VOUS AVEZ SUR VOS DONNÉES

Si vous avez un compte ou si vous avez laissé des commentaires sur le site, vous pouvez demander à recevoir un fichier contenant toutes les données personnelles que nous possédons à votre sujet, incluant celles que vous nous avez fournies. Vous pouvez également demander la suppression des données personnelles vous concernant. Cela ne prend pas en compte les données stockées à des fins administratives, légales ou pour des raisons de sécurité.

TRANSMISSION DE VOS DONNÉES PERSONNELLES

Les commentaires des visiteurs peuvent être vérifiés à l’aide d’un service automatisé de détection des commentaires indésirables.

INFORMATIONS DE CONTACT
INFORMATIONS SUPPLÉMENTAIRES
COMMENT NOUS PROTÉGEONS VOS DONNÉES
PROCÉDURES MISES EN ŒUVRE EN CAS DE FUITE DE DONNÉES
LES SERVICES TIERS QUI NOUS TRANSMETTENT DES DONNÉES
OPÉRATIONS DE MARKETING AUTOMATISÉ ET/OU DE PROFILAGE RÉALISÉES À L’AIDE DES DONNÉES PERSONNELLES
AFFICHAGE DES INFORMATIONS LIÉES AUX SECTEURS SOUMIS À DES RÉGULATIONS SPÉCIFIQUES