SlideShare une entreprise Scribd logo
Communication digitale
www.chrisgaillard.com
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
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
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 %
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
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
Evolution des outils de consultations
…. et leur incidence sur la conception des sites web.
Les ordinateurs changent de taille d’écrans
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.
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.
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.
WordPress
fr.wordpress.com fr.wordpress.org
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
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
Les constructeurs de pages
Gutenberg
Wordpress 5
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.
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.
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.
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.
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
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 ».
Accessibilité web
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. »
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.
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…..
Accessibilité web
Loi de 1975 et décret législatif de 1991 qui concerne l’accès aux bâtiments voirie transports …
Accessibilité web
Loi de 1975 et décret législatif de 1991 qui concerne l’accès aux bâtiments voirie transports …
Accessibilité web
Loi de 1975 et décret législatif de 1991 qui concerne l’accès aux bâtiments voirie transports …
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. »
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).
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…
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.
Accessibilité web
Le contraste des couleurs
Accessibilité web
L’agrandissement du texte
Accessibilité web
L’agrandissement du texte
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.
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.
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.
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.
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.
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 » >
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.
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.
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… »
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.
Référencement
Référencement
Parts de marché
Dans le monde En France
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
Communication digitale
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
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
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
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
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
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." />>
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
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
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
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
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
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.
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
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
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é
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é
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é
Ergonomie web
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
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
Ergonomie web
Le concept de Gestalt ou psychologie de la forme
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.
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..
Ergonomie web
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.
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.
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.
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
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
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.
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.
Ergonomie web
La loi de Hick
Exemple : un menu avec
beaucoup trop d’éléments,
difficile de se repérer.
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.
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
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
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
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.
Ergonomie web
Importance de la mise-en-page
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.
Communication digitale
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.
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.
Les médias sociaux
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
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.
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/
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
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 ».
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.
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.
Les médias sociaux
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
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.
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.
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.
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.
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/#
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.
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
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
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
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
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
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
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
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
Newsletter et publipostage
➜ 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
« 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
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
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

Contenu connexe

Tendances

La page web en html css
La page web en html cssLa page web en html css
La page web en html css
Olivier Dommange
 
Wordpress notes de cours
Wordpress notes de coursWordpress notes de cours
Wordpress notes de cours
michel.titeux
 
Wordpress pour les entreprises
Wordpress pour les entreprisesWordpress pour les entreprises
Wordpress pour les entreprises
monsieurpixel
 
Formation WordPress à Blida
Formation WordPress à BlidaFormation WordPress à Blida
Formation WordPress à Blida
Gd6d
 
Creer un site internet sous WordPress
Creer un site internet sous WordPress Creer un site internet sous WordPress
Creer un site internet sous WordPress
Erwan Tanguy
 
Utiliser WordPress
Utiliser WordPressUtiliser WordPress
Utiliser WordPress
Daniel GUEYSSET
 
content management system
content management systemcontent management system
content management system
Ibtissam Kably
 
Choix strategique d'un CMS
Choix strategique d'un CMSChoix strategique d'un CMS
Choix strategique d'un CMS
Olivier Dommange
 
Webdesign le graphisme et ses principes
Webdesign le graphisme et ses principesWebdesign le graphisme et ses principes
Webdesign le graphisme et ses principes
Olivier Dommange
 
Test de produit, word press
Test de produit, word pressTest de produit, word press
Test de produit, word press
Khaldi Abdelhamid HAbib
 
2018 Cours projet web collaboratif Partie1
2018 Cours projet web collaboratif Partie12018 Cours projet web collaboratif Partie1
2018 Cours projet web collaboratif Partie1
Eric Giraudin
 
Support de formation pour Wordpress
Support de formation pour WordpressSupport de formation pour Wordpress
Support de formation pour Wordpress
Voyelle Voyelle
 
2016 Cours projet Web Collaboratif - Partie 2
2016 Cours projet Web Collaboratif - Partie 22016 Cours projet Web Collaboratif - Partie 2
2016 Cours projet Web Collaboratif - Partie 2
Eric Giraudin
 
Web { Design Project } Management
Web { Design Project } ManagementWeb { Design Project } Management
Web { Design Project } Management
David Roessli
 
2016 Cours projet Web Collaboratif - Partie 3
2016 Cours projet Web Collaboratif - Partie 3 2016 Cours projet Web Collaboratif - Partie 3
2016 Cours projet Web Collaboratif - Partie 3
Eric Giraudin
 
Constructeur de page avec Wordpress
Constructeur de page avec WordpressConstructeur de page avec Wordpress
Constructeur de page avec Wordpress
Chris Gaillard
 
