Enfin un design pour biologeek !

vignette

Je ne pensais pas il y a 4 mois que je mettrais autant de temps pour ajouter une feuille de style décente à ce site mais j'ai heureusement été aidé par Claire Agopian, graphiste et typographe de talent. Il est temps de faire un petit bilan sur cette refonte.

Design

Un mot sur le design pour commencer, je voulais rester dans la simplicité et la sobriété cette fois pour vraiment pouvoir rester concentré sur le contenu. C'est d'autant plus difficile qu'il faut essayer de transmettre une touche personnelle avec très peu d'éléments (il y a 3 images dans ce design !). Pour ces raisons, j'ai décidé de faire appel à une graphiste car j'avais depuis longtemps atteint mes limites et je suis très content du résultat, Claire a su parfaitement s'adapter aux idées que j'avais et c'était difficile car je me suis trouvé vraiment chiant !

J'ai essayé de respecter au mieux le design initial, j'espère ne pas avoir trop dénaturé le travail qui avait été effectué. Bon par contre j'ai décidé de ne plus me prendre la tête avec IE donc n'hésitez pas à me signaler si ça casse dans tous les coins.

Référencement

J'ai beaucoup de mal à voir si la modification des URL a influé sur mon référencement car j'en ai profité pour changer d'outil de statistique et à chaque outil les chiffres sont différents pouvant aller du simple au double, voire plus. Je trouve Mint plus pertinent en tout cas (peut-être car c'est celui qui comptabilise le moins de visiteurs !) et il est surtout non bloated avec tous ces trucs pour commercialiser/rentabiliser un site qui ne m'intéressent pas. Bon pour être tout à fait honnête, il n'y a que le flux RSS des referers qui m'intéresse vraiment (et qui serait faisable en 5 minutes à partir des logs) mais ça sera toujours ces données en moins dans la besace du grand G.

Avec toutes ces visites par mois, je suis vraiment content de voir que vous êtes aussi nombreux à lire mes péripéties de geek. Merci à vous pour vos commentaires pertinents (Damien et Yoan en tête) et vos encouragements (je t'ai pas oublié Xavier :p), même si je croule sous les mails ce qui me rend moins réactif parfois, ça fait toujours plaisir d'avoir des retours.

Évolutions

J'ai résisté à la tentation de passer en HTML5 pour cette fois-ci mais je garde ça sous le coude, j'aimerais ajouter le support d'OpenID aussi mais ça demande un peu de dev car je souhaite proposer des fonctionnalités avec (sinon ça sert pas à grand chose). Je suis pas encore passé sous Django 1.0 car j'ai pas eu le temps de terminer mon storage Django pour l'APINC.

J'ai retouché 2/3 détails aussi (le cache est enfin flushé, un subtil algo permet de mettre en avant les archives plus intéressantes, etc). Concernant les régressions, j'ai ajouté un petit footer dans les flux et ça m'énerve car normalement c'est dans <rights> et ça devrait y rester. Mais bon trop d'abus ces derniers temps...

Maintenant que c'est à peu près stabilisé ici, il est temps de passer à la suite et notamment au profil non professionnel que je dois mettre à jour depuis plus d'un an ! C'est toujours aussi difficile d'écrire sur soi :-).

Pour finir je serais au W3Café le 5 septembre et j'espère vous y retrouver nombreux !

[edit quelques heures après] : on m'a envoyé des captures et je me suis rappelé que certains OS avaient vraiment des soucis avec le lissage des polices (et les étoiles), voila ce que vous pourriez/devriez avoir :

Design 2008 de biologeek

C'est dans ces moments là que je me rends compte à quel point je suis chanceux de pouvoir bosser/geeker avec du bon matériel :-).

— 29/08/2008

Articles peut-être en rapport

Commentaires

Damien B le 29/08/2008 :

"J'ai résisté à la tentation de passer en HTML5 pour cette fois-ci mais je garde ça sous le coude"

Vas-y prends ton temps, on a encore quelques années avant d'avoir un navigateur HTML5 :-)

loïc m. le 29/08/2008 :

c'est moi où j'ai l'impression que les titres / liens des billets sont sans css ?

exemple avec :
<h2 class="post-title" id="enfin-un-design-pour-biologeek">
<a href="/biologeek,refonte/enfin-un-design-pour-biologeek/" title="Lire le billet intitulé Enfin un design pour biologeek !" rel="bookmark">Enfin un design pour biologeek !</a>
</h2>
présent dans la page http://www.biologeek.com/journal/

Sinon j'aime beaucoup les design sobre, simple et élégant.
Beau travail à l'artiste !

giz404 le 29/08/2008 :

Je suis fan !!

Juste ce qu'il faut en terme d'habillage et de couleurs, et toujours très lisible.

