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 :
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 :-).
26 Commentaires
"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 :-)
1 | Damien B, le 29 August 2008 à 03h
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 !
2 | loïc m., le 29 August 2008 à 07h
Je suis fan !!
Juste ce qu'il faut en terme d'habillage et de couleurs, et toujours très lisible.
3 | giz404, le 29 August 2008 à 08h
Très joli!!beau travail!
4 | Thomasc, le 29 August 2008 à 08h
@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 ;-)
5 | David, biologeek, le 29 August 2008 à 09h
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;}”
6 | Yoan, le 29 August 2008 à 09h
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.
7 | giz404, le 29 August 2008 à 10h
Oui, c'est assez réussi, je trouve. Bravo !
8 | didier, le 29 August 2008 à 10h
Très très très très beau (o:
9 | Oum, le 29 August 2008 à 11h
Dommage de couper aussi abruptement le corps du billet des commentaires associés, sinon c'est très réussi, félicitations :)
10 | NiKo, le 29 August 2008 à 12h
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 :-)
11 | NiCoS, le 29 August 2008 à 13h
" 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 :)
12 | Damien B, le 29 August 2008 à 13h
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 !?
13 | Louis, le 29 August 2008 à 13h
J’appuie également les deux remarques concernant la séparation avant les commentaires, sinon pour tout le reste j'apprécie beaucoup, beau boulot!
14 | Mihai, le 29 August 2008 à 14h
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.
15 | David, biologeek, le 29 August 2008 à 15h
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
16 | bruno bichet, le 29 August 2008 à 19h
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.
17 | Louis, le 29 August 2008 à 20h
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
18 | Sleeper, le 30 August 2008 à 10h
@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...
19 | David, biologeek, le 30 August 2008 à 11h
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.
20 | Louis, le 31 August 2008 à 01h
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) ?!?
21 | Jean-Philippe Monette, le 31 August 2008 à 17h
@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...) ?
22 | NiCoS, le 2 September 2008 à 09h
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
23 | Benjamin, le 8 September 2008 à 15h
@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 !
24 | David, biologeek, le 8 September 2008 à 22h
Joli graphisme, j'aime beaucoup le logo.
25 | Yoolight, le 30 September 2008 à 13h
Joli design, belle réussite,
Bravo au designer.
26 | Armetiz, le 1 October 2008 à 22h
Ajouter un commentaire