Midi Internet
Midi InternetMidi Internet
Midi Internet
Tanguy Pay / OoyoO
 
Les systèmes de gestion de contenus des sites Internet ou CMS
Les systèmes de gestion de contenus des sites Internet ou CMSLes systèmes de gestion de contenus des sites Internet ou CMS
Les systèmes de gestion de contenus des sites Internet ou CMS
Ardesi Midi-Pyrénées
 
Prezi&cie
Prezi&ciePrezi&cie
Prezi&cie
lamarionita
 

Tendances (20)

La page web en html css
La page web en html cssLa page web en html css
La page web en html css
 
Wordpress notes de cours
Wordpress notes de coursWordpress notes de cours
Wordpress notes de cours
 
Wordpress pour les entreprises
Wordpress pour les entreprisesWordpress pour les entreprises
Wordpress pour les entreprises
 
Formation WordPress à Blida
Formation WordPress à BlidaFormation WordPress à Blida
Formation WordPress à Blida
 
Cours1
Cours1Cours1
Cours1
 
Creer un site internet sous WordPress
Creer un site internet sous WordPress Creer un site internet sous WordPress
Creer un site internet sous WordPress
 
Utiliser WordPress
Utiliser WordPressUtiliser WordPress
Utiliser WordPress
 
content management system
content management systemcontent management system
content management system
 
Choix strategique d'un CMS
Choix strategique d'un CMSChoix strategique d'un CMS
Choix strategique d'un CMS
 
Webdesign le graphisme et ses principes
Webdesign le graphisme et ses principesWebdesign le graphisme et ses principes
Webdesign le graphisme et ses principes
 
Test de produit, word press
Test de produit, word pressTest de produit, word press
Test de produit, word press
 
2018 Cours projet web collaboratif Partie1
2018 Cours projet web collaboratif Partie12018 Cours projet web collaboratif Partie1
2018 Cours projet web collaboratif Partie1
 
Support de formation pour Wordpress
Support de formation pour WordpressSupport de formation pour Wordpress
Support de formation pour Wordpress
 
2016 Cours projet Web Collaboratif - Partie 2
2016 Cours projet Web Collaboratif - Partie 22016 Cours projet Web Collaboratif - Partie 2
2016 Cours projet Web Collaboratif - Partie 2
 
Web { Design Project } Management
Web { Design Project } ManagementWeb { Design Project } Management
Web { Design Project } Management
 
2016 Cours projet Web Collaboratif - Partie 3
2016 Cours projet Web Collaboratif - Partie 3 2016 Cours projet Web Collaboratif - Partie 3
2016 Cours projet Web Collaboratif - Partie 3
 
Constructeur de page avec Wordpress
Constructeur de page avec WordpressConstructeur de page avec Wordpress
Constructeur de page avec Wordpress
 
Midi Internet
Midi InternetMidi Internet
Midi Internet
 
Les systèmes de gestion de contenus des sites Internet ou CMS
Les systèmes de gestion de contenus des sites Internet ou CMSLes systèmes de gestion de contenus des sites Internet ou CMS
Les systèmes de gestion de contenus des sites Internet ou CMS
 
Prezi&cie
Prezi&ciePrezi&cie
Prezi&cie
 

Similaire à Communication digitale

5èmes Rencontres Tourisme & Internet du Tarn
5èmes Rencontres Tourisme & Internet du Tarn5èmes Rencontres Tourisme & Internet du Tarn
5èmes Rencontres Tourisme & Internet du Tarn
Ludovic Dublanchet
 
Internet Participatif, Flux Rss Et Syndication
Internet Participatif, Flux Rss Et SyndicationInternet Participatif, Flux Rss Et Syndication
Internet Participatif, Flux Rss Et Syndication
Tarn Tourisme
 
Convergence et mobilité des contenus
Convergence et mobilité des contenus Convergence et mobilité des contenus
Convergence et mobilité des contenus
Vanksen
 
Création de blog et sites internet
Création de blog et sites internetCréation de blog et sites internet
Création de blog et sites internet
piera5
 
Salon Use IT Lyon
Salon Use IT LyonSalon Use IT Lyon
Salon Use IT Lyon
Intuitiv Technology
 
Livre blanc : Le succès de WordPress
Livre blanc : Le succès de WordPressLivre blanc : Le succès de WordPress
Livre blanc : Le succès de WordPress
Emilie LEBRUN
 
