Neovov le 18/08/2007 :

Très bon article, ça donne envie de s'y intéresser.
Une petite question : la justification des paragraphes est-elle une sorte de "rythme horizontal" ?
Il n'y a aucun paragraphe justifié dans les exemples que tu proposes. Suis-je le seul à tiquer sur ce détails ?

David, biologeek le 18/08/2007 :

Il est beaucoup plus simple de lire un texte non justifié car la différence entre les tailles de lignes permet à l'œil de se rappeler plus facilement de la ligne précédente. Donc oui on pourrait parfaitement parler de rythme horizontal, autre recommandation du même type, on peut mettre une taille de ligne comprise entre 50 et 70 caractères pour faciliter aussi le passage d'une ligne à l'autre lors de la lecture.

Erwan aka NaWer le 18/08/2007 :

Vraiment très intéressant le rythme vertical. Merci pour tous les liens indiqués. Depuis que j'ai lu ton article je me trouve vraiment nul. Ca me fait comme quand je faisais des tableaux pour la mise en page et que j'ai découvert le CSS...

Soso le 18/08/2007 :

Ca a l'air vraiment compliqué d'harmoniser un site selon ton principe mais effectivement, on ressent bien l'amélioration au niveau de l'utilisation de l'espace en alignant correctement les textes.
Ton site en est un parfait exemple ;)

David, biologeek le 19/08/2007 :

@Erwan : c'est justement ce qui fait le charme du développement web, tout évolue très vite ce qui permet d'en apprendre tous les jours.
@Soso :
> Ton site en est un parfait exemple ;)
Non justement ! Il manque vraiment de rythme vertical... actuellement.

Olivier le 19/08/2007 :

Euh, je veux bien que ça améliore l'effet global pour une page très axée sur le contenu. Ça apporte de la cohérence, c'est indéniable. Ça apporte aussi beaucoup de rigidité et enlève une grosse part de créativité.
Ça demande de la technique et offre de nombreux avantages mais enlève une bonne part de folie, d'art et d'originalité.
Juste en passant, introduire ton article par la déception au sujet du CSSR, c'est plutôt marrant et me laisse à penser que tu viens de découvrir le sujet et l'applique à tout ce que tu vois sans te demander si ce principe doit être appliqué partout.
Mon avis est que non, le rythme vertical n'est pas nécessairement un gage de qualité (surtout sur un concours qui vise la créativité en utilisant les CSS pour la mettre en page).
Si certes il reste possible de faire créatif avec les principes du rythme vertical, ça n'a rien d'une obligation et ne devrait être réservé qu'au site fournis en texte.
On peut alors se poser une question :
Appliquer les principes de l'imprimerie au Web est-il un choix cohérent ?
Clairement non en ce qui concerne l'aspect paginé de l'imprimerie face à l'infini de la page Web.
De plus, il est souvent recommandé de ne pas trop surcharger en texte une page Web ce qui nous éloigne un peu plus de l'imprimerie.
Tout ça pour dire que si le principe de rythme vertical apporte de la qualité et de la cohérence, il n'est pas non plus indispensable et pas appliquable à toute situation.
Sur l'alignement justifié, je trouve qu'il améliore grandement la lisibilité au contraire de ce que tu dis, mais là c'est peut être une histoire de préférence personnelle :)
C'est marrant d'appliquer un principe en vertical mais pas en horizontal, tu n'as peut être pas lu de chose écrite par un web designer anglo saxons sur le sujet ;) (petite vanne sans animosité aucune :)). Parce que utiliser l'alignement justifié apporte ce gain de cohérence et de professionnalisme qui est prôné par le rythme vertical que tu présentes ici.

giz404 le 19/08/2007 :

J'utilise Blueprint pour la nouvelle mise en page de mon espace perso, effectivement, on perd en sémantique, mais on gagne un temps précieux en mise en page, en ajustements pour IE, et on obtient une mise en page cohérente sans efforts (rythme, proportions)
Je trouve que ce framework est une réelle avancée dans le design web et son adoption devrait remédier à l'absence de structuration ou de rythme vertical...

David, biologeek le 19/08/2007 :

