davidbgk
/
larlet-fr-david

<!doctype html>
<html lang=fr>
<head>
  <!-- Always define the charset before the title -->
  <meta charset=utf-8>
  <title>★ L&#39;importance du rythme vertical en design CSS — Biologeek — David Larlet</title>
  <!-- Define a viewport to mobile devices to use - telling the browser to assume that the page is as wide as the device (width=device-width) and setting the initial page zoom level to be 1 (initial-scale=1.0) -->
  <meta name="viewport" content="width=device-width, initial-scale=1"/>
  <!-- Fake favicon, to avoid extra request to the server -->
  <link rel="icon" href="data:;base64,iVBORw0KGgo=">
  <link type="application/atom+xml" rel="alternate" title="Feed" href="/david/log/" />
  <link rel="manifest" href="/manifest.json">
  
  <link rel="stylesheet" href="/static/david/css/larlet-david-_J6Rv.css" data-instant-track />
  
  <noscript>
    <style type="text/css">
      /* Otherwise fonts are loaded by JS for faster initial rendering. See scripts at the bottom. */
      body {
        font-family: 'EquityTextB', serif;
      }
      h1, h2, h3, h4, h5, h6, time, nav a, nav a:link, nav a:visited {
        font-family: 'EquityCapsB', sans-serif;
        font-variant: normal;
      }
    </style>
  </noscript>
  
  <!-- Canonical URL for SEO purposes -->
  <link rel="canonical" href="https://larlet.fr/david/biologeek/archives/20070819-l-importance-du-rythme-vertical-en-design-css">

</head>
<body>
  <div>
    
    <header>
      <nav>
        <p>
          <small>
            Je suis <a href="/david/" title="Profil public">David Larlet</a>, <a href="/david/pro/" title="Activité professionnelle">artisan</a> du web qui vous <a href="/david/pro/accompagnement/" title="Activité d’accompagnement">accompagne</a><span class="more-infos"> dans l’acquisition de savoirs pour concevoir des <a href="/david/pro/produits-essentiels/" title="Qu’est-ce qu’un produit essentiel ?">produits essentiels</a></span>. <span class="more-more-infos">Discutons ensemble d’une <a href="/david/pro/devis/" title="En savoir plus">non-demande de devis</a>.</span> Je partage ici mes <a href="/david/blog/" title="Expériences bienveillantes">réflexions</a> et <a href="/david/correspondances/2017/" title="Lettres hebdomadaires">correspondances</a>.
          </small>
        </p>
      </nav>
    </header>
    
    
  <section>
    <h1 property="schema:name">★ L&#39;importance du rythme vertical en design CSS</h1>
    <article typeof="schema:BlogPosting">
      <div property="schema:articleBody">
        <img src="/static/david/biologeek/images/logos/rythme_vertical.png" alt="vignette" style="float:left; margin: 0.5em 1em;" property="schema:thumbnailUrl" />
        <p>Franchement déçu par la qualité des <a href="http://forum.alsacreations.com/concours/cssr2007/fiche.php">sites participant au Concours Cascading Style Summer Refresh</a>, je trouve qu'il y a un problème récurrent chez les participants&nbsp;: il manque la notion de <strong>rythme vertical</strong> dont je n'avais pas parlé lors de mon précédent billet sur <a href="https://larlet.fr/david/biologeek/archives/20070522-des-css-de-qualite/">les CSS de qualité</a> mais qui a son importance. Je pense que cette lacune est en partie due à un manque de ressources francophones sur le sujet, il est temps d'y remédier. Ce billet n'est qu'une introduction car je manque de temps (et hop l'excuse pour ne pas avoir participé au concours ;-)) mais normalement les liens devraient vous permettre d'aller plus loin.</p>

<h2>Le Feng Shui du design web</h2>

<p>D'après Wikipédia&nbsp;:</p>

<blockquote><p>Le <a href="http://fr.wikipedia.org/wiki/Feng_shui">Feng shui</a> est un art chinois millénaire dont le but est d'harmoniser l'énergie (le Qi) d'un lieu de manière à favoriser la santé, le bien-être et la prospérité de ses occupants.</p></blockquote>

