• Support de formation 2018-2019
Web & webmarketing
burger menu

Séance 2.

  1. Support de cours PUB/MMI/ECV
  2. Semestre 2
  3. Séance 2

Rappels et principes fonctionnement site web 

  • Le navigateur web envoie des requêtes à un serveur web
  • Le serveur web renvoie un ensemble de fichiers 
    • 1 fichier HTML : le contenu de la page web 
    • 1 ou plusieurs fichiers CSS : contenant un code spécifique permettant la mise en forme de la page (graphisme)
    • 1 ou plusieurs fichiers javascript : : contenant un code spécifique permettant l'animation de la page et son interactivité 
    • 1 ou plusieurs fichiers images : ce sont des fichiers externes aux formats gif, png, jpeg
    • éventuellement des fichiers vidéo, son,...
  • Le navigateur "exécute" la page web : il affiche à la fois le code HTML de la page et les fichiers externes pour les proposer sous une forme assemblée dans la fenêtre du navigateur 

Code source 

Via votre navigateur vous pouvez afficher le code HTML de la page, accéder à chaque fichier externe "appelé" par le code HTML.

Inspecteurs web 

Il existe désormais dans tous les navigateurs web un outil appelé "inspecteur" qui permetttent de mieux comprendre l'intégration HTML CSS Javascript qui a été réalisée : 

Chrome

Chrome dispose de son "Firebug" interne, pas besoin d'extension pour celui-ci. Même manipulation que pour précédemment afin d'inspecter le code. Vous pouvez également y accéder via le menu Outils > Outils de développement (raccourci :Ctrl+Maj+I). Sinon vous pouvez également télécharger l'extension Firebug pour Chrome.

L'extension Web Developper existe aussi pour Chrome.

Safari

Activez le menu de développement, en allant dans Réglages > Préférences… > Avancées, et cocher la case "Afficher le menu de développement dans la barre de menu". Vous pourrez alors accédez aux outils de développement de la même manière que pour Firebug ou Chrome (raccourci : Ctrl+Option+I).

Internet Explorer

A partir d'IE 8.0, vous trouverez dans le menu Outils > Outils de développement(raccourci : F12), celui-ci comprend les fonctionnalités de "Firebug" et de "Webdevelopper", avec un basculement de l'affichage vers IE 7.0 (et 8.0 pour la version 9.0), très utile pour tester et débugger votre site dans les versions précédentes et actuelles.

Opera

De même que pour les précédents navigateurs, Opera intègre ses propres outils de développement que vous pouvez activer/désactiver dans Menu > Page > Outils de développeur et cocher ou décocher "Opera Dragonfly" (raccourci : Ctrl+Maj+I)

Suivant votre navigateur nous vous invitons à afficher cette console de développement. 
Voir aussi : http://beta.rdsign.net/articles/25-secrets-des-outils-de-d%C3%A9veloppement-de-navigateur

1. Qualité des sites web 

1.1. SCHÉMA DES PARAMÈTRES QUALITÉ D'UN SITE INTERNET

Créer un site Internet de qualité nécessite de réunir les différentes conditions suivantes visant finalement à satisfaire les cibles pour lesquelles le site Internet est conçu.


1.1.1. Utilité

C'est le seul critère qui dépend purement du maitre d'ouvrage. 

Pour être efficace un site Internet doit être utile ! Il ne suffit pas de disposer d'un très bon outil pour générer un chiffre d'affaires !


1.1.2. Utilisabilité

C'est simplement la capacité qu'aura le site à être pratique, fonctionnel quelques soient les capacités de l'internaute, son équipement informatique, son mode de consultation.
Proposer un site utilisable nécessite de :
  • Recourir à une conception assistée sur un prototype fonctionnel dès le processus d’avant vente de manière à construire la meilleure ergonomie. 
  • Respecter les standards d’intégration (XHTML, HTML5)  garantissant l’interopérabilité même sur mobile et smart phone


1.1.3. Visibilité

Pour être efficace un site Internet doit être visible c'est à dire accessible au maximum d'internautes ne le connaissant pas à priori. Il est donc nécessaire d'acquérir de la visibilité sur les moteurs de recherche et les outils sociaux. 
Référencement naturel
Les sites Internet doivent être conçus de manière à être le plus aisément indexé par les moteurs de recherche. Le code HTML généré est alors primordial, il est donc nécessaire de :
  • Respecter les préconisations des moteurs de recherche et expert SEO pour la création de la structure sémantique du code HTML (plan de balisage des pages,...).
  • Respecter les standards d’intégration (XHTML, HTML5).
  • Mettre en place les nouveaux formats de balisage sémantique (micro formats : hproduct, vcalendar, vcard).
