Contenu de qualitépour le web / Textes et images stylés pour des pages plus lisibles 13-04-2015 // Webschool // CCI du Jura // Lons-le-Saunier // Alexis Montpeyroux Studio Graphique & François Bonneville Aricia

1. Contenu de qualité
pour le web
Textes et images stylés pour
des pages plus lisibles
13-04-2015 // Webschool // CCI du Jura //
François Bonneville - Aricia
& Alexis Montpeyroux Graphiste

2. Ecrire pour le WEB… Pour qui ? Sur quoi ?
• Proposer une chronique à une communauté
(amis, réseau, clients, fans)
Réseaux sociaux (Facebook, Google +, etc)
• Partager un savoir-faire, une expérience
 Blogs, site web « personnel »
• Fournir de l’information structurée à un large public
 Site WEB professionnel, newsletter
• Diffuser des contenus multimédia
 Plateformes spécialisées
(Youtube, Dailymotion, FlickR, Calameo, etc)

3. Écrire sur les réseaux sociaux
• Séparer personne physique et personne morale
• Être actif avec une fréquence régulière
• Scénariser chronologiquement ses publications
• Ajouter intelligemment des liens dans ses « posts »
• Publier des photos de qualité
• Géolocaliser ses interventions
• Contrôler le niveau de confidentialité
• Chercher le buzz sans provocation (effet boomerang)
• Ne pas relayer d’informations sans vérification préalable :
partager un fake ruine votre réputation
• Ne pas « aimer » ni accepter n’importe qui comme ami

4. Publier sur un blog
• Donner à ses billets une homogénéité de style
• Créer un contenu original qui ne soit pas du plagiat
• Garder une régularité de publication sans se sentir
obliger d’écrire pour rien
• Soigner ses titres (courts, percutants, voire
provocateurs)
• Chercher des liens et des références de qualité
• Éviter les plateformes qui noient le contenu sous la
publicité

5. Site WEB professionnel
Un processus de création complexe
• Sur la forme : élaboration d’une identité
graphique et d’une ergonomie
• Sur le fond
– Structuration du contenu
– Élaboration des textes et choix du vocabulaire
• Dans le temps
– Prévoir les évolutions
– Diffuser une lettre d’informations

6. 13-04-2015 // Webschool // CCI du Jura // François Bonneville Aricia & Alexis Montpeyroux Graphiste 6
Les textes

7. Contenu : « Less is more »
• Peut-être moins de contenu, mais du contenu
plus logique et lisible
– des textes qui permettent d'entrer dans le
contenu plus facilement, voire le remplacent
quand le contenu est court :
thème, titre, chapô, sous-titres, légendes,
intertitre (une écriture journalistique)
13-04-2015 // Webschool // CCI du Jura // François Bonneville Aricia & Alexis Montpeyroux Graphiste 7

8. 13-04-2015 // Webschool // CCI du Jura // François Bonneville Aricia & Alexis Montpeyroux Graphiste 8

9. 13-04-2015 // Webschool // CCI du Jura // François Bonneville Aricia & Alexis Montpeyroux Graphiste 9

10. 13-04-2015 // Webschool // CCI du Jura // François Bonneville Aricia & Alexis Montpeyroux Graphiste 10

11. 13-04-2015 // Webschool // CCI du Jura // François Bonneville Aricia & Alexis Montpeyroux Graphiste 11

12. 13-04-2015 // Webschool // CCI du Jura // François Bonneville Aricia & Alexis Montpeyroux Graphiste 12

13. 13-04-2015 // Webschool // CCI du Jura // François Bonneville Aricia & Alexis Montpeyroux Graphiste 13

14. Le ton du texte :
les conseils d’Airbnb
• Les hébergements
proposés sont
rarement uniques,
alors personnalisez
vos descriptions.
• Ne décrivez pas
uniquement des
faits, mais plutôt
l’expérience à
vivre.
http://www.fastcompany.com/3043468/the-
secrets-of-airbnb-superhosts
13-04-2015 // Webschool // CCI du Jura // François Bonneville Aricia & Alexis Montpeyroux Graphiste 14

