Service internet – 07 décembre 2012 2

Rédaction web & conventions de typographie

1 Ecrire pour le web – intro ..................................................................................................................................... 3 1.1 Définition ............................................................................................................................................................ 3 1.2 Le message ....................................................................................................................................................... 3

1.2.1 Un média spécifique ...................................................................................................................................... 3 1.2.2 Un support particulier .................................................................................................................................... 3 1.2.3 Penser au lecteur ........................................................................................................................................... 3 1.2.4 Penser à Google ............................................................................................................................................. 3

2 Conventions web pour la rédaction d’un article ................................................................................................ 4 2.1 Style .................................................................................................................................................................. 4 2.2 Titraille ............................................................................................................................................................... 4

2.2.1 Titre et sous-titres.......................................................................................................................................... 4 2.2.2 Quelques règles ............................................................................................................................................. 4

2.3 Chapeau et accroche ........................................................................................................................................ 5 2.3.1 Chapeau ........................................................................................................................................................ 5 2.3.2 Accroche ....................................................................................................................................................... 5

2.4 Mise en relief ..................................................................................................................................................... 6 2.4.1 Mise en gras .................................................................................................................................................. 6

2.5 Call to action ...................................................................................................................................................... 6 2.6 Liens .................................................................................................................................................................. 6

2.6.1 Quelques règles : ........................................................................................................................................... 7 2.7 Contrôle de votre article .................................................................................................................................... 7 2.8 Ligne de conduite à appliquer ........................................................................................................................... 7

3 Ponctuation, typographie et autres conventions techniques ........................................................................... 9 3.1 Règles de typographie générale ....................................................................................................................... 9

3.1.1 Etc., etcaetera ............................................................................................................................................... 9 3.1.2 Sigle et acronyme .......................................................................................................................................... 9 3.1.3 Abréviations .................................................................................................................................................. 9 3.1.4 Citation ....................................................................................................................................................... 10 3.1.5 Majuscule ................................................................................................................................................... 10 3.1.6 Noms d’organismes ..................................................................................................................................... 10 3.1.7 Qualité de personnes ................................................................................................................................... 10 3.1.8 Rue ............................................................................................................................................................. 10 3.1.9 Chiffres et nombre ....................................................................................................................................... 11 3.1.10 Les dénominations les plus courantes à l’UCM ............................................................................................. 11

3.2 Corps du texte ................................................................................................................................................. 11 3.2.1 Listes (à puces ou numérotées) ..................................................................................................................... 11 3.2.2 Images ........................................................................................................................................................ 11

3.3 Mise en ligne d’un fichier PDF ........................................................................................................................ 12 3.3.1 Analyse du snippet de Google (encadré gris) .................................................................................................. 13 3.3.2 Le titre du document .................................................................................................................................... 13 Exemple : Les indépendants à titre complémentaire - UCM ...................................................................................... 13 3.3.3 L’URL .......................................................................................................................................................... 13 3.3.4 Le contenu .................................................................................................................................................. 13 3.3.5 Eléments obligatoires ................................................................................................................................... 14

4 Conventions de rédaction web pour la structure de l’information ................................................................. 14 4.1 Structurer son contenu .................................................................................................................................... 14 4.2 La pyramide inversée ...................................................................................................................................... 14

5 Votre mission en tant que relais internet .......................................................................................................... 15 5.1 En panne d'inspiration, où trouver des idées de contenu ? ............................................................................ 15

6 Annexes ................................................................................................................................................................ 16 6.1 Notion de référencement ................................................................................................................................. 16

6.1.1 Principe de la recherche universelle .............................................................................................................. 16 6.2 Différents types de page ................................................................................................................................. 17 6.3 Lectures intéressantes .................................................................................................................................... 18

6.3.1 Web ............................................................................................................................................................ 18 6.3.2 Livres .......................................................................................................................................................... 18

Service internet – 07 décembre 2012 3

1 Ecrire pour le web – intro

1.1 Définition

1. Faire passer un message 2. Via un média spécifique et un support particulier 3. En pensant au lecteur… 4. … et à Google ! Par Fred Colantonio

1.2 Le message

Attention à votre interprétation et celle du lecteur (expérience, parcours…)

1.2.1 Un média spécifique

Ecrit Audio Vidéo Image

1.2.2 Un support particulier

Lisibilité sur écran Confort de lecture Attention

1.2.3 Penser au lecteur