En dehors des qualités intrinsèques du site, la popularité du site (nombre de liens externes renvoyant vers le site) a une grande importance quant au positionnement dans les résultats de recherche. Plus un site est populaire (possède un pagerank important), mieux il sera classé. 
Rayonnement sur les réseaux sociaux
Les réseaux sociaux sont devenus des générateurs d'audiences et de chiffre d'affaires important. Il est donc désormais indispensable d'accompagner la création d'un site Internet d'une communication sur quelques outils majoritaires comme Facebook et Twitter, ou d'identifier d'autres outils en fonction des cibles retenues par le maitre d'ouvrage. 


1.1.4. Actualisation

Un site Internet qui n'évolue pas fréquemment ne peut pas séduire les internautes et est plutôt mal jugé par les moteurs de recherche qui ont tendance à le dévoloriser. 

Le fait de disposer d'un espace d’administration doté d’une très bonne ergonomie et robustesse permet aux contributeurs et administrateurs du site de l'enrichir et le mettre à jour efficacement. 

La qualité des espaces d'administration des outils de gestion de contenus peut s'évaluer sur la base d'un critère simple, leur utilisabilité pour des néophytes. Si le maitre d'ouvrage peut administrer son site simplement sans aucune formation préalable c'est le signe d'un CMS de qualité réellement exploitable !


1.1.5. Fiabilité

C'est un point majeur de la réussite d'un site Internet, simplement parce que les outils de gestion et d'administration de sites Internet sont souvent connus pour dysfonctionner tant au niveau de l'internaute qui le consulte qu'au niveau de l'administrateur qui le gère. 


1.1.6. Séduction

Le potentiel de séduction, c'est à dire l'aspect graphique d'un site est un point important dans les processus de conquête et de fidélisation des internautes. Le site doit pouvoir se distinguer de ses concurrents, apporter une image moderne et novatrice en phase avec son positionnement. 

Trop souvent les phases de conception ergonomique et graphique se confondent lors de la création des sites Internet, cela conduit généralement à des sites ou l'image a pris plus d'importance que le fonctionnel et c'est souvent très dommageable.

Il est indispensable de distinguer 2 phases différentes lors de la conception : la conception ergonomique sur la base de prototypes évoluant pas à pas et la phase de mise en scène graphique de ces maquettes ergonomiques. 

La comparaison avec la couture prend là toute sa pertinence, pour créer un vêtement les couturiers passent d'abord par la création d'un patron adapté et aux mesures du client avant de travailler sur le tissu et le rendu final. 


1.1.7. Accessibilité

L'accessibilité caractérise la capacité pour un site Internet à être accessible à tous quelque soient les capacités physiques, psychiques ou éventuels handicaps. 

La France dispose dans la loi handicap de 2005 d'un volet concernant l'accessibilité des sites web. Le décret d'application a été acté au bout de 10 années sans définir aucune sanction (son application reste donc plus ou moins lettre morte et dépend du bon vouloir des décideurs. 


1.1.8. Compatible

Un site Internet se consulte par de nombreux outils différents, des ordinateurs aux smart phone en passant par les tablettes... Il est nécessaire prendre en compte ces nouveaux modes de consultation ! 

1.2. RÉFÉRENTIELS ET STANDARDS QUALITÉ WEB

Un certain nombre de standards et référentiels permettent de construire des sites dans une démarche qualité mais il n'y a pas de standard unique. Voici quelques uns de ces référentiels : 
 

1.3. Outils 

Différents outils seront utilisés pour réaliser l'audit d'un site, ils sont tous gratuits :

2. Zoom sur le référencement naturel (SEO)

Accessible en principe à tous les annonceurs possédant en site, il vise à générer du trafic qualifié sur le site cible.
Désigne la faculté de votre site à se positionner parmi les (premiers) résultats des moteurs de recherche pour des expressions clés stratégiques de manière à générer sur votre site un trafic qualifié régulier. 

Pour toutes les expressions clés saisies par les internautes sur les différents moteurs de recherches, ces derniers proposent une liste de résultats composée d'annonces publicitaires (référencement payant ; exemple Google Adwords) et d'une liste de résultats de recherches où les sites sont classés d'après leur pertinence (référencement naturel). 

2.1. Le référencement naturel vecteur de prospects qualifiés

Le référencement naturel doit permettre d'alimenter en prospects votre site web durant toute sa vie. C'est pourquoi le référencement naturel doit être pris en compte très en amont dans votre projet de création de site Internet. 

2.2. Les facteurs clés d'un bon référencement naturel 

