Slides projeté lors de la journée de formation Groupe des 20

1. Communication digitale
www.chrisgaillard.com

2. Présentation
Travailleur indépendant installé dans la région grenobloise
depuis 1996. Je conçois et réalise des sites Internet (20
ans et plus de 200 sites web à mon actif ), du cahier des
charges au design, en passant par le développement. Je
me spécialise sur les CMS Wordpress et Spip. Je donne
des cours à IUT Info-Com de Grenoble, Stendhal Master 2
Diffusion de la Culture, CNRS…
Quelques références dans le domaine culturel local

3. Chiffres 2018
54% de la population mondiale est sur Internet
44% sur les réseaux sociaux
88% des français ont accès à Internet
91% des internautes français ont un usage quotidien
58% sont sur les réseaux sociaux
71% ont un smartphone
59% du traffic depuis un ordinateur, 34% depuis un smartphone
Temps moyen passé par Internaute français
- 4h48 sur Internet
- 1h22 sur les réseaux sociaux
91% considèrent la protection des données comme important
Source : https://www.slideshare.net/wearesocial/le-digital-en-france-en-2018

4. Chiffres 2018
Sites les plus visités
1 - Google
2 - Facebook
3 - Youtube
4 - Wikipédia
5- Amazon
Plateformes sociales les
plus actives
1 - Youtube
2 - Facebook
3 - Facebook Messenger
4 - Instagram
5- Twitter
En France
38 millions d’utilisateurs actifs
(+6% par rapport à 2017)
82% des utilisateurs sur mobile
13-17 ans : 6 %
18-24 ans : 20 %
25-34 ans : 26 %
35-44 ans : 20 %
45-54 ans : 14 %
55-64 ans : 8 %
+ de 65 : 6 %

5. Chaque minute sur Internet
7 millions de snaps envoyés sur Snapchat
216 millions de photos aimées sur Facebook
2,4 millions de photos aimées sur Instagram
350 000 tweets sur Twitter
400 heures de vidéos téléchargées sur YouTube

6. Evolution des technologies
…. et leur incidence sur la conception des sites web.
Années 90
Sites statiques
en html css avec
des logiciels
comme
Dreamweaver.
Années 2000
Usage massif du
Flash
Années 2010
Généralisation
des sites
propulsés par
des CMS comme
Wordpress

7. Evolution des outils de consultations
…. et leur incidence sur la conception des sites web.
Les ordinateurs changent de taille d’écrans

8. Evolution des outils de consultations
…. et leur incidence sur la conception des sites web.
Vitesse de connexions
Bas débit : Modem 56 ko avec connexion par le téléphone, site léger optimisé, chaque image devait être
optimisée. (Années 90).
Connexion via un mobile en 2G 3G : Retour à une connexion lente sur un petit écran
Haut débit : ADSL plus rapide, les sites internet peuvent être plus plus lourds : grandes photos, vidéo,
animations flash etc…
Très haut débit : La fibre dans les zones denses
Les concepteurs de sites Internet doivent penser à offrir une bonne experience utilisateur
à ceux qui naviguent avec un téléphone en bas débit et à ceux qui naviguent sur un grand
écran en très haut débit.

9. Evolution des technologies
…. et leur incidence sur la conception des sites web.
Aujourd’hui les sites sont « Responsives »
Le Responsive Web design est une approche de conception Web qui vise à l'élaboration de
sites offrant une expérience de lecture et de navigation optimales pour l'utilisateur sur
téléphones mobiles, tablettes, moniteurs d'ordinateur de bureau.
Une expérience utilisateur "Responsive" réussie implique un minimum de redimensionnement
(zoom), de recadrage, et de défilements des pages.
Depuis mai 2015, google pénalise les sites non-responsive.

10. Les CMS
Un CMS (Content Management System) permet de réaliser un site internet dynamique et
responsive via une interface simple d'utilisation. Il est ainsi facile de créer des pages, sans
forcément connaître les langages en développement web.
Il existe des centaines de CMS, pour différents types d'utilisation comme :
Rédiger des articles et les publier dans un blog.
Présenter l'activité d'une entreprise à travers un site institutionnel.
Vendre ses produits en ligne sur un site e-commerce, grâce à l'installation de modules de
paiement.
Créer un site communautaire pour favoriser le partage d'informations entre plusieurs
internautes.

11. WordPress
fr.wordpress.com fr.wordpress.org

12. 2003 (v0.7)
Lancement de WordPress, c’est l’évolution de b2 un logiciel de Michel Valdrighi qui
existe toujours.
2004
Matthew Mullenweg qui âgé seulement de 20 ans et développe WordPress fonde la
société d’édition de logiciel Automattic en 2005.
2005
WordPress 1.2 Charles Mingus. Possibilité de gérer et de développer des plugins.
WordPress 2 Duke Ellington. Elle apporte l’introduction d’un éditeur de texte, Il devient
également possible d’uploader des images, de créer de nouveaux rôles utilisateur.
2010 (v3.0)
La communauté de développeurs WP prend de l’ampleur 218 développeurs pour la
version 3,
« Explosion » de WordPress WordPress est téléchargé 50 millions de fois depuis sa
sortie en 2003
2019 (v5)
Wordpress est le CMS le plus répandu dans le monde, (un site sur 3. ) Arrivé de
Gutenberg, un constructeur de pages intégré à WordPress menacé par des outils
comme WIX, et souhaitant participer à l’essors des constructeurs de pages proposés
par les éditeurs de thèmes.
WordPress

13. Ce sont des thèmes (ou de plugins) qui
remplacent le champ de saisi des pages et des
articles, par un outil de construction de pages.
Un page builder permet de composer une page
responsive en empilant des modules composés
de sections qui se découpent en colonnes.
Colonnes que l’on remplit de textes, de photos,
de vidéos, de cartes, de slider, etc…
Chacun de ses éléments est associé à un
panneau de configuration permettant des
réglages d’affichage graphique, d’effets
d’animation, etc…
Les constructeurs de pages

14. Les constructeurs de pages

15. Gutenberg
Wordpress 5

16. Gutenberg
Gutenberg principale nouveauté de Wordpress 5, est un éditeur de contenu qui
remplace TinyMCE, un petit Page Builder, ou constructeur de page comme Divi,
Visual Composer, Avada… plus simple mais extensible avec des blocs communs.
Gutenberg a pour objectif de se transformer en un véritable constructeur de site.
Faire de WordPress une alternative OpenSource (avec des modules payants) à
des concurrents comme Wix ou SquareSpace.

17. Gutenberg
Un système de blocs
Comme un constructeur de pages,
Gutenberg propose à la place de l’éditeur
de texte classique, un ensemble de blocs.
Des plugins vont permettra d’ajouter d’autres
blocs, comme des maps Google, des sliders
animés, des blocs de textes avec plus
d’options.

18. Gutenberg
Tous les thèmes ne sont pas compatibles ou optimisés pour Gutenberg. Il est possible
d’être dans WordPress 5 et d’activer l’éditeur classique tinyMCE, avec le plugin Classic
Editor.

