Sophy a présenté les « récompenses de janvier » décernées par le jury de Come4News. Loin de moi l’idée d’influencer le jury, encore moins d’en contester les décisions, mais il me semblerait souhaitable, à l’occasion, pas forcément systématiquement, d’attirer une nouvelle fois l’attention sur la présentation graphique des sujets.
Le dimanche, je délaisse un peu l’actu « chaude » et je me lâche sur mon dada, ma marotte, soit la présentation graphique des sujets sur Come4News.
Petit préambule : il ne s’agit pas de vous faire acquérir les tics de formatage de la presse d’information en ligne.
Intertitres
Dans vos quotidiens, vous remarquez des intertitres. Soit une sorte de relance à la fois graphique et sémantique. Cela permet d’attirer sur un point particulier du paragraphe qui suit, d’inciter à le lire. Cela revient à une sorte de rebond.
Mais aussi d’aérer la présentation.
Parfois, cela « équilibre » un visuel (pas vraiment ici).
C’est pourquoi aussi vous rencontrez des inters plutôt tirés par les cheveux, peu informatifs, peu attrayants.
Il a fallu faire vite, choisir un inter très court, juste pour des raisons de disposition.
Habillage
Par « habillage », on entend la disposition des visuels et leur « entourage », soit la distance par rapport au bord du bloc de texte. Habiller vos visuels consiste à les disposer entourés de x ou y pixels de « blanc » (à présent du léger gris de la couleur de fond des pages de Come4News).
J’en ai déjà traité précédemment, c’est dimanche, je n’y reviens plus. Demandez-vous simplement pourquoi certaines habillent leurs visuels (photos, illustrations…) et certains non. Manque de réelle compétence ou négligence ? C’est un peu comme le Sudoku, c’est tout simple à réussir pour les grilles les plus faciles et au final, on réussit les plus difficiles (pour les « expertes », eh, nul n’est tenu de devenir expert sur Come4News ou en tout domaine).
On tentera d’éviter que les intertitres, à proximité des visuels, soient disposés n’importe comment. Mais toujours faire en sorte que l’intitulé de l’intertitre corresponde à ce qui suit. Par ailleurs, pas vraiment toujours besoin que les visuels correspondent bien à ce que le texte décrit. Vous disposez d’une certaine latitude à cet égard. Le premier visuel (montage ci-dessus) à été choisi parce qu’il se rapprochait du format carré.
Lézardes
Cet habillage, en cas de justification trop étroite (trop peu de largeur du pavé de texte) peut entraîner des lézardes disgracieuses, des sortes de zigzags verticaux.
Cela est dû au fait que vous ne pouvez (sauf mieux informé) utiliser des divisions (en poésie, opérer des césures), soit avoir recours à des traits d’union (conditionnels ou non) pour scinder un mot un peu long qui passera à la ligne suivante.
Parfois, si votre justif (la justification) est trop étroite, vous ne placerez que deux mots dans la ligne, l’un tout à gauche, l’autre tout à droite (« au fer à droite »), et le phénomène peut se reproduire sur toute la colonne.
C’est moche. Là, j’ai eu « de la chance » (pas trop de mots trop longs hormis « justification » ; mais j’aurais pu faire mieux, soit pire, en créant de franches lézardes pour les besoins de la démonstration). En revanche, le visuel est assez mal habillé (c’est voulu). Il aurait fallu remanier le texte pour que le pied d’une phrase coïncide avec la base du visuel.
Que faire ? Aucune solution si ce n’est celle de modifier le texte, au pif, car l’interface de saisie n’est pas tout à fait « tel vu, tel reproduit », soit wysiwyg : la mise en ligne n’est pas identique à ce que vous avez visuellement produit en bidouillant via l’interface de saisie ou de mise en pages.
Trianguler
L’une des règles de base consiste à disposer vos visuels en triangle ou quinconce.
C’est supposé plus dynamique, mais on peut opter pour de tout autres choix.
J’ai ainsi modifié, selon ce principe, la disposition initiale des visuelles de l’article de Sarif Guylaine sur la neige en Haute-Normandie (« La neige est là »).
C’est tombé sur lui par hasard, j’espère qu’elle ne m’en voudra pas durablement (au besoin, je peux rétablir la version initiale).
Mais, avec des visuels de largeur identique, il aurait pu être choisi de créer une colonne à droite ou à gauche.
Voire de créer un montage composite d’un seul visuel, lequel « équilibrerait » totalement le texte (qui commencerait en haut du montage et finirait à son pied).
J’ai conservé le visuel symbolisant des flocons (fleurs blanches) en tête d’article, sous le châpo. Pourquoi ? En fait, j’aurais dû lui substituer le bonhomme de neige, mais j’ai respecté le choix hiérarchique de Guylaine et ce visuel m’a paru plus incitatif, moins convenu, pour l’affichage en page d’accueil de Come4News. En fait, j’aurais pu intervenir plus lourdement, mais, basta, c’est dimanche. Mais mieux aurait valu avoir en haut du texte deux images de tailles à peu près identiques, celle de la vache pouvait descendre. D’un autre côté, elle m’a semblé « interpeller » un peu davantage que celle de Betty Boop. Autant la laisser accrocher les visiteurs. Elle est orientée vers le texte (disposée à d. ; à g. elle vous « regardait » toujours, mais semblait vouloir se diriger hors du texte, hors marge de gauche…).
Notez que le paragraphe du bas (à droite du visuel ci-dessus) est limite lézardé (fortement sous l’interface de saisie, moins en rendu à l’affichage). J’ai fait comme j’ai pu, et créé des interlignes.
Déformation
Si vous visitez la page d’accueil (la une), vous remarquez que nombre de visuels, hors les formats carrés, sont déformés. Pour le moment, on n’y peut rien (c’est certes soluble dans la programmation ou le développement, mais ardu à mettre en œuvre). Or donc, choisissez votre visuel en fonction.
Attention, une autre règle s’impose. Ne pas, en cas de personnage de profil, faire porter son regard vers une marge. Cela vaut pour la disposition dans le « papier », mais pour la page d’accueil, rien n’y fera. Choisissez donc vos visuels en fonction.
Pour mon article sur les Rafale, j’aurais préféré idéalement faire figurer mon montage de titres du Times of India et du Sunday Mail en une. Beaucoup plus élaboré, mais… difficile à retailler à un format carré tout en préservant sa lisibilité à taille réduite.
Remarquez que l’appareil pique du nez sur le titre qui suit. Il incite à le lire, et non à porter le regard sur le sujet voisin du dessus. En général, l’œil « suit » les diagonales.
Légendes
Sauf volonté contraire, elles doivent rester discrètes. Mais lisibles. Utilisez une police « condensée » de préférence. Idéalement, et c’est le cas pour les professionnels, une légende incorporée dans un visuel de type photo est conçue avec un logiciel de dessin vectoriel, puis importée. Là, ce serait trop me demander. Pensez que votre légende, dans ce cas, sera « pixellisée » (mettons qu’elle bavera un peu). Généralement, ce n’est pas trop grave, mais si elle devenait illisible à l’écran, refaites la légende.
Orthotypographie
L’orthotypographie vise essentiellement à faciliter la lecture sémantiquement. À respecter des règles de présentation permettant d’éviter des confusions, des « freins » à la lecture (les grosses fautes d’orthographe freinent aussi la lecture : on ne voit plus qu’elles). Elle a cependant quelques avantages visuels. Ainsi de la mise en italiques des citations authentiques. En général, cela peut rythmer, dynamiser visuellement un pavé de texte. De même que l’italique pour les titres d’ouvrages, de films, de titres de presse. Ou pour les expressions et mots étrangers.
D’autres règles s’appliquent. Tenez, utilisez avec circonspection la couleur : ne transformez pas votre texte en bariolage… Évitez les couleurs criardes, préférez les sombres (plus lisibles), sauf pour le surlignage (dont il ne faut pas abuser).
C4N, c’est vous !
Ainsi concluait Sophy divulguant les récompenses de janvier. C’est vrai et faux. Ce n’est pas que vous individuellement. Mais moins vous soignez les visuels visuellement, bien moins l’ensemble du de notre site est attractif.
Cela peut vite dissuader de lire les contributions des autres.
Pensez-y un peu.
Bien sûr, mieux vaut en une que figure un visuel, même mal foutu, déformé, que rien.
Pour l’actu chaude, je passe outre mes propres avis.
Si le visuel semble attractif, même déformé, il vaudra mieux qu’un autre, passe-partout, trop « bateau ».
De plus, certains articles se prêtent très peu à être accompagnés d’un visuel. En cas d’actu chaude, transgressez la règle. Mieux vaut mettre rapidement en ligne que de s’acharner à trouver une illustration correspondant vaguement à la teneur de votre contribution.
Juste une dernière remarque : respectez les droits d’auteur (copyrights) mais songez que le droit de citation vous permet de réaliser des captures d’écran à condition de bien « sourcer » (soit de faire figurer clairement la source). Cela vaut pour pratiquement toutes les captures d’écran de titres de presse. Au besoin, créditez aussi la source de la photo ou de l’infographie (si elle est faite par une société extérieure au titre de presse). Cela peut rester « risqué » pour Come4News qui peut se voir reprocher d’avoir enfreint des droits, mais « on » s’en arrangera mieux que s’il s’agit d’un pillage éhonté. Oui, Come4News, c’est bien « vous », mais pensez aussi à « nous » et aux « autres ».
P.-S. – Je vais m’efforcer d’éliminer les lézardes, ce qui prend du temps… Et il se pourrait que j’en laisse subsister pour, mettons, des besoins de démonstration.
Cela se remarque avec le bloc de texte de la dernière illustration (559 × 510 pixels – c’est trop large pour être placé au fer à droite ou à gauche, et c’est pour éviter cela et d’autres artefacts que Come4News réduit d’office, sauf, au gré des auteurs, dispositions contraires, la dimension des visuels à 500 px de largeur ou de hauteur – voyez les options de l’interface de gestion des images pour dépasser cette limitation…).
Il faut savoir aussi s’affranchir des règles.
Ainsi, Le Monde a choisi cette disposition montrant Claude Guéant filant vers la sortie. Il aurait été mieux venu de le faire filer vers la droite (la marge de droite).
Un retournement horizontal de la photo aurait été possible pour ce faire, mais dans ce cas, cela se remarquait (l’affiche derrière la tête de Claude Guéant devenait illisible, le texte inversé).
La manipulation aurait été trop visible.
Mais ce cadrage pour illustrer un article sur le choc des cultures, est bien sûr voulu : cela veut dire, voyez comme il s’en sort piteusement. Un bon exemple : le médialogue appréciera. Ce dimanche, sur le site du Figaro, exemple inverse, mais « fautif ». Romney regarde vers l’en-dehors, certes vers la droite. Mais il aurait été plus classique de disposer la photo à la gauche de l’accroche de page d’accueil.
Ci-dessus, évidemment, tant pis pour les deux images superposées (l’histoire du Rafale et Guéant) au fer à gauche. Faire autrement aurait « trahi » l’info. Je n’allais pas « faire sortir » Guéant vers mon texte, juste pour mieux disposer mes images. Désolé pour le « cadrage et disposition (…) vouluES », parfois, l’info prime, et on va trop vite.
[b]OUPS, mais que c’est difficile.
J’ai tout de même retenu une chose : les phrases à ne pas couper (je me comprends)
Par contre j’aère au maximum, je fais des interlignes, je corrige à chaque fois, et à chaque fois mes phrases sont les unes sous les autres.
marre.
Je vais refaire un essai, mais le Jomla est têtu comme une bourrique.
J’ai vesoin d’air MOI !
[/b]
Mais tout est bon chez toi, Sophy.
Joomla, cela se domine à peu près.
En tout cas, il ne s’agit pas de faire des exploits, mais d’éviter les bourdes les plus courantes. C’est juste une question de consacrer aux dispositions un peu d’attention, et tu le fais très bien.
[b]Merci Jef,
je ne suis pas une Pro, mais j’ai eu la chance d’avoir pour professeur ma chère Belle Fille qui m’a tout appris
Celle qui réalise mes montages (comme les podiums ou celui du 50 millième article. (et la marmotte dont tu t’es servie un jour)
Néanmoins je reste persuadée que si je pouvais aérer entre chaque récompensé, et pour ma « CONCLUSION », le texte aurait été plus agréable à lire.[/b]
[b]Jef : un conseil s’il te plait :
le cadre introduction obligatoire, crois tu que je puisse mettre tout mon texte sans utiliser le deuxième (développement).
Je précise que j’écris sous Word, et copie colle avec l’icône adaptée .
Je me pose à chaque fois la question.
Tu m’as aussi appris que les mots clés, pouvaient sans sortir du contexte de l’article, être plus généralistes que les mots que l’on pouvait trouver dans le texte lui même.
Sauf les noms propre bien sûr![/b]
Hmm, oui, techniquement, tu peux n’utiliser que le cadre du châpo (d’accroche, d’introduction). Perso, l’icône ne m’apporte rien. Je fais deux copiés-collés (l’un pour l’intro, l’autre pour le corps du texte). On peut aussi faire un copié-déplacé (sélectionner le texte dans MSWord, le déposer dans l’une ou l’autre interface) mais si je le fais, c’est parce que je dispose de deux écrans (un pour consulter la documentation, l’autre pour saisir, composer). Pas fastoche autrement.
Dans certains cas, on peut mettre un visuel à côté de l’accroche. Je le fais peu.
Évidemment que tu peux mettre des noms propres dans les mots-clefs qui ne soient pas dans l’article.
Exemple :
Tu rédiges un truc sur la Libye en mentionnant Seil al-Islam dans l’article, sans patronyme, tu peux mettre Kadhafi en mot-clef.
Auparavant, les < headers > et autres balises HTML étaient primordiales pour les moteurs. À présent, on pourrait quasiment s’en passer. C’était des trucs qui n’apparaissaient pas à l’écran mais que les moteurs repéraient « dans le dur ».
À présent, les moteurs repassent fréquemment « baliser » (numériser, scanner) tout l’ensemble de tous les textes. D’où l’intérêt de faire figurer des synonymes ou d’autres mots en rapport avec le texte, mais non dedans. Ces mots-clefs sont toujours repérés par les moteurs. Faut pas trop pousser et même si Fillon évoque Dati, ne pas mettre systématiquement Dati dans les mots-clefs s’il ne s’agit pas des législatives à Paris, par ex.
[b]MERCI JEF : JE RETIENS
ENCORE MERCI
Sophy[/b]
Bonjour Jef Tombeur, n’ayez pas pas d’inquiétude je ne suis pas vexée qui vous preniez mon article en exemple, je suis très loin d’être une expert pour l’instant et toutes vos explications a propos dites moi ce que vous pensez de la passation de l’euros au francs? Votre avis m’interresse fortement!!!!
Franchement, Guylaine, je l’ai pris au hasard. Enfin, aussi parce que vous n’avez pas disposé vos images en les « habillant » (voyez les options de l’interface de placement des images quand vous « montez » une image : c’est l’onglet de droite). En revanche, le choix de la première image était plutôt bon car même un poil déformée, en page d’accueil, elle « le fait ».
Pour l’euro. Mon opinion fluctue en fonction des émissions d’emprunts souverains à trois ans de divers pays. Je me suis assez souvent exprimé sur le sujet (mot-clef : Eurozone). Mettons que si tout le monde revient, de manière concertée, au serpent monétaire européen, pourquoi pas ? Sauf que je n’ai pas envie de repartir avec un billet de cent francs pour le changer en marks, puis en francs belges, &c., pour revenir en France avec seulement 50 francs, tout le reste passant en commissions de change et en TVA. Mais, ok, c’est une considération égoïste (je voyageais beaucoup autrefois, encore à présent).
Pour Sophy : tout à fait normal, on est tous là pour faire progresser le site.
En fait, la rubrique QFP (la FAQ) devrait préciser tout cela. Mais c’est beaucoup moins lu qu’un article par ci, par là, et certainement moins que tes recommandations de présidente du jury.
En fait, avoir un « wiki » à part entre anciens ou nouveaux voulant s’investir ne serait pas mal. C’est un espace collaboratif pour échanger des informations techniques.
Mais on ne peut être partout, et c’est un investissement.
Je crois surtout à la valeur de l’exemple. Si nos propres articles sont à peu près soignés graphiquement, les autres finiront bien par se demander pourquoi on y arrive et pas eux.
Si j’étais membre du jury (mais bon, à la foire, soit à la chasse à l’info, et au moulin, soit à rédiger, et en sus à commenter et à sélectionner des articles à primer, c’est un peu lourd), je reverrais systématiquement, graphiquement, tous les primés. Jusqu’à ce que les futurs primés fournissent naturellement des papiers pas trop mal agencés.
Merci a cet article bien utile, qui rendra nos travaux bien plus estetiques!
Qu’entendez vous par « visuel » Jef?
Par « visuel », Chère Mozarine, j’entends généralement rien, sauf s’il s’agissait d’une vidéo sonore (ou de l’interface d’un élément audio, incorporé dans la page HTML, visuellement distinguable du texte).
C’est le sens II-4 (qui n’existe pas encore dans le [i]Grand Robert[/i], mais qui est dérivé du II-3, n. m., thème en image{s} d’une publicité).
« Envoie-moi les visuels sur le réseau » voulait dire, strictement, redirige-moi les éléments graphiques que l’annonceur ou la régie a communiqué (dans le cas où on les montait sur place, dans une publication) ou encore, si la publication avait son propre studio de créapub’, ces éléments graphiques (le monteur-metteur en pages réalisant toute la publication, ou une autre personne du studio, se chargeant de composer et placer les slogans, les éléments textuels, selon un brief, une pré-maquette, &c.).
Par extension, ce sera tout ce qui est non-texte dans une page HTLM ou XML ou…
Soit graphique, donc par ex., image bitmap, soit élément 3D (flash, sgml…).
Un symbole, par ex., une puce, un signe mathématique, un émoticon, est pour nous du texte du moment que le dit élément est inclus dans une police de caractères dont est issu le glyphe (le glyphe étant la représentation, à une taille donnée, du dit caractère qui, lui, est à la fois un concept – la lettre – et sa représentation de base, un peu comme l’idée d’un son, celui du « o » par ex., qui peut être grave ou aigu, bref ou long, &c.).
Le terme d’habillage des visuels est dérivé de celui d’habillage des lettrines.
La plupart du temps, il faut habiller les lettrines, et non pas seulement régler l’approche (la proximité) du glyphe de la lettrine par rapport à celui du caractère qui suit. Cela revient à créer pour la lettrine une sorte d’enveloppe, de contour externe vectoriel.
Voyez, par ex., l’habillage des lettrines sous InDesign (logiciel de mise en pages, et non simple texteur, traitement de textes).
[url]http://pao-prepresse.lesyeuxfertiles.eu/trucs-et-astuces/indesign-des-lettrines-qui-ont-de-l-allure[/url]
On ne peut hélas pas (enfin, si, mais bonjour… et en tout cas pas[i] hic et nunc[/i] sur [i]C4N[/i]) parvenir à de tels résultats très fins.
Nous ne pouvons placer nos visuels, illustrations, photos, que dans des parallélogrammes à quatre angles droits, des rectangles. Le bord du visuel peut ou non coïncider avec les droites du rectangle ou s’en écarter de x pixels.
En général, j’habille mes visuels de 9 pixels vers la droite ou la gauche selon qu’ils sont placés à g. ou à d. (via les options).
En fait, c’est le texte qui « habille » le visuel, dit-on aussi.
Tout le langage ou jargon du graphisme et de la typo est très polysémique.
Un vrai casse-tête pour lexicologue (surtout si on a des corpus en plusieurs langues, et j’en ai fait l’expérience tant lors de mes études qu’en pratique).