@Olivier :
> Ça demande de la technique et offre de nombreux avantages mais enlève une bonne part de folie, d'art et d'originalité.
Je ne pense pas que le rythme vertical ait un rapport quelconque avec la créativité, ça ajoute forcément des contraintes mais on peut s'exprimer avec autant d'originalité. Je demande à voir un cas où c'est clairement restrictif.
> Juste en passant, introduire ton article par la déception au sujet du CSSR, c'est plutôt marrant et me laisse à penser que tu viens de découvrir le sujet et l'applique à tout ce que tu vois sans te demander si ce principe doit être appliqué partout.
Je passerais sur cette réflexion pour manque d'objectivité :).
Je reconnais à la relecture que l'intro fait un peu donneur de leçon et j'aime pas du tout ça, il ne faut voir ici que des conseils et en aucun cas un manuel.
> Si certes il reste possible de faire créatif avec les principes du rythme vertical, ça n'a rien d'une obligation et ne devrait être réservé qu'au site fournis en texte.
Je distingue deux types de sites : les informatifs et les applicatifs. Je ne vois pas pourquoi une application ne pourrait pas être aussi esthétique qu'un site présentant du contenu avec un rythme vertical.
> On peut alors se poser une question :
> Appliquer les principes de l'imprimerie au Web est-il un choix cohérent ?
Voila une vraie question. En tout cas le moins que l'on puisse dire c'est que c'est à la mode car on va de plus en plus vers des designs épurés pour lesquels de telles notions sont plus importantes (enfin disons qu'on y fait davantage attention). Les principes de l'imprimerie héritent d'une expérience de plusieurs siècles, tout comme ceux qui régissent la typographie donc il est toujours intéressant de se pencher sur ce qu'on fait nos aînés.
Après je suis d'accord sur le fait que toutes les règles ne s'appliquent pas au web et qu'il faut savoir faire la part des choses. Mais en ce qui concerne le rythme vertical, je trouve ça sensé et bénéfique. Chacun est ensuite libre de l'appliquer ou pas ;).
> Sur l'alignement justifié, je trouve qu'il améliore grandement la lisibilité au contraire de ce que tu dis, mais là c'est peut être une histoire de préférence personnelle :)
Beaucoup pensent que ça fait plus pro mais je trouve que l'alignement à gauche permet réellement de gagner en lisibilité, ça doit être personnel en effet.
@giz404 :
Je suis en train de refaire mon design avec aussi, ça demande tout de même quelques balises en plus selon le design souhaité ce qui est dommage. Mais bon c'est l'éternel dilemme dans le choix d'un framework : faire des concessions pour gagner en qualité/temps/etc par ailleurs. En tout cas c'est intéressant.

jp.fox le 19/08/2007 :

Merci David pour ces quelques conseils.
J'ai essayé de les mettre en application sur mon blog et il me semble, en effet, qu'il est plus aéré et plus agréable à lire... mais comme toujours, en ce qui me concerne, j'ai du mal à me faire une idée du résultat quand je viens de relooker quelque chose que je vois tous les jours.

Olivier le 19/08/2007 :

À ce niveau, c'est même plus que de l'informatique. Merci.

Oncle Tom le 20/08/2007 :

Lecture très intéressante, je ne connaissais pas ce concept.
Ceci dit je trouve qu'un texte justifié et plus facile à lire qu'un texte aligné à gauche car moins chaotique.
Ceci dit moi qui me demandait comment bien choisir l'espacement entre mes différents blocs, me voilà servi. Mais j'ai quand même du mal à me dire que pour une bonne aération, une calculatrice me sera indispensable.
Serait-t-il possible d'avoir une liste des sites pour lesquels tu trouvais une bonne rythmique ?

David, biologeek le 20/08/2007 :

@Oncle Tom : Les sites liés dans cet article intègrent tout ou partie de cette notion de rythme vertical, à noter aussi la liste des sites sur la homepage du projet BluePrint (partie Credits).

jp.fox le 20/08/2007 :

BluePrint !!! Je connaissais pas ce truc... c'est vraiment bien foutu ! Je pense que le prochain site web sur lequel je vais travailler va y avoir droit :-)