19. Google Analytics
Google Analytics est un service gratuit d'analyse d'audience d'un site Web ou d'applications utilisé par plus de 10
millions de sites, soit plus de 80 % du marché mondial.
Il faut enregistrer son site sur le site Google Analytics et coller un code sur l’ensemble des pages du site. Ces
opérations vont vous permettre de connaitre les comportement de vos visiteurs.
Cookie : Il s’agit d’un petit fichier texte stocké sur l’ordinateur (ou autre terminal) de l’internaute. Ce fichier
regroupe des données telles que l’heure de visite, le nombre de visites, la source d’arrivée (pour les cookies
Google Analytics) mais plus globalement vos préférences et habitudes de navigation sur la toile.
Google Analytics utilise un système de cookies qui permet de connaître les interactions du visiteur avec le site, il
copie un fichier sur l’ordinateur du visiteur.
Une adresse IP (avec IP pour Internet Protocol) est le numéro qui identifie chaque ordinateur connecté à Internet,
ou plus généralement et précisément, l'interface avec le réseau de tout matériel informatique (routeur,
imprimante) connecté à un réseau informatique utilisant l'Internet Protocol.
Google Analytics enregistre l’adresse IP du visiteur. L’IP permet d’avoir des informations sur la provenance des
visites (géolocalisation) et d’identifier un pays, une région, une ville.

20. Google Analytics
Audience en temps réel ou analyse d’audience sur une période donnée
Nombre de visiteurs en live sur le site
Sources du traffic
Zones géographiques
Pages vues
Graphique par jour, semaine ou mois sur une période que l’on peut définir.
Le taux de rebond
Support de consultation

21. Capter et retenir ses visiteurs
Réduire le taux de rebonds
Avoir du contenu utile, attractif, faire un effort sur la mise-en-forme des textes, avec des titres, inter-
tires des mots en gras…. rapide à charger, avec du son, des vidéos…
Pour les pages d’erreurs, inclure des propositions de contenu directement dans la page d’erreur
404.
Sur les pages spectacles, proposer d’autres spectacles en bas de page ou dans la marge, comme
par exemple « Vous aimerez aussi » ou « dans le même style ».

22. Accessibilité web

23. Accessibilité web
Qu’est-ce que le handicap ?
Selon la loi française :
« Toute limitation d’activité ou restriction de participation à la
vie en société subie dans son environnement par une
personne en raison d’une altération substantielle, durable ou
définitive d’une ou plusieurs fonctions physiques,
sensorielles, mentales, cognitives ou psychiques, d’un
polyhandicap ou d’un trouble de santé invalidant. »

24. Accessibilité web
Qu’est-ce que l’accessibilité ?
L’accessibilité est un terme initialement relatif au monde du handicap mais
étendu à l'ensemble des citoyens et utilisé pour désigner l'accès aux
domaines suivants :
- physique, la liberté de déplacement dans l'espace ;
- éducatif, le droit à une scolarisation ;
- civique, le droit de vote ;
- culturel, pouvoir développer sa culture ;
- numérique, adaptation des systèmes numériques dont les sites web, aux
différents types de handicap, développement d'outils spécifiques tels loupe
ou clavier visuel ;
- travail, pouvoir travailler en milieu ordinaire ;
- santé, avoir accès aux services de santé promotionnels, préventifs et
curatifs.

25. Accessibilité web
Qu’est-ce que l’accessibilité ?
Pour les personnes en situation de handicap, l'objectif de l'accessibilité est de
permettre une vie ordinaire.
Pour les personnes n'étant pas en situation de handicap, l'accessibilité reste
une préoccupation dans diverses situations : femmes enceintes, incapacités
temporaires consécutives à un accident du travail ou domestique, difficultés
sensorielles liées à l'âge, sur-poids : des situations où l'individu n'est pas à
proprement parler en situation de handicap mais concerné : une jeune maman
avec une poussette, un voyageur avec une grosse valise à roulette…..

26. Accessibilité web
Loi de 1975 et décret législatif de 1991 qui concerne l’accès aux bâtiments voirie transports …

27. Accessibilité web
Loi de 1975 et décret législatif de 1991 qui concerne l’accès aux bâtiments voirie transports …

28. Accessibilité web
Loi de 1975 et décret législatif de 1991 qui concerne l’accès aux bâtiments voirie transports …

29. Accessibilité web
Qu’est-ce que l’accessibilité web ?
Selon la WAI (Web Accessibility Initiative) :
« L’accessibilité du web signifie que les personnes en situation
de handicap peuvent utiliser le web – plus précisément
qu’elles peuvent percevoir, comprendre, naviguer et interagir
avec le web, et qu’elles peuvent contribuer sur le web.
L’accessibilité du web bénéficie aussi à d’autres, notamment
aux personnes âgées dont les capacités changent avec l’âge.
L’accessibilité du web prend en compte tous les handicaps qui
affectent l’accès au web, ce qui inclut les handicaps visuels,
auditifs, physiques, de parole, cognitifs et neurologiques. »

30. Accessibilité web
Le nombre de personnes concernées
Entre 10 et 20% selon les résultats de l’enquête vie
quotidienne et santé (INSEE, 2007).
Une personne sur dix considère être « handicapée» , et une sur
cinq être « limitée dans ses activités ».
15 % de la population mondiale selon le rapport mondial sur le
handicap de l’OMS (2010).

31. Accessibilité web
L’accessibilité du web, concrètement…
Pour les personnes…
• aveugles : navigation au clavier, utilisation d’un lecteur d’écran (synthèse
vocale, plage braille), balisage sémantique, alternatives textuelles, liens et
intitulés explicites, audiodescription…
• malvoyantes : couleurs, contraste, taille des caractères…
• sourdes : transcription textuelle, sous-titres synchronisés, interprétation en
langue des signes…
• malentendantes : dialogues suffisamment audibles…
Et aussi : perte des capacités motrices, prévention des crises, difficultés de
lecture, de concentration, de compréhension…

32. Accessibilité web
Un site est accessible quand il fonctionne :
• avec tous les navigateurs, récent et ancien.
• avec n’importe quelle interface, navigation par souris, pad, écran tactile,
clavier…
• avec toute plateforme d’accès, c’est-à-dire tous les systèmes
d’exploitation, mac, windows linux, mac OS, Androïd.
• sans plugin tel que flash, quicktime etc…
• avec tout périphérique d’affichage, moniteur de toute taille, écran de
téléphone
• un contenu compatible avec les systèmes d’aide technique destinée aux
personnes handicapées (loupe d’écran, synthèse vocale, plage braille etc…). Ex:
un texte en mode image, ne sera pas lisible avec ces outils.

33. Accessibilité web
Le contraste des couleurs

34. Accessibilité web
L’agrandissement du texte

35. Accessibilité web
L’agrandissement du texte

36. Accessibilité web
Actuellement
On constate, sur Internet un retard important pour l'équipement des services
publics et plus grave encore une très faible accessibilité des outils Internet
mis à disposition des citoyens.
Une révision de la loi de 1975 prévoit pour sa part que l'accessibilité de
l'information publique sera rendue obligatoire.
Au niveau économique, l'accessibilité devient un véritable enjeu marketing et
commercial et constitue un atout pour les sociétés sensibles à leur image.

37. Accessibilité web
Outils
Les personnes malvoyantes utilisent des logiciels spécifiques appelé loupe
d'écran, logiciel de grossissement d'écran qui leur permettent de
personnaliser le contenu du site, changer la taille de la police, ou même la
police, modifier le contraste texte de la page etc..
Zoomtext reste aujourd'hui le plus célèbre
de ses logiciels spécifiques.

