1 of 14

Slide Notes

- Schéma 11 : la démarche de création de site web
DownloadGo Live

Les étapes de création d'un site internet

No Description

PRESENTATION OUTLINE

LES ÉTAPES DE CRÉATION D'UN SITE INTERNET

De la conception à la mise en ligne
- Schéma 11 : la démarche de création de site web

Règles à respecter avant la création

  • Le nom de domaine
  • Définir les fonctionnalités du site (conception)
  • Charte graphique, navigabilité et contenu
  • Site statique, site dynamique, CMS
  • La mise en ligne et l'hébergement du site
  • Le référencement
  • La gestion du contenu
1. Nom de domaine :
Un nom de domaine doit être : disponible (inpi), facile à mémoriser et facile à utiliser.
Les extensions :
.org est plutôt réservé aux associations, fondations, .com aux entreprises, .fr aux sites français, .eu européens
Les principales extensions de domaines :
.fr : sites français
.com : Sites à caractère commercial
.net : Organismes en rapport direct avec Internet
.org : Organisations, associations et ONG.
.biz : Business (entreprises)
.info : pour les médias ou sites d’informations

2. Un site « carte de visite » pour affirmer sur le réseau la présence d’une association, d’une entreprise ne demandera pas le même travail, les mêmes fonctionnalités qu’un site marchand ou un forum, où l’interactivité avec les internautes est essentielle

3. Une charte graphique accrocheuse sans être « tape-à-l’œil », une navigabilité bien pensée et pratique, un contenu clair et bien présenté. La charte graphique doit respecter les règles de compatibilité des couleurs entre elles, éviter les contrastes trop violents (ex. : texte bleu sur fond jaune) et doit avoir un rapport avec les autres documents de l’association, de l’entreprise.
La navigabilité doit être conçue de manière à ce que, où que l’on soit dans le site, on puisse se retrouver rapidement dans les principales têtes de chapitres. De cela découle la règle dite des « trois clics » : l’internaute doit pouvoir accéder à l’information qu’il recherche en trois clics maximum. Le contenu sera d’autant plus lu qu’il n’utilisera pas une police de caractère difficile à lire, exotique, trop petite, que les blocs où il sera inséré seront facilement accessibles, qu’il n’y aura pas trop d’informations dans un espace restreint.

4. Lorsque l’on conçoit un site, on envisage quels seront le ou les langages qui vont permettre l’affichage des données selon que le site sera statique ou dynamique. Un site statique ne comportera pas de mises à jour quotidiennes et n’aura pas vocation à susciter l’implication des internautes. Un site dynamique, qui effectue de nombreuses actions à la demande coté serveur, sera plutôt destiné à un forum ou à une entreprise qui vend ses produits via internet. Pour les sites qui comptent de nombreux collaborateurs, lesquels ne sont pas forcément formés aux subtilités des langages de programmation, il existe des formules de management de contenu en ligne qui permettent de publier facilement des articles comme Spip, Joomla ou Wordpress.

5. Le nom de domaine est acheté, la version définitive du site a été acceptée, il ne reste plus qu’à le publier sur internet pour que tout un chacun puisse le visiter. Il faut en conséquence choisir un hébergeur où stocker les fichiers. Le choix de cet hébergeur n’est pas anodin dans la mesure où il faut envisager des critères tels que le prix de l’hébergement en fonction de l’espace disque alloué, de la bande passante disponible (plus il y a de visiteurs, plus la bande passante doit être importante), de la possibilité d’utiliser une base de données. La sécurité est aussi un élément essentiel à ne pas négliger.

6 Référencement :
e site existe, il est en ligne, mais il faut qu’il soit visité. Pour cela, il doit être visible dans les moteurs de recherche les plus connus tels que Google, Yahoo ou Bing de Microsoft. La seule manière vraiment efficace d’être référencé est que les sites internet qui œuvrent dans un domaine proche aient un lien qui pointe vers votre site. Ce qui signifie un travail de prospection pour l’échange de liens.

