davidbgk
/
larlet-fr-david

<!doctype html>
<html lang=fr>
<head>
  <!-- Always define the charset before the title -->
  <meta charset=utf-8>
  <title>Le printemps en avance sur biologeek ? — 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/20060125-le-printemps-en-avance-sur-biologeek">

</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">Le printemps en avance sur biologeek ?</h1>
    <article typeof="schema:BlogPosting">
      <div property="schema:articleBody">
        <img src="/static/david/biologeek/images/logos/redesign_biologeek.png" alt="vignette" style="float:left; margin: 0.5em 1em;" property="schema:thumbnailUrl" />
        <p>Voila qui ne va pas ravir <a href="http://jehaisleprintemps.net/">kNo'</a> mais les dunes ça commençait à bien faire :-)</p>

<p>J'ai donc décidé de faire un design un peu plus vert, joyeux. Mais avant de me cass^lever l'âme à tout fignoler j'aimerais avoir votre avis, après tout c'est vous qui lisez ce site donc un aperçu de l'accueil est disponible en attendant plus... ou pas. Je sais qu'avec <abbr title="Internet Explorer">IE</abbr> c'est pas très beau mais vous n'êtes que 16.55% à vous acharner avec ce navigateur obsolète sur ce site alors je dois vous avouer que j'ai un peu laissé tomber.</p>

<p>Avant que quelqu'un me le rappelle dans les commentaires, oui c'est fortement inspiré d'<a href="http://www.csszengarden.com/tr/francais/?cssfile=/184/184.css&amp;page=0">un des jardins</a> et oui j'ai eu l'accord de l'auteur (c'est ça de pas être très doué en graphisme...).</p>

<p><strong>[edit]</strong>&nbsp;: rhâ j'ai oublié de préciser pleins de trucs :)</p>

<ul>
<li>le but du footer en bas est d'être présent sur l'ensemble des pages du site c'est un peu la raison pour laquelle il est assez condensé.</li>
<li>est-ce que la taille du texte vous convient&nbsp;? Sinon après combien de ctrl +/- vous préférez&nbsp;?</li>
<li>merci pour vos premiers commentaires ça fait plaisir, je vais y répondre.</li>
</ul>
      </div>
    </article>
    <footer>
      <h6 property="schema:datePublished">— 25/01/2006</h6>
    </footer>
  </section>
  <section>
    <div>
      <h3>Articles peut-être en rapport</h3>
      <ul>
        <li><a href="/david/biologeek/archives/20060213-adieu-les-dunes/" title="Accès à Adieu les dunes...">Adieu les dunes...</a></li>
        <li><a href="/david/biologeek/archives/20070819-l-importance-du-rythme-vertical-en-design-css/" title="Accès à ★ L&#39;importance du rythme vertical en design CSS">★ L&#39;importance du rythme vertical en design CSS</a></li>
        <li><a href="/david/biologeek/archives/20070522-des-css-de-qualite/" title="Accès à ★ Des CSS de qualité">★ Des CSS de qualité</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">Olivier</span> le <span class="comment-date" property="schema:commentTime">25/01/2006</span> :
    </p>
    <div class="comment-content" property="schema:commentText">
        <p>Splendide !<br />
Certes c'est en grande partie due au travail de l'auteur original, mais on ne t'enlève pas le mérite de l'adaptation très réussie.<br />
<br />
Je trouve que c'est interessant d'adapter les thèmes du ZenGarden sur des sites réels, ça permet d'encore plus démocratiser la démarche je trouve.<br />
<br />
Je me pose des questions cependant sur les :first-letter en gras, je ne trouve pas ça très très beau ni très utile d'ailleurs (avis perso)<br />
<br />
La position de la boite &quot;commentaire&quot; en bas est discutable à mon avis, ça fait un peu &quot;posé là comme ça en attendant&quot;. Faire 3 &quot;boites&quot; (vert/blanc/vert) serait plus efficace je trouve. (la boite blanche étant implicite non détourée)<br />
<br />
La boite de citation est très réussi, peut-être une couleur de texte différente sur l'auteur de la citation par contre. Le guillemet est très chouette (j'ai toujours du mal à trouver un beau guillemet pour les citations !!).<br />
La citation en elle-même sur l'accueil comme ça, je suis pas fan, mais ça n'engage que moi :)<br />
<br />
Si j'ai d'autres remarques, je dirais ;) @+</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">25/01/2006</span> :
    </p>
    <div class="comment-content" property="schema:commentText">
        <p>Splendide !<br />
