Les 10 plus beaux designs CSS selon SmashingCoding

Rigueur. Et passion !

Ne dites pas à ma mère que je suis artisan en architecture de l'information appliquée aux sites web : elle croit que je suis webdesigner, intégrateur HTML & CSS, rédacteur web, formateur NTIC et consultant en webmarketing depuis 2001 ! Voulez-vous en savoir plus ?

Le blog de l'intégrateur web

Les 10 plus beaux designs CSS selon SmashingCoding

Le concours organisé par Smashingcoding est terminé et les membres du jury ont rendu leur copie pour désigner le vainqueur parmi le top 10 des blogs inscrits. Je suis content d’être à la 5ème place et je félicite chaleureusement le 1er (avec une pointe de jalousie, il faut bien le dire) ainsi que tous les autres participants avec une pensée pour SuperChinois ;)

Voici donc les 10 plus beaux design CSS selon SmashingCoding qui avait pris en compte l’apparence du blog, la qualité du code, les astuces CSS utilisées et les difficultés surmontées en terme de webdesign :

  1. Affinity Web
  2. le blog de Damien Alexandre
  3. Webinventif, Kenny-Blog
  4. BizetFamily
  5. css4design
  6. Pixnlov
  7. Pixenjoy
  8. Pilok
  9. Buzz and People
  10. Tux Planet

PS : Vous remarquerez que Britney « CSS » Spears n’était pas très « fatiguée d’être sexy » ! Bien joué eMeRiKa :D

Articles sur le même sujet

PS : Le respect de la vie privée sur internet est important : j'ai décidé d'échanger mon bouton Like de Facebook par un bouton Faire un don de Paypal car
Il n'y pas d'amour, il n'y a que des preuves d'amour (Jean Cocteau) ;) Merci d'avance.