15. La structuration du contenu
13-04-2015 // Webschool // CCI du Jura // François Bonneville Aricia & Alexis Montpeyroux Graphiste 15
• Définir l’architecture avant de commencer à rédiger
• Hiérarchiser l’information
• Rubriquer par catégories
• Prévoir une page WEB par sujet, par produit
• Décomposer le contenu en pages WEB de taille
similaire
• Créer des liens internes pour faire référence à des
contenus spécifiques

16. Les mots clés
13-04-2015 // Webschool // CCI du Jura // François Bonneville Aricia & Alexis Montpeyroux Graphiste 16
• Avant de rédiger, chercher tous les mots clés et leurs synonymes :
créer un nuage de termes au cours d’un brainstorming
• Penser dans le vocabulaire de l’internaute
• « squatter » les mots clés de ses concurrents
• Écrire des phrases simples en cherchant à placer tous les mots clés
• Rapprocher les mots qui correspondent aux termes utilisés dans
les moteurs de recherche
• Confier ses traductions à un professionnel en lui donnant les
mêmes contraintes
• Créer des liens sur les mots clés
• Liens internes
• Liens externes

17. Balises HTML et référencement
13-04-2015 // Webschool // CCI du Jura // François Bonneville Aricia & Alexis Montpeyroux Graphiste 17
• Placer des mots clés dans la balise <title>
• Répéter ces mots clés dans les balises « Meta »
<meta name="Description" content= "…">
Subject, Copyright, Author, Publisher
La balise meta "keywords" n’a plus guère d’effet sur Google
• Utiliser les balises de titre <h1> <h2> pour structurer le
contenu
• Choisir les balises de mises standard de mise en forme
<strong> pour mettre en gras
<em> pour mettre en italique

18. Allier le stylisme et la cohérence graphique
• Veiller à la cohérence graphique des styles à
travers les pages.
– Les CMS proposent des styles de mise en page
cohérents à travers le site et évitent la cacophonie
graphique.
• Donner un style spécifique à vos pages
– Les polices web permettent de multiplier par 100
le choix en fontes pour les sites
13-04-2015 // Webschool // CCI du Jura // François Bonneville Aricia & Alexis Montpeyroux Graphiste 18

19. Sites web et newsletters,
même combat
• Très peu de temps pour capter le message et
juger de son intérêt pour nous
• Peu de place : l’aperçu d’un email est réduit
par rapport à une page web
• Les images ne sont pas toujours visibles
• Des cadrages souvent panoramiques pour les
images
13-04-2015 // Webschool // CCI du Jura // François Bonneville Aricia & Alexis Montpeyroux Graphiste 19

20. 13-04-2015 // Webschool // CCI du Jura // François Bonneville Aricia & Alexis Montpeyroux Graphiste 20

21. Des outils de
rédaction de
newsletter intuitifs
en ligne
• Mailchimp
• Mailjet
• Message business
• …
13-04-2015 // Webschool // CCI du Jura // François Bonneville Aricia & Alexis Montpeyroux Graphiste 21

22. 13-04-2015 // Webschool // CCI du Jura // François Bonneville Aricia & Alexis Montpeyroux Graphiste 22
Les images

23. Les contenus image : fabrication
Règles de base de la photographie
• Le cadrage
– Avancer, reculer, bouger autour du sujet avant de choisir le point de vue
– Mettre « tout ce qu’il faut » (les pieds, la tête) sans cadrer trop large
– Composer ses clichés : la règle des tiers
• La profondeur de champ
– Choisir le plan de netteté
– Définit la progressivité du flou (ouverture de l’objectif)
• Choix de l’instant
– Anticiper et savoir attendre
• La lumière
– Identifier la position des sources lumineuses (contre-jour)
– Contrôler les ombres
– Éviter ou accentuer les reflets
13-04-2015 // Webschool // CCI du Jura // François Bonneville Aricia & Alexis Montpeyroux Graphiste 23