<p>Si je le rapproche ici du rythme vertical c'est qu'il <strong>procure exactement la même sensation d'harmonie et de stabilité à un site</strong>, on peut passer ainsi d'un design amateur à quelque chose de plus professionnel, le rythme vertical peut même parfois <a href="http://www.markboultondesign.com/">se suffire à lui-même</a>.</p>

<p>Mais de quoi parle-t-on concrètement&nbsp;?</p>

<p>C'est une notion ancienne qui vient de l'imprimerie et qui prend en compte <strong>l'alignement et l'esthétique typographique</strong> en dosant judicieusement la taille des lignes (font-size) et des interlignes (line-height) mais aussi des marges (margin et padding) afin d'obtenir un résultat agréable et régulier. On parle de rythme car c'est vraiment ce qui va donner sa dynamique à la page et retirer toute notion de cacophonie de tailles de polices et de marges inadéquates.</p>

<p>Arrêtons nous un instant sur un exemple pour bien visualiser ce dont on parle, celui donné par <a href="http://www.alistapart.com/articles/settingtypeontheweb">Wilson Miner dans Setting Type on the Web to a Baseline Grid</a>. Lorsque l'on analyse cette page&nbsp;:</p>

<p><a href="http://www.alistapart.com/d/settingtypeontheweb/example.html"><img src="/static/david/biologeek/images/rythme_vertical/exemple_ala.png" alt="Exemple d&#039;une page ayant un rythme vertical" style="display:block; margin:0 auto;" /></a></p>

<p>On constate qu'il y a une certaine cohérence entre les différents tailles et espacements au sein de la page, ce n'est ni anodin, ni du hasard et on peut s'en rendre compte en appliquant un fond à la page de la hauteur de la baseline&nbsp;:</p>

<p><a href="http://www.alistapart.com/d/settingtypeontheweb/example_grid.html"><img src="/static/david/biologeek/images/rythme_vertical/exemple_ala_grille.png" alt="Exemple d&#039;une page ayant un rythme vertical" style="display:block; margin:0 auto;" /></a></p>

<p>L'article de référence pour bien comprendre comment arriver à un tel résultat est pour moi celui de <a href="http://24ways.org/">24 ways</a> intitulé <a href="http://24ways.org/2006/compose-to-a-vertical-rhythm">Compose to a Vertical Rhythm</a>. Petite parenthèse, <strong>je recommande d'ailleurs vivement la lecture de ce site</strong> que j'ai découvert il n'y a pas si longtemps et que je trouve vraiment excellent, dommage que ce ne soit pas un 36 ways pour le coup&nbsp;!</p>

<p>Il peut aussi être intéressant d'avoir recours à l'article <a href="http://www.thenoodleincident.com/tutorials/typography/index.html">Sane CSS Sizes</a> si vous voulez vraiment comprendre l'enfer du rythme vertical appliqué aux différents navigateurs (c'est surtout <a href="http://www.thenoodleincident.com/tutorials/typography/template.html">le template final</a> qui est intéressant). L'article <a href="http://webtypography.net/Rhythm_and_Proportion/Vertical_Motion/2.2.2/">Add and delete vertical space in measured intervals</a> sur Web Typography est une bonne introduction aussi.</p>

<h2>Gardez le rythme&nbsp;!</h2>

<p>Il arrive parfois qu'une grande différence de tailles de polices concomitantes ne soit pas très esthétique (si l'on s'en tient à une même baseline pour toute la page) car la note va par exemple sembler démesurément espacée par rapport au corps de la page&nbsp;:</p>

<p><img src="/static/david/biologeek/images/rythme_vertical/markboulton_without_incremental_leading.png" alt="Exemple d&#039;une page ayant un rythme vertical disgracieux" style="display:block; margin:0 auto;" /></p>