Quelles sont ses attentes ? Comment y répondre ?

1.2.4 Penser à Google

Pages web Images Actualités Vidéos PDF

Service internet – 07 décembre 2012 4

2 Conventions web pour la rédaction d’un article

Structurer votre article et soigner la titraille et le chapeau de votre article =

75 % de votre mission de rédacteur web effectuée

C’est à la lecture du titre et du chapeau que l’internaute jugera s'il reste sur la page ou s'il la quitte.

2.1 Style

Style direct et informatif Vocabulaire courant (vulgarisation) Communication positive

2.2 Titraille

2.2.1 Titre et sous-titres

Le titre principal résume la page. Les sous-titres résument les paragraphes. Ils constituent un point d’accroche lors du balayage de la page. C’est pourquoi il faut impérativement les exploiter. Le titre peut également être repris à différents endroits : URL, fil d’Ariane, flux RSS, partage sur les réseaux sociaux. Titre : maximum 100 caractères (espaces compris).* pour le calculer, copier le titre en word, le sélectionner, choisir ‘Outils’ > ‘statistiques’ : le comptage s’affiche Titre court : 40 caractères (espaces compris). Sur smartphone : les titres utilisés sont ceux présents dans le bloc actus/agenda sur la gauche du site web. Sur tablette : les titres utilisés sont ceux présents dans les listings Actus ou Agenda.

2.2.2 Quelques règles

Mots clés au début De 1 à 7 mots Le titre doit tenir sur 1 ligne Positif, concis, compréhensible, informatif, pas de mot superflu Pas de ponctuation en fin de titre Pas de point d’exclamation

Différents types de titre

Impératifs Faites attention aux piétons Roulez à 50 km/h Ralentissez près des écoles

“A la une” Une interview exclusive après l’accident de voiture survenu à Etalle Sécurité routière : Etalle.org énerve le bourgmestre

Service internet – 07 décembre 2012 5

Titres empathiques, sous forme de question

Comment ralentir les voitures ? Comment sécuriser les villages en matière de circulation routière ?

“X bonnes raisons de” Dix bonnes raisons de rouler moins vite La sécurité routière en 5 points

Témoignage Témoignage de parents désespérés Une institutrice nous explique le drame de l’accident routier

Avantages et solution Placez un dos-d’âne pour ralentir la circulation

Question Faut-il sanctionner les voitures ?

Controverse Dos-d’âne ou pas dos-d’âne ? Le bourgmestre est têtu

Titre adressé au lecteur Et si c’était votre enfant ?

Bien rédiger pour le web - Isabelle Canivet - Editions Eyrolles

2.3 Chapeau et accroche

2.3.1 Chapeau

Mention obligatoire > Il reprend le message essentiel : Qui ? Quoi ? Quand ? Où ? Pourquoi/comment ? (5W) Il n’est pas une répétition du titre mais un complément d’information : il permet à l’internaute de savoir si l’article le concerne, de le situer dans le lieu et le temps (s’il s’agit d’un évènement) et en expliciter le contenu en résumé. Tenir compte du fait que le chapeau est souvent repris en résultat dans les moteurs de recherche

2.3.2 Accroche

Spécifique aux actualités du site ucm (copie écran)

Texte court et explicatif, il doit inciter au clic. Afin d’optimiser l’affichage sur tout support (smarphone, pc, tablette), 65 caractères (espaces compris)

Bon exemple : Changement d’heure => Quel est l’impact sur votre gestion salariale ?

Service internet – 07 décembre 2012 6

2.4 Mise en relief

2.4.1 Mise en gras

A utiliser pour faire ressortir un mot ou une expression clé (4-5 mots à la fois max).

2.5 Call to action

Définition : Inciter l'internaute à effectuer une action : contactez-nous, commander, partager le contenu… Il doit se trouver en fin de contenu sous forme de lien ou de bouton.

2.6 Liens

Evitez (comme pour tous liens) les liens génériques de type : cliquez ici, téléchargez le fichier, etc.

Service internet – 07 décembre 2012 7

2.6.1 Quelques règles :

3 à 7 mots 1 ou 2 liens par paragraphe Max 7 liens dans un espace réservé aux liens (Voir aussi)

Bon exemple : Téléchargez la liste d’optimisation de référencement (PDF)

2.7 Contrôle de votre article

Scannez visuellement votre article en ne lisant que les titres. S'il est compréhensible, c’est parfait.