Thomasc le 29/08/2008 :

Très joli!!beau travail!

David, biologeek le 29/08/2008 :

@Damien B : mauvaise langue, il n'y a guère qu'IE8 qui est (déjà !) vraiment à la traîne à ce niveau non ? (cf. http://intertwingly.net/blog/2008/08/28/Improved-Namespace-Support)

@loïc m.: ces titres ne sont pas en lettres capitales chez toi ? Quel navigateur ?

@giz404 et Thomasc : merci, je transmet ;-)

Yoan le 29/08/2008 :

Joli, joli, je trouve cependant un peu dommage de couper aussi franchement le post de ses commentaires. Le module des billets contextuels est visuellement très fort.

Et en bonus une petite erreur ridicule soulevée par Opera :

“http://media.biologeek.com/css/screen.20080829.css
Invalid value for property: margin-right
Line 258:
#navigation li a.last {border: none; margin-right: none;}”

giz404 le 29/08/2008 :

Ah, j'ai trouvé un défaut tout de même. Je suis fan de la navigation au clavier à grand coups de [TAB]. Ben les items de menus ne s'illuminent pas comme lorsqu'on les survole à la souris.
Un petit coup de :focus devrait régler le problème.

didier le 29/08/2008 :

Oui, c'est assez réussi, je trouve. Bravo !

Oum le 29/08/2008 :

Très très très très beau (o:

NiKo le 29/08/2008 :

Dommage de couper aussi abruptement le corps du billet des commentaires associés, sinon c'est très réussi, félicitations :)

NiCoS le 29/08/2008 :

Je trouve que les liens en vert clair sur fond blanc dans le texte des billets sont parfois pénibles à lire (en tous cas sur le poste du bureau...). Sinon, très sympa pour le reste :-)

Damien B le 29/08/2008 :

" il n'y a guère qu'IE8 qui est (déjà !) vraiment à la traîne à ce niveau non ?"

Ben le support de "time", "datagrid", "datatemplate", "MessageChannel", WF2, "details", etc... me paraît un peu faible, quel que soit le navigateur :)

Louis le 29/08/2008 :

J'ai vu que tu traîne sur performance.survol.fr David, aussi je m'étonne que tu nous fasses 6 requêtes HTTP juste pour le JS. Parce que je comprend que les stats doivent être à part, mais tu as tout de même 4 fichiers JS que tu pourrais et devrais combiner.

Tu pourrais aussi combiner tes deux feuilles de style en une (http://nophysic.com/2008/04/21/plusieurs-medias-une-seule-feuille-de-style/), voire pousser à l'extrême (http://nophysic.com/2008/08/09/etude-de-performance-css-interne-ou-externe/).

Tu as aussi une 404 sur une image à l'heure ou j'écris, et tu devrais activer la compression gzip sur nombre de tes contenus.

Bon, il y a beaucoup à dire d'un point de vue performances, mais je m'arrête là. Plus d'info sur la page test de ton site (http://pagetest.patrickmeenan.com:8080/result/AKM/3/performance_optimization/).

J'espère t'avoir aidé :)

PS: pour l'amour de Dieu, peut-on savoir pourquoi l'HTML n'est pas accepté dans les commentaires sur un tel blog !?

Mihai le 29/08/2008 :

J’appuie également les deux remarques concernant la séparation avant les commentaires, sinon pour tout le reste j'apprécie beaucoup, beau boulot!

David, biologeek le 29/08/2008 :

Bon le visiteur est roi, devant le nombre de retours sur cette coupure, je vais déplacer ce bloc.

@Yoan : c'est corrigé, merci.

@giz404 : si tu as un patch c'est vraiment cool car je vois pas la fonctionnalité dont tu veux parler. J'utilise très rarement le clavier pour naviguer.

@NiCoS : oui j'ai longtemps hésité car effectivement niveau contraste c'est pas génial (sur la page des archives c'est encore pire). Une idée pour améliorer ça ? J'aimerais garder la couleur mais avec un background ça fait moins joli...

@Damien B : détails que tout cela :p

@Louis : en effet je fais pas plus que ça attention aux performances pour deux raisons :
* les statiques sont servis par l'APINC et j'ai pas un grand contrôle là-dessus, j'ai essayé à coup de .htaccess mais les solutions trouvées sur le net ne marchaient pas.
* le serveur sur lequel est hébergé ce site s'ennuie littéralement (style load average: 0.03, 0.02, 0.00).
Cela dit il y a effectivement des progrès à faire pour que ça n'influe pas sur l'expérience utilisateur et ta suggestion sur les js est tout à fait justifiée, je me suis pas pris la tête pour intégrer un script tout fait mais ça n'excuse rien. En revanche pour les css, je ne suis pas d'accord avec ces optimisations tant que ça ne devient pas critique (et c'est loin d'être le cas ici !). Il ne faut pas oublier qu'il faut que ça reste un plaisir pour le développeur ;-).
J'ai pas trouvé l'image en 404 par contre.

Concernant le HTML dans les commentaires, bof, j'en ai jamais ressenti le besoin (peut-être que Dieu oui et c'est la raison pour laquelle il ne commente pas ici ?). Restons simples.