Certes c'est en grande partie due au travail de l'auteur original, mais on ne t'enlève pas le mérite de l'adaptation très réussie.<br />
<br />
Je trouve que c'est interessant d'adapter les thèmes du ZenGarden sur des sites réels, ça permet d'encore plus démocratiser la démarche je trouve.<br />
<br />
Je me pose des questions cependant sur les :first-letter en gras, je ne trouve pas ça très très beau ni très utile d'ailleurs (avis perso)<br />
<br />
La position de la boite &quot;commentaire&quot; en bas est discutable à mon avis, ça fait un peu &quot;posé là comme ça en attendant&quot;. Faire 3 &quot;boites&quot; (vert/blanc/vert) serait plus efficace je trouve. (la boite blanche étant implicite non détourée)<br />
<br />
La boite de citation est très réussi, peut-être une couleur de texte différente sur l'auteur de la citation par contre. Le guillemet est très chouette (j'ai toujours du mal à trouver un beau guillemet pour les citations !!).<br />
La citation en elle-même sur l'accueil comme ça, je suis pas fan, mais ça n'engage que moi :)<br />
<br />
Si j'ai d'autres remarques, je dirais ;) @+<br />
<br />
ahh si j'oubliais, le border: 1px dotted; sur la page active (en haut), je mettrais border-bottom simplement, ça fait un peu chargé là (surtout pour les pauvres IE-Users !)</p>
    </div>
</div>
<div class="comment" typeof="schema:UserComments">
    <p class="comment-meta">
        <span class="comment-author" property="schema:creator">neolao</span> le <span class="comment-date" property="schema:commentTime">25/01/2006</span> :
    </p>
    <div class="comment-content" property="schema:commentText">
        <p>j'aime bien ouais</p>
    </div>
</div>
<div class="comment" typeof="schema:UserComments">
    <p class="comment-meta">
        <span class="comment-author" property="schema:creator">NiKo</span> le <span class="comment-date" property="schema:commentTime">25/01/2006</span> :
    </p>
    <div class="comment-content" property="schema:commentText">
        <p>Classe !<br />
<br />
J'ai juste un peu de mal avec le footer (derniers billets / commentaires / best of) qui me semble trop dense et chargé à mon goût.<br />
<br />
Sinon c'est vraiment chouette :)</p>
    </div>
</div>
<div class="comment" typeof="schema:UserComments">
    <p class="comment-meta">
        <span class="comment-author" property="schema:creator">Bob</span> le <span class="comment-date" property="schema:commentTime">25/01/2006</span> :
    </p>
    <div class="comment-content" property="schema:commentText">
        <p>Magnifique, je vote pour !</p>
    </div>
</div>
<div class="comment" typeof="schema:UserComments">
    <p class="comment-meta">
        <span class="comment-author" property="schema:creator">zebob</span> le <span class="comment-date" property="schema:commentTime">25/01/2006</span> :
    </p>
    <div class="comment-content" property="schema:commentText">
        <p>Je suis relativement d'accord avec Niko sur le footer, un peu chargé et il me semblerait plus judicieux que la liste des derniers billets soit visibles au début de la page, pour donner soit une idée du contenu aux nouveaux arrivants, soit un coup d'oeil rapide pour les habitués.<br />
Je metterais un poil d'espace en plus autour du titre Biologeek aussi. Ca me parait un peu tassé.<br />
Sinon le choix de ce vert est vraiment très beau, magnifique dégradé.</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/01/2006</span> :
    </p>
    <div class="comment-content" property="schema:commentText">
        <p>J'aime beaucoup ces couleurs ! C'est vrai que ça change du mélange orangé/sable/marron ; ça fait plus frais, comme on dit dans la capitale :)<br />
<br />
Chouette nouveau thème en tout cas !<br />
<br />
Sinon, pour faire dans le constructif, je dirais comme NiKo que ça fait un poil boxon en bas, mais autrement c'est chouette !</p>
    </div>