7 Gestion du contenu
Voilà, vous avez suivi toutes les étapes, il ne vous reste plus que le contenu à gérer, lequel, rappelons-le, est essentiel car c'est lui qui fait que votre site est visité ou pas. N'oubliez pas que ledit contenu doit être mis à jour régulièrement, le plus souvent possible. Sans contenu, pas de visites...

Définir l'arborescence de votre site internet

Une vision globale du site web et des parcours de navigation
L’arborescence d’une site Internet permet d’en définir la structure globale. C’est le premier pas pour architecturer toutes les informations que vous avez commencé à traiter jusqu’alors. L’arborescence d’un site Internet est une simple retranscription des différentes pages et sections d’un site internet, de manière structurée, un peu à la manière d’un arbre généalogique. Si vous pouvez réaliser une arborescence à l’aide d’un logiciel comme Microsoft PowerPoint, il en existe d’autres, notamment Xmind (gratuit, en anglais)

L’arborescence permet d’avoir une vision globale du site web et des parcours de navigation avant de réaliser les maquettes des pages principales.

Il est coutume de dire qu’une page qui peut être atteinte en 3 clics est inutile.

Un dispositif de navigation peut s’appuyer sur différents supports. Quelques exemples :
Menu de navigation principal, avec éventuellement un menu secondaire qui apparait au survol du menu principal
Menu de navigation secondaire, il peut s’agit du menu enfant de l’élément sélectionné dans le menu principal, mais il peut également s’agir d’un menu complètement différent
Moteur de recherche interne, avec un ou plusieurs axes de recherche
Barre latérale, où on peut favoriser la navigation horizontale via des suggestions de produits ou d’articles,
Pied de page, avec un accès aux principales catégories du site ou à des pages clés

L’arborescence de votre site internet aura un impact considérable sur son référencement naturel, que ce soit au niveau global ou dans la hiérarchie des pages de votre site. Les moteurs de recherche analysent les liens entre les pages de votre site pour en comprendre la structure générale, et déterminer quelles sont les pages clés.

Le maillage interne est un sujet vaste et passionnant. Pour vous avoir à avoir les idées claires quand vous travaillez sur votre arborescence, voici les trois règles essentielles :
Plus une page est haute dans la hiérarchie de votre plan, meilleur sera son référencement,
Plus une page reçoit de liens d’autres pages de votre site, meilleur sera son référencement,
Plus une page reçoit (et envoie) des liens de pages proches au niveau sémantique, meilleur sera son référencement.

Structurer les pages du site Internet
Sans définir à ce stade le menu de navigation, il s’agit de mettre en ordre le puzzle des thèmes que vous aurez prédéfini à l’étape précédente, et de les transcrire sous forme de pages liées les unes aux autres. Généralement, on garde l’idée d’avoir une thématique par page, sauf pour la page d’accueil du site Internet qui constituera un résumé de tous vos contenus.
Pour un site Internet de quelques pages (type site vitrine), la définition de l’arborescence du site sera simple et rapide à effectuer. Pour un site plus volumineux, il faudra sans doute y consacrer un peu plus de temps.

Exemples :
1- Arborescence de 'un site web d'archive

Réaliser l'arborescence en 5 étapes

  • Lister tous les contenus/thématiques du site (réfléchir à la ligne éditoriale)
  • Analyser l'arborescence de vos concurrents
  • Organiser et hiérarchiser le contenu
  • Formaliser l'arborescence sur papier ou à l'aide d'un logiciel de maquettage (Cacoo- google+, Freemind, Mindmaster)
  • La tester sur vos visiteurs (personas)
1- LISTER LES CONTENUS - Exemple : Pour une entreprise industrielle qui cherche à faire la promotion de ses activités sur Internet, les contenus pourraient par exemple être listés comme suit :
Offres & services : Activité générale, Domaine expertise 1, Domaine expertise 2, Points forts
Catalogue : Gamme 1 (3 produits), Gamme 2 (8 produits), Gamme 3 (2 produits)
A propos : Contact, Bureaux, Qui sommes-nous, Mentions légales