@all : merci pour vos compliments, je les partage de ce pas.

bruno bichet le 29/08/2008 :

Si je n'avais pas pris le contre-pied de la sobriété pour mon nouveau design, je serai vraiment très jaloux du tien : très joli, très sobre et très classe :)

Par contre, qu'est-ce que ça manque de pubs ! :D

Louis le 29/08/2008 :

Autoriser l'HTML dans les commentaires me semble rentrer tout à fait dans le cadre des choses simples. Non parce que ma remarque initiale, si je l'ai faite, c'est parce qu'au moment où j'ai demandé l'aperçu de mon commentaire, j'ai découvert que tout mon joli formatage HTML qui enrichit la qualité de mon commentaire donnait une soupe imbuvable. J'ai du tout reprendre avec des parenthèses et des liens crades.

Pouvoir citer, faire des listes, des liens, et quelques autres outils dans ce genre, c'est nécessaire pour assurer des commentaires riches.

Ou alors tu prônes le kikoulôlisme et je n'ai rien compris.

Note : l'image 404 est lié dans la feuille de style spéciale IE. Par ailleurs, sur IE6, tout la mise en page est cassé chez moi.

Sleeper le 30/08/2008 :

Encore une fois je préfère l'ancien design du temps de Dotclear juste avant que le blog passe sous Django.

L'ancien logo était magnifique, celui-ci est fade comme les couleurs choisie en général.

C'était plaisant de lire des choses intéressantes sur un blog qui était gai à regarder avec des couleurs plus vivante, c'était moins plat.

Alors rester dans la sobriété pour ce concentrer sur contenu je suis pas sure là. Les articles ne sont plus mis en valeurs comme avant, snif.

Et oui les goûts et les couleurs...

Bonne journée

David, biologeek le 30/08/2008 :

@bruno bichet : merci et tu as raison de le souligner pour la pub, je trouve ça tellement reposant...

@Louis : je reste persuadé que l'on peut faire des commentaires riches de contenu sans pour autant avoir un formatage html, c'est le cas depuis le début ici et ça se passe plutôt bien. J'ai pas besoin de me souvenir quelle est la syntaxe pour les commentaires, c'est tout simple et ça permet de faire :
- des listes
- des liens : http://david.larlet.fr

Et même des citations :

> Par ailleurs, sur IE6, tout la mise en page est cassé chez moi.

Merci pour la css ie, ça m'a permis de me rendre compte que j'avais pas mis la bonne</boulet>. Du coup ça doit être beaucoup mieux maintenant ;-).

@Sleeper : il faut savoir oser changer. À chaque redesign il y a les contents et les moins contents et comme finalement la plupart des lecteurs lisent les billets d'un agrégateur...

Louis le 31/08/2008 :

J'ai l'impression d'entendre un utilisateur pc m'expliquer pourquoi mon mac n'est pas si bien que ça, parce qu'il peut faire "pareil" sur son pc. Il y a pareil et pareil.

Pour moi, entre la démonstration que tu fais au dessus et un formatage HTML, c'est le jour et la nuit. Maintenant si tu te complais avec cette syntaxe, je ne peux que le déplorer.

Jean-Philippe Monette le 31/08/2008 :

J'adore le nouveau design. Ça serait possible de mettre au choix le précédent précédent (avec les fleurs et tout le tralala) ?!?

NiCoS le 02/09/2008 :

@David : en faisant les liens un poil plus foncé ou avec une font un peu plus gr(a|o)sse (sans forcément tomber dans du gras...) ?

Benjamin le 08/09/2008 :

Je ne venais pas avant la refonte.
Je trouve ca réussi.

Au vue des commentaires,
Biologeek c'est le blog des utilisateurs !

Bonne continuation

David, biologeek le 08/09/2008 :

@Louis : elle me suffit.

@Jean-Philippe Monette : ça demande trop de boulot.

@NiCoS : j'ai essayé les deux mais ça ne marche pas :(

@Benjamin : soit le bienvenu ici !

Yoolight le 30/09/2008 :

Joli graphisme, j'aime beaucoup le logo.

Armetiz le 01/10/2008 :

Joli design, belle réussite,
Bravo au designer.

Razelgoul le 08/12/2010 :

Très sympa en tout cas. Bonne cohérence image/charte. Bravo à vous ;)