Oncle Tom le 21/08/2007 :

Pardon je me suis mal exprimé, je parlais des sites participant au CSSR. Comme tu le dis, tu as été déçu de la qualité des sites mais peut-être que certains sortent du lot (ou pas) ?

David, biologeek le 21/08/2007 :

Ok, celui-ci s'en approche beaucoup : itsartist.net/ (vraiment dommage que les deux colonnes centrales ne soient pas alignées verticalement) et www.gotocss3.com/ pourrait y arriver facilement.
Pour les autres, je n'ai pas vraiment retrouvé cette notion :/
Par contre j'aime bien ce qui a été fait avec l'image du header de hugolin.net/log/Interacti...

Benoit Sanier le 22/08/2007 :

Je découvre cette notion, je vais étudier ça :)

David, biologeek le 22/08/2007 :

@Benoit : bon courage et félicitations pour le design qui est pour moi le plus réussi de ce concours.

Florent V. le 22/08/2007 :

Bonjour David,
Je te rejoins sur l'importance du design du texte, souvent laissé de côté, notamment sur le Web français (les anglo-saxons y accordent sensiblement plus d'importance).
Ceci dit, je distinguerais deux choses:
- les dispositifs renforçant la lisibilité;
- les dispositifs renforçant la cohérence visuelle/l'harmonie.
Les premiers regroupent l'utilisation des blancs (marges, espacement entre les blocs de texte, espacement entre paragraphes...) mais aussi le choix d'une hauteur de ligne suffisante (en suivant la règle: plus une ligne de texte est longue, plus on a intérêt à avoir une hauteur de ligne importante).
Les deuxièmes comportent, entre autres, ce que tu appelles «rythme vertical». Il ne s'agit plus ici de fournir des repères visuels à l'œil pour la lecture d'un flot de texte donné, mais de faire correspondre les lignes de plusieurs flots de texte sur une même page.
Je trouve la notion intéressante, mais je dois avouer que son caractère indispensable ou même décisif ne m'apparait pas clairement.
Assurer cette correspondance ne me parait pas particulièrement important, du moment que l'on a travaillé le gris typographique pour offrir une bonne lisibilité et un confort global de lecture. Bien sûr, si on applique une image de fond dessinant une grille, l'aspect harmonieux saute aux yeux… mais est-ce une harmonie intrinsèque ou bien est-ce dû à la présence de la grille?
Quoi qu'il en soit, c'est peut-être un plus intéressant. Il faudrait que je teste diverses options pour voir ce que ça donne.
Cependant, la difficulté technique — contournable, mais potentiellement couteuse en temps — n'incite pas particulièrement à assurer cet aspect, si les gains espérés sont faibles.

Un Electron Libre... le 25/08/2007 :

Notes de retour de vacances

Archlinux a mis à jour ses iso sous une version 2007.08. On ne peut pas vraiment parler de mise à jour ou de nouvelle version dans la mesure où un pacman -Syu met son système à jour vers les dernières versions dites stables. Cela correspond plus

Pierre le 25/08/2007 :

« Mais il y a maintenant encore mieux avec l'arrivée de BluePrint, le framework CSS qui se soucie un peu de la typographie, et qui depuis la version 0.4 est enfin en em ce qui décuple son intérêt ! »
À peine intégrés, aussitôt rejetés : la prochaine version, la 0.5, sera en pixels ou ne sera pas, d'après son créateur (la citation suivante est issue de la mailing list du projet) :
« We're going back to pixels for the fonts and baseline. Using em's
turned out to brake it in more browsers than we're comfortable with,
so until, we get the em's working properly, pixels it is. »
(le sujet entier est disponible ici : tinyurl.com/334jdc )
Néanmoins, c'est vrai que ce framework est bien pratique, notamment dans sa gestion des colonnes et de la typographie. Ça me plaît beaucoup, et ça permet de mettre en place rapidement des designs clairs et bien formés... Reste à voir comment va évoluer le bidule !

David, biologeek le 25/08/2007 :