<p>Mark Boulton dans son récent article intitulé <a href="http://www.markboulton.co.uk/journal/comments/incremental_leading/">Incremental leading</a> donne une solution élégante pour remédier à ce problème&nbsp;:</p>

<p><img src="/static/david/biologeek/images/rythme_vertical/markboulton_with_incremental_leading.png" alt="Exemple d&#039;une page ayant un rythme vertical ingénieux" style="display:block; margin:0 auto;" /></p>

<p>Il s'agit de revenir au rythme initial périodiquement toutes les x lignes. De cette façon, l'esthétique initiale du rythme est conservée et les notes ne paraissent pas inutilement étirées.</p>

<h2>Une solution clés en main</h2>

<p>Réaliser un design prenant en compte tous ces calculs est long et fastidieux (vous pouvez me croire, c'est ce que j'avais commencé à faire pour ma refonte et il faut une calculatrice pour chaque nouvelle mesure !). Heureusement, il existe des calculateurs qui vont vous permettre de simplifier ce processus&nbsp;:</p>

<ul>
<li><a href="http://topfunky.com/baseline-rhythm-calculator/">Baseline Rhythm Calculator</a></li>
<li><a href="http://drewish.com/tools/vertical-rhythm">CSS with vertical rhythm</a></li>
</ul>

<p>Mais <strong>il y a maintenant encore mieux</strong> avec l'arrivée de <a href="http://code.google.com/p/blueprintcss/">BluePrint, le framework CSS</a> qui se soucie un peu de la typographie, et qui <a href="http://bjorkoy.com/past/2007/8/11/release_blueprint_04/">depuis la version 0.4</a> est enfin en <em>em</em> ce qui décuple son intérêt&nbsp;! Je ne l'ai pas (encore) testé en conditions réelles mais ça semble vraiment être ce que j'attendais depuis si longtemps...</p>

<p>Le seul reproche que l'on pourrait lui faire est le manque de sémantique dans le nom des balises, mais <a href="http://www2.jeffcroft.com/blog/2007/aug/09/myth-content-and-presentation-separation/">Jeff Croft a déjà épilogué là-dessus</a> donc je vais m'abstenir (mais vous pouvez lire les commentaires). Après tout le nombre de classes n'est pas restreint en html alors si vous souhaitez ajouter des microformats ou autres en plus, libre à vous :-).</p>

<p>Une note personnelle pour finir, depuis que j'ai pris conscience de l'importance de ce rythme vertical, je ne peux m'empêcher d'y penser dès que je visite un site et je suis souvent choqué par le manque de considération de la typographie sur le web alors que <strong>c'est vraiment une composante essentielle à la beauté d'un site</strong>. Passer 3 jours sur Photoshop c'est bien mais avoir un site agréable à lire c'est mieux, je ne répéterais jamais assez que vos visiteurs viennent pour votre contenu. Tout cela étant dit, il faut vraiment que je m'occupe de redesigner ce site en prenant en compte ces remarques sinon ça fait un peu cordonnier mal chaussé.</p>

<p><strong>[edit du lendemain]</strong>&nbsp;: <a href="http://svay.com/">mauriz</a> me signale un <a href="http://robgoodlatte.com/2007/07/31/syncotype-your-baselines/">petit bookmarklet</a> bien pratique permettant d'afficher facilement une baseline sur n'importe quelle page. Exit les backgrounds exotiques.</p>
      </div>
    </article>
    <footer>
      <h6 property="schema:datePublished">— 19/08/2007</h6>
    </footer>
  </section>
  <section>
    <div>
      <h3>Articles peut-être en rapport</h3>
      <ul>
        <li><a href="/david/biologeek/archives/20080723-ipheedsorg-une-version-iphone-pour-votre-blog/" title="Accès à ★ iPheeds.org, une version iPhone pour votre blog">★ iPheeds.org, une version iPhone pour votre blog</a></li>
        <li><a href="/david/biologeek/archives/20080528-critique-du-livre-ergonomie-web/" title="Accès à Critique du livre Ergonomie Web">Critique du livre Ergonomie Web</a></li>
        <li><a href="/david/biologeek/archives/20071117-12-regles-d-ergonomie-web-par-amelie-boucher/" title="Accès à 12 règles d&#39;ergonomie web par Amélie Boucher">12 règles d&#39;ergonomie web par Amélie Boucher</a></li>
      </ul>
    </div>
  </section>
  <section>
    <div id="comments">
      <h3>Commentaires</h3>
      