2.8 Ligne de conduite à appliquer

Une information à un seul endroit

Avantage : mise à jour unique et pas d’infos contradictoire

Mauvais exemple

Service internet – 07 décembre 2012 8

Bon exemple

Service internet – 07 décembre 2012 9

3 Ponctuation, typographie et autres conventions techniques 3.1 Règles de typographie générale

Ucm.be / Sites satellites (hors Union & Actions)

Signe Exemple

. …des candidats, coachs et jurés. Des informations utiles…

, Lors de cette première émission, 23 candidats s'affronteront …

… inventer un packaging, un design, établir un business plan...

( Delphine Frennet (UCM)

) Delphine Frennet (UCM)

[ Delphine Frennet [UCM]

] Delphine Frennet [UCM]

" vous racontera avec clarté et humour "l'astronomie au féminin".

" vous racontera avec clarté et humour "l'astronomie au féminin".

; par le biais de conférences; animations

! C’est possible ! Avec l’émission Starter!

? Etre indépendant ? Créer sa propre entreprise ?

% Une dérogation de 10 % par groupe d'âge

€ Le prix de la participation s'élève à 60 € pour les membres

3.1.1 Etc., etcaetera

Etc. n’est jamais suivi de points de suspension. Exemple : Etc… > etc.

3.1.2 Sigle et acronyme

Jamais de point entre les lettres Jusqu’à 3 lettres, le sigle s’inscrit toujours en majuscule. A partir de 4 lettres, si le sigle se prononce, seule la première lettre se met en majuscule Exemple : Forem, ONU, Inasti, CNCD, PC, ONSS, Onem, Dimona

3.1.3 Abréviations

Présence ou non d’un point final Pas de point si l’abréviation se termine par la dernière lettre du mot Exemple : bd pour boulevard Sinon utiliser un point Exemples : chap. pour chapitre, art. pour article

Titres de civilité Monsieur : M. (MM.) Madame : Mme (Mmes) Mademoiselle : Mlle (Mlles) A utiliser avec parcimonie. Si un orateur extérieur donne une conférence, citer son prénom/nom sans civilité sauf s’il est docteur, professeur ou maitre. Exemple : …une conférence de Patrick Dupont et Me Etienne Dumont.

Service internet – 07 décembre 2012 10

Fonctions Docteur : Dr (Drs) Professeur : Pr (Prs) Maître : Me (Mes) Ne pas mettre de majuscule à la fonction. Exemple : directeur, administrateur…

3.1.4 Citation

Lorsque la citation est une phrase complète, elle est précédée par deux-points et le point final est à l’intérieur de la citation. Pour indiquer que la citation est tronquée, utiliser […] à l’intérieur de la citation ou etc. si la fin est supprimée.

3.1.5 Majuscule

Pas de mot entièrement en majuscule => ton agressif

3.1.6 Noms d’organismes

Si développé de sigle : majuscule à la 1ère lettre et aux noms propres Exemple : Université libre de Bruxelles (ULB) Si le mot est suivi d’un adjectif : majuscule au premier mot significatif Exemple : Communauté flamande, Communauté germanophone, Région wallonne Si le mot est précédé d’un adjectif : majuscule aux deux

Les institutions et organismes multiples sont des noms communs. Ils s’écrivent donc en minuscules et ne prennent pas de capitale initiale. Exemple : le conseil communal Les institutions et organismes uniques sont de véritables noms propres (il en va de même pour les noms d’événements). Seul le premier mot nécessaire à leur identification peut porter une capitale initiale. Exemple : la Cour de cassation

3.1.7 Qualité de personnes

Les dénominations d’une dignité, d’une charge, d’un grade ou d’une fonction sont des noms communs. Ils s’écrivent par conséquent en minuscules, sans capitale initiale. Exemple : le bourgmestre de Bruxelles Avec majuscule initiale : si le terme exprimant la qualité d’une personne est employé seul et désigne une ou plusieurs personnes précises (Le Doyen sera présent) Sans majuscule initiale : si le terme est placé devant le nom d’une personne Exemple : M. Leforestier, doyen,… Attention : le Premier ministre

3.1.8 Rue

Rue, place, boulevard, etc. s’écrivent en minuscules. Les noms, adjectifs et verbes qui composent le nom caractéristique de l’endroit prennent chacun une capitale initiale.

Service internet – 07 décembre 2012 11

