LP 2017 2018.

1. Présentation  

• Eric Emery dirigeant de l'agence web Natural net
• Sites web :
  • http://www.natural-net.fr/
  • http://www.site-internet-qualite.fr/
  • http://www.site-web-2-mobile.fr/
  • http://www.guide-creer-son-site-web.fr/

2. Les marchés de la création de site web en France 

• les créateurs de sites web destinés aux PME et PMI. Ce sont des sociétés de taille importante et dont les offres sont standard, peu personnalisées et sans réel suivi. Pratiquant des tarifs parfois abusifs, ces "usines à sites web" sont peu recommandables.
  • Leur nombre s'est considérablement réduit depuis 2 années suite à des dépots de bilan à cause d'absence de visions industrielles ou de modèles économiques reposant uniquement sur le processus de vente 
  • Les acteurs de l'économie classique (pages jaunes, Publicis Webformance) en ont profité pour récupérer leurs clients 
• les créateurs de sites web destinés aux grandes marques. Ces agences, réels spécialistes du e-marketing, ont un positionnement similaire aux agences de communication mais ne se concentrent que sur un seul support : la toile.
  • localisées à Paris essentiellement elles travaillent quasi exclusivement pour les grands comptes 
  • elles se doivent d'être à la pointe de toutes les nouveautés techniques ou marketing 
  • ce marché est déjà mature et il est difficile de se créer maintenant une place au soleil 
• une multitude de petites agences web et web designers indépendants. Leurs clients vont du petit commerçant aux grandes marques. Ces prestataires misent généralement sur la proximité, le suivi personnalisé et l'originalité créative ou stratégique.

• Agences de communication,
• Développeurs indépendants,
• Imprimeurs,
• Les Pages Jaunes,
• Sociétés d’informatique,
• Votre cousin ou votre belle sœur,…

2.1. Un secteur économique relativement immature 

• Des tarifs extrêmement variables
• Des 100aines d’acteurs plus ou moins spécialisés : agences web, agences de web marketing,...
   