<div class="comment" typeof="schema:UserComments">
    <p class="comment-meta">
        <span class="comment-author" property="schema:creator">Neovov</span> le <span class="comment-date" property="schema:commentTime">18/08/2007</span> :
    </p>
    <div class="comment-content" property="schema:commentText">
        <p>Très bon article, ça donne envie de s'y intéresser.<br />
<br />
Une petite question : la justification des paragraphes est-elle une sorte de &quot;rythme horizontal&quot; ?<br />
<br />
Il n'y a aucun paragraphe justifié dans les exemples que tu proposes. Suis-je le seul à tiquer sur ce détails ?</p>
    </div>
</div>
<div class="comment" typeof="schema:UserComments">
    <p class="comment-meta">
        <span class="comment-author" property="schema:creator">David, biologeek</span> le <span class="comment-date" property="schema:commentTime">18/08/2007</span> :
    </p>
    <div class="comment-content" property="schema:commentText">
        <p>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.</p>
    </div>
</div>
<div class="comment" typeof="schema:UserComments">
    <p class="comment-meta">
        <span class="comment-author" property="schema:creator">Erwan aka NaWer</span> le <span class="comment-date" property="schema:commentTime">18/08/2007</span> :
    </p>
    <div class="comment-content" property="schema:commentText">
        <p>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...</p>
    </div>
</div>
<div class="comment" typeof="schema:UserComments">
    <p class="comment-meta">
        <span class="comment-author" property="schema:creator">Soso</span> le <span class="comment-date" property="schema:commentTime">18/08/2007</span> :
    </p>
    <div class="comment-content" property="schema:commentText">
        <p>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.<br />
<br />
Ton site en est un parfait exemple ;)</p>
    </div>
</div>
<div class="comment" typeof="schema:UserComments">
    <p class="comment-meta">
        <span class="comment-author" property="schema:creator">David, biologeek</span> le <span class="comment-date" property="schema:commentTime">19/08/2007</span> :
    </p>
    <div class="comment-content" property="schema:commentText">
        <p>@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.<br />
<br />
@Soso :<br />
<br />
&gt; Ton site en est un parfait exemple ;)<br />
<br />
Non justement ! Il manque vraiment de rythme vertical... actuellement.</p>
    </div>
</div>
<div class="comment" typeof="schema:UserComments">
    <p class="comment-meta">
        <span class="comment-author" property="schema:creator">Olivier</span> le <span class="comment-date" property="schema:commentTime">19/08/2007</span> :
    </p>
    <div class="comment-content" property="schema:commentText">
        <p>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é.<br />
<br />
Ça demande de la technique et offre de nombreux avantages mais enlève une bonne part de folie, d'art et d'originalité.<br />
<br />
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.<br />
<br />
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).<br />
<br />
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.<br />
<br />
On peut alors se poser une question :<br />
Appliquer les principes de l'imprimerie au Web est-il un choix cohérent ?<br />
Clairement non en ce qui concerne l'aspect paginé de l'imprimerie face à l'infini de la page Web.<br />
<br />
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.<br />
<br />
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.<br />
<br />
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 :)<br />
<br />
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.</p>
    </div>
</div>
<div class="comment" typeof="schema:UserComments">
    <p class="comment-meta">
        <span class="comment-author" property="schema:creator">giz404</span> le <span class="comment-date" property="schema:commentTime">19/08/2007</span> :
    </p>
    <div class="comment-content" property="schema:commentText">
        <p>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)<br />
<br />
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...</p>
    </div>