</div>
<div class="comment" typeof="schema:UserComments">
    <p class="comment-meta">
        <span class="comment-author" property="schema:creator">Omnisilver</span> le <span class="comment-date" property="schema:commentTime">25/01/2006</span> :
    </p>
    <div class="comment-content" property="schema:commentText">
        <p>J'aime bien le thème aussi, la taille du texte est bonne. Par contre le footer est trop chargé j'ai l'impression.<br />
<br />
C'est possible un choix possible entre les deux thèmes ? Ca serait cool :-)</p>
    </div>
</div>
<div class="comment" typeof="schema:UserComments">
    <p class="comment-meta">
        <span class="comment-author" property="schema:creator">darkagonik</span> le <span class="comment-date" property="schema:commentTime">25/01/2006</span> :
    </p>
    <div class="comment-content" property="schema:commentText">
        <p>Très joli, j'aime bien aussi.<br />
Pour la taille du texte, je préfère en faisant 1 ctrl -,  voilà :-)</p>
    </div>
</div>
<div class="comment" typeof="schema:UserComments">
    <p class="comment-meta">
        <span class="comment-author" property="schema:creator">wildmary</span> le <span class="comment-date" property="schema:commentTime">25/01/2006</span> :
    </p>
    <div class="comment-content" property="schema:commentText">
        <p>splendide !<br />
j'ai une résolution 1280x960 et ça supporterait facilement une police un cran plus petite (comme l'actuelle, avec 1 ctrl- quoi), mais bon, c'est affaire de lisibilité et de goût...<br />
pour ce qui est du footer, je le verrais plutôt inversé avec la sidebar : les infos hébergeur/moteur sont plutôt accessoires et les lecteurs (du moins l'humble lectrice que je suis) recherchent plutôt les billets. Et comme Olivier, la boite &quot;commentaire&quot; a un peu l'air d'être là par hasard et de ne pas être à sa place...<br />
c'est vrai que c'est zen et frais, chapeau bas :)</p>
    </div>
</div>
<div class="comment" typeof="schema:UserComments">
    <p class="comment-meta">
        <span class="comment-author" property="schema:creator">S.F.</span> le <span class="comment-date" property="schema:commentTime">26/01/2006</span> :
    </p>
    <div class="comment-content" property="schema:commentText">
        <p>« Du déjà vu cent fois. »<br />
<br />
Première impression en direct lors du premier visionnage de la nouvelle maquette.</p>
    </div>
</div>
<div class="comment" typeof="schema:UserComments">
    <p class="comment-meta">
        <span class="comment-author" property="schema:creator">xave</span> le <span class="comment-date" property="schema:commentTime">26/01/2006</span> :
    </p>
    <div class="comment-content" property="schema:commentText">
        <p>C'ist bô. Un peu ... vaporeux, peut-être. Mais c'est bô.<br />
<br />
Perso, j'en profiterais pour retirer l'affichage des adresses mails des commentateurs, ou au moins pour prévenir qu'elles seront affichées.</p>
    </div>
</div>
<div class="comment" typeof="schema:UserComments">
    <p class="comment-meta">
        <span class="comment-author" property="schema:creator">Tonio</span> le <span class="comment-date" property="schema:commentTime">26/01/2006</span> :
    </p>
    <div class="comment-content" property="schema:commentText">
        <p>1 &quot;Ctrl&quot; + &quot;-&quot;, pour moi ;)</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">26/01/2006</span> :
    </p>
    <div class="comment-content" property="schema:commentText">
        <p>Vraiment bien.<br />
2 remarques constructives :<br />
- la couleur de fond de www.biologeek.com/css/img... est légèrement différente de celle du blockquote, ce qui fait qu'on voit les bords de l'image qui représente les guillemets. Idem pour le coin arrondi inférieur droit. En passant, pour faire du coin arrondi, il y a le css -moz-border-radius (seulement pour gecko)<br />
- pour le footer, je pense que l'impression &quot;condensée&quot; pourrait être modérée en ajoutant un peu d'espace avant et après la guirlande de feuilles.</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/01/2006</span> :
    </p>
    <div class="comment-content" property="schema:commentText">
        <p>Merci pour tous vos commentaires constructifs, j'ai essayé de faire un mix de toutes vos remarques :)<br />