2. Analyser l’arborescence de vos concurrents
L’arborescence de vos concurrents est souvent une mine d’informations utiles. Concrètement, le premier intérêt est de s’assurer que vous n’avez pas oublié une idée ou une dimension importante dans votre secteur d’activité quand vous avez listé les contenus. Le deuxième objectif de l’étude de l’arborescence de vos concurrents est de vous donner des idées pour l’organisation du contenu. Chacun de vos concurrents a probablement défini une typologie de produits ou de services qui lui est propre, à vous de les analyser pour voir dans quelle mesure cela peut vous inspirer.
Pour analyser l’arborescence de vos concurrents, encore faut-il être capable de collecter les données efficacement. Evidemment, vous pouvez naviguer sur le site et modéliser à partir de là le plan du site internet, mais cela peut être chronophage. En utilisant des outils d’analyse SEO, vous serez en mesure de récupérer dans un Excel la liste de l’ensemble des pages du site. Le meilleur outil gratuit pour réaliser ce travail est Screaming Frog, mais il faut reconnait qu’il n’est pas forcément très simple d’accès.

3- Organiser et hiérarchiser le contenu
C’est le moment de donner vie à votre liste de contenu. Deux grands modes de raisonnement sont possibles. L’approche bottom-up consiste à s’intéresser dans un premier temps à chaque type de contenu identifié dans la première étape, puis dans un second temps agréger les mini-arborescences pour raisonner globalement. Dans certains cas, cette approche n’est pas adaptée parce que les types de contenu ne sont pas structurants, ou parce que la difficulté principale est d’organiser le contenu d’un même type. L’approche top-down consiste à définir en premier lieu le premier niveau de hiérarchie, puis de descendre petit à petit, en gardant toujours une vision globale.
Les deux approches ne sont pas incompatibles, bien au contraire, elles sont très complémentaires.

4- Tester, scénariser
Un scénario peut se définir comme suit :
Profil du visiteur : Age, CSP, maturité web
Objectif & sensibilité à votre offre : Besoin fort pour un produit, intérêt flou pour le domaine, etc.
Canal d’acquisition : Comment est-il arrivé sur votre site internet ? Référencement naturel ? Campagne presse ?
Page d’atterrissage : Sur quelle page est arrivé le visiteur ? Fiche produit ? Blog ? N’oubliez pas qu’un site web bien référencé attire plus de 80% des visiteurs sur des pages d’atterrissage, ou landing pages, différentes de la page d’accueil.

La rédaction des contenus

Contenu de qualité pour vos visiteurs et les moteurs de recherche
La clé de votre visibilité sur google : les textes sont le seul moyen dont dispose Google (et les autres outils de recherche) pour comprendre et classer les sites web

Voici quelques conseils pour vous aider dans votre stratégie rédactionnelle :
1. Commencez par le commencement, refaite le point sur votre approche et stratégie marketing, cela vous permettra de prendre un peu de recul quant à vos activités, produits et services, mais aussi type de clientèle (cibles), objectifs et moyens… La compréhension de votre public est essentielle !
2. Pensez ensuite au message principal à faire passer sur votre site web
3. A partir de l’arborescence de votre site, déterminez les expressions clefs prioritaires sur lesquelles vous souhaitez êtres trouvé (vous pouvez vous aider du générateur de mots clés de Google Adword : goo.gl/dhKeE. Classez ensuite vos mots clés par ordre d’importance. Le challenge sera ensuite de ventiler ces expressions dans les textes de votre site.
4. Pensez ensuite à la structure de votre page. Adoptez le principe de la pyramide inversée : commencez par dire l’essentiel avant de développer les informations moins importantes. Ne perdez pas de vu que les internautes n’accordent que très peu de temps à la lecture (ce qui n’est pas une raison pour le négliger !), il est donc important qu’ils trouvent rapidement ce qu’ils sont venus chercher.
5. Il est temps maintenant de passer à l’écriture à proprement parler. Pour cela, il suffit souvent de poser les bonnes questions. Vous pouvez utiliser la technique « QQOQCCP » : « Qui fait Quoi ? Où ? Quand ? Comment ? Combien ? et Pourquoi ? ».

Passage à l'écriture web...

  • L'architecture depuis le fragment, rôle du bref
  • L'insertion directe des images, de la voix, de la vidéo
  • Écriture collaborative
  • Publication immédiate, interaction avec l'auteur
  • Contenu hyperlié, multimédia, interactif et disséminable
  • Web 2.0 : le problème des droits d'auteur
Trouver des contenus sous licence libre CC

Rédiger pour le web et référencement naturel :
http://60canards.com/publications/articles/comment-rediger-pour-le-web-et-r...

Interface utilisateur : navigation et liens

Navigation hypertexte, fonctionnelle, par mots-clés
Navigation hypertexte
La navigation hypertexte se fait par le biais de liens hypertexte insérés dans les textes consultés et menant vers d’autres pages du site.
Navigation fonctionnelle
La navigation fonctionnelle est généralement située dans le footer du site Internet et propose toutes les informations pratiques relatives au site et à son éditeur : contact, mentions légales, crédits, plan du site...)
Navigation par mots-clés
La navigation par mots-clés désigne les recherches sémantiques effectués via les moteurs de recherche internes. Ce type de navigation est particulièrement efficace car totalement personnalisé.