</div>
<div class="comment" typeof="schema:UserComments">
    <p class="comment-meta">
        <span class="comment-author" property="schema:creator">David, biologeek</span> le <span class="comment-date" property="schema:commentTime">19/08/2007</span> :
    </p>
    <div class="comment-content" property="schema:commentText">
        <p>@Olivier :<br />
<br />
&gt; Ça demande de la technique et offre de nombreux avantages mais enlève une bonne part de folie, d'art et d'originalité.<br />
<br />
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.<br />
<br />
&gt; 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.<br />
<br />
Je passerais sur cette réflexion pour manque d'objectivité :).<br />
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.<br />
<br />
&gt; 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.<br />
<br />
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.<br />
<br />
&gt; On peut alors se poser une question :<br />
&gt; Appliquer les principes de l'imprimerie au Web est-il un choix cohérent ?<br />
<br />
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.<br />
<br />
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 ;).<br />
<br />
&gt; 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 :)<br />
<br />
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.<br />
<br />
@giz404 :<br />
<br />
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.<br />
</p>
    </div>
</div>
<div class="comment" typeof="schema:UserComments">
    <p class="comment-meta">
        <span class="comment-author" property="schema:creator">jp.fox</span> le <span class="comment-date" property="schema:commentTime">19/08/2007</span> :
    </p>
    <div class="comment-content" property="schema:commentText">
        <p>Merci David pour ces quelques conseils.<br />
<br />
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.</p>
    </div>
</div>
<div class="comment" typeof="schema:UserComments">
    <p class="comment-meta">
        <span class="comment-author" property="schema:creator">Olivier</span> le <span class="comment-date" property="schema:commentTime">19/08/2007</span> :
    </p>
    <div class="comment-content" property="schema:commentText">
        <p>À ce niveau, c'est même plus que de l'informatique. Merci.</p>
    </div>
</div>
<div class="comment" typeof="schema:UserComments">
    <p class="comment-meta">
        <span class="comment-author" property="schema:creator">Oncle Tom</span> le <span class="comment-date" property="schema:commentTime">20/08/2007</span> :
    </p>
    <div class="comment-content" property="schema:commentText">
        <p>Lecture très intéressante, je ne connaissais pas ce concept.<br />
Ceci dit je trouve qu'un texte justifié et plus facile à lire qu'un texte aligné à gauche car moins chaotique.<br />
<br />
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.<br />
<br />
Serait-t-il possible d'avoir une liste des sites pour lesquels tu trouvais une bonne rythmique ?</p>
    </div>
</div>
<div class="comment" typeof="schema:UserComments">
    <p class="comment-meta">
        <span class="comment-author" property="schema:creator">David, biologeek</span> le <span class="comment-date" property="schema:commentTime">20/08/2007</span> :
    </p>
    <div class="comment-content" property="schema:commentText">
        <p>@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).</p>
    </div>
</div>
<div class="comment" typeof="schema:UserComments">
    <p class="comment-meta">
        <span class="comment-author" property="schema:creator">jp.fox</span> le <span class="comment-date" property="schema:commentTime">20/08/2007</span> :
    </p>
    <div class="comment-content" property="schema:commentText">
        <p>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 :-)</p>
    </div>
</div>
<div class="comment" typeof="schema:UserComments">
    <p class="comment-meta">
        <span class="comment-author" property="schema:creator">Oncle Tom</span> le <span class="comment-date" property="schema:commentTime">21/08/2007</span> :
    </p>
    <div class="comment-content" property="schema:commentText">
        <p>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) ?</p>
    </div>
</div>
<div class="comment" typeof="schema:UserComments">
    <p class="comment-meta">
        <span class="comment-author" property="schema:creator">David, biologeek</span> le <span class="comment-date" property="schema:commentTime">21/08/2007</span> :
    </p>
    <div class="comment-content" property="schema:commentText">
        <p>Ok, celui-ci s'en approche beaucoup : <a href="http://itsartist.net/" title="http://itsartist.net/" rel="nofollow">itsartist.net/</a> (vraiment dommage que les deux colonnes centrales ne soient pas alignées verticalement) et <a href="http://www.gotocss3.com/" title="http://www.gotocss3.com/" rel="nofollow">www.gotocss3.com/</a> pourrait y arriver facilement. <br />
