On n'écrit pas pour le web comme on écrit pour la presse. Même si les techniques journalistiques de la presse restent le plus souvent utilisables. Après quelques centaines de formations consacrées aux bonnes pratiques de l'écriture web, et de nombreuses compilations de sources (très largement pompées à des confrères formateurs), il m'a semblé indispensable de proposer ici un résumé des bonnes pratiques d'écriture pour le web. L'écriture web n'est pas encore une science exacte. A vous d'y ajouter votre propre expérience, et d'enrichir cette base construite avec l'aide et les conseils bienveillants de professionnels passionnés par leur métier.

1. Techniques et bonnes pratiques pour
Écrire pour le Web
Remis à jour le 2 janvier 2010
Présentation conçue par Luc Legay (Les Explorateurs du Web) en
collaboration avec Joël Ronez (Ronez.net), Jean-Philippe Cathelin (A Conseil),
Sébastien Bailly (Paris-Normandie), Xavier de Mazenod (Adverbe.com).
Autres sources : Jean-Marc Hardy (redaction.be), Jakob Nielsen (useit.com), Laurent Goffin (gwix.net)
Diffusable sous licence Creative Commons by-nc-nd/2.0
http://creativecommons.org/licenses/by-nc-nd/2.0/fr/

2. Techniques journalistiques

3. Loi de proximité
Nation
Ma région
Ma ville
Collègues
Mon quartier
Amis
Travail Voisinage
Loisirs
Argent Chez moi
Moi Conjoint
Famille
Société
Aujourd’hui
Demain Santé
Hier Vie politique
Avant-hier Religion

4. Combien de
niveaux de lecture
dans un titre
de presse ?

5. Tétières, rubriques,
titres, surtitres,
chapeaux, intertitres,
photos, dessins,
légendes, accroches,
relances, exergues,
cabochons, signatures,
encadrés (nombreux
types d’encadrés…),
date, lieux, genre,
source, crédit...

6. Parfois plus de
100 niveaux
de lecture différenciés
par un traitement graphique
et éditorial spécifique

8. Finalité recherchée ?

9. Eviter l’ennui…
Creative Commons Alexander N http://www.flickr.com/photos/64939463

10. Print versus Web

11. Quelles di érences de contraintes ?
11

12. Print Web
qualité du support, Pixels, RVB,
format support, résolution écran,
encre, CMJN, 300 72 dpi, choix typo
dpi, couleur-offset, limité, débit de
roto, tirage, connexion,
calibrage des référencement,
textes… poids des pages…

13. Spéci cités du Web face aux autres médias
TV Radio Presse Web
ACCESSIBILITÉ OUI
TEXTE OUI OUI
PHOTO OUI OUI
VIDÉO OUI OUI
INTERACTIVITÉ OUI
INFOGRAPHIES OUI OUI
OUI MIX NON

14. Lecture à l’écran

15. Lisibilité
Sur écran on lit en moyenne
25
moins vite
%
que sur papier
Source : http://www.useit.com/alertbox/percent-text-read.html

16. Source : http://www.useit.com/alertbox/percent-text-read.html

17. Lecture zapping
20%
80%
lecture mot à mot
lecture en diagonale
Source : http://www.useit.com/alertbox/percent-text-read.html

18. Eyetracking

19. Source : http://www.useit.com/alertbox/reading_pattern.html

20. Lecture en « F »
Je m’intéresse
Je recherche
Source : Laurent Goffin http://www.gwix.net/web_gwix/article.asp?filID=233

21. “scannabilité”
ou perception de l’information

22. 3/10 e de seconde
pour “scanner” un site

23. Spéci cités d’une page Web

24. La ligne de ottaison d’une page
24

25. Ligne de ottaison
Seuls 22 %
des internautes
scrollent jusqu’au
Source : ClickTale sur 120 000 pages vues
entre nov. 2006 et Déc. 2006.
pied de page
http://blog.clicktale.com/?p=19 25

26. Optimiser l’architecture du site

27. le rubricage
structure et organise
les informations

29. les codes implicites
Creative Commons Brian Talbot http://www.flickr.com/photos/b-tal/116220689/

30. Navigation principale
Navigation secondaire
Raccourcis contextuels
Liens transversaux
Mentions légales, crédits
Source : http://www.ergolab.net/articles/architecture-information.html

31. Fil d’ariane Navigation principale
Navigation secondaire
Navigation transversale
Mentions légales, crédits, contact

32. hypertexte ?
interactivité ?
lisibilité ?
multimédia ?

33. Hypertexte :
une page web est toujours reliée

34. Quel texte sur un lien ?
Cliquez-ici

35. Proposer des liens vers des
articles internes complémentaires

37. 242 liens internes

38. Proposer des liens vers des
ressources externes complémentaires

40. Multimédia
Images, vidéos, animations

42. Interactivité
Commentaires, réactions, avis…

43. consommateurs vs producteurs

44. Viral
Envoyer à un ami, ajouter à Delicious,
poster sur Twitter…

45. Règles d’écriture Web

46. La pyramide inversée

47. Organiser l’information
du synthétique vers l’exhaustif

48. 1. News 2. Sports 3. Tech 4. Life 5. Travel

49. l’essentiel
les détails

50. + récent + immédiat + important + proche
Titre
chapeau
texte
+ détaillé + loin

51. QQOQP
Qui, quoi, où, quand et pourquoi ?

52. 5W+2
who (qui), what (quoi), when (quand),
where (où), why (pourquoi)
et, parfois, how (comment)
et how much (combien) ?