• Des outils et méthodes de conception et de réalisation encore très variables et parfois rétrogrades
• Une insatisfaction fréquente des clients des agences
• Une adoption incomplète par les entreprises françaises (entre 60 et 70% de taux d'équipement en sites web)

3.2. Un secteur économique à fort potentiel de développement 

• Article sur le site mckinsey.com
• Rapport complet au format PDF

3.3. Les principales explications de la non adaption pleine de la stratégie web par les entreprises françaises ?

• des difficultés organisationnelles,
• un déficit de talents numériques,
• des marges financières plus serrées que dans d’autres pays,
• ainsi qu’un manque d’implication visible des dirigeants (vous avez déjà vu un politique de la promotion "Voltaire" avec un ordinateur ?) 

• problématique de compétences spécifiques aux métiers du web (peu de dirigeants d'agence ont été réellement formés aux métiers du web lors de leur parcours post bac) 
• problématiques de rentabilité économique notamment due à l'absence de visions industrielles :
  • hétéréogénité forte des outils et méthodes,
  • chaines de production couteuses en termes de ressources humaines,
  • Enorme subjectivité dans le dialogue avec le client... 

•  absence de réelles proximité et de confiance de la part des clients potentiels
  • les agences web sont pour la plupart relativement cachées : elles ne sont pas dans la cité
  • les agences web profitent du peu de compétences de leurs clients et prospects pour les noyer sous un jargon technique et dissimuler les vrais savoirs simples et accessibles 

3. Vous avez dit site web ? De quoi parle-t-on ?

Les sites web et les pages qui les composent reposent sur la transmission de données via un canal numérique, tous les sites Internet reposent sur des fondamentaux communs. Un site web correspond ainsi à l'assemblage organisé de fichiers différents : 

• Les contenus :
  • contenus rédactionnels et structurant le code HTML
  • éléments multimédias qui apparaissent au sein de la page web mais correspondent à des fichiers indépendants : images, vidéos, cartes interactives 
• La forme et l'interactivité
  • fichiers de code CSS et Javascript permettant la mise en forme graphique et l'interactivité 

2.1. Un contenu unique et de multiples mise en forme 

Google le plus célèbre aveugle du web 

2.3. Les grands types de site web du point de vue technologique 

• Les sites statiques :
  • il s'agit de sites constitués de pages web simple en html qui pour être mises à jour nécessitent
    • de récupérer les fichiers sur le serveur ou ils sont stockés pour être mis à disposition des internautes
    • de modifier le code html de ces fichiers (avec des logiciels comme Dreamweaver)
    • de transférer les fichiers modifiés à nouveau sur le serveur 
  • ils nécessitent une bonne technicité quant aux mises à jour,
  • ils ne permettent à l'internaute d'interagir avec le site et au site de collecter des données 
  • exemple : http://www.qualite-site-internet.fr/
• Les sites en flash
  • ils ont été pendant quelques années très répandus 
  • Les animations flash ont connu un pic de popularité dans les années 2000, notamment dans le cadre d'animations humoristiques et sophistiquées.
  • La technologie flash étant considérée comme lourde et obsolète, de moins en moins de systèmes supportent Flash Player, et les animations flash tendent à disparaître aujourd'hui.
  • A lire par exemple http://romy.tetue.net/ne-faites-plus-de-sites-full-flash
  • Exemple de site en Flash https://disneyworld.disney.go.com/new-fantasyland/fr/
• Les sites avec CMS : 
  • Un système de gestion de contenu ou SGC (Content Management System ou CMS) est une famille de logiciels destinés à la conception et à la mise à jour dynamique de sites Web ou d'applications multimédia. Ils partagent les fonctionnalités suivantes :
    • ils permettent à plusieurs individus de travailler sur un même document ;
    • ils fournissent une chaîne de publication (workflow) offrant par exemple la possibilité de mettre en ligne le contenu des documents ;
    • ils permettent de séparer les opérations de gestion de la forme et du contenu ;
    • ils permettent de collecter des contenus, informations postées par les internautes,
    • ils permettent de structurer le contenu (utilisation de FAQ, de documents, de blogs, de forums de discussion, etc.) ;
    • ils permettent de hiérarchiser les utilisateurs et de leur attribuer des rôles et des permissions (utilisateur anonyme, administrateur, contributeur, etc.) ;
    • Exemples de CMS : Drupal, ez publish, joomla, wordpress et des 100aines d'autres
• Les CMS en SAAS (ou dans le cloud)
  • apparus depuis la fin des années 2000 ils proposent comme tous les services de ce type une mutualisation maximum des services associés à chaque site web 
  • ils présentent l'avantage d'exclure les opérations de mise à jour, failles de sécurité, nécessaires et couteuses sur les CMS classiques 
  • exemples anglosaxons : http://www.cmscritic.com/top-10-simple-cms/ + tumblr : https://www.tumblr.com/
  • exemples français : http://www.wizishop.com/, http://www.kiubi.com/

2.4 Qualités des sites web

• Lire l'article : "Qualité des sites web"

3. Le web marketing

3.1. Le site web point central des actions webmarketing 

• la conception du site web,
• l’optimisation de la visibilité sur Internet et via l'ensemble des canaux générateurs de trafic,
• la conversion et la gestion et fidélisation des clients.

• http://www.archiduchesse.com/
  • e commerce
  • stratégie de conquètes de nouveaux clients, de fidélisation
  • web marketing
• http://www.ter.sncf.com/aquitaine/
  • antenne aquitaine des services TER
  • stratégie de simplification/fluidification des services des TER traditionnels, vente en ligne, fidélisation
  • marketing traditionnel et web marketing (blog,...)
• https://www.pmu.fr/
  • leader du marché
  • stratégie de conquète de nouveaux parieurs, d'augmentation des paris de chaque parieurs, fidélisation
  • marketing traditionnel et web marketing
• http://www.studioa-cours-danse-bordeaux.fr/
  • acteur local
  • stratégie de conquètes de propects devenant élèves
  • uniquement référencement naturel
• http://www.invest-in-aquitaine.com/
  • acteur régional institutionnel
  • stratégie de conquètes de clients potentiels pour implantation en Aquitaine
  • marketing traditionnel et web marketing

3.2. Les exceptions

• Transfert vers certains médias sociaux
  • exemple Adidas qui bascule d'une communication renvoyant vers son site à une communication renvoyant sur leur page Facebook https://www.facebook.com/adidasFR?brand_redir=1
• Google Business map pour les (micro) acteurs locaux
• https://www.google.fr/intl/en/business/
• exemple : résultats de recherche incluant google local business

4. Audit de site et d'une présence web

4.1. Qu'est ce que l'audit d'un site web ?

Auditer un site web revient à examiner un site d'après plusieurs focus (technique, accessibilité, ergonomie, SEO,) en se consacrant à plusieurs pages différentes et en listant :

• les éventuels défauts
• les qualités relevées

Et débouchant sur un certain nombre de préconisations.

4.2. Pourquoi réaliser un audit d'un site web ? 

4.2.1. Amélioration progressive

Puisque les sites web présentent l'avantage d'être aisément modifiables, la réalisation d'audits réguliers et d'améliorations liées permet de mettre le site dans une démarche d'amélioration progressive, cercle vertueux et positif à tous les niveaux.

4.2.2. Entrée en matière

L'audit d'un site web est également un bon moyen "commercial" pour séduire un prospect et le convaincre de nos compétences et de l'intérêt que peut représenter le fait de devenir client.

4.2.3. Contrôle et garanties

Un audit peut être réalisé à différentes étapes d'un projet web en fournissant une grille de controle des points clés de faille et de réussite et évitant que certaines problématiques soient omises et mises de côté.

4.3. Les différents types d'audits

La présence web peut être auditée sous différents angles (présence sociale, aspects techniques,...) chaque aspect devant être réalisé par des spécialistes disposant d'outils dédiés au cours d'opérations d'audit pouvant occuper un temps assez long. Dans le cadre de cet exercice nous proposons de réaliser un audit assez large recouvrant des thématiques et domaines différents. Nous nous plaçons dans le cadre de cet exercice, plutôt comme une agence web souhaitant contractualiser avec un prospect et dégageant une vision globale de la présence web.

5. Audit généraliste de site web

5.1. Le plan du rapport d'audit

• Introduction
  • Contexte :
    • Pourquoi l'audit ?
    • Eléments stratégiques réels ou hypothétiques (cibles et expressions clés)
  • Outils et méthode
  • Moment de l'audit et périmètre
• Résultats de l'audit : les chiffres bruts critères par critères avec éventuellement des observations mais pas de préconisations
  • Un résultat d'audit synthétique (à destination des gens pressés et décideurs)
  • Une présentation détaillée des points audités et résultats collectés :
    • Données génériques
    • Visibilité
      • Potentiel de référencement
      • Popularité
    • Ergonomie Web
    • Accessibilité
    • Interopérabilité
    • Performances
    • Présence web : présence et popularité sur les réseaux sociaux, sur le web en général,...
    • Critères plus subjectifs
• Préconisations : Il s'agit d'exposer les évolutions envisagées en essayant de proposer des améliorations simples et rapides et des améliorations sur le long terme. Là encore il faut fournir 2 niveaux de lecture à ce document
  • Préconisations synthétiques
  • Préconisations détaillées
• Conclusions
• Suites à donner

5.2. Autres recommandations

• Veiller à adopter une posture positive en valorisant les champs d'amélioration plus qu'en accentuant sur les défauts actuels.
• Faciliter la lecture du document par des illustrations, liens, et des exemples parlants même pour un néophyte.
• Ne jamais être trop affirmatif, vous ne maitrisez pas forcément le contexte.
• Dans le chapitre des préconisations replacer la problématique et les suites à donner dans le contexte spécifique du site audité (cibles/taches à réaliser,...)
• Produire un document avec 2 niveaux de lecture (lecture rapide et non technique pour les décideurs, lecture détaillée précise et technique pour les techniciens)
• Soigner particulièrement les introductions, conclusions et suites à donner

5.3. Outils utilisés

Auditer un site de l'intérieur

Si vous pouvez accéder aux données issues des outils d'analyse d'audience (Xiti, Google analytics,...) et des outils de suivi qualité (google webmaster tools), leurs analyses viendront judicieusement renforcer vos analyses en vous apportant des données supplémentaires. Mais l'accès à ces données est réservé aux administrateurs des sites et à leurs partenaires, il faut donc parfois faire sans. De même si le client final à réaliser des enquêtes et études sur l'usage de son site, ces éléments pourront enrichir votre réflexion.

Auditer un site de l'extérieur

Que l'on dispose ou non des données internes au site, vous aurez besoin pour réaliser cet audit

• Navigateur web moderne (tout sauf IE)
• Console de développement intégrée dans les navigateurs Firefox/Chrome/Safari
• Internet Explorer 10 (permet de simuler les versions précédentes)
• Opquast reporting : l'inspecteur https://reporting.opquast.com/fr/
• Validateur W3C : http://validator.w3.org/
• Simulateur mobile et tablettes : http://www.responsinator.com/
• Remontée dans le temps : http://archive.org/web/
• Tests de performances : https://developers.google.com/speed/pagespeed/insights/
• Accès identifié aux principaux réseaux sociaux (facebbok, twitter, viadeo, linkedin)
• Tests SEO : https://www.site-analyzer.com/fr/

Autres ressources

Certains aspects d'un site web comme l'ergonomie ne font pas l'objet de tests automatisés, il est alors nécessaire de réaliser un audit manuel et détaillé, nous vous proposons ici des liens vers des documents pouvant étayer vos savoirs et faciliter la phase d'audit :

• Ergonomie Web (Synthèse de l’ouvrage d’Amélie Boucher : « Ergonomie Web » [Editions Eyrolles])
  • Télécharger le fichier (ergonomie-web2 ergonomie-web2.rtf 528,48 Ko 2015-09-21 16:12:32)
• Bonnes pratiques Opquast : la "bible" ou vous retrouverez tous les points étudiés dans ce TP
  • Version pdf https://data.oqs-cdn.com/checklists/11/OPQUAST-QUALITY-BEST-PRACTICES_V2.1.pdf
  • Version web http://checklists.opquast.com/fr/oqs-v2

Pour aller plus loin...

• Heuristiques de Nielsen (issues de Nielsen et Molich, 1990)
  • 10 heuristiques créées en 1994 et révisées en 2005 pour juger de l’utilisabilité de l’interface cf http://www.hec.unil.ch/fbodart/IHM/Chap3/heuristiques.html
• Critères ergonomiques de Bastien et Scapin
  • 18 critères répartis en 8 dimensions pour juger de l’ergonomie des interfaces homme-machine http://www.ergoweb.ca/criteres.html

6. Un exemple d'audit

Nous vous proposons de réaliser un audit ensemble et de consulter un rapport d'audit produit à ce titre en avant vente pour le site web http://www.talence.fr/, une des communes de la CUB. Nous vous proposons ici le résultat de cet audit rapide aui pourrait avoir lieu dans le cadre d'une démarche d'avant vente.

> Consulter le rapport d'audit 

7. Gestion et exploitation d'un site web 

• une fois le site fini d'être développé (juste avant sa mise en ligne),
• au moment de sa mise en ligne,
• puis sur le long terme, lors de son exploitation. 

Sommaire du cours : 

• Avant la mise en ligne/l'ouverture commerciale
  • Vérifications et optimisatiions 
  • Mise en place des outils d'analyse d'audience et suivi qualité 
  • Formation et documentation sur l'esploitation du site
  • Aspects sécurité
  • En cas de refonte du site
• Ouverture commerciale 
  • ​Principales soumissions à réaliser 
  • Mise en place d'une présence sur les réseaux sociaux et outils de webmarketing locaux
• Après l'ouverture commerciale du site
  • Utilisation des données collectées 
  • Enrichissement progressif 
  • Améliorations progressives 
  • Ecrire pour le web 

1. Avant la mise en ligne/l'ouverture commerciale

• une série de vérifications (suivie éventuellement de nouvelles optimisations)
• une série de mise en place et configurations d'un certain nombre d'outils 

1.a. Vérifications et optimisations 

Qualité d'accueil de l'internaute 

• Affichage et navigation fonctionnelle quelques soient les plateformes et navigateurs :
  • un affichage et une navigation fonctionnelle pour tous les navigateurs et OS modernes 
  • un affichage et une navigation fonctionnelle (même si elle est dégradée) pour Internet Explorer 8 et versions supérieures
  • un accueil prévu pour les navigateurs obsolètes (IE 8 et avant) 
  • une bonne qualité d'accueil pour les internautes accédant aux sites par tablettes et smart phones

• Internet Explorer dans sa version la plus récente permet de simuler le site web pour des navigateurs IE + anciens (utiliser la touche F12 pour faire apparaitre l'inspecteur web, puis choisir sa version dans "émulation" 
• Des outils de simulation "cross browser testing"
  • https://saucelabs.com/manual
  • http://mashable.com/2014/02/26/browser-testing-tools/
  • http://www.responsinator.com/
• Des tests en conditions réelles (rien ne peut vraiment pleinement les remplacer : device labs). 

• l'affichage du site lors de l'impression (à tester pour différents navigateurs),
• la présence de favicons compatibles avec tous type des navigateurs et OS,
• la présence de différents moyens pour contacter le propriétaire du site, 
• la présence d'un plan du site et éventuellement d'un moteur de recherche,...

Optimisation du potentiel SEO

• chaque page possède un h1 unique reprenant une expression clé majeure
• cette expression clé majeure est reprise dans l'url de la page, la balise Meta Title, la balise meta description
• cette expression clé majeure est répétée plusieurs fois dans la page dans des titres de niveaux subalternes (h2 à h4), du texte en emphase (gras/strong et italique/em)
• Pour les images et les liens, r  les balises [alt] et [title] sont renseignées et potentiellement en reprenant l'expression clé majeure de la page
• Les pages du site doivent se charger rapidement : idéalement moins d'une seconde 
• Le site utilise la sémantique et le standard HTML5 ou génère peu d'erreurs à minima
• Le code HTML des pages est valide au regard des standards du W3C
• Le site propose un plan du site à destination des moteurs de recherche (sitemap.xml)

• Validateur W3C : http://validator.w3.org/
• Tests de performances : https://developers.google.com/speed/pagespeed/insights/
• Tests SEO : https://www.site-analyzer.com/fr/

1.b. Mise en place des outils d'analyse d'audience et suivi qualité 

Outils d'analyse d'audience

Que ce soit Google Analytics ou Xiti ou d'autres les principes de mise en place sont plus ou moins les mêmes : mise en place d'un tag spécifique sur chaque page du site permettant de tracker le comportement de l'internaute.

Une fois le compte ouvert sur un outil d'analyse d'audience et le tag inséré dans les pages vous pourrez exploiter à terme à minima les informations suivantes :

Les visites

Les sources

Les visiteurs

Les visiteurs uniques

Taux de rebond

Taux de conversion

Données centrées sur l'utilisateur

Plus d'infos sur Google Analytics 

• Installer et configurer Google Analytics http://www.elleandcompanydesign.com/blog/2015/3/12/getting-started-with-google-analytics
• Google Analytics pour les nuls http://wpformation.com/google-analytics-nuls-mode-emploi/

Outil de suivi "qualité" Google Webmaster Tools

A quoi sert Google Webmasters Tools ?

Ajoutez votre site à Google Webmaster Tools

Les utilisations les plus importantes de Google Webmaster Tools

Plus d'infos sur Google Webmaster tools

• Utiliser Google Webmaster Tools : http://amberkdesign.me/webmaster-tools/
• Centre d'aide search console : https://support.google.com/webmasters#topic=3309469

1.c. Formation et documentation sur l'exploitation du site

1.d. Aspects sécurité

• liés à l'hébergement du site, à sa sécurité et à sa sauvegarde 
• liés au logiciel CMS utilisé (TMA ou infogérance)

1.e. En cas de refonte du site

2. Ouverture commerciale du site 

• Soumission du site à Google http://www.google.fr/intl/fr/submit_content.html
• Soumission du site à Yahoo/Bing : http://www.bing.com/toolbox/submit-site-url
• Soumission du site à l'annuaire DMOZ : http://www.dmoz.fr/

Mise en place d'une présence sur les réseaux sociaux et outils de webmarketing locaux

• différents réseaux sociaux généralistes 
• différents réseaux sociaux professionnels 
• des annuaires et outils de géolocalisation (Pages Jaunes, Yelp, Google My Business,...) 

3. Gestion, animation du site, enrichissements et améliorations progressives

3.1. S'organiser pour mieux exploiter 

• comités de pilotage 
• comités de rédaction 

3.2. Mettre à jour le site 

Référencement

La mise à jour de contenus sur votre site est directement liée à votre positionnement sur les moteurs de recherches. Un site web qui est mis à jour régulièrement se verra visiter beaucoup plus souvent par les robots des moteurs de recherches et privilégier dans le classement des résultats de recherches.

Augmenter le nombre de points d’entrée

En ajoutant des pages de contenus, vous augmentez le nombre de points d’entrée vers votre site et vous vous positionnez sur plus d’expressions clés. Il ne s’agit pas de créer des pages pour le référencement, il faut garder la cohérence au sein du site etproposer des contenus de qualité.

Fraîcheur de l’information

La mise à jour d’un site web de manière régulière rassure les internautes sur la fraîcheur de l’information et est un gage de sérieux pour vos lecteurs. Cela permet également de garder une certaine proximité avec vos clients actuels et de les informer des actualités. Il peut-être nécessaire de modifier des contenus existants pour vérifier la véracité des informations. En effet, la présence de contenus obsolètes peut nuire à votre notoriété

Veille concurrentielle

Il est important de faire de la veille sur les sites concurrents pour voir la fréquence de mises à jour et les sujets abordés. Cela vous donnera une idée de la fréquence de mises à jour à pratiquer sur votre site pour maintenir ou augmenter votre positionnementdans les résultats de recherches.

Les backlinks (liens pointant vers votre site)

En créant de nouvelles pages, vous créez de nouveaux liens, et ces derniers peuvent être partagés sur les réseaux sociaux par exemple. Plus vous augmentez votre nombre de pages de contenus, plus vous augmentez vos chances de bénéficier de backlinks.

Comment faire ?

• La mise à jour d’un site internet prend du temps, vous pouvez la faire au sein de votre entreprise, ou vous pouvez faire appel à des prestataires de services de webmastering.
• La plupart des sites internet d’aujourd’hui fonctionnent avec des systèmes de gestion de contenus (CMS : Content Management System), ce qui facilite grandement l’ajout ou la modification de contenus. Dans le cas contraire, une bonne connaissance des langages de développement web est nécessaire, vous pouvez aussi faire appel à un webmaster.
• Si votre site internet possède une partie “actualités” ou “blog“ (interne ou externe au site), c’est un bon moyen d’ajouter du contenu sous la forme d’articles par exemple.

3.3. Utiliser les métriques pour améliorer votre site 

L'ensemble des données collectées par les outils d'analyse d'audience et Google Webmaster Tools sont des indices pour envisager des améliorations, enrichissements de votre site. 

Un exemple de recours à Google Analytics pour organiser l'amélioration du site : 



De la même manière certaines données issues de Google Webmaster Tools seront utilisées pour améliorer votre site : 

• requêtes de recherche : impressions et clics 
• pages en erreurs et défauts du site 

3.4. Utiliser les avis des utilisateurs du site pour l'améliorer 

La mise en place d'un formulaire permettant aux internautes de laisser des suggestions d'amélioration ou la mise en place de formulaires de satisfactions sont de bon moyens pour connaitre les attentes réelles de vos prospects et les intégrer dans votre démarche d'amélioration et d'enrichissement progressifs et continus.

3.5. Améliorations et enrichissements progressifs 

Ces principes valent pour l'ensemble des sites web, la finalité principale est de ne pas bloquer l'ouverture commerciale d'un site web à sa complétude mais d'envisager un déploiement par phase, cette démarche est particulièrement utile pour :

• ne pas dépenser des sommes importantes pour des développements inutiles,
• mieux prendre en compte les attentes utilisateurs et les évolutions des concurrents.

La présentation ci après indique du côté de l'amélioration du code et de l'ergonomie quels types d'enrichissements peuvent être envisagés : 

Amélioration progressive, de la théorie à la pratique from Goulven Champenois

Qualité et accessibilité web : vers l'amélioration continue : une autre présentation de ce concept : 

Sp Parisweb2008 20081113 from elirene

3.6. Ecrire pour le web 

Principes 

Relations de presse et référencement naturel : les convergences 

1. Faire la recherche de mot clé
2. Rédiger / penser : mot clé + à déclinaison, synonymes, sémantique, champ lexical.
3. Remplir ce tableau pour chaque page de contenu à créer