38. Accessibilité web
Outils
Les personnes non voyantes ont deux possibilités pour consulter des pages
Web, un terminal braille un appareil qui traduit le texte présent dans une page
en braille; ou l'utilisation d'un logiciel de synthèse vocale, ils peuvent utiliser
les deux à la fois.

39. Accessibilité web
Outils
Pour les personnes sourdes ou malentendantes il n'y a pas réellement aide
technique, l'auteur d'un site devra prévoir une alternative texte aux contenus
sonores présents sur un site.
Il existe cependant des produits de reconnaissance vocale qui ont été
adaptés pour convertir le langage parlé en langage des signes. Ce qui permet
aux sourds et malentendants d'accéder à des informations auditives.

40. Accessibilité web
Outils
Les personnes souffrant de handicaps moteur rencontrent plusieurs types de
difficultés. L'utilisation du clavier, de la souris des ascenseurs de défilement
sur une page sont autant de gènes liés à des problèmes de contrôle
musculaire, de coordination, de paralysie, ou lié au manque d’un des bras par
exemple. Des outils spécifiques existent là aussi pour pallier ces problèmes.

41. Accessibilité web
Un site accessible
Les images sont omniprésentes sur le site Internet et apportent des
informations au contenu de la page.
Une personne ne pouvant pas visualiser ses images à cause des déficiences
visuelles ou par choix de naviguer en mode texte, n'aura pas accès aux
contenus informatifs de ces dernières. Il faut donc une alternative textuelle
associée à cette image, c'est la balise html Alt.
< a href=«chaton.jpg » alt=«un bébé chat » >

42. Accessibilité web
Un site accessible
Pour les sons l'alternative des contenus sonores va reprendre l'intégralité du
texte parlés ou chantés ainsi que les bruits importants présents dans la
bande son qui ont pour but de donner une information supplémentaire.
L'idéal est de proposer un lien pour la lecture écrite.

43. Accessibilité web
Un site accessible
Pour les vidéos, Il convient d'ajouter des sous-titres à la vidéo pour que
l'alternative textuelle soit synchronisé avec la mention. Les sites de partage
de vidéos comme YouTube propose aux fournisseurs de contenu un outil de
sous-titrage extrêmement facile à utiliser.

44. Accessibilité web
Un site accessible
Trop de sites utilisent des contrastes trop faible entre le texte et le fond de
la page ce qui entraîne une importante fatigue visuelle pour l'utilisateur du
même coup rejet de la page.
Il faut donc être prudent avec les images de fond pour l'utilisation parfois
lourdement frappé la lisibilité du site. La taille des textes et le choix des typos
doivent servir le confort de lecture.
Le respect des règles de ponctuation, afin de ne pas changer le sens d’une
phrase quand elle est lue par un synthétiseur vocale :
Example : « C’est l’heure de manger, les enfants… » « C’est l’heure de manger
les enfants… »

45. Accessibilité web
Un site accessible
Les animations
Les textes défilant ou clignotant doivent au moins pouvoir être mis en
pause. Il est fortement recommandé de ne pas les utiliser.

46. Référencement

47. Référencement
Parts de marché
Dans le monde En France

48. Sur Internet, le travail de référencement consiste à améliorer le positionnement et
la visibilité de sites dans des pages de résultats de moteurs de recherche ou
d’annuaires.
Le référencement web s'articule autour de deux stratégies distinctes et
complémentaires : le référencement naturel (ou organique) et le référencement
payant (ou liens sponsorisés).
Référencement

50. Le référencement "naturel", "traditionnel" ou "organique" consiste à
optimiser les pages de son site afin d'apparaître dans les meilleures
positions des résultats de recherche. Il n'existe pas, dans ce cas, de
transaction financière entre l'éditeur du site et le moteur de recherche.
Le référencement "payant" ou "paid inclusion" ou "trusted feed" consiste
à payer le moteur de recherche pour une offre commerciale (paiement au
forfait ou au clic) proposant la garantie d'indexation (mais pas la garantie
de positionnement). Il s'agit d'une offre le plus souvent prise en compte
pour référencer de façon globale tous les produits d'un catalogue par
exemple...
La plupart de ces pratiques sont complémentaires, et c'est certainement
ce qui fait - en bonne partie - l'efficacité d'une campagne de "Search
Engine Marketing" bien faite...
Référencement

51. Pour quoi faire ?
- Etre présent
- Etre bien placé
- Augmenter le nombre de visites
- Développer sa notoriété
- Trouver de nouveaux contacts, clients, spectateurs, visiteurs….
Référencement

52. SEO
Search Engine Optimization ou Optimisation pour les moteurs de recherche
Porte essentiellement sur le texte écrit qui est présent sur le site. Les mots clés sont
extrêmement importants et doivent être choisis avec pertinence. Entre 5 et 10 mots
classés par ordre d’importance.
Pour optimiser le contenu, il faut penser à :
- Identifier ce que recherchent les internautes (= quels sont les mots-clés utilisés)
- Adapter mon vocabulaire à celui de mon public.
Référencement

53. Position des mots clés
Visible à l’écran
Les moteurs de recherches tiennent compte des éléments suivants :
1- Titre de la fenêtre, en html la balise <title></title>
Il faut des titres différents, d’une page à l’autre.
2 -L’url doit contenir des termes explicites.
Sur ce site les urls sont peu explicites
http://www.le-grand-angle.fr/spip.php?page=article&id_article=46
3 - Les titres et sous-titres
Les titres dans des balises <h1> <h2> <h3>…
Il doit forcément y avoir une balise <h1> mais pas plus.
Les paragraphes doivent forcément être dans des balises <p>.
4- Le premier paragraphe
5- Les mots en gras
Référencement

54. Position des mots clés
Invisible à l’écran
Les moteurs de recherches tiennent compte des éléments suivants :
Les textes alternatifs des images
Les images doivent avoir un texte alternatif, la balise alt.
<img alt=“Cie de Théâtre Duchmol“ src=« lacie-duchmol.jpg » />
Dans Wordpress
Référencement
Dans DIVI, sur le module images

55. En affichant le code source de la page, on voit dans l’entête divers balises
Cette balise contiendra une description succincte du site web, son contenu sera récupéré par Google
dans l’affichage de ses résultats. Les textes présents dans cette description n’ont aucun poids pour le
référencement.
Référencement
<meta name="description" content="Musilac est un festival pop-rock
organisé à Aix-les-Bains les 13, 14, 15 et 16 Juillet 2017 sur
l'esplanade du bord du lac du Bourget." />>

56. Contenus
Le site doit contenir un contenu original et non un simple copier-
coller d’un autre site. Google pénalise les sites qui n’ont pas de
contenus originaux.
Les pages devront au moins contenir un contenu textuel
conséquents, 300 mots mais si il y en a 1000 c’est mieux.
Le premier paragraphe devra contenir les mots clés principaux.
C’est toujours bien d’ajouter des liens extérieurs.
Référencement

57. Un titre de page devrait avoir au moins 35 caractères
Les mots en gras, dans les titres, et les textes alternatifs aux images ont
plus de poids.
Le site doit changer régulièrement, une zone avec des actualités mises
à jour régulièrement favorisera le bon référencement de celui-ci.
Inclure un transcript (texte et description) des vidéos et audio présents
sur le site.
Faites des liens internes vers les pages les plus importantes de votre
site.
Essayer d’avoir des liens externes qui pointent chez vous.
Référencement