Pour les autres, je n'ai pas vraiment retrouvé cette notion :/<br />
<br />
Par contre j'aime bien ce qui a été fait avec l'image du header de <a href="http://hugolin.net/log/Interaction/SelectionnerApparence/?name=summer&amp;page_url=/log/2007/07/07/MiseAJour" title="http://hugolin.net/log/Interaction/SelectionnerApparence/?name=summer&amp;page_url=/log/2007/07/07/MiseAJour" rel="nofollow">hugolin.net/log/Interacti...</a><br />
</p>
    </div>
</div>
<div class="comment" typeof="schema:UserComments">
    <p class="comment-meta">
        <span class="comment-author" property="schema:creator">Benoit Sanier</span> le <span class="comment-date" property="schema:commentTime">22/08/2007</span> :
    </p>
    <div class="comment-content" property="schema:commentText">
        <p>Je découvre cette notion, je vais étudier ça :)</p>
    </div>
</div>
<div class="comment" typeof="schema:UserComments">
    <p class="comment-meta">
        <span class="comment-author" property="schema:creator">David, biologeek</span> le <span class="comment-date" property="schema:commentTime">22/08/2007</span> :
    </p>
    <div class="comment-content" property="schema:commentText">
        <p>@Benoit : bon courage et félicitations pour le design qui est pour moi le plus réussi de ce concours.</p>
    </div>
</div>
<div class="comment" typeof="schema:UserComments">
    <p class="comment-meta">
        <span class="comment-author" property="schema:creator">Florent V.</span> le <span class="comment-date" property="schema:commentTime">22/08/2007</span> :
    </p>
    <div class="comment-content" property="schema:commentText">
        <p>Bonjour David,<br />
<br />
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).<br />
<br />
Ceci dit, je distinguerais deux choses:<br />
- les dispositifs renforçant la lisibilité;<br />
- les dispositifs renforçant la cohérence visuelle/l'harmonie.<br />
<br />
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).<br />
<br />
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.<br />
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.<br />
<br />
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?<br />
<br />
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.<br />
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.</p>
    </div>
</div>
<div class="comment" typeof="schema:UserComments">
    <p class="comment-meta">
        <span class="comment-author" property="schema:creator">Un Electron Libre...</span> le <span class="comment-date" property="schema:commentTime">25/08/2007</span> :
    </p>
    <div class="comment-content" property="schema:commentText">
        <!-- TB -->
<p><strong>Notes de retour de vacances</strong></p>
<p>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</p>
    </div>
</div>
<div class="comment" typeof="schema:UserComments">
    <p class="comment-meta">
        <span class="comment-author" property="schema:creator">Pierre</span> le <span class="comment-date" property="schema:commentTime">25/08/2007</span> :
    </p>
    <div class="comment-content" property="schema:commentText">
        <p>« 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 ! »<br />
<br />
À 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) :<br />
« We're going back to pixels for the fonts and baseline. Using em's<br />
turned out to brake it in more browsers than we're comfortable with,<br />
so until, we get the em's working properly, pixels it is. »<br />
(le sujet entier est disponible ici : <a href="http://tinyurl.com/334jdc" title="http://tinyurl.com/334jdc" rel="nofollow">tinyurl.com/334jdc</a> )<br />
<br />
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 !</p>
    </div>
</div>
<div class="comment" typeof="schema:UserComments">
    <p class="comment-meta">
        <span class="comment-author" property="schema:creator">David, biologeek</span> le <span class="comment-date" property="schema:commentTime">25/08/2007</span> :
    </p>
    <div class="comment-content" property="schema:commentText">
        <p>@Florent : <br />
&gt; 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.<br />
<br />
Ç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.<br />
<br />
@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 ;-).</p>
    </div>