53. Faciliter la lecture
Creative Commons Thomas Hawk http://www.flickr.com/photos/thomashawk/2354086423/

54. Ecrire court
Creative Commons Margolove (Margo C.) http://www.flickr.com/photos/margolove/1810357551/

55. Relire pour réduire
Creative Commons Thomas Hawk http://www.flickr.com/photos/thomashawk/93821899

56. 15
à 20 mots
correspond à l’empan
de la mémoire(10), soit à notre
capacité moyenne de mémorisation
immédiate des informations (20)…
Source : http://www.cybertribes.com/lisibilite.html

57. Capacité de mémorisation
Phrase 12 mots 17 mots 40 mots
Mémorisation 100% 70% 30%
Source : François Richaudeau, 1979

58. Concision : 1 idée = 1 paragraphe

59. Dé
cou
page
Un seul titre et un seul sujet par page
Licence Creative Commons by-nc-sa/2.0 : Semuthutan Azri http://www.flickr.com/photos/azriadnan/1818312422

60. Aller à l’essentiel
Creative Commons Fernando Revilla http://www.flickr.com/photos/revilla/644219138/

61. Structurer
Creative commons Dynamosquito http://www.flickr.com/photos/dynamosquito

62. Rester clair
Creative Commons Anita Martinz http://www.flickr.com/photos/annia316/754581568

63. Les sites web sont rendu plus accessibles
aux handicapés grâce à la norme AccessiWeb
Laquelle de ces phrases préférez-vous ?
AccessiWeb rend les sites web
plus accessibles aux handicapés

64. Utiliser la voix active
Creative Commons Duncan c http://www.flickr.com/photos/duncan/3957636207/

65. Connaître sa cible

66. Dé nir l’o re en termes
de modes de traitement

67. testé pour vous astuce actualité
dossier rendez-vous en images
interview info-service opinion
chronique 3 questions à bon plan
coulisses sondage glossaire conseils
reportage tribune commentaire
comparatif vidéo décryptage édito
coulisses dernière heure réponse

68. Dé nir pour chaque traitement :
Nom, éléments de titraille, date, auteur, long. texte,
photo, légende, vidéos, citations, éléments
contextuels… Position dans la page

69. Organiser l’accès aux contenus

70. Organiser l’accès aux contenus
Thématique

71. Organiser l’accès aux contenus
Géographique

72. Organiser l’accès aux contenus
Chronologique
72

73. Organiser l’accès aux contenus
Alphabétique

74. Organiser l’accès aux contenus
Rédactionnelle
74

75. Organiser l’accès aux contenus
O re produit
75

76. Organiser l’accès aux contenus
Audience
76

77. Organiser l’accès aux contenus
Fonctionnelle

78. Organiser l’accès aux contenus
Popularité
78

79. Organiser l’accès aux contenus
Pertinence
79

80. Par où arrive le visiteur ?

81. Pas toujours par la grande porte

82. Chaque page peut devenir une porte d’entrée
82

83. Titre
informatif versus incitatif

84. « Georges Simenon est mort »

85. « Maigret casse sa pipe »

86. « La Nano, la voiture la moins
chère du monde, arrive en Inde »

87. « Sortie embouteillée
pour la Nano low-cost »

89. Ecrire des titres pour informer

90. votre premier lecteur

91. 1000
milliards de pages web indexées

92. 17%
+
.com
83%
Part du tra c généré par les moteurs de recherche (France)
Janvier 2008 IAB et comScore

93. 42%
des utilisateurs de
cliquent sur le premier résultat

94. 5%
des utilisateurs de
cliquent sur le 4e résultat

95. Visibilité
naturelle versus commerciale

96. 96

97. 7 principaux critères
de visibilité des contenus

98. 7 principaux critères de visibilité des contenus
1 Nom du domaine
http://www.mon-site.com

99. 7 principaux critères de visibilité des contenus
2 Titre de la page

101. 7 principaux critères de visibilité des contenus
3 Balises de titres
et enrichissements
<h1>, <h2>… <strong>,
<em>, <ul>…

102. 7 principaux critères de visibilité des contenus
4 Page Rank
Quantité et popularité
des liens entrants (PR)

104. 7 principaux critères de visibilité des contenus
5 Texte des liens o shore
Appellation des liens
qui pointent sur votre page

105. Pour plus d’info
sur ce site web, cliquez ici

106. Pour plus d’info
visitez France Info
Pour plus d’info visitez <a href="http://www.france-info.com/">France Info</a>

107. 7 principaux critères de visibilité des contenus
6 Termes lisibles de l’URL
http://monsite.com/termes-lisibles

108. 7 principaux critères de visibilité des contenus
7 Contenus, contenus
et contenus…
Quantité, qualité et actualisation
des contenus constituent la
meilleure garantie de visibilité

109. Rédiger pour le Web
Présentation conçue par Luc Legay (Les Explorateurs
du Web) en collaboration avec Joël Ronez (Ronez.net),
Jean-Philippe Cathelin (A Conseil), Sébastien Bailly
(Paris-Normandie), Xavier de Mazenod (Adverbe.com).
Autres sources : Jean-Marc Hardy (redaction.be), Jakob Nielsen
(useit.com), Laurent Goffin (gwix.net)
Prière de ne reproduire les contenus et images de ce document que dans le cadre stricte de
cette licence, en conservant les liens vers les sources originales
Diffusable sous licence Creative Commons by-nc-nd/2.0
http://creativecommons.org/licenses/by-nc-nd/2.0/fr/