@Florent :
> Je trouve la notion intéressante, mais je dois avouer que son caractère indispensable ou même décisif ne m'apparait pas clairement.
Ça dépend sûrement de la sensibilité de chacun, je trouve que ça rend le design plus « posé », professionnel mais je comprends que ça ne plaise pas à tout le monde. Merci pour ton commentaire réfléchi et pertinent.
@Pierre : argh. Bon du coup je me suis abonné à la mailing-list pour suivre ça de plus près. L'implémentation des specs CSS dans les navigateurs c'est vraiment la galère... en tout cas merci de m'avoir averti, je garde une copie de la 0.4 ;-).

Benjamin D.C. le 31/08/2007 :

"Ok, celui-ci s'en approche beaucoup : itsartist.net/"
-> Ouf, je suis épargné, j'ai failli hurler en lisant l'intro... :D

Domi le 04/09/2007 :

Honnètement je n'ai pas tout compris.
Lecture trop rapide sans doute.
...Ce petit mot pour parler de 2 hérésies dans le monde du "blog bien pensant respectueux des normes" :
-1-
Je trouve que lels liens devraient ouvrir dans une nouvelle fenêtre OU ALORS préciser avec un petit symbole qu'on va être éjecté du site au risque de ne pas y pouvoir y revenir ensuite.
-2-
Idem pour les articles qui gagneraient à être "dépliés" à la mode DHTML pour rester dans la page.
Bon ; je vais me faire incendier et je suis peut-être hors sujet ?

Jérôme V. le 04/09/2007 :

David, je me suis un peu intéressé au phénomène, mais seulement un petit peu malheureusement.
Serait-il possible de consacrer quelques minutes de ton temps pour me dire si c'est plutôt bien parti concernant code04, ou si cela nécessite du boulot, auquel cas je m'y mettrais plus encore :)
En te remerciant !
(Et si tu considère cette demande comme un culot osé et mal venu, je m'en excuse, et oublie de suite.)

David, biologeek le 04/09/2007 :

@Domi :
> Honnêtement je n'ai pas tout compris.
C'est vrai que j'ai rédigé ce billet un peu rapidement et je n'ai peut-être pas pris le temps de bien tout décrire, c'est la grosse difficulté lorsqu'on essaye de vulgariser un sujet : oublier que l'on sait déjà tout ça. Je ferais davantage attention la prochaine fois car j'ai déjà eu la remarque à propos de ce billet.
> je vais me faire incendier et je suis peut-être hors sujet ?
Incendier, définitivement non, les commentaires sont faits pour confronter des idées non ? Si tout le monde est d'accord c'est peu enrichissant :-).
Hors-sujet, un peu, je pense que les remarques auraient eues plus d'intérêt sur ce billet : www.biologeek.com/journal...
Mais bon passons dans le vif du sujet :
> Je trouve que les liens devraient ouvrir dans une nouvelle fenêtre OU ALORS préciser avec un petit symbole qu'on va être éjecté du site au risque de ne pas y pouvoir y revenir ensuite.
C'est une bonne pratique web de ne pas ouvrir une nouvelle fenêtre pour conserver la possibilité de revenir avec le bouton « Précédent » du navigateur. Au sujet du petit symbole, la petite feuille décrite en page d'accueil permet d'identifier les liens sortants (avec un navigateur moderne). Le problème c'est que DotClear n'ajoute pas le chemin absolu dans les fils RSS alors je mets généralement l'adresse absolue dans mes billets donc la différence est moins nette... je vais essayer de régler ce point.
> Idem pour les articles qui gagneraient à être "dépliés" à la mode DHTML pour rester dans la page.
Il y a plusieurs écoles à ce sujet, on m'a récemment fait la remarque (un utilisateur débutant) qu'une page avec du JavaScript est déroutante car on est habitué à ce que la page se recharge lorsqu'on clic sur un lien...
Personnellement je n'aime pas trop car je préfère ouvrir de nombreux onglets à partir d'une page d'accueil et y retourner lorsque j'ai le temps.
Je vais réfléchir à un compromis.

David, biologeek le 07/09/2007 :