</div>
<div class="comment" typeof="schema:UserComments">
    <p class="comment-meta">
        <span class="comment-author" property="schema:creator">Benjamin D.C.</span> le <span class="comment-date" property="schema:commentTime">31/08/2007</span> :
    </p>
    <div class="comment-content" property="schema:commentText">
        <p>&quot;Ok, celui-ci s'en approche beaucoup : itsartist.net/&quot;<br />
<br />
-&gt; Ouf, je suis épargné, j'ai failli hurler en lisant l'intro... :D</p>
    </div>
</div>
<div class="comment" typeof="schema:UserComments">
    <p class="comment-meta">
        <span class="comment-author" property="schema:creator">Domi</span> le <span class="comment-date" property="schema:commentTime">04/09/2007</span> :
    </p>
    <div class="comment-content" property="schema:commentText">
        <p>Honnètement je n'ai pas tout compris.<br />
Lecture trop rapide sans doute.<br />
...Ce petit mot pour parler de 2 hérésies dans le monde du &quot;blog bien pensant respectueux des normes&quot; :<br />
-1-<br />
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.<br />
-2-<br />
Idem pour les articles qui gagneraient à être &quot;dépliés&quot; à la mode DHTML pour rester dans la page.<br />
<br />
Bon ; je vais me faire incendier et je suis peut-être hors sujet ?</p>
    </div>
</div>
<div class="comment" typeof="schema:UserComments">
    <p class="comment-meta">
        <span class="comment-author" property="schema:creator">Jérôme V.</span> le <span class="comment-date" property="schema:commentTime">04/09/2007</span> :
    </p>
    <div class="comment-content" property="schema:commentText">
        <p>David, je me suis un peu intéressé au phénomène, mais seulement un petit peu malheureusement.<br />
<br />
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 :)<br />
<br />
En te remerciant !<br />
<br />
(Et si tu considère cette demande comme un culot osé et mal venu, je m'en excuse, et oublie de suite.)</p>
    </div>
</div>
<div class="comment" typeof="schema:UserComments">
    <p class="comment-meta">
        <span class="comment-author" property="schema:creator">David, biologeek</span> le <span class="comment-date" property="schema:commentTime">04/09/2007</span> :
    </p>
    <div class="comment-content" property="schema:commentText">
        <p>@Domi :<br />
<br />
&gt; Honnêtement je n'ai pas tout compris.<br />
<br />
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.<br />
<br />
&gt; je vais me faire incendier et je suis peut-être hors sujet ?<br />
<br />
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 :-).<br />
<br />
Hors-sujet, un peu, je pense que les remarques auraient eues plus d'intérêt sur ce billet : <a href="https://larlet.fr/david/biologeek/archives/20070205-ergonomie-d-un-blog-analyse-des-reponses/" title="https://larlet.fr/david/biologeek/archives/20070205-ergonomie-d-un-blog-analyse-des-reponses/" rel="nofollow">www.biologeek.com/journal...</a><br />
<br />
Mais bon passons dans le vif du sujet :<br />
<br />
&gt; 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.<br />
<br />
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.<br />
<br />
&gt; Idem pour les articles qui gagneraient à être &quot;dépliés&quot; à la mode DHTML pour rester dans la page.<br />
<br />
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...<br />
<br />
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.<br />
<br />
Je vais réfléchir à un compromis.</p>
    </div>
</div>
<div class="comment" typeof="schema:UserComments">
    <p class="comment-meta">
        <span class="comment-author" property="schema:creator">David, biologeek</span> le <span class="comment-date" property="schema:commentTime">07/09/2007</span> :
    </p>
    <div class="comment-content" property="schema:commentText">
        <p>@Jérôme V. :<br />