Web 2.0 - CGA Guadeloupe
Web 2.0 - CGA GuadeloupeWeb 2.0 - CGA Guadeloupe
Web 2.0 - CGA Guadeloupe
Xavier LAIR
 
Web 2.O
Web 2.OWeb 2.O
Webdesign, UX et UCD #1
Webdesign, UX et UCD #1Webdesign, UX et UCD #1
Webdesign, UX et UCD #1
Relax In The Air
 
Cours de Web Design part.1
Cours de Web Design part.1Cours de Web Design part.1
Cours de Web Design part.1
MC Casal
 
Web2.0
Web2.0Web2.0
Introduction aux concepts 2.0
Introduction aux concepts 2.0Introduction aux concepts 2.0
Introduction aux concepts 2.0
Aymeric
 
Webdesign Passe, Present et... Present Part1
Webdesign Passe, Present et... Present Part1Webdesign Passe, Present et... Present Part1
Webdesign Passe, Present et... Present Part1
bduverneuil
 
Insite formation medialille 2016 - v1
Insite   formation medialille 2016 - v1Insite   formation medialille 2016 - v1
Insite formation medialille 2016 - v1
Véronique Lefebvre
 
Parcours de découverte des territoires du web 2.0
Parcours de découverte des territoires du web 2.0Parcours de découverte des territoires du web 2.0
Parcours de découverte des territoires du web 2.0
Loïc Haÿ
 
Réunion Club CML : Mobilité et Responsive design; définitions et enjeux
Réunion Club CML : Mobilité et Responsive design; définitions et enjeuxRéunion Club CML : Mobilité et Responsive design; définitions et enjeux
Réunion Club CML : Mobilité et Responsive design; définitions et enjeux
Club des Community Managers de Lyon
 
10 applications web2.0 pour les entreprises
10 applications web2.0 pour les entreprises10 applications web2.0 pour les entreprises
10 applications web2.0 pour les entreprises
Ludovic Roif
 
Responsive Web design - defimedia
Responsive Web design - defimediaResponsive Web design - defimedia
Responsive Web design - defimedia
defimedia
 
Veille : L'impact de l'évolution des technologies web sur le référencement et...
Veille : L'impact de l'évolution des technologies web sur le référencement et...Veille : L'impact de l'évolution des technologies web sur le référencement et...
Veille : L'impact de l'évolution des technologies web sur le référencement et...
maclic
 
Guide cookieless - Quel futur pour le cookie ? - IAB france - 2020
Guide cookieless - Quel futur pour le cookie ? - IAB france - 2020Guide cookieless - Quel futur pour le cookie ? - IAB france - 2020
Guide cookieless - Quel futur pour le cookie ? - IAB france - 2020
Romain Fonnier
 

Similaire à Communication digitale (20)

5èmes Rencontres Tourisme & Internet du Tarn
5èmes Rencontres Tourisme & Internet du Tarn5èmes Rencontres Tourisme & Internet du Tarn
5èmes Rencontres Tourisme & Internet du Tarn
 
Internet Participatif, Flux Rss Et Syndication
Internet Participatif, Flux Rss Et SyndicationInternet Participatif, Flux Rss Et Syndication
Internet Participatif, Flux Rss Et Syndication
 
Convergence et mobilité des contenus
Convergence et mobilité des contenus Convergence et mobilité des contenus
Convergence et mobilité des contenus
 
Création de blog et sites internet
Création de blog et sites internetCréation de blog et sites internet
Création de blog et sites internet
 
Salon Use IT Lyon
Salon Use IT LyonSalon Use IT Lyon
Salon Use IT Lyon
 
Livre blanc : Le succès de WordPress
Livre blanc : Le succès de WordPressLivre blanc : Le succès de WordPress
Livre blanc : Le succès de WordPress
 
Web 2.0 - CGA Guadeloupe
Web 2.0 - CGA GuadeloupeWeb 2.0 - CGA Guadeloupe
Web 2.0 - CGA Guadeloupe
 
Web 2.O
Web 2.OWeb 2.O
Web 2.O
 
Webdesign, UX et UCD #1
Webdesign, UX et UCD #1Webdesign, UX et UCD #1
Webdesign, UX et UCD #1
 
Cours de Web Design part.1
Cours de Web Design part.1Cours de Web Design part.1
Cours de Web Design part.1
 
Web2.0
Web2.0Web2.0
Web2.0
 
Introduction aux concepts 2.0
Introduction aux concepts 2.0Introduction aux concepts 2.0
Introduction aux concepts 2.0
 
Webdesign Passe, Present et... Present Part1
Webdesign Passe, Present et... Present Part1Webdesign Passe, Present et... Present Part1
Webdesign Passe, Present et... Present Part1
 
