• Recherchez sur css4design

Nouveau design en place : plus bleu, plus carré, plus centré

Juste un mot pour vous signaler que l’ancien design dont vous pouvez admirer une partie ci-dessus vient de laisser place au nouveau design SquaryBluevie. J’ai essayé de faire quelque chose de plus clair et de plus structuré en repensant notamment le haut de la page — les mauvaises langues diront que ce n’était pas difficile ^_^ ! Comme son nom l’évoque, ce thème est plus carré et plus bleu car je me suis rendu compte que j’utilisais très peu cette couleur ainsi que les formes carrées. Par ailleurs, comme je n’ai pas un goût très prononcé pour les alignements centrés (je préfère souvent les alignements improbables), j’en ai profité pour me forcer un peu afin d’élargir mon horizon visuel.

This entry was posted in Revue de web and tagged , , . Bookmark the permalink. Post a comment or leave a trackback: Trackback URL.

29 Comments

  1. Posted 06/07/2008 at 09:53 | Permalink

    Ouah !! Je suis en admiration, je dois dire que là : j’adore ! C’est très léger, très agréable

    Je n’ai pas trop trop le cadre de la sidebar, mais sinon, j’aime beaucoup.

    Aussi : ta photo dans laquelle il est noté “Edito”, l’arrondi n’est pas transparent donc du coup, sur le bleu, cela se voit. Mais ça, c’est du détail…

    Pourrais-je savoir en combien de temps (environ) fais-tu le thème d’un blog ?

    Merci et bonne journée !

    Flavien

  2. Posted 06/07/2008 at 09:55 | Permalink

    heuuu … il faudra debuggé ça sur safari car la j’ai eu un peu peur au depart …  (typo serif / hx non stylé / lien en blue web defaut /roll-ovre sur le rss defaillant) !!!

    sur firefox ça va deja beaucoup mieux  … sobre … et efficace (et l’edito est toujours en lipsum)

  3. Posted 06/07/2008 at 10:06 | Permalink

    Sympa, mais je n’aime pas vraiment les blocs du header, surtout du titre en fait, limite des bords arrondis peu être ?

  4. Posted 06/07/2008 at 11:27 | Permalink

    J’aime bien l’idée d’onglets sur la nav pour passer des catégories aux articles, aux commentaires et aux tags. L’allègement visuel est assez évident (quatre fois moins d’espace occupé). Par contre je me demande si en termes de visibilité de ton information, ça risque pas d’enterrer les contenus.

    J’ai eu la même réflexion sur la refonte de mon blog il y a quelques jours, et j’ai décidé de tout rendre visible. On m’a reproché l’aspect bordélique, mais du coup l’ensemble des contenus est visible sans clic supplémentaire.

    Il faudrait que je fasse du A/B testing en chargeant une version “déroulée” ou une version “onglets” et analyser les stats pour voir l’impact sur les visiteurs.

  5. Posted 06/07/2008 at 14:58 | Permalink

    Le problème quand tu change quelque chose, c’est que certains vont aimer, d’autres pas !

    Sur le coup, je suis de ceux qui n’aime pas : - trop de bleu - le logo carré ne passe vraiment pas - le header est trop grand

    C’est pas très constructif, c’est même plutôt gratuit comme critique, et surtout très personnel, l’essentiel c’est que ça ressemble à ce que tu souhaites et que le contenu reste de qualité :)

  6. Posted 06/07/2008 at 17:53 | Permalink

    Je n’aime pas non plus, beaucoup trop froid et impersonnelle (surtout à cause du bleu).

    Oui, j’aime pas du tout désolé :P Je reste nostalgique de l’ancienne version (celle blanche, verte et rose si je me rappelle bien :P )

  7. Bruno Bichet
    Posted 06/07/2008 at 20:12 | Permalink

    @Flavien > Merci pour ton bon goût :D La photo était provisoire le temps que je retrouve l’original. C’est réglé maintenant. Concernant le temps passé sur le thème, je dirais : beaucoup trop ! En fait, j’ai beaucoup expérimenté en ajoutant des éléments, en les supprimant, en les remettant, pour finir par essayer de faire en sorte de pouvoir modifier facilement certaines zones, soit en ajoutant des widgets, soit en modifiant le code… Bref, tout ça pour te dire que je n’en sais rien. Mais à partir du moment où on sait exactement ce qu’on veut (croquis à l’appuis et fonctionnalités sous la main, je pense qu’en deux ou trois jours c’est jouable.

    @Remy > Arf, Safari… Ouais, c’est vrai qu’il faut aussi compter avec les bizarreries des applemaniaques ^_^v

    Après vérification (safari existe aussi sur windows \o/ ) il semble qu’il s’agit d’un problème lié à la syntaxe des règles d’import… Je vais regarder tout ça d’un peu plus près. Ce qui est bizarre, c’est que ça ne concerne pas toutes les propriétés héritées de fichiers CSS importés mais surtout font-family, font-size et color…

    @Palleas > J’aime bien les coins arrondis également, mais bon, j’ai essayé autre chose. Quand tu parles des titres, tu parles du logo ou des titres des deux blocs de chaque côté ?

    @Damien Ravé > Le thème provisoire affichait tout, et franchement ça faisait pas mal fouillis. Pourtant j’avais mis pas mal de choses dans un bigfooter, mais ça restait limite. Avec les onglets l’avantage en terme de place est évident, et ça permet en plus au visiteur d’avoir une vue d’ensemble du blog en 3 clics !

    L’intérêt de proposer la liste des derniers articles par exemple s’impose quand les contenus sont dispersés un peu partout (l’édito en haut, le billet A l’affiche, les articles du blog, etc.). Ca donne au moins une vision plus linéaire avec une ligne de temps plus réaliste comme l’édito/billet d’humeur peut rester longtemps, de même que le billet “A l’affiche”.

    Je ne pense pas que ça enterre les contenus. j’ai même tendance à penser le contraire, puisque ça permet, par exemple, d’afficher moins bas sur la page les anciens billets “A l’affiche”, ou les tutoriels au hasard. Mais bon, les stats en diront plus à l’usage.

    @Romain F. > Désolé que ça ne te plaise pas, mais comme on dit toujours, les goûts et les couleurs ;) Je te comprends d’autant plus que je me suis un peu forcé à utiliser du bleu et des coins carré alors que j’ai une panoplie de CSS et de scripts pour arrondir tout ça, m’enfin… ;)

    @Rémi > Si tu es nostalgique de l’avant avant-dernier design, il te reste la possibilité de passer un peu de temps sur Notorious Blog ;) )

  8. Posted 06/07/2008 at 20:16 | Permalink

    @Bruno Bichet : trois jours pleins ? (disons, une dizaine de d’heure par jour)

  9. Bruno Bichet
    Posted 06/07/2008 at 20:35 | Permalink

    @Remy > Bon, je viens de réunir tous les imports dans la feuille de style principale et Safari est content. Peux-tu refaire un test si tu as une version Mac de Safari ? Merci d’avance !

    @Flavien > lol, oui bien sûr, je parle de journées de 8h/10h :) )

  10. Posted 06/07/2008 at 20:51 | Permalink

    yep … safari et content ;) … c’est beaucoup mieux ainsi

  11. Posted 07/07/2008 at 01:58 | Permalink

    Salut bruno! Juste une petite remarque : un petit bug après un clic sur les liens : à l’affiche/articles.tutoriels dans ta speed bar en haut a gauche. Chez moi le background reste apres le clic mais le color revient à sa couleur d’origine…du coup plus moyen de lire quoique ce soit :) Sinon encore une fois du bon boulot! A bientôt!

  12. Bruno Bichet
    Posted 07/07/2008 at 02:10 | Permalink

    @guiralantoire > Je n’ai pas réussi à reproduire le bug dont tu parles, mais je l’avais remarqué et je pensais qu’il s’était fait hara-kiri tout seul :) Apparemment, non… Je regarderai ça demain.

    Sinon, le costard-cravatte te va bien, faudrait le mettre un soir sur Y!Live :D

  13. Posted 07/07/2008 at 02:34 | Permalink

    héhé merci d’être passé lol j’y penserais à la rentrée parce que je ne l’ai pas emmené a barcelone :D Donc pas de costard avant le 1er septembre… Pour le bug je suis sous ff3 et XP si jamais je peux faire quelque chose n’hésites pas ;)

    Je vais essayer de passer un de ces 4 sur Y!Live et de trouver deux min pour twitter un peu mais la vie barcelonaise est beaucoup moisn calem que la vie limougeaude :D

    A bientôt!

  14. Posted 07/07/2008 at 09:05 | Permalink

    C’est clean, bravo ! Moi je trouve ce désign très agréable, la lecture des billets n’en est que plus confortable. Je préfère ce système de menus également, plus concis.

    Encore bravo, du bon boulot !

    (manque seulement un lien RSS pour chaque article, plus sympa que le mail pour suivre les discussions, à mon goût…)

  15. Bruno Bichet
    Posted 07/07/2008 at 13:12 | Permalink

    @nico > Encore quelqu’un qui a du goût ^_^’ Pour le lien RSS pour chaque article, tu penses à quoi exactement, parce que flux global est disponible avec la grosse icône en haut de la page et le flux des commentaires est accessible en bas de page avec la possibilité de recevoir les billets par mail.

  16. Posted 07/07/2008 at 13:16 | Permalink

    je pense que Nico pense au RSS des commentaires d’un article précis… moi je l’ai mis egalement (juste au dessous de la case a cocher pour suivre les commentaire de ce billet par e-mail.

  17. Posted 07/07/2008 at 13:17 | Permalink

    il s’agit en fait d’un lien du type : http://www.url.com/ton-article/feed

  18. Bruno Bichet
    Posted 07/07/2008 at 13:56 | Permalink

    @remy > ah ok merci, j’avais pas capté ^_^v Voilà, c’est fait, juste sous le suivi des commentaires par e-mail :)

  19. Posted 07/07/2008 at 14:42 | Permalink

    Bon, je m’excuse pour ce commentaire négatif, mais il faut bien qu’il y en ai! Sur ce design (ou sur celui d’avant) je trouve la présentation vraiment fouilli! Il y a de l’information partout, ça n’est pas vraiment clair…

    Le nouveau header est très sympa, mais dès qu’on descend un peu ben, je suis perdue… On a un énorme a l’affiche avec un bout de bannière qu’on dait pas trop ce qu’il vient faire là… Suivi d’un bout d’article. Encore plus bas, on a d’autres bouts d’articles avec d’autres bouts d’images, on comprends pas trop ce qui va avec quoi… Y a même un 2ème ‘a l’affiche’ (ça fait beaucoup d’affiches!)

    Je pense que ça manque d’espace, de respiration et d’harmonisation.

    Voilà mes remarques à 2 francs 50, désolé de ne pas adhérer du tout!

  20. Posted 07/07/2008 at 15:57 | Permalink

    Hey, toi aussi t’as profité de tes vacances pour faire un CSS Refresh ^^. Bon je vais faire comme tous les autres et faire deux petites remarque :p J’ai juste l’impression que l’image “.fullthumb” fait un peu doublon avec le nouveau logo en “h1″. La sidebar parait juste un peu vide pour le moment non ? Sinon, vive le blue style :)

  21. Bruno Bichet
    Posted 07/07/2008 at 16:38 | Permalink

    @annso > Merci pour ton avis constructif. J’ai effectué des modifs en essayant de tenir compte de tes remarques. J’ai mis un fond sur le billet A l’affiche / En bref et j’ai harmonisé le titre avec le reste.

    J’ai supprimé également le tutoriel wordpress au hasard pour aéré un peu. J’ai amélioré également l’affichage des images au-dessus des billets courts et j’ai modifié l’intitulé pour éviter les confusions entre les deux (anciennement) “A l’affiche”. Il y a maintenant “C’est vite dit !” et “En bref”. Sachant que les billets regroupé sous ces intitulés appartiennent à la même rubrique. Merci encore :)

    @xuxu > Yep, dommage qu’il n’y ait pas eu de concours cette année ;) Je vais remplir la sidebar peu à peu : un changement de thème, c’est fait aussi pour prévoir des nouveaux contenus. J’aimais bien ton ancien thème mais je pense que je m’habituerai à celui-ci ^_^

  22. YoTsumi
    Posted 07/07/2008 at 22:57 | Permalink

    Pour ma part, j’apprécie globalement ce nouveau design, bien que légèrement trop … bleu à mon gout.

    Mais il y a une chose qui m’interpelle énormément, c’est l’image ‘Css4Design’ dans le header (logo.png), que je trouve absolument horrible. J’ai même ouvert cette image à côté pour vérifier si il n’y avait pas un problème de transparence, et ça n’a pas l’air d’être le cas. Trop carrée, trop découpée sec, trop flashante. A mon humble avis, c’est le premier point à revoir.

    Aprés tu devrais aussi modifier le code de tes adsense pour les mettre elles aussi dans un ton de bleu.

  23. Posted 07/07/2008 at 23:16 | Permalink

    Je vais faire ni critique positive ni négative ni même constructive (j’ai un gros coup de barre là alors ça servirait pas à grand chose :p) mais juste une petite suggestion : tu devrais updater ta favicon pour qu’elle soit dans les mêmes tons bleus à mon très humble avis, nope ?

  24. Posted 08/07/2008 at 10:52 | Permalink

    Au contraire, moi j’aime bien le nouvel header… ;-)

  25. Posted 09/07/2008 at 15:47 | Permalink

    Salut Bruno,

    Joli, même si je crois quand même préférer le design précédent.

    Au niveau ergonomique rien à redire par contre :D

  26. Posted 09/07/2008 at 21:32 | Permalink

    Bien joué Bruno, je le prefere à l’ancien moi.

  27. Bruno Bichet
    Posted 10/07/2008 at 00:26 | Permalink

    @YoTsumi > C’était un peu trop bleu, en effet, j’ai ajouté une couleur d’accompagnement dans les tons verts pour voir ce que ça donne.

    Pour le logo, je crois que pour le coup, c’est une question d’habitude : à force de voir des logos ombrés avec coins arrondis et/ou dégradés partout, etc, on finit peut-être par trouver “horrible” ce qui sort de l’ordinaire… :p

    burningHat >

    Ce favicon date de près de 2 ans et je l’ai gardé depuis par nostalgie de mon premier thème Dotclear… Je devrais le mettre à jour, c’est vrai. Bientôt ;)

    @Flavien > Merci encore ;)

    @alex > Lorsque les contenus sont nombreux, l’ergonomie est plus importante que le design. Pour la prochaine version, une fois que j’aurais trouvé mon rythme de croisière avec ce thème, je travaillerai sur un thème alliant joli design et ergonomie béton ;) )

    @Nico > héhé, encore un qui a bon goût ^_^v Merci nicolas :)

  28. Posted 10/07/2008 at 01:37 | Permalink

    juste pour dire que c’est bien plus clair comme ça! On différencie bien les différentes zones, les titres des articles, et les articles! youpiii!

  29. Posted 11/07/2008 at 08:50 | Permalink

    Je trouve ce design très frais et clair, tout a fait adapter à l’air du temps. Beau travail et merci pour nos petits yeux de lecteurs assidus ;-)

Post a Comment

Your email is never published nor shared. Required fields are marked *

*
*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Subscribe without commenting