24. Des exemples
concrets
• S’adapter à la capacité
de son appareil photo
• Bricoler un fond photo
maison et quelques
astuces de ministudio
• Penser le cadrage
(verticalité, garder de
la matière autour)
13-04-2015 // Webschool // CCI du Jura // François Bonneville Aricia & Alexis Montpeyroux Graphiste 24

25. • Choisir un fond neutre, sans parasites
• Penser à préserver des zones sur lesquelles écrire
• On peut choisir des couleurs de textes tirées de
l’image (à la pipette)
13-04-2015 // Webschool // CCI du Jura // François Bonneville Aricia & Alexis Montpeyroux Graphiste 25

26. • Un éclairage (presque)
professionnel
13-04-2015 // Webschool // CCI du Jura // François Bonneville Aricia & Alexis Montpeyroux Graphiste 26
• Prêter attention aux détails qui fâchent

27. 13-04-2015 // Webschool // CCI du Jura // François Bonneville Aricia & Alexis Montpeyroux Graphiste 27
• Un fond photo (presque) professionnel
• Se méfier du grand angle et de la hauteur de prise de vue
– Capturer avec de la marge, puis recadrer. Mesure de lumière décadrée.

28. 13-04-2015 // Webschool // CCI du Jura // François Bonneville Aricia & Alexis Montpeyroux Graphiste 28
• Éclairage diffusé ou naturel, mais doux
(début ou fin de journée)

29. 13-04-2015 // Webschool // CCI du Jura // François Bonneville Aricia & Alexis Montpeyroux Graphiste 29
• On peut cependant exploiter l’effet exagéré du
grand angle.

30. 13-04-2015 // Webschool // CCI du Jura // François Bonneville Aricia & Alexis Montpeyroux Graphiste 30
• On cherchera surtout à…

31. Les contenus image : classement
• Des logiciels de catalogage sur votre ordinateur
• Microsoft Expression Media >>> www.microsoft.com/fr-fr/download/details.aspx?id=6605
• Photo Mechanic >>> >>> http://www.camerabits.com/products
• Adobe Bridge >>> www.adobe.com
• Des logiciels de catalogage en ligne
• Flickr >>> www.flickr.com
• Google photos >>> www.google.com/intl/fr_ALL/+/learnmore/photos
• Des banques de photos en ligne
• Fotolia >>> www.fotolia.com
• Dreamstime >>> www.dreamstime.com
13-04-2015 // Webschool // CCI du Jura // François Bonneville Aricia & Alexis Montpeyroux Graphiste 31

32. Microsoft Expression Media
13-04-2015 // Webschool // CCI du Jura // François Bonneville Aricia & Alexis Montpeyroux Graphiste 32
• Classer, étiqueter, gérer vos images

33. Flickr
13-04-2015 // Webschool // CCI du Jura // François Bonneville Aricia & Alexis Montpeyroux Graphiste 33
• 1To gratuit !
• Niveau de confidentialité
• Création de fichiers de
différentes résolution
• Titre, description, mots clés,
géolocalisation, albums,
classeurs
• Moteur de recherche
• Des composants pour
intégrer des diaporamas
• Une « API »

34. Banques d’images en ligne
• Acheter des images à l’unité après recherche
13-04-2015 // Webschool // CCI du Jura // François Bonneville Aricia & Alexis Montpeyroux Graphiste 34
• Fotolia, Dreamstime…

35. Maintenant à vous de jouer.
• Mettez en avant les points clés de vos
problématiques dans vos textes.
• Avancez des idées simples, claires et
complémentaires.
• Créez votre fond documentaire.
• Classez-le pour vous y retrouver.
• Faites votre choix. Racontez votre histoire…
13-04-2015 // Webschool // CCI du Jura // François Bonneville Aricia & Alexis Montpeyroux Graphiste 35
FIN

36. Merci de votre attention.

37. 13-04-2015 // Webschool // CCI du Jura // François Bonneville Aricia & Alexis Montpeyroux Graphiste 37
rue de l’église
39270 ORGELET
www.aricia.fr