Voila, la nouvelle version de 2803 est en ligne depuis hier soir. Pour les spécialistes de la validation sachez que si je désactive le script de pub (smartadserver) le template passe haut la main la validation XHTML (mais génère 11 erreurs lorsqu’il est intégré dans le header…). Pour ma part je pense avoir répondu à mon propre objectif.
Sinon il y a pas mal de nouveautés que je vais lister en vrac en ci-dessous :
-Passage en deux colonnes (il faut bien être à contre courant des fois)
-Utilisation massive de la police Helvetica
-Intégration de la notion de tabs dans la sidebar pour gagner de la place et cacher des éléments secondaires grâce à Jquery
-Optimisation du blog en général pour une intégration plus propre sur les autres blogs 2803
-Nouvelle fonctionnalité liée aux “top des contributeurs” de chaque semaine avec 7 backlinks en dur (attention je veille sur la nature des commentaires et leur qualité)
-Le contenu des derniers commentaires apparait maintenant en sidebar
-La pub quitte la zone de contenu et part en sidebar
-Apparition de quelques images en provenance d’un plugin utilisant mon compte flickr pour animer un peu le design
-Intégration des tags, des archives dans la sidebar
-Alternance de couleur dans les commentaires et mise en valeur des commentaires de l’auteur avec une petite image à droite
-Les liens des blogs 2803 partent en haut de la page…
Bref, pas mal de modifications pour plus de lisibilité, de clarté et d’espace… J’espère que vous apprécierez! Notez aussi au passage que je profite de l’absence de tout le monde pour cause de web3 pour lancer cette version dans le plus grand calme!
Si vous avez des remarques je les prends avec plaisir…
56 Comments
Le logo en roll-over ne s’affiche pas de la même façon sous IE6 et sous FireFox (ligne grise sous le logo sous FF, fond du logo entièrement gris sous IE)
En effet c’est peut être lié au fameux bug du png transparent sous IE6 que j’ai essayé de limiter au maximum… Mais il y a un vieux roll-over un peu moche je l’avoue.
Update : Roll Over nickel sous FF maintenant!
Et une balise “alat” en guise de balise “alt” pour le logo French20, ce n’est pas difficile à corriger.
Personnellement je code en XHTML 1.0 Strict également, et ce sont les éléments extérieurs (frame Google pour la pub, frame Dailymotion pour les vidéos) qui rajoutent du code invalide.
Bravo pour cette nouvelle version en tout cas.
Je viens de vider le cache et ainsi la coquille sur le “alt” n’apparait plus maintenant
En tout cas merci car cela n’est pas mon métier de coder en XHTML 
C’est peut être fait exprès mais le lien en minuscule de chez minuscule en haut de la bannière à gauche fait bizarre
Sinon j’aime beaucoup, je viens, après deux minutes, de m’apercevoir qu’il y avait du gris autour de la sidebar, ça ne se voit pas beaucoup mais c’est certainement voulu 
Un dernier petit truc, peut-être traduire en FR le formulaire des commentaires et les espaces d’affichages des commentaires “Posted December 12, 2007 at 8:23 am | Permalink” ?
Sinon good job, sobre, rapide à charger et pas trop d’images
Pour le lien en haut c’est le H1 de la page et je ne voulais pas le virer donc je l’ai réduit au max et je lui ai donné la couleur du header (il faut que je vire le roll-over aussi d’ailleurs).
Yes je dois traduire le reste, un jour peut être
Merci pour le retour!
Pareil que sur Design 2803…
Je préfère vraiment!
Ca charge plus vite d’ailleurs.
Et puis la validation n’est pas toujours une référence.
L’Education Nationale elle-même ne possède pas que des sites valides… Ca devrait pourtant être une référence en matière d’accessibilité.
Bref c’est vraiment sympa. Surtout le système d’onglets sur le côté! C’est moins surchargé du coup.
Par contre pourquoi ne pas traduire intégralement?
Aurélien pour le chargement j’ai aussi un peu rajouté des trucs sur le serveur de 2803 histoire d’optimiser les caches des navigateurs (Gzip, Etags…).
J’aime bien, c’est aéré et agréable
Sous Safari, quand on arrive en bas de la page, il y a un espace vide d’au moins 50px (à partir de RSS / RSS commentaires)… je trouve que ça fait assez bizarre.
Sinon, pour le reste, c’est assez joli et pas trop mal.
A+
Pour un non spécialiste, je trouve ça vraiment beau, doux et ça incite à la flânerie sur le blog…
Ah le voici enfin t’as été rapide ! Très blanc et bon choix pour Helvetica
Il manque une baseline maintenant je trouve.
Pour le h1 du header, un display:none devrait faire l’affaire. Couplé à un font-size:0 pour s’assurer du résultat partout.
Le résultat est vraiment très réussi. C’est pâle, ça aurait pu être froid, mais ce n’est pas du tout l’impression générale. Well done!
Quelques remarques sur des petits détails :
- Le compteur Feedburner semble un peu étriqué au contact du header (et en fait, je ne vois pas très bien pourquoi il est là…)
- Les différentes rubriques de la sidebar auraient mérité un peu plus d’espace les unes par rapport aux autres, et les titres par rapport aux contenus. ça manque d’air surtout dans la bloc “Abonnement et recherche”, “Quelques photos” et “Derniers commentaires”
- La petite taille de typo n’est pas lissée sous FF (mac). Dommage, mais là je crois que tu peux pas y faire grand chose.
Voilà, bravo pour cette nouvelle version, efficace puisque j’ai déjà oublié la précédante ;p
C’est plus clair. C’est mieux. Le header pourrait être amélioré…
Pas mal le coup des onglets.
Magnifique !
J’adore les tab sur la colonne de droite. Ca range et donne accès rapidement aux infos.
sympa la typo helvetica. Elle apparait meme sur un windows sans police. J aimmagine qu elle est plus stylee sur un mac.
Interessante remarque concernant les tags de pub smart et autres. ca serait interessant de constater des progres significatifs dans ce domaine, au fil des annees on a l impression que rien a change. Est ce qu’un jour ils auront un peu plus de volonte a faire en sorte que leur code soit un peu plus propre ?
Merci pour retour, j’intègre vos remarques au fil de l’eau…
@gabyu, j’ai demandé à smart s’ils n’avaient pas un script plus propre car là c’est n’importe quoi quand on voit le nombre d’erreurs que cela génère. Même xiti ou statcounter proposent des codes propres en XHTM maintenant!
On respire enfin !
well done.
Je regarderai plus tard en détail pour les éventuelles remontées de bug (mais j’ai l’impression que t’as déjà ce qu’il faut parmi les lecteurs ;))
Sympa
Juste un détail, sous Windows quand la police Helvetica n’est pas installée, elle est automatiquement remplacée par l’Arial, donc ton Verdana ne sert à rien.
“Passage en deux colonnes (il faut bien être à contre courant des fois)”
Ah bon? Deux colonnes c’est contre courant ???
Et Helvetica c’est courant aussi, mais on s’en rend pas compte.
Je préfère ce design en tout cas, très sobre. Les tabs à droite sont supers utiles et ergonomiques.
Tout le monde passe à trois colonnes
Fubiz, bientôt presse-citron, emob…
crès choli !
Un grand bravo à toi, c’est bien plus agréable maintenant !
Bonne continuation !
Perso, j’aime moins le header qu’avant. Je le trouve un peu gros et simple.. Je crois aussi que tu pourrais enlever le bouton feedburner tout en haut et te contenter de la zone d’abonnement.
Pour le reste, je trouve le blog plus lisible, plus clair, bref c’est bien.
Mais il ya un truc queje ne comprend pas : le premier article en home, lorsque tu passes la souris sur son titre, une champ clicable s’affiche, sauf qu’il est différent de tous les autres articles et adopte les couleurs qui correspondaient à la boite de dialogue destinée aux visiteurs provenant de moteurs de recherche (jaune avec un cadre orange..)
Vraiment sympa cette nouvelle version, plus claire, très lisible
bravo pour ce formidable boulot… le design et la validation du code c’est souvent ce qu’il y a plus de chiant a faire…
j’aurai foncé un peu plus les commentaires pour faire ressortir un peu plus les tiens (malgré le petit logo)
pour jquery, c’est un plugin wordpress que tu utilises je suppose ? c’est bien pratique en tout cas.
@Matthieu M. mais je pensais que tu utilisais firefox
c’est en effet un bug sous IE mais pas très grave!
@Antoine non Jquery c’est à la main avec un plugin Jquery pour faire les tabs, wordpress n’a rien a voir avec cela…
T’es un vrai chef Henri!
Bravo! Un design a la facebook
Mais j’adore!
Bravo c’est très reussi !
Bonsoir Henri,
Je n’ai pas eu le temps de te répondre par mail la semaine dernière donc je vais le faire ici !!
Très joli design et surtout très propre. Sûrement l’utilisation de Helvetica qui renforce ce sentiment. Seul petit bémol en ce qui me concerne, c’est la police de la sidebar que je trouve peut-être un tout petit peu trop petite et peut-être aussi trop d’informations. Mais pour ce qui est de ce point-là, c’est, je crois l’éternel problème des blogs: doit-on mettre un max d’infos dans la sidebar ou pas ? Et jusqu’où aller ? Sinon, j’aime beaucoup la nouvelle page d’accueil, très claire, agrémentée de photos, c’est vraiment propre. J’aime beaucoup en tout cas ! 
Hello,
Alors voici mon avis :
Techniquement ça roule… Graphiquement ton choix d’un style épuré est judicieux, la simplicité maitrisé y a pas mieux. Le gris et le bleu du hedaer sont cohérents. Je trouve le gris un chouille dense sur PC (mais je chipote).
La ou j’ai un petit soucis c’est sur la fonte et le jeu du bas de casse et grande casse. Sacrilège ! surtout avec de l’Helvetica, gggggGGGGGRRRrrr !
Bien joué pour l’utilisation du plug in de tabs
@Monsieur Alex : quand tu parles de “la fonte et le jeu du bas de casse et grande casse” tu penses à la zone de commentaires?
>> henri
Je parlais du Header { vinGt HUit ZeRo tRoiS
Mais bon c’est peut etre un truc de puriste.
sinon au passage les mails de suivi de commentaire sont en anglais (There is a new comment on the post “Viva Helvetica…”. …)
+
Ah ok, en fait c’est une font qui s’appelle Kravitz… Pour l’anglais je t’avoue que je n’ai pas le courage de tout traduire pour l’instant mais cela viendra peut être
Excellent! Par contre, tu n’as pas mis a jour ton colophon… et moi j’aimerai vraiment bien connaitre le plugin WordPress qui te permet d’avoir des tabs dans tes widgets!
En effet! Je vais faire quelques articles pour expliquer ce qu’il y a plus précisément dans cette nouvelle version! Pour les tabs malheureusement cela n’est pas un plugin wordpress mais pourquoi pas en faire un (moi je ne sais pas faire cela!)…
@julien : Il existe un plug in pour les tabs Accodion
http://www.spicyexpress.net/ge.....functions/
à utiliser avec modération
waou c’est beau ici
Julien > Pas toujours besoin d’un plugin ! Ici, c’est un simple Javascript à insérer. Le plus connu étant DOMtab.
et ici c’est celui appelé idTabs qui est utilisé!
Salut riRi,
très très chouette… Classy, lisible, et 2 colonnes, ça fait moins commercial, je trouve…
Tcho
Très jolie et plutôt ergonomique, cette nouvelle mise en page.
Cependant, quelques remarques (histoire de faire mon pénible) :
La rubrique “Quelques liens” apparaissant dans la marge de droite n’apporte aucune valeur ajoutée aux visiteurs (elle semble d’ailleurs destinée à tromper les moteurs de recherche quant à la popularité de certains sites ; attention aux foudres de Google en matière de vente de liens !)
Le titre “meta” n’a aucune valeur ajoutée, sinon de te permettre de cliquer dessus pour accéder à l’interface d’administration. Or, tu n’as pas besoin de ce lien (ni tes co-auteurs des blogs voisins), puisque tu peux d’ores et déjà le placer dans tes favoris, voire le tapoter de mémoire dans l’URL, une fois le blog ouvert… (Je ne propose jamais de liens vers l’interface d’administration d’un site aux sites livrés à mes clients : cela ne regarde en rien leurs visiteurs.)
Les liens figurant sur “Navigation sur le Blog | Pages” gagneraient sans doute à être placés au bas de la page, à la place ou en complément des liens figurant déjà au pied de page page.
Les liens “RSS” et “RSS commentaires” figurant dans le pied de page sont redondants avec les autres liens figurant dans la marge.
Bravo Henri c’est très class :o)
Propre ! voila tout.
Très class n’exagerons rien… On est proche du template par défaut : un gros rectangle en haut et 2 grosses colonnes. En tout cas ce qui est proposé est bien fait ni plus ni moins.
Disons qu’il n’y a rien de créatif, ni rien d’amateur c’est neutre, profondement neutre un peu comme sur fran6art. Je pense que c’etait le but recherché, non ?
Hello,
joli design !! C’est super agréable à parcourir.
Juste une petite remarque : je ne trouve pas le choix des couleurs de fonds des commentaires très “judicieux”. Le rose est utilisé nulle part ailleur sur le site, je trouve que cela ne s’intègre pas bien dans le design.
De plus, je ne vois pas l’intérêt de mettre une troisième couleur de fond pour tes commentaires sachant que tu as rajouté ton logo (ça j’adore !! c’est super pratique) ; ou alors quitte à mettre une couleur pour toi autant en mettre une plus flashy que les 2 autres…
Enfin c’est du détail, hein…
En effet Elodie je n’ai pas dit que j’avais réinventé le template pour wordpress
Simplement le template est plus light, plus propre, avec deux trois trucs qui le différencient quand même du template par défaut de wordpress. Et puis chose importante c’est moi qu’il l’ait fait avec mes petits doigts et rien que cela c’est une grande satisfaction 
Bon boulot, félicitations !
Mouais, “tout le monde passe à trois colonnes”, c’est vite dit. Y a pas que 10 sites sur le web!
certes mais dans la thématique de 2803 ils sont presque tous en 3 colonnes :
http://www.techcrunch.com/
http://mashable.com/
http://www.readwriteweb.com/
Pour ne citez que les plus gros
Vraiment plus clair et plus clean que le précédent.
C’est beau, même si ça manque d’un poil de folie pour moi.
Bonjour,
Je trouve personnellement le design plutôt simple, et agréable, mais justement, le parti pris de la simplicité pêche beaucoup dans les choix typographiques. Sachant que c’est quand même ce qui ressort le plus.
Par exemple, la typo du titre n’est pas très équilibrée et donc pas très jolie (le mot huit en est l’exemple le plus flagrant). Personnellement, je ne vois pas beaucoup d’helvetica dans cette page. Par contre, beaucoup de Century Gothic dans les titres, beaucoup de Verdana dans les textes. Pourquoi ? Parceque je suis PC, et que les PC n’ont pas d’helvetica (question de licence). J’ai pourtant l’helvetica installée (par mes soins), mais sans doute pas celle décrite dans cette page (oui c’est bizarre…).
Une astuce pour pallier à ce problème : utiliser Flash avec des variables (dans les titres au moins), qui assurera à tout le monde de lire la même typo et qui, je pense, rééquilibrera le tout…
Je viens de me rendre compte que je lis l’helvetica sur IE7 (pas sur Firefox), mais que c’est vraiment pas agréable à lire…
Mais tout ca n’est qu’un avis de designer soucieux de voir de belles typos
Encore des histoires de compatibilité et c’est vraiment problématique à la longue. Personnellement je pense voir de l’helvetica mais en effet les polices de remplacement sont le verdana et le century Gothic. Un point à améliorer certainement et l’utilisation de flash pour les titres garantira certainement un affichage identique pour tout le monde et c’est une très bonne piste, affaire à suivre!
@henri, essaye de mieux définir tes familles de fontes dans la feuille de style. Quand on lit “Helvetica,Verdana,Arial,Helvetica,Sans-Serif”, on se dit qu’il y a un souci. En effet, si la fonte Helvetica n’est pas disponible, tu choisis Verdana (qui est une fonte sans serif, certes, mais fort différente), puis Arial (qui est habituellement choisie en deuxième après Helvetica), pour revoir Helvetica (mais… euh… elle est indisponible !).
Pour ce qui est des fontes originales et de leur apparition dans les titres (notamment), voici le mot-clé qui t’intéresse : sIFR.
Une précision : l’helvetica est certes une belle police, ou au moins une police de référence, mais comme beaucoup d’autres (century gothic entre autres), elle n’est pas adaptée à une petite taille sur écran, alors que la Verdana l’est. L’Arial aussi, sachant qu’elle a été dessinée par Microsoft, mais elle est moins lisible :
http://fr.wikipedia.org/wiki/Verdana
http://fr.wikipedia.org/wiki/Arial
A noter que même Microsoft utilise verdana sur son site ;-)…
Est ce que cette séquence semble pertinente alors : Helvetica,Verdana,Arial,Sans-Serif ?
J’enlèverai Helvetica pour le texte à lire, et mettrai Arial en premier pour se rapprocher de l’Helvetica, mais je ne sais pas si Arial est sur toutes les machines (sur Mac en particulier). Si ce n’est pas le cas, le problème reste le même… C’est pourquoi Verdana est sans doute la meilleure solution (Verdana, Helvetica, Arial, sans serif), et c’est aussi pourquoi c’est la plus utilisée sur le web.