<br />
Maintenant des réponses plus ciblées :<br />
@Olivier#1 :<br />
&gt; La citation en elle-même sur l'accueil comme ça, je suis pas fan, mais ça n'engage que moi :)<br />
On m'a fait la même réflexion par ailleurs, j'hésite encore.<br />
<br />
@NiKo &amp; co :<br />
&gt; J'ai juste un peu de mal avec le footer qui me semble trop dense et chargé à mon goût.<br />
Et maintenant ? J'ai enlevé le nom des catégories.<br />
<br />
@zebob &amp; wildmary:<br />
&gt; il me semblerait plus judicieux que la liste des derniers billets soit visibles au début de la page, pour donner soit une idée du contenu aux nouveaux arrivants<br />
Je sais plus si ce commentaire est arrivé avane l'édition du billet mais le footer va être sur toutes les pages du site et la sidebar va changer, c'est plus pour laisser une ouverture au lecteur qui arrive en pied de page.<br />
<br />
@Omnisilver :<br />
&gt; C'est possible un choix possible entre les deux thèmes ? Ca serait cool :-)<br />
Non pas prévu, ça ferait beaucoup de boulot car pas mal de choses vont changer.<br />
<br />
@S.F. :<br />
&gt; « Du déjà vu cent fois. »<br />
Argh, des exemples concrêts ou une simple impression ?<br />
<br />
@xave : <br />
&gt; Perso, j'en profiterais pour retirer l'affichage des adresses mails des commentateurs, ou au moins pour prévenir qu'elles seront affichées.<br />
Elles sont en partie encodées en hexa, mais je pourrais les supprimer oui.<br />
<br />
@Olivier#13 :<br />
&gt; la couleur de fond est légèrement différente de celle du blockquote<br />
Ah :/ j'ai optimisé les images hier mais je ne vois aucune différence sur mon écran... très embêtant ça, je vais voir ce que je peux faire.<br />
<br />
Globalement j'ai aéré le titre et j'ai légèrement réduit la police (mais je déteste avoir à faire un ctrl++ en arrivant sur un site...)</p>
    </div>
</div>
<div class="comment" typeof="schema:UserComments">
    <p class="comment-meta">
        <span class="comment-author" property="schema:creator">Xethorn</span> le <span class="comment-date" property="schema:commentTime">26/01/2006</span> :
    </p>
    <div class="comment-content" property="schema:commentText">
        <p>Dites donc !<br />
<br />
La différence entre les deux designs est flagrante, l'une fait très débutant, l'autre beaucoup plus professionnel. Enfin, il y a une marge entre les deux présentations qui reste conséquente. La nouvelle, très verte, mise beaucoup sur tout ce qui touche à la stylisation légère mais efficace (on est loin des designs graphiques de Maurice), néanmoins, l'ensemble conserve une sobriété élégante et une originalité flagrante.<br />
<br />
J'aime beaucoup le côté vert du design, la mise en forme, c'est dans l'ensemble très bien réussi. Il y a juste la taille du texte que je regrette, mais pour le reste, c'est du good job !<br />
<br />
Vivement son intégration ;)</p>
    </div>
</div>
<div class="comment" typeof="schema:UserComments">
    <p class="comment-meta">
        <span class="comment-author" property="schema:creator">Julot</span> le <span class="comment-date" property="schema:commentTime">30/01/2006</span> :
    </p>
    <div class="comment-content" property="schema:commentText">
        <p>Je trouve que tout en vert avec des feuilles et des fleurs de partout, ça fait un peu site de tisane contre la constipation .... :-P<br />
J'aimais bien les dunes perso ...</p>
    </div>
</div>
<div class="comment" typeof="schema:UserComments">
    <p class="comment-meta">
        <span class="comment-author" property="schema:creator">Tartopom</span> le <span class="comment-date" property="schema:commentTime">09/02/2006</span> :
    </p>
    <div class="comment-content" property="schema:commentText">
        <p>Très beau design je trouve, le vert est très rafraichissant. Par contre je le préfère avec encore un ctrl - moi ;).<br />
<br />
J'adore le fait que toute les tailles changent si on fait un ctrl + ou - (ça change de la plupart des sites en px avec juste la police en em).</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">09/02/2006</span> :
    </p>
    <div class="comment-content" property="schema:commentText">
        <p>Ouf enfin quelqu'un qui s'en rend compte \o/<br />
<br />
Merci pour les compliments.</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>