58. Les algorithmes de Google et leur mise à jour
Il faut toujours se tenir informer des évolutions des moteurs de
recherche si on veut avoir un référencement de qualité, notamment
des mises à jour de Google qui sont nombreuses ! Certaines ont
même littéralement ébranlé le web et la manière de faire du SEO
pendant la
dernière décennie.
Exemple d’algorithme connu : Google panda
Il se bat principalement contre les sites au contenu dupliqué ou
bourré
de fautes d’orthographe. D’autres critères doivent bien évidemment
rentrer en compte mais nous ne les connaitrons jamais tous. Google
garde ses secrets.
Référencement

59. L’indexation
Dès que vous avez publié votre site, il est en ligne. Si vous tapez son URL
dans la barre d’adresse, il est accessible. En revanche, vous ne pouvez pas
encore le trouver via des requêtes Google parce qu’il n’est pas indexé.
L’indexation, c’est encore le travail des robots. Si vous avez un fichier
robots.txt et un sitemap, votre site devrait être indexé plus rapidement.
Encore une fois, cette période est variable d’un site à l’autre.
Référencement

60. L’optimisation du contenu
Le contenu reste un élément central du référencement.
Google étudie le comportement des internautes sur votre site. Il épie ses
faits et gestes. S’ils quittent votre site ou article trop rapidement,
Google vous référencera moins bien.
Google n’aime pas les pages fourre-tout. Il faut créer une page par mot-
clef travaillé pour plus d’efficacité.
Référencement

61. Sur Wordpress un plugin YOAST SEO
Référencement
- Analyse des contenus, recommandations
- Personnalisation de l’affichage dans les résultats de recherche
- Balises Open Graph…
Il faut définir un mot-clé par page et des mots clés important pour l’ensemble du site.
Définir un mot clé par page que nous allons inclure dans
- L’url des pages
- Les titres des pages (balise H1)
- Les titres de la fenêtre (balise title)
- Les textes alternatifs des images
- La description des pages
- Dans le premier paragraphe de la page
Pensez à inclure également les mots clés important pour notre site.

62. Redirection d’url
Référencement
Dans le cadre de la refonte d’un site avec des utils différents, les urls de toutes les pages
peuvent changer. Afin de ne pas perdre son référencement, il faut indiquer aux moteurs de
recherche le lien entre les anciennes adresse et les nouvelles.
Exemple :
Sur mon site http://www.tructruc.com,
l’url de la page
http://tructruc.com/spip.php?rubrique5
est maintenant
http://www.tructruc.com/qui-sommes-nous
Sur WordPress le plugin Redirection va nous permettre d’effectuer ces redirections.
Dans notre exemple, il faudra indiquer
comme page source /spip.php?rubrique5
comme page cible /qui-sommes-nous

63. Perfomance web
Référencement
Que signifie optimiser les images ?
Les grosses images ralentissent vos pages Web. L’optimisation des images est le processus qui
consiste à diminuer la taille du fichier, ce qui accélère le temps de chargement de la page.
Choisir le bon format de fichier
PNG – produit des images de meilleure qualité, mais aussi des fichiers de plus grande taille. Il a
été créé comme un format d’image lossless (sans perte). A utiliser pour les images avec de la
transparence.
JPEG – Vous pouvez ajuster le niveau de qualité pour un bon équilibre entre la qualité et la
taille du fichier. A utiliser pour les photos avec une compression moyenne.
GIF – n’utilise que 256 couleurs. C’est le meilleur choix pour les images animées.
En pratique, dans Photoshop
On utilise toujours la fonction « enregistrer pour le web » . Pour des photos on utilise le format
jpg compression moyenne entre 40 et 50.
On peut aussi utiliser l’application ImageOptim gratuite pour nettoyer les
meta-données des images (nom de l’appareil photo, géolocalisation,
historique de modification etc..) et gagner encore du poids, parfois beaucoup.
https://imageoptim.com/fr

64. http -> https
Le SSL qu’est-ce que c’est ?
C’est un protocole de cryptage qui sécurise les données qui transitent entre le visiteur d’un site
et le serveur ou celui-ci est hébergé. En clair si vous remplissez un formulaire de contact, les
données que vous saisissez seront encodées et donc inexploitables pour le hacker qui
arriverait a s’en saisir. L’adresse de vos pages commence alors par https au lieu de http. Et un
icône avec un cadenas vert et la mention "Sécurisé" apparait dans la barre de saisie du
navigateur.
Sécurité

65. Les attaques virales sont très courantes, et des failles de sécurité sont régulièrement
découvertes dans Wordpress et autres CMS, et autres éléments constitutifs d’un site
web.
- Mettre à jour régulièrement son CMS, les thèmes, et les plugins.
- Ne pas avoir d’administrateur qui s’appelle admin
- Mettre des mots de passe avec plus de 10 caractères, des minuscules, des
majuscules, des caractères accentués, des symboles.
- Vérifier que votre hébergeur propose des backups, ne pas choisir le moins cher.
- Attention aux thèmes gratuits et plugins, renseignez-vous, supprimer ceux que vous
n’utilisez pas.
- Toujours un compte administrateur par personne. Ne pas se passer les mots de
passe.
Sécurité

66. Le mot de passe azerty est cassé en moins d’une seconde avec un simple logiciel gratuit
sur un PC, le mot de passe Azety8!po$*uioPqg sera cassé en plusieurs milliers
d’années.
Pour apporter une sécurité supplémentaire certains plugins dont All In One WP Security
ajoute des mesures qui permettent de compliquer le piratage de votre site, comme
changer l’adresse de connexion à l’admin, (wp-admin), ou lutter contre les attaques de
type force brute.
Sécurité

67. Ergonomie web

68. Ergonomie web
Pourquoi s’intéresser à l’ergonomie ?
Pour faire un site bien construit, plaisant à naviguer, où l’on trouve facilement ce
que l’on cherche, qui se charge rapidement.
Savoir pourquoi un site est efficace, comment remédier aux problèmes de
compréhension de notre site par nos visiteurs. Savoir apporter un regard critique
et argumenté sur une maquette, un site web existant. Il existe des règles à
appliquer afin de tendre vers cet objectif.
4 règles
Le concept de Gestalt
La loi de Fitts
La loi de Hick
Le concept d’Affordance

69. Le concept de Gestalt ou psychologie de la forme
C’est une théorie selon laquelle les processus de la perception et de la
représentation mentale traitent spontanément les phénomènes comme des
ensembles structurés (les formes) et non comme une simple addition ou
juxtaposition d’éléments.
Le tout est différent de la somme des parties.
Une page web est un ensemble d’éléments, de formes imbriquées les unes dans
les autres qui forment un tout.
Ergonomie web

70. Ergonomie web
Le concept de Gestalt ou psychologie de la forme

71. Ergonomie web
Le concept de Gestalt ou psychologie de la forme
La loi de proximité
Le cerveau humain regroupe les éléments, 2 éléments proches se verront
associés, on leur trouvera plus facilement des points communs que 2 éléments
éloignés.
Un paquet d’étoiles sans ordre.
Ici c’est deux lignes composés d’étoiles,
les étoiles passent au second plan devant
la notion de ligne.

72. Ergonomie web
Le concept de Gestalt ou psychologie de la forme
La loi de proximité
Cette déduction de notre cerveau se fait naturellement, c’est une logique de
proximité, d’éloignement et d’ordre des éléments.
C’est fondamentale pour la conception de pages web. Il faut rapprocher les
éléments qui ont une relation forte et éloigner les autres.
Exemple :
Éléments de navigation éloignés les uns des autres..