17 commentaires pour “Les 10 plus beaux designs CSS selon SmashingCoding”

  1. LOmiG dit :

    bravo pour cette belle place, bien méritée !!! à bientôt !

  2. pickupjojo dit :

    Un grand bravo, c’est vrai que c’est très joli par ici. :)

  3. eMeRiKa dit :

    Oué plutot dèg que britney pourisse le screenshot de mon blog.

    Je te rassure, elle casse plutôt l’ambiance de mon blog qu’autre chose donc c’est pas çà qui m’a aidé!!

    La preuve en ce moment où l’harmonie graphique des derniers billets est bien meilleurs!!

  4. Jan dit :

    Je m’associe aux visiteurs précédents ainsi qu’au jury de Smashing Coding pour vous féliciter pour cette très belle place. Mais je regrette quand même de devoir me coltiner la barre de défilement horizontale quand j’ai le malheur de vouloir gader ouvert le sidebar (que ce soit sous FF ou sous IE d’ailleurs). Ce n’est pas très heureux d’un point de vue ergonomique. Ce défaut affecte d’ailleurs plusieurs sites dudit top 10. Dommage. Bonne continuation. Jan.

  5. burningHat dit :

    Bravo pour cette place Bruno !

    Après pour le choix du jury, je suis pas sûr que j’aurais mis les choses dans cette ordre surtout du côté des extrêmes (j’aime les design sobres et les interfaces pas trop chargées… si tu vois ce que je veux dire ;) hihi)

  6. Bruno Bichet dit :

    Merci à vous tous ;)

    PS : je viens de gagner 3 places sur ce blog http://www.designwalker.com/seed/webdesign/french-blog/ étonnant, non ?

    @Jan : quand vous dites : « Mais je regrette quand même de devoir me coltiner la barre de défilement horizontale », vous voulez dire que vous êtes en 1024×768 ? Si c’est le cas, c’est vrai que la largeur des designs fixes actuelle atteint souvent 960px, ce qui est juste dans cette résolution. A terme, ce blog devrait avoir un design fluide pour s’adapter à la taille d’écran des visiteurs. Bon, ceci dit, 1024×768 c’est quand même un peu juste aujourd’hui ;)

  7. Bruno Bichet dit :

    @burninHat > T’es pas sur feedburner ?

  8. Jan dit :

    @Bruno, Pas tant que ça ! 1. J’ai bien précisé, sidebar ouvert. Et de très nombreuses personnes surfent ainsi ; 2. Voir les stats à http://www.w3schools.com/browsers/browsers_display.asp. 26% ont plus de 1024×768, tous publics confondus. Tous les autres utilisateurs ont un viewport inférieur. 3. Ce pourcentage doit être très fortement REDUIT s’agissant de postes de travail en entreprise, où le matériel n’est renouvellé en moyenne que tous les 6 ans ! 4. Une bonne pratique de développement est de rendre tout site accessible quel que soit le matériel. Donc de ne pas « présumer » de la configuration qu’il y aura à l’autre bout. Ca me fait furieusement penser à ces mentions peremptoires que l’on trouvait souvent il y a quelques années : « site optimisé pour IE 4 en 800×600″. Et pour les autres ? Passez votre chemin, y a rien à voir ! De nos jours, on voit fleurir l’inverse, tout aussi condamnable : un petit pavé d’à peine 700×500, centré de partout sur une page quasi vierge à l’aide d’un beau tableau, et au contenu souvent même entièrement torché en Flash. Ceux-là n’ont pas compris grand chose non plus.

    Donc une très sage décision de passer sous peu à une structure fluide.

    Sinon, j’ai pas tout compris le texte sur Designwalker :-)

    Bonne continuation. Jan

  9. myev dit :

    Bravo dis-donc ! En même temps j’aime beaucoup ton nouveau design menthe/orgeat/grenadine. Je ne suis pas fan des parti-pris trop graphiques qui peuvent avoir retenu l’attention du jury, mais bon je reste une crobardeuse qui tache au fond de mon petit coeur de designer ;) ps : bientôt la v2 pour moi zossi !

  10. Bruno Bichet dit :

    @Jan : je n’ai peut-être pas compris ce que vous entendiez par « sidebar ». Mais je suis globalement d’accord sur le principe de faire des sites qui s’adaptent au visiteur.

    Mais en ce qui concerne les blogs (et tous les sites « normaux » devraient s’y mettre), les flux RSS sont aussi fait pour s’affranchir des designs qui font mal aux yeux ou qui sont mal adaptés aux minorités.

    Je ne le dirais pas trop fort, parce que je risquerais d’être mal compris, mais à priori TOUS les problèmes liés à l’accessibilité, à la lisibilité, au code mal imbriqué, etc. sont résolus en passant par un lecteur de flux RSS.

    Si je prend Google Reader, par exemple, il est tout à fait possible de naviguer à travers les billet en utilisant le clavier.

    @myev : merci du compliment pour le nouveau design ;) J’ai hâte de looker ta v2. bisous a++

  11. Jan dit :

    @Bruno, Par « sidebar », je désigne la volet latéral dans la fenêtre du navigateur, pour l’affichage des favoris, de l’historique, des téléchargements (sous FF en tous cas). Il est assez fréquent que les gens surfent en ayant ce volet ouvert, ce qui « consomme » donc facilement 200 pixels voire plus de la largeur utile.

    Quant à la lisibilité accrue en passant par les flux RSS, je ne dis pas le contraire, mais à ce tarif là, une bonne petite page HTML se limitant à des titres, paragraphes et listes à puces, sans aucun style ajouté, le sera tout autant, non ?

    En revanche, le défi d’essayer d’agrémenter les pages d’un style avenant, tout en respectant les normes, est bien plus passionnant à relever. Et ce n’est pas vous qui me contredirez sur ce point, vu que c’est votre gagne-pain ! En tous cas, dans ce domaine nous pouvons beaucoup nous enrichir mutuellement, et c’est bien un des principes fondateurs de l’Internet, le partage. Cordialement. Jan

  12. Jan dit :

    @Bruno, Par « sidebar », je désigne le volet latéral servant à accueillir les favoris, l’historique ou les téléchargements (en FF en tous cas). De nombreuses personnes surfent en ayant ce volet ouvert, ce qui « consomme » au bas mot 200 pixels de la largeur utile de la fenêtre du navigateur. Quant à passer aux flux RSS pour une meilleure lisibilité, il y a mieux : une bonne petite page HTML limitée à des titres, paragraphes et listes à puces (ou la commande Ctrl + Shift + S quand on a l’extension Webdeveloper sous FF), hahaha. Blague à part, je trouve que le défi est toujours passionnant d’essayer de doter une page d’un style avenant, tout en respectant les normes, l’ergonomie etc. Et vous n’allez pas me dire le contraire, vu votre occupation. Cordialement. Jan

  13. burningHat dit :

    @Bruno: non, jsuis pas sur FeedBurner… pourquoi ?

  14. Je voulais juste rappelé que être premier ne signifie pas pour autant que tous les membres du jury on voté pour celui-là.

    Personnellement, j’ai bien les designs très légés comme ton blog. Bien plus agréable à lire.

    Mais on ne peut nier que Affintity est le résultat d’un magnifique boulot au niveau mise en forme, originalité, exploitation de photoshop, qualité du code…

  15. Bruno Bichet dit :

    @burningHat : en fait j’ai ajouté ton flux à ma « rollSense » et comme les flux qui ne proviennent pas de FB se font rare, je voulais être sûr d’avoir le bon fil ;)

    @Christophe : Je suis déjà super content d’avoir fait partie de la sélection des 10 premiers ;) Et je reconnais qu’il y a plus de travail au niveau css sur Affinity que sur mon blog.

  16. burningHat dit :

    @Bruno: ok… Merci beaucoup ! :D maintenant qu’un pote m’en a fait la démo, j’y suis… (ou du moins, je test :p)

  17. Super Chinois dit :

    Merci pour le clin d’oeil. Je suis pas si triste, j’ai sans doute mis trop de pub et de widgets à la con ^^



Colophon

CSS & Webdesign est une publication irrégulomadaire à tendance hebdomadaire
éditée par Bruno Bichet qui carbure à WordPress et au café équitable.
Tous droits réservés © 2006 - 2011.

Contactez l'auteur du site