@Jérôme V. :
> (Et si tu considère cette demande comme un culot osé et mal venu, je m'en excuse, et oublie de suite.)
Bon ok, j'oublie :D
Plus sérieusement, c'est avec ce type de commentaire que je sens que ce blog prend la mauvaise voie, celle de la grosse tête. Merci pour ce rappel à l'ordre (pas forcément prémédité ;-)), je tiens à rappeler que je ne suis un gourou de rien du tout et surtout pas en design donc mes remarques sont à prendre avec des pincettes.
Mais repassons au site, au design très apple-ant !
Au niveau du rythme vertical, rien à redire. La taille de la police est un poil petite pour moi et ça manque peut-être un peu de contraste parfois mais ça dépend aussi de la luminosité des écrans, etc. Dommage d'avoir mis des liens avec juste « suite » il vaut mieux mettre un titre plus explicité (niveau ergonomie + référencement). Je ne suis pas fan du menu dans la sidebar qui apparait au survol mais ça dépend peut-être du public visé, j'ai peur que les visiteurs passent à côté.
Sinon j'aime beaucoup la simplicité de la colonne unique et la lisibilité, c'est tellement reposant quand on arrive d'un site plein de widgets !

fky le 21/09/2007 :

Ne serait-on pas en train de réinventer les règles de mise en page en vigueur depuis des siècles pour la publication papier?

jerome le 25/09/2007 :

Article très intéressant ! les commentaire aussi...
Je suis d'accord pour dire que les règles typographiques ainsi que celles établies depuis fort longtemps par l'imprimerie peuvent toujours être d'actualité. Il serait prétentieux de les nier.
En revanche, si l'on peut aujourd'hui me montrer qu'elles sont devenues inutiles, je suis prêt à écouter et voir toute argumentation avec preuve visuelle à l'appui.
Certes, le support sur le web est différent ; on l'aura remarqué. Mais il s'agit toujours d'images, de textes - les sites en flash complexes sont à mettre dans une catégorie à part... encore que certaines logiques visuelles restent les mêmes, comme de la photo à la vidéo.
"Appliquer les principes de l'imprimerie au Web est-il un choix cohérent ?
Clairement non en ce qui concerne l'aspect paginé de l'imprimerie face à l'infini de la page Web."
Quand au format, contrairement à ce que dit Olivier (d'alsacréation), je ne pense pas qu'il soit infini sur le web.
Il est d'abord contraint par les propres limites de chaque écran. Et si chaque résolution est différente, on s'accorde à mettre quelques limites là aussi, de manière à ce que tout le monde puisse accéder à un contenu.
Certes on peut penser que les contraintes limitent la créativité en ce sens qu'elles empêchent l'imagination de s'épanouir. Mais à quoi mène l'imagination pour l'imagination si elle n'est pas organisée et cohérente ? Il s'agit alors plus d'une démarche artistique que issue de la communication. Je ne me pencherai pas sur ce thème...
On en revient encore à cette fameuse "ce qui se conçoit bien s'énonce clairement". Que ce soit pour du texte ou de la composition visuelle, photo, print ou web, notre esprit est bien "contraint" d'une manière ou d'une autre d'organiser des éléments.
Enfin, contrairement à David, je terminerai par le concours d'alsacréations.
Très bonne initiative ! que je ne connaissais d'ailleurs pas.
Mais je suis malheureusement d'accord avec l'auteur de cet article pour dire que les réalisations n'étaient pas de grande qualité. Je suis certain qu'avec le temps, les réalisations françaises égaleront voire dépasseront certaines créations outre-manche. Ce n'est aujourd'hui pas le cas.
Je suis aussi particulièrement étonné du gagnant...
Une réalisation que je ne trouve pas particulièment aérée, ni satisfaisante d'un point de vue ergonomique, malgré un graphisme très réussi.
Cela montre deux compétences différentes. L'auteur de ce site est particulièrement doué pour le graphisme et non pour l'ergonomie du web...

David, biologeek le 26/09/2007 :

@jerome :
> Article très intéressant ! les commentaire aussi...
Merci, ton commentaire vient parfaitement compléter l'ensemble ;-).

Sedat le 20/12/2009 :

merci

kupow le 19/10/2010 :

Mais pourquoi quand j'essaie d'appliquer ces règles à mes paragraphes en comic sans ça rend pas pareil?