73. Ergonomie web

74. Ergonomie web
Le concept de Gestalt
ou psychologie de la
forme
La loi de proximité
Dans cet exemple les légendes
des photos sont à égale
distance des photos placées
au-dessus et en-dessous. On
ne comprend pas à quelle
photo la légende est associée.

75. Ergonomie web
Le concept de Gestalt
ou psychologie de la
forme
La loi de proximité
En rajoutant une marge sous le
texte, la légende et la photo
sont associés.

76. Ergonomie web
Le concept de Gestalt
ou psychologie de la
forme
La loi de similarité
Les formes qui se ressemblent
sont regroupés par notre
cerveau (taille, forme couleur).
Par la taille : petits carrés et
grands carrés, on a donc
tendances à leur chercher des
similitudes.

77. Ergonomie web
Le concept de Gestalt ou psychologie de la forme
Gestalt
Proximité des objets
Similitudes de formes, de couleurs, de tailles
= Association
Éloignement des objets
Différences de formes, de tailles et de couleurs
= Dissociation

78. Ergonomie web
La loi de Fitts
Dans le domaine de l'Interaction Homme-Machine (IHM), la loi de Fitts permet
de prédire le temps requis à un humain pour pointer une zone.
Appliqué au web, cette loi permet de savoir en combien de temps la souris va
atteindre un élément sur une page web. Cela permet d'optimiser les interfaces
web.
La loi stipule que le temps nécessaire pour atteindre un élément est
proportionnel à la distance de l'élément et la taille de l'élément.
Billetterie

79. Ergonomie web
La loi de Fitts
Plus la souris est éloignée d'un élément et plus le temps pour atteindre cet
élément sera long.
Plus l'élément de destination est gros et moins la souris nécessitera de
temps pour l’atteindre.
De ce fait, pour atteindre rapidement une zone de l'écran, il faut que celle-ci
soit grande et proche de la souris.
Le Fittsizing est le principe de compensation de la distance pour aller à un
point par l’augmentation de sa taille; il permet un gain de temps non
négligeable pour l’internaute.
Des études montrent qu’un site de e-commerce qui augmente la taille des
boutons « Ajouter au panier » trop petit, augmentera aussi ses ventes.

80. Ergonomie web
La loi de Hick
La loi de Hick décrit le temps qu'il faut à un utilisateur pour prendre une
décision en fonction du nombre de choix à sa disposition.
De mémoire un homme peut retenir entre 5 et 9 objets, en moyenne 7.
Au delà, notre mémoire de travail, mémoire transitoire et instantanée nous
joue des tours. Au delà de 7 grandes zones le messages risques d’être brouillé
et mal compris.
Dans les barres de navigations, on évitera de mettre plus de 7 items au
grand maximum 9.

81. Ergonomie web
La loi de Hick
Exemple : un menu avec
beaucoup trop d’éléments,
difficile de se repérer.

82. Ergonomie web
Le concept
d’affordance
L'affordance est la
capacité d’un système ou
d'un produit à suggérer sa
propre utilisation.
Une porte nous indique
qu’on doit la pousser ou la
tirer par la présence des
gonds, d’une poignée.

83. Important sur le web de faire des liens qui ressemblent à des liens ou qui soit
simplement différents du reste. Et si possible que cette différence soit
omniprésente sur l’ensemble des pages.
Par l’usage de la couleur du texte cliquable:
d’un surlignage
L’usage d’un pictogramme symbolisant la notion de lien
Pour les images
Je dois différencier les images cliquables des images non-cliquable par une distinction qui peu
prendre la forme d’un contour de couleur, d’un pictogramme …
Ergonomie web
Le concept d’affordance

84. La règle des trois clics, certains sites bien fait s’affranchissent de cette règle
et sont parfaitement ergonomique et inversement.
Incompatible avec un bon design, un bon designer web doit connaitre ces
règles et savoir composer avec.
Le scroll, les visiteurs d’un site savent scroller et le font quasiment
automatiquement. Le scroll horizontal est déconseillé car peu utilisé, et
parfois difficile à utiliser, pas de molette de souris horizontale.
Lecture en F ou en Z, c’est faux, c’est la composition de la page qui va diriger
l’œil du visiteur, la page est perçue dans sa globalité, dans sa composition.
Ergonomie web
Idées préconçues