3.1.9 Chiffres et nombre

Ecriture en chiffre préférable sauf en début de phrases. Toujours en chiffre : adresses, titres, marques, noms propres. En lettre, si on ne veut pas attirer le regard. Séparateur de décimale : virgule. Séparateur de millier : point.

Ordinaux 1er, 1ère, 2e, 3e, etc. Date Inscrire la date de la façon suivante jj/mm/aaaa, (exemple 01/03/2002) Pas de majuscule aux noms de mois sauf si la date évoque un évènement historique (14 Juillet) Si le contenu comporte des données chiffrées, la date est obligatoire. Numéro de téléphone et de fax Inscrire les numéros de téléphone et de fax de la façon suivante : +32 81 32 03 67 (utile pour accessibilité plateforme mobile)

3.1.10 Les dénominations les plus courantes à l’UCM

Les métiers

Secrétariat social UCM Caisse d’assurances sociales UCM Office de création, de développement et de transmission des entreprises UCM Guichet d’entreprises UCM Mouvement de défense et représentation UCM Caisse wallonne d’allocations familiales UCM Environnement UCM

UCM, une marque L’appellation « Union des classes moyennes » n’est plus utilisée. Merci d’utiliser UCM comme une marque. Exemple : Secrétariat social UCM et non Secrétariat social de l’UCM

3.2 Corps du texte

3.2.1 Listes (à puces ou numérotées)

La liste doit comporter 3 à 7 éléments. Si la liste est introduite par ":" il n'y a pas de majuscule au premier mot. Dans le cas contraire, oui. Si les éléments de la liste sont des phrases (sujet + verbe + complément), chaque élément se termine par un point-virgule ou un point final. Dans le cas contraire, pas de ponctuation.

3.2.2 Images

L’image est au service de l’information. Ne pas utiliser d’images à des fins esthétiques. Elle peut faciliter la lecture en allégeant un texte trop long.

Service internet – 07 décembre 2012 12

Il est important de bien optimiser l’image pour son référencement dans les moteurs de recherche. C’est une porte d’entrée vers le site web.

Le nom de l’image

Il doit décrire l’image et contenir des mots-clés. Les mots doivent être séparés par des tirets. Bon exemple : referencement-image.jpg Mauvais exemple : référencement_image.jpg referencementimage.jpg

Le texte alternatif

Il s’agit du texte de remplacement en cas de problème d’affichage (connexion lente, image bloquée...). Il doit être descriptif. Il est également lu par Google. Vous pouvez donc y insérer quelques mots-clés (mais pas trop - 80 caractères max).

3.3 Mise en ligne d’un fichier PDF

Titre du document Les indépendants à titre complémentaire - UCM

Mots-clés

Nom du fichier Independant-complementaire-UCM.pdf Mots-clés, tirets, pas d'espaces, pas de caractères accentués

Contenu

Titre, chapeau, texte (pyramide inversée) Logo UCM bleu Le site d'origine du pdf (www.ucm.be) Date ou mise à jour Numéros de page

Service internet – 07 décembre 2012 13

3.3.1 Analyse du snippet de Google (encadré gris)

Le titre cliquable du document (métadonnée Title dans les propriétés du document) L’URL du fichier avec l’extension .pdf Le format du fichier Un texte descriptif extrait du PDF La capture de la première page du PDF

3.3.2 Le titre du document

Le champ Title des propriétés du document doit être renseigné. Il doit proposer une explication du fichier PDF et contenir des mots-clés. Si le champ est rempli, son contenu sera affiché comme titre dans les résultats du moteur de recherche sinon, le moteur de recherche choisira un titre trouvé dans le fichier PDF.

Exemple : Les indépendants à titre complémentaire - UCM

3.3.3 L’URL

Le nom de fichier doit être explicite et riche en mots-clés de type : mot-cle1-mot-cle2.pdf. Ne pas insérer d’espace entre les mots. Celui-ci sera remplacé par %20 Exemple : www.ucm.be/ucm/ewcm.nsf/0/.../$file/Dossier%20ind.pdf

3.3.4 Le contenu

Le début du document PDF doit contenir un titre pertinent, un chapeau, le texte sur le modèle de la pyramide inversée. Evitez les colonnes qui ne seront pas bien prises en compte par les moteurs de recherche. Exemple : un statut d'indépendant à titre principal, l'UCM a compilé des statistiques Inasti, des données de sa caisse d'assurances sociales et a mené ...