<br />
&gt; (Et si tu considère cette demande comme un culot osé et mal venu, je m'en excuse, et oublie de suite.)<br />
<br />
Bon ok, j'oublie :D<br />
<br />
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.<br />
<br />
Mais repassons au site, au design très apple-ant !<br />
<br />
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é.<br />
<br />
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 !</p>
    </div>
</div>
<div class="comment" typeof="schema:UserComments">
    <p class="comment-meta">
        <span class="comment-author" property="schema:creator">fky</span> le <span class="comment-date" property="schema:commentTime">21/09/2007</span> :
    </p>
    <div class="comment-content" property="schema:commentText">
        <p>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?</p>
    </div>
</div>
<div class="comment" typeof="schema:UserComments">
    <p class="comment-meta">
        <span class="comment-author" property="schema:creator">jerome</span> le <span class="comment-date" property="schema:commentTime">25/09/2007</span> :
    </p>
    <div class="comment-content" property="schema:commentText">
        <p>Article très intéressant ! les commentaire aussi...<br />
<br />
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. <br />
<br />
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.<br />
<br />
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.<br />
<br />
<br />
&quot;Appliquer les principes de l'imprimerie au Web est-il un choix cohérent ?<br />
Clairement non en ce qui concerne l'aspect paginé de l'imprimerie face à l'infini de la page Web.&quot;<br />
<br />
Quand au format, contrairement à ce que dit Olivier (d'alsacréation), je ne pense pas qu'il soit infini sur le web. <br />
<br />
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. <br />
<br />
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...<br />
<br />
On en revient encore à cette fameuse &quot;ce qui se conçoit bien s'énonce clairement&quot;. Que ce soit pour du texte ou de la composition visuelle, photo, print ou web, notre esprit est bien &quot;contraint&quot; d'une manière ou d'une autre d'organiser des éléments. <br />
<br />
Enfin, contrairement à David, je terminerai par le concours d'alsacréations. <br />
Très bonne initiative ! que je ne connaissais d'ailleurs pas.<br />
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.<br />
<br />
Je suis aussi particulièrement étonné du gagnant...<br />
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. <br />
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... <br />
<br />
<br />
<br />
<br />
<br />
<br />
</p>
    </div>
</div>
<div class="comment" typeof="schema:UserComments">
    <p class="comment-meta">
        <span class="comment-author" property="schema:creator">David, biologeek</span> le <span class="comment-date" property="schema:commentTime">26/09/2007</span> :
    </p>
    <div class="comment-content" property="schema:commentText">
        <p>@jerome : <br />
<br />
&gt; Article très intéressant ! les commentaire aussi...<br />
<br />
Merci, ton commentaire vient parfaitement compléter l'ensemble ;-).</p>
    </div>
</div>
<div class="comment" typeof="schema:UserComments">
    <p class="comment-meta">
        <span class="comment-author" property="schema:creator">Sedat</span> le <span class="comment-date" property="schema:commentTime">20/12/2009</span> :
    </p>
    <div class="comment-content" property="schema:commentText">
        <p>merci</p>
    </div>
</div>
<div class="comment" typeof="schema:UserComments">
    <p class="comment-meta">
        <span class="comment-author" property="schema:creator">kupow</span> le <span class="comment-date" property="schema:commentTime">19/10/2010</span> :
    </p>
    <div class="comment-content" property="schema:commentText">
        <p>Mais pourquoi quand j&#39;essaie d&#39;appliquer ces règles à mes paragraphes en comic sans ça rend pas pareil?</p>
    </div>
</div>

    </div>
  </section>

    
    <footer>
      <nav>
        <p>
          <small>
            Je réponds quasiment toujours aux <a href="m&#x61;ilto:d&#x61;vid%40l&#x61;rlet&#46;fr" title="Envoyer un email">emails</a> (<a href="/david/signature/" title="Ma signature actuelle avec possibilité de chiffrement">signés</a>) et vous pouvez me rencontrer à Montréal. <span class="more-infos">N’hésitez pas à <a href="/david/log/" title="Être tenu informé des mises à jour">vous abonner</a> pour être tenu informé des publications récentes.</span>
          </small>
        </p>
      </nav>
    </footer>
    
  </div>
  
  <script src="/static/david/js/larlet-david-3ee43f.js" data-no-instant></script>
  
  <script data-no-instant>InstantClick.init()</script>
  
</body>
</html>