Cf. Ressource - 1- Exemple d'optimisation éditoriale

Avantages de la rédaction web optimisée

  • Vous classer pour de nouveaux mots clés dans Google
  • Améliorer votre position dans Google pour des mots clés déjà ciblés
  • Obtenir du matériel facilement convertissable en d'autres formes
  • Contenu actualisé pour Google
  • Autorité auprès du public cible
  • Moyen de promotion à faible coût

Création graphique

Web Design
Le web design désigne la conception de l’interface web : l’architecture interactionnelle, l’organisation des pages, l’arborescence et la navigation dans le site web. Il s’agit d’une phase essentielle dans la conception d’un tel site. La conception d’un design web tient compte des contraintes spécifiques du support Internet, notamment en termes d’ergonomie, d’utilisabilité et d’accessibilité.

Développement et solution de gestion de contenu

Mise à jour du site : un CMS pour être autonome
À cette étape, c’est notre équipe de développeurs informatique qui prend le relais pour déployer, installer et paramétrer notre solution de gestion de contenu. Le CMS (Content Management System) va vous permettre d’être autonome quant à la mise à jour de votre site (textes, images, vidéo et autres ressources…)

L’interface d’administration du CMS se présente un peu comme un traitement de texte du type Microsoft Word. Il est notamment possible de :
choisir l’alignement de ses textes (gauche, droite, centré, justifié)
mettre en exergue un mot ou un groupe de mots :  gras, italique, souligné, changement de couleur…
choisir les niveau de Titre (1,2,3…)
créer des liste à puces ou des listes numérotées
intégrer simplement des média comme des images, des vidéos, PDF, plan d’accès
Vous pouvez intégrer vous même vos textes et réaliser des mises en page professionnelles très simplement après vous être initié à l'administration d'une page.

Maîtriser le back office du site

Créer, modifier, mettre en page les contenus...
Vous allez être capable de
Modifier comme vous le souhaitez les contenus de votre site (textes, images, vidéos…)
Mettre en page vos textes et images
Créer de nouvelles rubriques, ajouter des pages de contenus
Contrôler et analyser la fréquentation du site (outils statistiques)
Vérifier les messages reçus par le formulaire de contact, y répondre

L'hébergement du site

Quel serveur ? Quel hébergeur ?

Search Engine Optimisation (SEO)

Le référencement naturel, c'est quoi ?
- Re-écriture d’url. http://www.example.com/viewtopic.php?order=0&start=1256&message=50
peut être transformée en :
http://www.example.com/topic-1256-50.html

- Organisation hiérarchiques des titres visibles sur les pages (Balises H1, H2…)
- Intégration de descriptions et de titres pertinents sur les pages (uniques pour chacune d’entre elle).
- Optimisation des balises « meta »
- Mise en place d’un fichier sitemap (carte du site) permettant aux robots de prendre en compte l’ensemble des pages de votre site
- Mise en place d’un fichier robots.txt permettant de donner des indications aux moteurs de recherche

Outil d'analyse de site et référencement : https://www.woorank.com/fr/

Application : cf. Ressource référencement sur les moteurs de recherche

Vous connaissez les étapes d'un projet de création de site web...

Comment rédiger votre cahier des charges ?