Service internet – 07 décembre 2012 14

3.3.5 Eléments obligatoires

Le logo de l’UCM bleu doit être présent en haut à gauche ou en bas à droite du document La référence du site sur lequel le doc est dispo.

Exemple : ucm.be Une notion de date ou de dernière mise à jour Les numéros de page

4 Conventions de rédaction web pour la structure de l’information

Définir son contenu en fonction :

Des attentes/besoins de l’utilisateur De la valeur ajoutée

4.1 Structurer son contenu

1 sujet par page Veillez à utiliser des pages d'orientation pour guider l'internaute vers une page concernant un sujet précis : Exemple : Page Chocolat avec des liens pointant vers > Page Chocolat noir – Page Chocolat blanc – Page Chocolat au lait Ce type de page favorise également le référencement

1 idée = 1 paragraphe (introduit par un sous-titre)

Exemple de page d'orientation : http://www.ethias.be/fr/stc/ETIF020/Particuliers/Assurer.htm

4.2 La pyramide inversée

Il est important de structurer votre contenu en respectant la pyramide inversée : le visiteur peut, dès son arrivée sur la page, comprendre si son contenu correspond à ces attentes.

Premier paragraphe = l’essentiel (5W) Paragraphes suivants = les détails (questions + précises) Derniers paragraphes = le contexte A la fin, le call-to-action (inciter à effectuer une action : contact, commande…)

Service internet – 07 décembre 2012 15

5 Votre mission en tant que relais internet 5.1 En panne d'inspiration, où trouver des idées de contenu ?

Lors de périodes creuses comme celle des vacances, il est parfois difficile de dénicher des actus intéressantes. Voici quelques conseils pour faciliter votre recherche.

Promouvoir ou commenter un évènement ou une actualité en faisant le lien avec votre activité Commenter les nouvelles tendances de votre activité Répondre aux questions posées par vos clients Réaliser une interview : 3 à 5 questions concernant un évènement, une tendance, un problème, une

expérience… Surveiller la concurrence Utiliser une boîte à idées à exploiter dans ce cas précis Ecrire un tutoriel Utiliser la table des matières d’un livre en exploitant les chapitres ou sous-chapitres Effectuer un brainstorming sur votre thématique Surveiller les mots clés utilisés dans les moteurs de recherche pour vous trouver (statistiques) Parler de vos produits ou services.

Service internet – 07 décembre 2012 16

6 Annexes 6.1 Notion de référencement

Définition : Ensemble d’actions permettant de positionner au mieux un site web sur les moteurs de recherche.

Référencement naturel Référencement payant

La notion de référencement sera abordée directement dans chaque partie : contenu, lien, image… Dans le cas d'une nouvelle page web, comptez 4-6 semaines pour un maximum de visibilité.

6.1.1 Principe de la recherche universelle

Google affiche, dans une page de résultats, des données issues de bases de données différentes, soit la plupart du temps : Web, images, vidéos, actualités...

Service internet – 07 décembre 2012 17

6.2 Différents types de page

Actualité Page d'accueil (métier)

Page de contenu classique Page d'agenda

Page de liste

Service internet – 07 décembre 2012 18

6.3 Lectures intéressantes

6.3.1 Web

http://www.action-redaction.com/ http://www.wearethewords.com/ http://www.ecrirepourleweb.com/ http://plumeinteractive.canalblog.com/

6.3.2 Livres

Bien rédiger pour le web (2ème édition) Isabelle Canivet – Editions Eyrolles Disponible au Service Internet http://www.eyrolles.com/Informatique/Livre/bien-r-diger-pour-le-web-9782212128833 Référencement, e-marketing et visibilité web : 30 pratiques pour décideurs et webmasters Fred Colantonio – Edipro Disponible au Service Internet http://www.edipro.info/catalogue/e-management/referencement_descriptif.html Check-list pour réussir son site web Jean-Marc Hardy – Dunod Disponible au Service Internet http://www.amazon.fr/exec/obidos/ASIN/2100075187/redacbelesite-21 Premiers pas sur Internet Test Achats Disponible au Service Internet Stratégie de contenu web Muriel Vandermeulen – L'alambic http://www.editions-alambic.com/fiche.php?livre=6 Ergonomie web Amélie Boucher – Editions Eyrolles http://www.eyrolles.com/Informatique/Livre/ergonomie-web-9782212121582