Vous pouvez enlever votre casque de chantier. Les travaux sont terminés (enfin presque). Je vous laisse regarder et vais essayer de vous expliquer ma démarche.
Retour aux fondamentaux
Tout d’abord, il s’agit d’un réajustement (très à la mode) et non d’un redesign en profondeur.
Pour cette nouvelle version, j’ai décidé de me concentrer sur l’essentiel. Finies les accumulations graphiques dans un espace minuscule.
À l’orgie graphique, j’ai préféré la simplicité de quelques couleurs rafraîchissantes. L’objectif est simple: redonner du poids au contenu en limitant le bruit environnant.
Ce contenu dispose d’ailleurs de davantage d’espace, aménagé par une largeur fluide, des marges généreuses et une interligne qui permet au texte de respirer. Les titres prennent de l’assurance et s’affichent en petites capitales et en grande taille.
D’un point de vue de l’organisation, j’ai poursuivi la suppression de la pollution visuelle en réduisant le nombre d’éléments dans la navigation secondaire. Néanmoins, j’ai essayé de faire en sorte que cela reste tout aussi fonctionnel qu’avant. J’ai d’ailleurs profité de ce nettoyage pour faire le tri et mettre les éléments relatifs au blog dans une colonne et les liens vers l’extérieur dans une autre colonne.
Comme le titre l’indique, ce n’est pas totallement terminé. Certains éléments mériteraient un peu plus d’attention et je ne suis pas satisfait de l’organisation des archives. Tout ça risque donc de bouger encore un peu dans les semaines à venir.
Maintenant que vous savez maintenant comment j’ai procédé, à vous de me dire si j’ai atteint mon but : vous rendre la lecture plus agréable. Pas besoin de web 2.0 pour améliorer l’expérience de l’utilisateur.
PS : Non Arnaud, ce n’est pas centré.
45 replies on “Disons que les travaux sont terminés (ou presque)”
Bravo: simple, efficace, superbe, que dire de plus ?
echo "#page {margin: auto !important;}" > /home/arnaud/.gnome2/epiphany/mozilla/epiphany/chrome/userContent.css
Et bien on sait où tu étais passé en deuxième partie de management!
Sous linux (Firefox) j’ai droit à une grosse barre orange en plein milieu du logo svay.com c’est normal ? (c’est un lien je pense)
Waouw ! J’accroche à fond, comme d’habitude en fait.
Ou plutôt, j’accroche de plus en plus. C’est vrai qu’un peu de simplicité au milieu d’orgies graphiques, ça fait du bien.
Juste deux remarques peut-être :
– je ne trouve pas très joli les citations en italique, comme dans le billet "À propos des URL" par exemple
– dans le menu tout à droite, c’est bizarre d’avoir des puces pour les derniers blogmarks mais pas pour le reste
Mais sinon, parfait !
Antoine: merci de me le rappeler, c’est désormais reglé 🙂
J’adore, du pur Svay, frais, léger, clair et reposant.
Bravo!
Superbe et épuré ce nouveau skin.
Simple et efficace 🙂
Wouaou. Superbe.
Y’a juste un truc : ça passe pas dans Safari. J’ai une belle page blanche… Snif 😉
Ombre: Aïe, mais où donc vais-je trouver un Safari pour tester ?
Il y avait un site où on pouvait voir la mise en page de son site dans différents navigateurs… Je vais essayer de le retrouver…
Voilà le site : browsershots.org/
La file d’attente est assez longue on dirait. 😉
Sinon quand tu penses avoir trouver la solution envoie-moi un mail et je te fais une capture…
Ah oui c’est assez sympa.
Il y’a quand-même un "truc" qui fait que je n’accroche pas complètement. Peut-être le manque de couleur, d’accroche forte dans le header, le blanc omniprésent… un peu de tout ça ?
PS : ah je vois que tu as encore l’ancienne url du blog Alsa. Depuis 6 mois elle a changé. Si tu veux bien la remplacer par la nouvelle :
blog.alsacreations.com
Merci bien 😉
J’aime bien ! Faut que je matte ta css ! 😉
Rafraîchissant oui : Ca sent le sapin ! 😀
Ombre: oui je connais ce service, mais ce n’est pas suffisament interactif pour débugger efficacement. Je vais essayer de trouver un Safari rapidement.
Raphaël: Plus que de couleurs, c’est plutôt de contraste dont cette version manque, non ? Sinon, c’est corrigé pour l’adresse 🙂
Nico NSS: euh tu dis ça pour Noël ou pour autre chose ? 😀
Le retour de la sobriété toute puissante : i LoVe 😀
à moi de me mettre au boulot pour finir ma refonte.
toute mes félicitations à toi Maurice pour ce mod très réussi de ton blog.
si tu veut voir ce que ca donne sur safari … c’est la cata … tout blanc , on voit aucun texte ni aucune image . rien quoi …
bon je vais passer pour un con … en fait ca marche … serveur.lerouxdelens.com/…
voila désolé pour la pollution des commentaires
Bravo !
En revance, la lisibilité des commentaires n’est pas très heureuse…
En effet, je confirme, plus de barre orange 😉
Sebus: oui, ça fait parties de choses pas terminée. Dès que j’ai davantage de temps, je m’en occupe.
Antoine: barre orange ?
Très agréable, bravo !
La dernière refonte de chez moi a été faite entièrement en fonction de cette citation de StEx : "La perfection est atteinte, non pas lorsqu’il n’y a plus rien à ajouter, mais lorsqu’il n’y a plus rien à retirer." Ça ne m’étonne absolument pas de ta part que tu arrives aux mêmes conclusions par toi même.
(et dans la série "je suis d’accord avec toi", oui, ça manque (à mon goût, relatif) un peu de contraste. Tout ces pastels, ça s’affirme peu.)
Très sympa, mais deux petites choses peut être…
Les commentaires sont dur à lire quand même :s.. ca donne pas envie et ca fait un peu mal aux yeux :s
Les sous categories ("Catégories", "Technologies", "Je lis", ect… sont difficile à démarquer (l’oeil voit d’abord la couleur des liens mais on ne sait pas dans quelle partie on se situe, on voit ensuite le titre de la sous-categorie…). Peut être que la meme couleur que la partie "derniers blogmarks" devrait etre appliqué, on ferait plus facilement la difference je pense … =). La couleur des liens visités tranche aussi trop si bien que l’on se retrouve avec 3 couleurs, peut etre un cyan plus léger pour les liens cliqués.
Voilà juste une petite critique que j’espere constructive pas dans le but de cassé mais de faire avancé =)
Pour les compliments, je pense que le but que tu recherchais à été atteint dans les billets et que la lecture s’en trouve clarifié =)
pour l’ensemble du design, bravo c’est rafraichissant =)
A toute
Bravo, j’aime beaucoup. Simple et efficace 🙂
Je confirme, ça ne marche pas dans Safari (2.0.2 si ça peut aider)…
Salut !
J’ai juste vérifié par curiosité sur mon Safari (version 1.3) et il passe très bien, exactement comme sous Firefox à la différence près que le "Ok" de la recherche est plus joli 😉
Je sais pas si le problème vu sous Safari précèdement était sous la 2.0 mais en tout cas là ça passe.
J’en profite pour dire que je trouve ce thème effectivement très reposant et qui capte l’attention sur le texte, je regrette peut être qu’il n’ai pas été intégré à tout le site, ça tranche quand on se ballade sur les autres sections. Sinon juste une remarque, dans les commentaires, la mise en page est tellement simple qu’on ne voit plus trop les séparations entre les commentaires (heureusement que le nom de l’auteur est en gras pour se repérer).
Bravo pour ce travail !
j’ai à nouveau des problèmes dans safari (2.0.2)
xave : je suis assez d’accord avec toi mais je ne pousserais pas le raisonnement jusqu’au bout. J’ai notamment hésité à virer la colonne des liens mais finalement je préfère conserver la liste de sites/blog que j’aime sur la première page du blog et ne pas les reléguer dans une page perdu dans le site.
Kaer : les liens visités de la sidebar sont désormais dans un bleu sombre au lieu de la couleur marron. Pour les titres, je vais essayer de trouver une solution. Merci pour ces remarques constructives 🙂
Amaury, Mr Peer, Thalion : hum, cette histoire de Safari m’intrigue. À la limite si l’affichage était dégradé, je comprendrais, mais là, une page toute blanche… Je vais essayer de me trouver un Safari pour résoudre ce problème. Je vous tiens au courant.
la classe! j’adore le header!
dis au fait ca te dis toujours de tester le plug antispam qu’on a fait avec zbb?
biou : bien sûr! J’ai juste manqué de temps jusque là mais je l’installe tout de suite.
pas de prob! rien ne presse 🙂
Biou : ah ok, tu préfères le spamplemousse pas pressé. Mais sinon c’est installé 😀
Biou> le pamplemousse ?
viagra?
ben j’espere que ca marche!
biou : ça a l’air de marcher, je viens de mettre en ligne ton commentaire 🙂
nickel!
Bon, j’ai honte, j’ai reglé le problème avec Safari. C’était une grossière erreur de ma part… j’ai honte : ma css s’appelait elle même. Allez-y, vous pouvez jeter les cailloux 😀
😉
Merci Mauriz pour la scéance de débuggage interactif d’hier soir….
Pas si mal cette nouvelle version, bien plus épurée … Je comprend cette démarche de ne plus vouloir placer du design juste pour montrer qu’on sait faire un design :]
Bonne continuation
J’arrive après la bataille, mais je tire mon chapeau !
J’aime beaucoup les mises en page qui savent rester sobres, tout en étant jolies. De manière générale, j’aime bien tes styles, de toute façon !
Ce qui me plaît tout particulièrement, dans cette version, c’est le contenu fluide. C’est tout simple, il suffisait d’y penser (max-width mon amour !), et ça donne des résultats propres qui ne deviennent pas complètement illisibles si on a un écran en haut résolution… sauf sous IE, mais perso je m’en fous, je suis sous Linux 😉
Bonne continuation !
J’arrive un peu en retard, mais pour te dire que le but est atteint. Toi, le touche-à-tout de l’informatique, n’auras pas de problème pour trouver un stage avec un passeport pareil. Clair et limpide malgré mon attirance pour "les accumulations graphiques dans un espace minuscule".
epuré, simple, propre …bravo