Le référencement naturel d’un site dépend de manière synthétique de 3 facteurs maitrisés par l’entrepreneur et d’1 facteur non maitrisé et subi…

2.3. Le référencement naturel d'un site dépend : 

  • (30%) du contenu rédactionnel de votre site (nombre de pages, répétition en expressions clés, structuration du contenu, recours au gras (emphase), à l'italique, intitulé des liens...)
  • (30%) de la qualité du code HTML et des qualités techniques du site (performances, respect d'une sémantique rigoureuse, URL ayant du sens et contenant les mots clés importants de la page, présence de microformats,...)
  • (40%) de la popularité de votre site (nombre et qualité des liens provenant d'autres sites web et renvoyant vers votre site)
  • (100%) de la pression concurrentielle (nombre de sites Internet concurrents partageant les mêmes expressions clés stratégiques)

2.4. Pour obtenir un bon référencement naturel : Search Engine Optimization

Le SEO regroupe un ensemble de recommandations et de techniques visant à faire apparaître les liens vers les pages d’un site le plus haut possible sur les moteurs de recherche en réponse aux requêtes des internautes. Il vise à améliorer le référencement naturel, appelé aussi référencement organique.

La première étape du SEO consiste à définir la liste des expressions clés (2 à 5 mots par expressions) que l’entreprise souhaite privilégier en fonction de son activité pour les regrouper en 2 familles :

  • 1. Les mots clés principaux : quelques dizaines d'expressions clés souvent fortement concurrentiels, qui généreront, en moyenne, environ 20% du trafic du site Web.
  • 2. La longue traîne : très nombreuses expressions (plusieurs centaines à plusieurs milliers) tapées par les internautes générant chacune peu de trafic mais dont l’ensemble engendrera environ 80% du trafic total
    • Celle ci est fondamentale
      • car elle permet de se positionner sur des expressions clés à forte probabilité de conversion
      • elle assure un trafic régulier dans le temps en audience qualifiée
      • elle s'étoffera au fur et à mesure de l'enrichissement en contenu du site

long tail by chris anderson

 

Le SEO regroupe 2 types de pratiques:

  • Des actions sur le contenu du site lui même et ses caractéristiques :
    • L'amélioration du référencement par la prise en compte des mots clés à des endroits stratégiques des pages du site :
      • Inclure des mots clés dans l'URL, le titre de la page, les titres de paragraphes.
      • Viser une densité de 2% à 5% de mots clés (pourcentage de mots clés pour 100 caractères) dans le contenu textuel de la page, ces mots clés étant plutôt placés au début du contenu et mis en valeur en gras et pointant sur des liens.
      • Pour les images et les liens, renseigner les balises [alt] et [title].
      • Renseigner la balise [Metadescription] avec 200 caractères environ, cette balise est utilisée par Google pour afficher un résumé du contenu de la page lors de l’affichage des résultats de la recherche.
    • Avoir une thématique unique par page permettant de travailler individuellement chaque expression clé, la page étant écrite dans une seule langue.
      • chaque page possède un h1 unique reprenant cette expression clé
      • cette expression clé est reprise dans l'url de la page, la balise Meta Title, la balise meta description
      • cette expression clé 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)
    • Disposer d'une arborescence (d'un nombre de pages) importants ou chaque page permet de travailler sur une expression clé donnée
      • recours aux actualités, lexique, références clients,... tout contenu permettant d'enrichir le site
    • Relier l'ensemble des pages directement à la page d'accueil pour favoriser leur indexation et prise en compte
    • Disposer de pages se chargeant rapidement
    • Utiliser la sémantique HTML5
    • Mettre en place les dispositifs favorables à l'indexation (sitemaps.xml, microformats et microdonnées)
  • Des actions à l'extérieur du site visant à développer sa popularité
    • L'amélioration du référencement du site par la recherche de backlinks ou liens entrants à partir de pages / sites de qualité. Le Page Rank est la note, comprise entre 1 et 10, que Google attribue à chaque page web qu’il indexe en fonction de 3 critères:
      • Le nombre de liens sortants (backlinks) pointant vers la page, que ces liens appartiennent au même site ou non.
      • Le nombre de liens sortants de la page qui envoie le backlink: plus une page envoie de liens vers d’autres pages, moins chacun de ces liens a de poids pour améliorer le Page Rank des pages cibles.
      • Le Page Rank de la Page qui envoie les liens.
    • Pour résumer, l'idéal est d'obtenir beaucoup de backlinks de pages ayant le Page Rank maximum, ces pages n'ayant chacune aucun autre lien sortant. Chaque lien sortant d'une page transfert son pagerank vers celles sur lesquelles elle pointe.

2.5. Les avantages du SEO :

  • Les moteurs de recherche étant devenus l'outil privilégié des internautes pour obtenir de l'information, l'étude des mots clés saisis par les internautes permet d'adapter le contenu
    des pages du site aux informations qui les intéressent.
  • La longue traîne permet de valoriser l'ensemble de son catalogue de produits en automatisant le SEO.
  • Le SEO permet aussi une veille concurrentielle sur les points forts et les points faibles de ses concurrents.

2.6. Les limites du SEO :

  • Pour les mots clés les plus concurrentiels du web, l'application des techniques du SEO exige un effort prolongé dont les résultats ne sont jamais acquis.
  • Le référencement organique n'est pas une ressource gratuite, il nécessite de s’investir dans cette activité.
  • Google ayant une part de marché qui avoisine les 90% sur les moteurs de recherche en France, les résultats du SEO sont dépendants des choix de Google dans le classement des sites: pour certaines thématiques, Google met en avant des sites de contenu comme Wikipédia ou les sites gouvernementaux, des images ou des vidéos, ses propres sites, des résultats géo-localisés par Google Maps….
  • Google modifie régulièrement son algorithme d’indexation et le type de contenu qu'il souhaite remonter en tête des résultats de requête, ce qui peut modifier profondément l’ordre de référencement des sites.
  • Les moteurs de recherche représentent un apport de trafic significatif pour les sites de ecommerce et les sites à fort contenu (forums, blogs,...). En revanche, le contenu des sites de marques centrés sur une politique de communication externe ne correspond généralement pas aux types d'informations recherchées par les internautes.
  • La concurrence pour le référencement sur les moteurs de recherche est intense, de nombreux sites ont fait leur métier de capter l'audience pour la valoriser en display ou la revendre aux e-commerçants (comparateurs de prix et affiliation).

2.7. Les métriques à appliquer au SEO :

L'investissement dans le SEO peut-être suivi à travers quelques ratios très simples:

  • Google Webmaster permet de connaitre le nombre d'affichage et la position des pages du site par terme de requête, ceci est un indice de notoriété du site sur le web par rapport aux sites concurrents.
  • Avec les outils de Webanalytics, un site de e-commerce peut connaître les mots clés qui ont le meilleur taux de transformation et calculer leur ROI, de même pour un site cherchant à établir des contacts via le téléchargement de brochures ou le remplissage de formulaires.
  • Pour les sites de contenu, ces mêmes outils de Webanalytics permettent de connaître les mots clés auxquels correspondent le plus grand nombre de pages consultées et la plus longue durée de consultation de ces pages.

2.8. En savoir plus sur le SEO 

 

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

3.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.

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

3.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.

3.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.

3.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é.

3.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.

4. Audit généraliste de site web

4.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
      • Contenus et fonctionnalités (pertinence, qualité,...)
      • 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

4.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

4.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

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 :

POUR ALLER PLUS LOIN...
 

5. 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 
 

6. Un autre exemple d'audit 

Nous allons réaliser ensemble l'audit du site web http://www.iutpubbordeaux.fr/site/.
  • Introduction
    • Contexte :
      • Eléments stratégiques réels ou hypothétiques
        • cibles
        • expressions clés
        • taches à traiter par les cibles 
        • choix des pages à auditer 
  • Résultats de l'audit : les chiffres bruts critères par critères avec éventuellement des observations mais pas de préconisations
    • Données génériques
      • date de création du site 
      • nombre de pages du site 
      • présence sur les réseaux sociaux pro ou grands publics 
    • Visibilité
      • Potentiel de référencement
        • nom de domaine du site 
        • url des pages 
        • optimisation code HTML (<h1>, meta title, meta description, redondance en mots clés de la page,...) 
        • performance et rapidité de chargement 
        • présence d'un sitemap 
        • standard HTML5 
      • Popularité
        • nombre et qualité des liens renvoyant vers le site audité 
    • Contenu 
      • pertinence du contenu / référencement 
      • pertinence du contenu / besoin des cibles 
      • qualité des fonctionnalités et services proposés 
      • actualisation du site 
    • Ergonomie Web
      • simplicité
      • qualité d'accueil des différentes cibles 
      • impression 
      • gestion des erreurs éventuelles des internautes 
      • simplicité de la prise de contact et des processus de conversion 
    • Accessibilité
    • Interopérabilité
      • test différents navigateurs, différents devices y compris mobiles et tablettes 
    • Performances
    • Présence web : présence et popularité sur les réseaux sociaux, sur le web en général,...
    • Critères plus subjectifs : esthétiques, 
  • 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