Pourquoi?

Ce n'est pas parce qu'on fait bien qu'on ne doit pas faire mieux.

Plusieurs avis valent mieux qu'un.

 

 

Parce que c'est instructif pour les apprenants et pour les entreprises.

Et que ça permet de créer le lien entre les deux.

 

Des slides pour détailler.

Le site parfait n'existe pas.

 

Les audits font souvent remonter BEAUCOUP de soucis ou d'erreurs.

Il est nécessaire de prioriser les améliorations (optimisation coût/bénéfice : qu'est-ce-qui est rapide et apporte le plus d'avantages?).

Comment?

Tact et bienveillance

Avec les bons outils

(voir plus loin)

Connaissez-vous l'onglet Audits de Chrome?

Chrome

F12 -> Ctrl+Shift+M : Responsive

F12 -> Audits : Performance, Accessibility, SEO.

 

Firefox

F12 -> Ctrl+Shift+M : Responsive

F12 -> Performance

F12 -> Accessibility

 

Identifier les technos utilisées sur le site :

Wappalyzer

Responsive

Depuis un laptop -> F12 -> vue mobile

ou Depuis un mobile.

 

Si besoin de scroll horizontal => KO.

Observer l'alignement des éléments et la navigation sur le site (décalage, hitbox trop petite, texte illisible, etc).

Simple et efficace

From scratch : framework CSS

Sinon : media-queries ou chirurgie CSS (limiter les dimensions absolues en px et assimilés)

Performance

Si >3s pour charger => trop long.

Tester avec F12 pour plus de détails.

Simple et efficace

Des tailles à la bonne image.

Du code minifié.

Enlever les trackers si pas vraiment de besoin (Google Analytics, etc).

Eco-conception

http://www.ecoindex.fr/

http://www.ecometer.org/

Ou les plugins firefox (ecoindex) et chrome (GreenIT Analysis).

Indice : si un site est peu performant, il y a souvent un souci d'éco-conception qui en découle.

Simple et efficace

Améliorez les performances.

Limitez ce qui ne sert pas (trackers, fonctionnalités, etc).

Comment faire un audit rapide

Accessibilité

Ouvrir le HTML via F12 (Source).

Repérer le nombre de p/div/span -> html sémantique à préférer.

Ordre des H1, H2, etc.

Vérifier alt sur champs non-texte (audio/vidéo/image).

 

Audit complet via F12 ou avec plugin (Wave + aXe pour Firefox ou Chrome).

Simple et efficace

Préférez le HTML sémantique.

Utilisez les H à des fins de structure plutôt que de style.

Ajoutez un alt sur les contenus non-textuels.

Sécurité

Si c'est un Wordpress :

<url>/wp-content/uploads/

 

Version à jour?

Wpscan (avec modération)

Sécurité

Si ce n'est pas un Wordpress :

https?

Injection SQL : trouver un champ de saisie et insérer des "; et autres caractères spéciaux qui vont fausser la requête SQL.

Cross-site-scripting  : trouver un champ de saisie et insérer du html (</body>) ou du js (<script>alert("toto")</script>.

 

Sinon, un petit coup de Zap.

Simple et efficace

Dans le code, prévoir systématique un sanitize des inputs text.

Mettre à jour régulièrement les outils utilisés.

Données personnelles

Quelles données récoltez-vous auprès de vos utilisateurs (lien pour s'inscrire, formulaire de contact)?

Que faites-vous de ces données?

En avez-vous vraiment besoin?

=> RGPD

Simple et efficace

Ne collectez que ce dont vous avez vraiment l'utilité.

 

Formez-vous gratuitement sur le RGPD.

Référencement

A quel type de public s'adresse votre site?

A votre avis, comment le cherchent-ils sur Google?

=> on regarde ensemble en quelle position ressort le site.

 

F12 -> Audits -> SEO

 

Réaliser un audit

Des outils pour un audit plus poussé

Simple et efficace

Balises meta et title.

sitemap.xml et robots.txt.

 

Améliorer le reste : accessibilité, perf, responsive et https.