85. Ergonomie web
Les textes
Pour rendre un texte agréable à lire sur un écran il est préférable de :
• Scinder l'article en plusieurs paragraphes
• Rédiger des intertitres
• Faire des sauts de lignes dans les paragraphes
• Ne pas justifier le texte
• Prévoir un interlignage suffisant
• Utiliser des listes à puces (si c'est possible)
• L'illustrer avec quelques images
• Indenter les textes par rapport aux titres

86. Ergonomie web
Importance de la mise-en-page
33 laboratoires grenoblois, regroupés au sein d’un réseau, ont pour
objectifs de : Comprendre les propriétés de la matière à l’échelle du
milliardième de mètre, fabriquer des objets minuscules de quelques
nanomètres, simuler leurs propriétés, découvrir de nouveaux
phénomènes et développer leurs applications… Une méthode pour
préparer le futur : développer un large socle de connaissances
fondamentales et faire émerger de futures applications. Domaine
d’application privilégiés comme la nanoélectronique qui prendra le
relais de la microélectronique avec plus de miniaturisation, plus de
puissance de calcul et plus de mémoire de stockage. Ces
recherches contribueront à valoriser les compétences en recherche
technologique et en industries de haut niveau du site grenoblois ; Le
vivant : les Nanosciences permettront de créer de nouveaux outils
de diagnostic et de nouvelles approches de soin ; mais aussi
l’énergie et l’environnement.

87. Ergonomie web
Importance de la mise-en-page

88. Ergonomie web
Importance de la mise-en-page
Utiliseravecmodérationlesdifférentespolicesdecaractère
et autres enrichissements typographiques.
Au delà de 3 polices de caractère, la lecture peut s'en trouver perturbée.
La lecture d’un texte peu contrasté est fatigante et n’invite pas à sa lecture.

90. Les médias sociaux
- les wikis : espaces de publication collaboratifs où chaque membre peut rédiger et modifier du
contenu. (Wikipédia.)
- les blogs : espaces de publication où l’utilisateur publie des billets successifs, qui sont ouverts
aux commentaires des lecteurs.
- Les microblogs : ils permettent de publier des messages très courts (140 caractères au
maximum pour Twitter qui en est l’exemple le plus renommé.)
- Les réseaux sociaux : ils visent à reproduire en ligne le réseau d’interactions sociales entre
des individus ou entités sociales. Facebook, le plus connu en France.
- Les plateformes de partage de contenu : chaque utilisateur peut créer un compte et publier
un certain type de contenus – vidéos sur Youtube, photographies sur Instagram ou Flickr,
Soundcloud pour l’audio pour les plus connus.
- Les forums : espaces de discussion libre où l’on ajoute des messages dans le fil d’une
conversation.

91. Les médias sociaux
La présence sur les médias sociaux.
Il est aujourd’hui incontournable pour une organisa5on d’être présents sur les médias sociaux, pour une
ques5on de visibilité. Ne pas être présent sur les réseaux laisse le champ libre à des personnes
étrangères à l’organisa5on pour créer des pages non-officiels, proposant une diffusion non maîtrisée et
non souhaitée.
Les médias sociaux peuvent être un élément d’une stratégie marke5ng, en complément d’un site
Internet, de campagnes d’affichages, d’encarts presse, de créa5on de dépliant, flyers, plaqueIes,
brochures, etc…
Community manager
Animateur de communauté ou CM, l'abrégé de community manager, est un mé5er qui consiste à
animer et à fédérer des communautés sur Internet pour le compte d'une société, d'une marque, d’une
célébrité ou d’une ins5tu5on.
Le CM publie des contenus sur les réseaux sociaux et interagis avec les abonnés aux réac5ons.
L'appella5on community manager est intégrée au Larousse 2016.

92. Les médias sociaux

93. Les médias sociaux
Utilisateurs quotidiens
1,47 milliard de membres dans le monde
22 millions d’utilisateurs en France
CHIFFRES CLÉS
2,27 milliards de membres dans le monde
33 millions d’utilisateurs en France

94. Les médias sociaux
LE PROFIL PERSO LA PAGE PRO
Nature est destiné à un usage individuel et non commercial ou
promotionnel.
permet aux entreprises, aux organisations et aux marques de bâtir une
communauté Web dans laquelle il ou elle pourra interagir avec les
utilisateurs.
Qui représente un particulier et doit être associé à votre
nom.
Vous devez être un représentant officiel de la personne ou de l’entité.
Publique Vous décidez le paramètre publique ou privé de
chacune de vos publications.
100% Publique. Tout le monde peut voir le contenu de votre Page. Y
compris ceux qui n’ont pas de compte Facebook.
Relations Les relations du Profil personnel sont des ami(e)s. La Page n’a pas d’ami. Les relations des Pages Facebook sont des
J’AIME.
Avec qui Toutes les demandes d’amitiés doivent être acceptées
ou ignorées. Personne ne peut devenir votre ami sans
votre consentement.
Toute personne qui a un compte Facebook peut cliquer J’aime sur
votre Page. Toutefois, vous pouvez bloquer des personnes sur votre
Page.
Applications On peut lier certaines applications (Twitter ou
Instagram) à notre Profil Personnel mais on ne peut
pas créer des applications pour notre Profil.
Possibilité d’ajouter et de créer des applications pour sa Page.
Limites Un Compte personnel peut avoir un maximum de 5,000
amis; s’abonner à 5,000 personnes et avoir un nombre
illimité d’abonnés.
Il n’y a aucune limite sur le nombre de J’aime sur votre Page.
Plusieurs Pages ont des millions de j’aime.

95. Les médias sociaux
Urls utiles
Transformer un profil en page
https://www.facebook.com/pages/create/migrate/
Fusionner plusieurs pages :
https://www.facebook.com/help/249601088403018
Vérifier l’affichage des éléments récupérés par Facebook, lors du partage d’une url de
votre site, le bon titre, la bonne description et la bonne image, et surtout re-générer le
cache mémoire de Facebook après modifications de ma page.
https://developers.facebook.com/tools/debug
La taille des images à produire pour Facebook et les autres réseaux sociaux
https://makeawebsitehub.com/social-media-image-sizes-cheat-sheet/

96. Interactions site/réseaux
Réseaux sociaux
Balise Open Graph
Maitriser les éléments affichés sur les réseaux sociaux quand une url de notre site est publiée.
Yoast SEO nous permet de contrôler ces éléments et de les différencier entre Facebook et
twitter.
Une url permet de vider le cache Facebook quand on fait des modifications sur une page :
https://developers.facebook.com/tools/debug
sur twitter elle est ici https://cards-dev.twitter.com/validator

97. Les médias sociaux
L’EDGE RANK
Sans « j’aime » ou commentaires, vos fans ne verront pas vos pages.
L’Edge Rank, c’est la formule qui régit la probabilité que vos publications soient « vues » dans le
flux d’actualité de vos fans.
Les chances qu’un de vos fans revienne souvent sur votre page sont infimes. Il est nécessaire de faire en
sorte que vos publications soient visibles.
Il est important d’inviter vos fans à interagir avec vos publications car c’est ainsi que l’Edge Rank de votre
page pourra se développer.
Plus vous avez d’affinités avec un utilisateur… plus cet utilisateur a déjà interagit avec vos contenus OU
vous avec lui...plus votre contenu a de poids en termes d’interactions et plus celui-ci a de chances d’être
affiché dans le flux d’actualité de vos fans.
Donc, si vous ne créez pas d’interactions avec vos utilisateurs, voici ce qui va se produire :
• Un utilisateur devient fan de votre page...
• Il voit vos publications dans son flux d’actualité...
• Cela ne l’intéresse pas, ou il n’interagit pas...
• Il ne voit plus vos publications dans son flux d’actualité.
• Il oublie votre page et ne verra plus jamais vos publications... bien qu’il soit toujours « fan ».

98. Les médias sociaux
Le moment idéal pour publier
Cela dépend vraiment de votre communauté, mais les meilleurs résultats étaient
obtenus entre 11h et 14h et entre 17h et 20h.
De même pour les jours de la semaine. Le top 1 est le dimanche ! C’est la journée
où vos fans ont plus de temps à passer sur les réseaux sociaux.
En général les publica5ons de fin de semaine reçoivent plus d’engagement.
Les publica8ons qui fonc8onnent
Donc, soyez simple et clair, court, privilégiez les contenus graphiques (images,
photos ou infographies) et encore une fois, n’hésitez pas à « provoquer » les
interac5ons.

99. Les médias sociaux
Les différents formats de publications sur Facebook
Vidéos
La vidéo et plus particulièrement la vidéo live est le format qui génère le plus
d’engagement.
C’est un moyen de captiver votre audience facilement, une publication avec une vidéo aura
un meilleur Edge Rank.
Une vidéo native Facebook aura un meilleur engagement qu’un lien vers Youtube.

100. Les médias sociaux

101. Les médias sociaux
Twitter
317 millions d’utilisateurs actifs
UNE PLATEFORME DE MICRO-BLOGGING
où l’on partage du contenu comme sur un blog mais dans un maximum de 140
caractères, toujours public. On peut aussi repartager les publications des autres.
UN RÉSEAU SOCIAL
où l’on se fait un réseau d’abonnés et où on prend part à des discussions privée ou
publiques
UN LIEU DE RENCONTRE
où on rencontre des gens et où on bâtit des relations sans niveau de hiérarchie et
d’interagir avec des personnalités célèbres ou politiques particulièrement accessibles.
Possibilité de sponsoriser un tweet.
Tweeter est trés consulté depuis des applications dashboard comme Tweetdeck

102. Les médias sociaux
Instagram
Orienté photo, image, vidéo on donne des effets vintage aux photos. Possibilité de faire
des stories, publications animées temporaires.
Racheté par Facebook pour un milliard de dollars en 2012
Application dédiée pour le mobile, tout le monde peut tout voir, sauf si notre profil est
privé on utilise des hashtags.
Les photos sont postées depuis un smartphone. Impossible de poster depuis un PC.
A partir d’un PC, il vous sera possible de vous connecter à votre compte Instagram pour
visualiser les photos.
Multicompte sur l’application mobile
Impossible de mettre un lien dans un post
Pour un usage pro, l’idéal est de proposer des photos de vos événements en cours, de
proposer un hashtag dans sa description, et d’en profiter pour faire passer des visuels
avec du texte, pour faire la promotions d’événements.
Possibilité de promouvoir une publication.

103. Les médias sociaux
https://ifttt.com/
IF This Then That (Si Ceci Alors Cela).
IFTTT est un service web gratuit avec des options payantes, permettant de créer des chaînes
d'instruction appelées applets.
Une applet est déclenchée par des changements qui interviennent au sein de services web tels
que WordPress, Gmail, Facebook, Instagram ou Pinterest.
Par exemple une applet peut faire une publication sur Facebook, Twitter lors de la création d’un
article sur un site Wordpress, envoyer un e-mail si l'utilisateur tweete avec un hashtag donné, ou
encore sauvegarder les photos publiées sur Facebook dans un service de stockage comme
Dropbox, ou bien s'envoyer un mail s'il pleut demain.

104. Interactions site/réseaux
Réseaux sociaux
Liens vers nos réseaux sociaux
L’interaction minimum est le simple lien vers nos pages de réseaux sociaux.
Simple à mettre en place, il informe les visiteurs de notre site web, de notre présence sur les
réseaux.

105. Interactions site/réseaux
Réseaux sociaux
Boutons de partage social
Liens présents sur les pages de notre site qui invitent les visiteurs à partager l’adresse de
notre page sur leurs réseaux sociaux.
Les études réalisées sur l’efficacité de cet outils nous indique que personne ne clique sur
ces boutons (ou presque). Les personnes qui souhaitent partager votre page utilisent :
- le copier-coller de l’url de la page
- l’option de partage présente sur les mobiles
- plugin de navigateur qui offre cette option pour les pro du partage.
Ces boutons ont une autre utilité : la preuve sociale. La preuve sociale c’est choisir entre 2
restaurants, celui qui est toujours bondé et celui qui est toujours vide.
Le compteur de partage prend en compte le nombre de partage fait par tout les moyens
et indiquera la popularité de la page.
Ces boutons rappellerons à vos visiteurs qu’ils peuvent partager cette page sur les
réseaux .
Où mettre nos compteurs ?
Le plus haut possible ou à gauche, pour la preuve sociale ;
Et à la fin de l’article, pour inciter au partage.
Pour info, ces boutons sont aussi des mouchards pour les réseaux sociaux.

106. Interactions site/réseaux
Réseaux sociaux
Plugins sociaux Facebook
Sur cette adresse
https://developers.facebook.com/docs/plugins
Facebook nous propose de créer des widgets pour notre
site web : Boutons de partage, boite de commentaires, et
Plugins page qui permet de créer une boite paramétrable
qui s’intégrera sur notre site et affichera les amis du
visiteur qui aiment la page Facebook associée au site, les
publications, etc….
Sur twitter
Idem sur https://publish.twitter.com/#

107. RGPD
Règlement général sur la protection des données
Le règlement no 2016/679, dit règlement général sur la
protection des données (RGPD, ou encore GDPR, de l'anglais
General Data Protection Regulation), est un règlement de
l'Union européenne qui constitue le texte de référence en
matière de protection des données à caractère personnel.
Il renforce et unifie la protection des données pour les
individus au sein de l'Union européenne.
Ce règlement a été définitivement adopté par le Parlement
européen le 14 avril 2016. Ses dispositions sont directement
applicables dans l'ensemble des 28 États membres de
l'Union européenne à compter du 25 mai 2018.
Les principaux objectifs du RGPD sont d'accroître à la fois la
protection des personnes concernées par un traitement de
leurs données à caractère personnel et la responsabilisation
des acteurs de ce traitement.

108. Glossaire
Donnée personnelle
Une donnée permettant d’identifier directement ou indirectement une personne physique
Directe -> Nom Prénom, mail (quand il y a le nom), photo
Indirecte -> n° de sécurité sociale, n°CB, adresse IP, plaque immatriculation véhicule…
Donnée sensible
La santé, orientation sexuelle, opinions politiques, religieuses, pays d’origine, etc
Traitement
Ce qui est visé par la réglementation, toute opération sur la donnée : stockage, organisation,
collecte, revente, envoi de newsletter, statistiques de consultations.
Qui est soumis aux obligations du RGDP ?
Organismes privée ou publique à des fins professionnelles.
Les sanctions
Sanction administrative : jusqu’à 4 % du chiffre d’affaires annuel mondial de l’entreprise
RGPD
Règlement général sur la protection des données

109. Qui est responsable ?
Responsable du traitement : il détermine les finalités, les objectifs du traitement. C’est le
responsable de la com, le directeur de l’établissement…
Sous-traitant : Celui qui traite la donnée pour le compte du responsable. Hébergeur,
webmaster, agence de com, fournisseur de solutions emailing…. et leurs sous-traitants.
Ils engagent leur responsabilité conjointement.
RGPD
Règlement général sur la protection des données

110. La Cnil
La Commission nationale de l'informatique et des libertés de France est une autorité
administrative. La CNIL est chargée de veiller à ce que l’informatique soit au service du citoyen et
qu’elle ne porte atteinte ni à l’identité humaine, ni aux droits de l’homme, ni à la vie privée, ni aux
libertés individuelles ou publiques.
Elle donne des conseils aux internautes sur l’usage des réseaux sociaux, la maîtrise de ses données,
comment réagir en cas de problèmes ….
https://www.cnil.fr/fr/10-conseils-pour-rester-net-sur-le-web
https://www.cnil.fr/fr/configurer
Il n’y a plus de déclarations à la Cnil quand on traite des données personnelles.
La Cnil peut faire des contrôles auprès des personnes ou organismes traitant des données
personnelles. Les personnes controlées devront être en capacité de démontrer qu’ils ont respecté les
obligations.
En cas de violations de données privées une déclaration doit être faite à la Cnil, une violation cela
peut-être le vol de son ordinateur ou être victime d’un piratage. Il faudra démontrer les mesures mises
en place pour limiter la violation des données personnelles. Il faudra aussi informer la personne
concernée par le vol de ces données.
RGPD
Règlement général sur la protection des données

111. Que dit la loi ?
La loi indique les traitements interdits, par principe le reste est autorisé.
Le traitement des données sensibles est interdit, sauf personnes autorisées comme le personnel
médical, dans certains cas les données sensibles peuvent être traités avec le consentement des
personnes.
Pour la prospection commerciale, envoyer de la pub par mail ne peut être fait qu’avec le consentement
des prospects. Sauf dans le cas d’échanges commerciaux contractuels passés pour des produits ou
services analogues.
Les grands principes :
• Collecter des données de façon loyale, licite.
• Les objectifs de la collecte de cette donnée doivent être définis clairement à la personne concernée.
• Ne collecter que les données nécessaires à cette finalité (pas besoin d’avoir des infos sensibles pour
envoyer une newsletter).
• Un traitement de données personnelles implique une durée limitée et doit être annoncée. Un fichier
de prospect peut être conservé 3 ans. Au bout de 3 ans on doit redemander le consentement des
personnes.
• Les données récoltées avec des cookies, adresses IP ne peuvent pas être conservés plus de 13
mois.
• Les données personnelles doivent être sécurisées, mettre en place les outils nécessaires pour
préserver la confidentialité (perte, piratage, revente).
RGPD
Règlement général sur la protection des données

112. Les personnes concernées
Le responsable de la données ou le sous-traitant doivent être en capacité de répondre aux
droits des personnes concernées.
Droit à l’information, pouvoir fournir à la personne concernée les données collectées.
Droit à l‘accès, à la rectification, droit d’opposition ou effacement des données.(notamment à la
prospection commerciale, comme se désinscrire d’une newsletter).
Droit de faire transférer ses données à un autre prestataire. (Exporter une mailing-list, pour
changer de service)
RGPD
Règlement général sur la protection des données

113. Les obligations
Privacy by design, le respect de la vie privée dès la conception. Le concept de “Privacy by
Design” a pour objectif de garantir que la protection de la vie privée soit intégrée dans les
nouvelles applications technologiques et commerciales dès leur conception.
Privacy by default, principe de ne traiter que les données nécessaires à ce qu’on veut faire au
regard de la finalité des traitements. C’est un principe de minimisation.
Le registre de traitement, (obligatoire pour les organismes au delà de 250 salariés). Tableur dans
lequel il est précisé :
• les catégories de données : prospects, clients, salariés…
• les traitements
• nommer le délégué à la protection des DP. En droit européen, le Délégué à la protection des
données (abrégé DPD, ou DPO, pour Data Protection Officer) est la personne chargée de la
protection des données au sein d'une organisation.
RGPD
Règlement général sur la protection des données

114. Bandeau des cookies
Les internautes doivent être informés et donner leur consentement préalablement à l'insertion de traceurs. Ils
doivent disposer d'une possibilité de choisir de ne pas être tracés lorsqu'ils visitent un site ou utilisent une
application. Les éditeurs ont donc l'obligation de solliciter au préalable le consentement des utilisateurs. Ce
consentement est valable 13 mois maximum.
Exemple : l’utilisation de Google analytics sur son site, objets facebook…
Une grande partie des entreprises ne respectent pas à 100% la loi sur cette question.
Schématiquement, on exige 3 éléments :
Expliquer aux internautes la finalité du dépôt : à quoi sert le cookie ? Mesures d'audience, publicités ciblées... ?
Permettre aux internautes de s'opposer au dépôt : il est impossible pour les utilisateurs de "subir" et de ne pas
pouvoir refuser le traitement de données.
Obtenir l' "accord" des internautes : le consentement est présumé si l'utilisateur poursuit sa navigation.
Les sites web ne réalisent en général pleinement que la première situation. En clair, le "bandeau cookie" informe
seulement qu'un ou plusieurs cookies sont déposés, souvent de manière évasive. Et que l'on effectue ou pas une
action, le cookie s'inscrit sur le terminal, sans consentement préalable donc.
RGPD
Règlement général sur la protection des données

115. Dans wordpress
Plugin de consentement cookies, à personnaliser.
RGPD
Règlement général sur la protection des données
La page Politique de confidentialité créée automatiquement qui est à compléter en fonction
des options du site (Google analytics, newsletter, formulaire, commentaires, e-commerce….).
Dans Réglages/confidentialité.
Outils exporter les données, qui compile toutes les données conservées associées à un
utilisateur et permet de les télécharger et de les supprimer.
Cookies consent GDPR Cookie Consent GDPR Cookie Compliance

116. Newsletter et publipostage

117. ➜ Le nom de l’expéditeur
C’est le nom de l’organisme ou de la personne qui envoie le mail (les prénoms
féminins ont plus d’impact), pas de descriptions, pas d’adresses e-mail en clair.
➜ L’objet de la newsletter
L’objet doit être le titre ou la description courte du contenu de la newsletter.
Entre 30 à et 50 caractères sont conseillés. Le marketing conseille des verbes
d’action : Devenez, Prenez, Découvrez, Gagnez, Essayez. Evitez les objets du
style « Newsletter de Machin », « Newsletter de Noël » ou « Newsletter n°12 »,
parlez plutôt de votre contenu.
Attention à l’adresse utilisée pour l’expédition du mail qui sera probablement
très vite spammée. Utilisez une adresse @le-nom-de-votre-site.com
L’en-tête du mail

118. « Une newsletter sera lue en moins de 40s »
Faites un contenu simple mais soigné, court, épuré en cohérence graphique avec
le reste de vos outils de communication, qui se charge vite, évitez un trop grand
nombre d’images. Un contenu personnalisé « Bonjour Giselle… » et rédigé aura plus
d’impact. Adressez-vous à vos abonnés, ne faites pas des simples copier-collé du
site web. Un accès facile à la désinscription renforce la confiance du lecteur.
Proposez des jeux, des promotions, des infos en avant-première, des contenus
exclusifs, utilisez des messages propres à votre newsletter. Vous pouvez mettre un
lien vers l’inscription pour donner la possibilité d’inscrire quelqu’un, changer son
adresse… Pensez à vos réseaux sociaux.
Des titres courts, le corps du texte ne doit pas être inférieur à 13px. Les zones
cliquables doivent faire au moins 44px par 44px.
Préférez les boutons d’appel à l’action pour diriger vos lecteurs ou vous le
souhaitez, plutôt que des liens dans du texte. Utilisez moins de 4 liens dans vos
newsletters. Limitez les logos des partenaires et ne les rendez pas cliquables, vous
augmenteriez vos chances d’être rangé dans le spam.
Pour les images pensez au texte alternatif (la balise alt), les problèmes d’affichage
des images sont plus fréquents que sur le web, un texte alternatif peut être utile.
Pas d’animations, pas de vidéos, pas de formulaires.
L’en-tête et le contenu

119. Pensez à faire un planning des expéditions.
Comme pour les réseaux sociaux, envoyez plutôt vos newsletters en
fin de semaine ou à l’heure des repas.
Comment éviter à sa newsletter d’être considéré comme du spam ?
• Ne pas envoyer à des personnes qui ne se sont pas inscrites ou n’ont
pas donné leur accord.
• Envoyez une à deux newsletters par mois maximum.
• L’objet : pas en majuscule, pas de ! % / répétés plusieurs fois, pas de
€ ou $, pas de termes sur la gratuité, les régimes minceur ou le viagra…
• Le corps : La newsletter ne doit pas être composée d’une grande
image unique. Respectez un bon équilibre photo/texte, une taille de
police ni trop petite ni trop grande. Un texte bien contrasté et lisible.
Eviter le terme « Cliquez ici ».
L’envoi

120. Il existe des outils que l’on peut installer sur son serveur comme PhpList ou
WANewsletter, mais les hébergements web classiques ne sont pas fait pour gérer
des envois de newsletter en volume. Ce sont les services en ligne payants qui
seront les plus simples et les plus efficaces.
Tous proposent une formule gratuite pour un nombre limité de destinataires.
La formule gratuite la plus intéressante actuellement est proposée par Mailchimp
(en anglais uniquement), la formule permet d’envoyer un maximum de 12 000 mails
par mois à un maximum de 2000 abonnés.
La formule payante la moins chère est proposée par Mailjet (en français). Pour
5,49€ h.t par mois, vous envoyez 30 000 e-mails par mois.
Il existe de nombreux autres prestataires, les prix changent souvent et de nouveaux
acteurs arrivent régulièrement. Attention, certains services illimités gratuits
récupèrent vos adresses e-mails pour les revendre ou insèrent de la pub dans vos
newsletters, ou offrent un service difficile à utiliser sans statistiques, ni éditeur de
newsletter.
Les outils