[Amateur] Site sur la Scandinavie médiévale

(reprise du message précédent)

Salut Spongebrain !

Je reviens voir le topic et il y a un point sur lequel je ne suis pas d'accord avec toi. C'est un truc qui n'engage que moi: je trouve que de lire un texte long est plus agréable s'il s'étend sur une certaine largeur. Lire un texte aussi long dans des colonnes est agréable sur papier mais sur un écran je ne trouve pas. Moins de retour à la ligne donc l’œil fait moins de mise au point sur un écran lumineux et moins besoin de scroller.
Par contre c'est sûr, ça ne se voit nulle part: cette mise en page est plus que rare. Comme je l'ai dit je la trouve adaptée à ce genre de contenu et c'est peut-être parce que ce genre de contenu -disons "d'érudition" - est rare qu'il se conforme aux mises en forme classiques au lieu de s'arroger le droit de bouleverser des normes de design justifiées par ailleurs.

Autrement bien sûr tes remarques me semblent tout à fait pertinentes et c'est normal ça a l'air d'être vraiment ton domaine ! ... Comme tu dis, dans le sommaire les petits bouts de phrases parfois perdus tout seuls sous l'image (cf. "de leur civilisation") ou la mise en valeur des images pourraient être à revoir.


2fray, je prendrai le temps de regarder ça cette semaine pour te faire des petites propositions =)

Bon aprèm les gars !

Cy

Bonjour Cymophane,

Ce n'est pas une question "d'aimer ou pas" les lignes de 165 signes. Déjà à la base, ce n'est pas conforme aux règles typographiques les plus élémentaires (de nombreux guides sur le web et en librairie). La typo n'est pas là pour faire joli ou sortir des règles absurdes, mais pour améliorer la clarté et la lisibilité. Il se trouve que d'appliquer les règles de typo contribue en plus à améliorer l'esthétique.
Tout graphiste pro ou amateur ne peut s'affranchir de ces règles. C'est la structure du texte, de la typo, et la mise en page est avant tout un travail de typo, même pour le web. Vous êtes-vous demandé pourquoi on ne voyait pas de texte avec des lignes à rallonge nulle part (sur les sites pros en tout cas), ni sur le web, ni dans le print ?

Environ 100 signes maxi (80 c'est encore mieux), espaces incluses, est un maximum sur le web (en fonction du style des paragraphes). Si on a des lignes très longues la justification est à bannir, qui supprime tout repère. Ensuite on peut utiliser des colonnes, mais ce n'est pas toujours très heureux sur les écrans et parfois compliqué à décliner en responsive. Il faut donc savoir composer. À l'inverse, écrire dans des colonnes trop étroites n'est pas confortable non plus. Si en plus on colle une justification sans savoir ce qu'est un « gris typo », le résultat risque de donner des paragraphes avec des textes tout tronqués et des trous partout. Ce qui en typo est une faute.

C'est juste parce que c'est illisible. On a du mal à retrouver la ligne suivante, on saute des lignes. Si en plus les paragraphes ne sont pas marqués (chapôs, titres, interlignes, espaces… ) et qu'on colle des vignettes en plein dans le texte, sans marges ni habillage, 99% des gens vont se barrer sans rien lire. Aucun document, aucun site ne peut afficher le texte de cette façon sans prendre le risque de n'être pas lu. Ni plus ni moins. Sans même parler de l'aspect graphique.

Avant de faire la moindre maquette, il faut avoir une connaissance des bases des règles de typographie. Et ce sera de plus en plus vrai pour le web, qui reprend les principes du print.

De plus, les polices de textes avec serif (empattements) passent mal pour le texte courant. Si une Time est très lisible sur le papier (romans, journaux… ), sur le web, en petit, les polices avec serif manquent de précision et de lisibilité, en partie à cause des résolutions écrans. Une police sans serif (police à bâton) sera donc plus adaptée et lisible. En revanche les polices serif peuvent être utilisées pour les titres (en grand, couleur… ), afin de donner un style ou pour renforcer l'impact.

Quelques liens :
http://webtypographie.net/2-1-2.php
http://revues.refer.org/telechargement/fiche-typographie.pdf
https://fr.wikipedia.org/wiki/Style_typographique_international
https://fr.wikipedia.org/wiki/Gris_typographique

Un livre à lire absolument avant de maquetter (il en existe d'autres, voir dans les liens précédents) :
Lexique des règles typographiques en usage à l'Imprimerie nationale (la bible)
http://www.amazon.fr/Lexique-r%C3%A8gles-typographiques-lImprimerie-nationale/dp/2743304820

Voilou.
Modifié par spongebrain (09 Nov 2015 - 03:14)

Bonjour,

Merci Spongebrain pour ces remarques, qui ouvrent beaucoup de perspectives.

Effectivement, certains articles étaient excessivement compacts.

Je procède par tâtonnements pour améliorer la mise en page. Les derniers articles modifiés (Bungemuseet, Filles d'Ægir, International Saga Conference) donnent l'état des lieux actuel.

Pour l'heure, j'ai :

- rétréci le bloc central et augmenté la taille de la police, pour un nombre de signes maximum d'environ 90 ;
- augmenté les espaces entre les lignes, les paragraphes, les sous-titres ;
- scindé les textes en davantage de paragraphes ;
- aéré un peu les images.

Je n'ai pas encore travaillé sur la page d'accueil.

Je réfléchis maintenant à la question des polices. Il me semble que celle utilisée pour le corps du texte (Lora, trouvée sur Google Fonts, et assez proche de Droid) est plutôt lisible pour une police serif. Je cherche une sans-serif en complément.

J'ai réglé un certain nombre de petits problèmes en passant (titres cliquables, par exemple). En revanche, s'agissant de

spongebrain a écrit :
Sous les vignettes, il y a parfois une ligne qui se ballade toute seule. En typo c'est à éviter.

je ne vois pas trop comment rectifier ça.

spongebrain a écrit :
Je trouve aussi dommage d'avoir supprimé le logo avec la typo stylée très sympa, pour être remplacé par rien. Là le fond image OK, c'est mieux que ce qu'il y avait avant, mais c'est encore étriqué. Le fond bleu ciel est redondant avec le ciel de la photo.

spongebrain a écrit :
Remettre le joli logo (en un peu plus lisible) et agrandir le visuel d'accueil. Mettre le logo en scène directement sur la photo pour scénariser l'ensemble, raconter une histoire. Raconter l'histoire tout en restant moderne ! Autant par l'image que par le texte.

J'ai un peu de mal à visualiser ce que vous suggérez.

Encore merci.

Cymophane a écrit :
Par contre c'est sûr, ça ne se voit nulle part: cette mise en page est plus que rare. Comme je l'ai dit je la trouve adaptée à ce genre de contenu et c'est peut-être parce que ce genre de contenu -disons "d'érudition" - est rare qu'il se conforme aux mises en forme classiques au lieu de s'arroger le droit de bouleverser des normes de design justifiées par ailleurs.

Je comprends très bien ce point de vue. Mais même les encyclopédies en ligne utilisent une mise en plage sur une colonne pas trop large : Britannica, Den Store Danske, Store norske leksikon.

Le seul contre-exemple que je connaisse, c'est Wikipédia, qui n'est pas vraiment ma référence, ni sur la forme, ni sur le fond.

Merci à nouveau pour ton intérêt.