Insite formation medialille 2016 - v1
Insite   formation medialille 2016 - v1Insite   formation medialille 2016 - v1
Insite formation medialille 2016 - v1
 
Parcours de découverte des territoires du web 2.0
Parcours de découverte des territoires du web 2.0Parcours de découverte des territoires du web 2.0
Parcours de découverte des territoires du web 2.0
 
Réunion Club CML : Mobilité et Responsive design; définitions et enjeux
Réunion Club CML : Mobilité et Responsive design; définitions et enjeuxRéunion Club CML : Mobilité et Responsive design; définitions et enjeux
Réunion Club CML : Mobilité et Responsive design; définitions et enjeux
 
10 applications web2.0 pour les entreprises
10 applications web2.0 pour les entreprises10 applications web2.0 pour les entreprises
10 applications web2.0 pour les entreprises
 
Responsive Web design - defimedia
Responsive Web design - defimediaResponsive Web design - defimedia
Responsive Web design - defimedia
 
Veille : L'impact de l'évolution des technologies web sur le référencement et...
Veille : L'impact de l'évolution des technologies web sur le référencement et...Veille : L'impact de l'évolution des technologies web sur le référencement et...
Veille : L'impact de l'évolution des technologies web sur le référencement et...
 
Guide cookieless - Quel futur pour le cookie ? - IAB france - 2020
Guide cookieless - Quel futur pour le cookie ? - IAB france - 2020Guide cookieless - Quel futur pour le cookie ? - IAB france - 2020
Guide cookieless - Quel futur pour le cookie ? - IAB france - 2020
 

Plus de Chris Gaillard

Réseaux -sociaux 2023
Réseaux -sociaux 2023Réseaux -sociaux 2023
Réseaux -sociaux 2023
Chris Gaillard
 
SEO Référencement
SEO RéférencementSEO Référencement
SEO Référencement
Chris Gaillard
 
Cours Images
Cours ImagesCours Images
Cours Images
Chris Gaillard
 
Présentation et historique
Présentation et historiquePrésentation et historique
Présentation et historique
Chris Gaillard
 
WordPress
WordPressWordPress
WordPress
Chris Gaillard
 
Accessibilité web
Accessibilité webAccessibilité web
Accessibilité web
Chris Gaillard
 
Gutenberg - WordPress 5
Gutenberg - WordPress 5Gutenberg - WordPress 5
Gutenberg - WordPress 5
Chris Gaillard
 
Migrer un site Wordpress
Migrer un site Wordpress Migrer un site Wordpress
Migrer un site Wordpress
Chris Gaillard
 
RGPD
RGPDRGPD
Ergonomie
ErgonomieErgonomie
Ergonomie
Chris Gaillard
 
Règles typo
Règles typoRègles typo
Règles typo
Chris Gaillard
 
Newsletter et publipostage
Newsletter et publipostageNewsletter et publipostage
Newsletter et publipostage
Chris Gaillard
 
Introduction à Wordpress
Introduction à WordpressIntroduction à Wordpress
Introduction à Wordpress
Chris Gaillard
 

Plus de Chris Gaillard (13)

Réseaux -sociaux 2023
Réseaux -sociaux 2023Réseaux -sociaux 2023
Réseaux -sociaux 2023
 
SEO Référencement
SEO RéférencementSEO Référencement
SEO Référencement
 
Cours Images
Cours ImagesCours Images
Cours Images
 
Présentation et historique
Présentation et historiquePrésentation et historique
Présentation et historique
 
WordPress
WordPressWordPress
WordPress
 
Accessibilité web
Accessibilité webAccessibilité web
Accessibilité web
 
Gutenberg - WordPress 5
Gutenberg - WordPress 5Gutenberg - WordPress 5
Gutenberg - WordPress 5
 
Migrer un site Wordpress
Migrer un site Wordpress Migrer un site Wordpress
Migrer un site Wordpress
 
RGPD
RGPDRGPD
RGPD
 
Ergonomie
ErgonomieErgonomie
Ergonomie
 
Règles typo
Règles typoRègles typo
Règles typo
 
Newsletter et publipostage
Newsletter et publipostageNewsletter et publipostage
Newsletter et publipostage
 
Introduction à Wordpress
Introduction à WordpressIntroduction à Wordpress
Introduction à Wordpress
 

Communication digitale

  • 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.
  • 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
  • 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 ».
  • 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.
  • 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.
  • 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é
  • 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..
  • 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.
  • 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 ».
  • 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.
  • 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
  • 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