Peut-être avez-vous remarqué que le blog était inaccessible dimanche et lundi: en effet, j’ai eu la lubie de tweaker un peu Bloody Marie!
Design
Avant tout, j’ai voulu augmenter le contraste de l’interface: j’ai à cet effet noirci la colonne de droite, qui descend désormais jusqu’au footer, guidant mieux le regard.
Depuis la mise en ligne de la v3, j’étais embêtée par l’encart RSS orangé présent sur toutes les pages du blog, qui était coincé entre le moteur de recherche et les catégories. Le problème est désormais réglé puisque j’ai déplacé le moteur de recherche tout en haut à droite, et que l’encart RSS se trouve désormais sous la punkette dans la colonne de droite. D’ailleurs, n’hésitez pas à vous abonner si ce n’est déjà fait: le rythme des mises à jour s’étant sensiblement accéléré, il serait dommage d’en perdre une miette. ^^
Il est également possible de s’abonner à Bloody Marie en utilisant le nouvel encart rose vif situé sous chaque billet individuel. A noter que si vous n’utilisez pas d’agrégateur, vous pouvez aussi vous abonner à mon flux RSS par email.
Enfin, j’ai remis un peu d’ordre sur la page d’accueil, en n’y affichant plus qu’un extrait de chaque billet, accompagné d’une miniature. Les dix derniers billets sont ainsi affichés, sans trop rallonger la page comme c’était le cas lorsque les billets y étaient affichés in extenso…
Colonnes latérales et pied de page
Le contenu des colonnes a lui aussi été dépoussiéré: à droite, j’ai ajouté les liens vers mes différents profils en ligne, et à gauche, j’ai redonné un peu de classe au titre de chaque section. Je me suis aussi amusée à remplacer le sempiternel mini-profil par des maximes de mon cru en rotation permanente ^^
Outre le fait que j’ai profité de cette mise à jour saisonnière pour nettoyer un peu mon code HTML et ma CSS, j’ai aussi enrichi le footer du blog, qui contient désormais la liste des derniers billets (qu’on ne trouve, sinon, que sur la page d’accueil), la liste des derniers commentaires ainsi que les traditionnels widget MyBlogLog (inscrivez-vous pour y apparaître!), crédits et meta.
Billets
En consultant mes statistiques, j’ai constaté que si certains de mes billets sont assez bien référencés, générant ainsi pas mal de clics, les internautes poursuivaient rarement leur visite en lisant d’autres articles. Bref, mon taux de rebond est mauvais.
J’ai donc essayé d’améliorer la visibilité des anciens billets: désormais, quand on lit un billet individuel, la liste des « Billets populaires » et celle des « Billets similaires » s’affichent à côté, dans la colonne de gauche. Grâce au plugin Popularity Contest, il est désormais possible d’établir un palmarès des billets les plus populaires en fonction du nombre de commentaires bien sûr, mais aussi du nombre de pageviews, de backlinks, ou encore de clics via mon flux RSS. Le plugin WordPress Related Posts quant à lui permet, grâce aux tags, de lister d’autres billets susceptibles d’intéresser l’internaute.
La licence Creative Commons
Petite nouveauté: ce blog est désormais diffusé sous licence Creative Commons! Comme je ne suis pas contre que mes billets et/ou mes dessins soient republiés sur d’autres blogs, j’ai décidé de les diffuser sous cette licence. Ainsi, il vous sera possible de republier le contenu de mon blog sur le votre, par exemple, à condition de les republier tels quels, de ne pas en faire d’usage commercial et de me créditer avec prénom + patronyme.
Je trouve qu’on est souvent mal informés des conditions de republication des contenus tiers: si chaque blogueur affichait clairement son copyright ou sa licence Creative Commons, cela serait plus simple de savoir ce qu’on a le droit de poster à notre tour ou pas – notamment les images! Au moins, sur Flickr, c’est clair.
Feedback?
Voilà! N’hésitez pas à me faire part des bugs que vous rencontreriez (en précisant bien la version de votre navigateur). :)
Edit: bug connu et hack trouvé. Mais ce n’est pas une solution idéale car j’ai du y sacrifier la validité de ma feuille de style… Tous résultats de tests bienvenus!
Edit 2: autre solution trouvée: le PNG transparent. Problème a priori réglé, ouf!
Edit 3: désormais, le logo est à nouveau cliquable dans Internet Explorer 6. Il fallait appliquer un position:relative sur le bloc en question :)
nico
23.09.08
Nickel !
Ca tourne sans problème sous FF3.
Elton Turkey
23.09.08
Very well done! What else can I say? Nothing, I think. It only takes a while looking at your design work to understand how perfectly every single pixel is organized and optimized. ;)
Valentin
23.09.08
Vraiment bien, mais je crois que tu vas me trouver super chieur mais bon ^^ !!
Sous Safari 4 ça donne ça : http://www.boostupload.com/fil.....Image1.png
De même pour Opera, Firefox 3 et Chrome XD
Marie
23.09.08
Merci à tous pour vos commentaires! :)
@Valentin: oui justement, je viens de constater ça aussi, et j’essaie de trouver une solution qui laisse ma CSS valide! Mais c’est pas gagné :(
Cependant je ne rencontre le problème que dans Chrome! Dans Opera (
9.52) et FF3 (3.0.1), il n’y pas de problème. Quelles versions as-tu?
Edit: je viens d’installer un hack qui, ici, répare ce petit bug (FF3, Chrome, Opera 9.52, IE7 et IE6) – même si, du coup, ma CSS n’est plus validée à une ligne près. Aurais-tu la gentillesse de relancer les tests chez toi stp? Merci!
Valentin
23.09.08
Toujours pareil :/
Mais pourquoi faire compliqué ?
Enlève un pixel ou de la bande noir (côté gauche) ça devrait le faire XD
Marie
23.09.08
Finalement j’ai opté pour le PNG transparent, qui règle définitivement ce problème de pixel en trop (et de CSS non valide! :-D)
Seule restriction: dans IE6, le logo « Bloody Marie » n’est plus cliquable. Mais comme il y a le lien « Accueil » en haut à gauche du site, je considère que c’est tolérable.
Du coup, ça devrait fonctionner partout maintenant!
Bloui
23.09.08
J’aime beaucoup, c’est encore mieux que la version précédente côté ergonomie ! (et ça me rappelle que mon propre blog a besoin de travail, héhé)
Marie
23.09.08
Merci Bloui! ^^ Tiens-moi au courant si tu refais le design de ton blog.
Anne
23.09.08
La bande noire de droite est définitivement un plus au niveau graphique! Et tous les ajouts sont plus pratiques.
C’est très bien tout ça^^
Biz
Anne, qui n’aime ni le thé, ni les chats, mais adooOoore Batman :-p
Marie
23.09.08
Coucou! ^^ Merci pour ton feedback, je suis contente que les petits changements te plaisent! ça faisait un bail que je ne t’avais point vue par ici, ça me fait plaisir de t’y revoir :)
(Quant à Batman, ça y est, je me suis enfin décidée à rédiger ma chronique!)
Gillou
24.09.08
« Seule restriction: dans IE6, le logo “Bloody Marie” n’est plus cliquable. »
ça, c’est un problème classique lié au codage de l’alignement dans la page : IE ne reconnaît pas certains codages (bcq).
Si un jour t’as le temps, il faut juste que tu insères des tables pour quadriller les alignements des éléments (images ou textes).
Exemple : les sidebar de mon blog sont un joyeux bordel, mais je voulais que les éléments soient centrés à l’intérieur de chaque sidebar, et qu’on puisse cliquer sur les images qui sont toutes autant de liens : je témoigne encore de la considération pour les utilisateurs de IE. Je l’ai pas fait, mais il faudrait que j’insère une table dans chaque sidebar, pour que IE « comprenne » qu’une sidebar est en fait une table…
Marie
24.09.08
Salut Gillou, merci pour tes conseils!
Utiliser des tables pour center des éléments? Mm. Un petit margin 0 auto sur tes div ne fonctionne pas?
Quant au fait de pouvoir cliquer sur une image qui est aussi un lien, cela fonctionne même dans IE en remplaçant l’affichage du lien par une image via CSS.
Maintenant si cela ne fonctionne pas pour le logo dans IE6 et versions inférieures, c’est à cause du Javascript qui fixe la transparence du PNG (puisque IE6, en plus de tous ses défauts, ne la gère pas et affiche un rose dégueulasse à la place). Je ne suis pas convaincue qu’ajouter une table soit la solution… ça ressemblerait plus, dans mon cas, à du bidouillage. Mais je vais trouver! Et il est fort possible, d’ailleurs, que la solution ultime soit effectivement du bidouillage…
Autant j’étais convaincue que les tables étaient le Mal, autant ce commentaire sur Alsacréations m’ont fait mettre un peu d’eau dans mon vin (ainsi que l’article auquel il se rattache).
Comme toi je suis pour la prise en compte des utilisateurs d’Internet Explorer, qui sont très nombreux! Mais c’est sûr que ça demande deux fois plus de temps de développement CSS puisqu’il faut s’adapter à des navigateurs différents, pour ne pas dire parfois antagonistes!
Anne
24.09.08
*air blasé* Boahh tu sais c’que c’est, le boulo, FD, toussa toussa :-D
Disons que comme j’ai pas trop trop le temps, je survole et dès que je vois un sujet coup de coeur bam je laisse un mot :p
(et j’avoue que je viens quand même checker souvent la chronique Batman hein!^^’ Donc très excitée à l’idée de la lire :-p)
Tiens, pendant qu’on y est, j’ai pas vu dans feedburner la possibilité de mettre ton RSS dans mes marques pages dynamique Firefox, ou alors je suis bugne (ce qui est fort possible^^’). Est po possible? Au pire, je m’inscrirais par mail, parce que j’ai perdu ma page Netvibes et ça me court de la refaire (flemme quand tu nous tiens). Donc comme tu fais partie du tour de piste matinal de mes marque-tapage ça serait bien^^
Voilou
Biz
Marie
24.09.08
Oui je me doutais que tu devais être super occupée, pas de soucis! Mais viens quand même de temps en temps faire un coucou, hein.
A propos de Feedburner, si, il est tout à fait possible de t’abonner à mon flux via les marque-pages dynamiques de Firefox.
Pour se faire, quand tu es sur mon blog, tu cliques dans « Marque-pages » > « S’abonner à cette page… » > tu choisis « RSS billets ».
A ce moment-là, tu as mon flux brut qui s’affiche, et en haut de la page, un menu déroulant te propose de t’y abonner via Firefox et ses marque-pages magiques! Et zou, c’est bon. :)
Dis-moi si tu réussis!
Autrement, l’abonnement par email fonctionne très bien aussi.
Anne
24.09.08
Hum, une fois au menu déroulant, pas de trace de Firefox..
Marie
24.09.08
Dans ce cas, dans le menu déroulant, tu as une ligne intitulée « Choisir une application… ». Il te faut cliquer dessus et aller chercher firefox.exe sur ton ordi, qui se trouve normalement dans C:/Program Files/Mozilla Firefox
Une fois que tu l’as trouvé, tu cliques dessus, et là normalement l’option « Marque-pages dynamiques » devrait être de retour. Tiens-moi au jus!
Tatyana
24.09.08
J’aime beaucoup la nouvelle version!!! Avec des petites touches de rose :)
Je suis contente si tu vas encore + poster!! ^^
Pis moi j’utilise aussi les marques pages dynamiques firefox, je n’ai pas encore pris le temps d’avoir un vrai flux rss.
Kissounet
Anne
24.09.08
ha ha là ça marche! mais c’est plu la même interface que tout à l’heure aussi lol
Gillou
24.09.08
Ouais c’est sûr que ça fait bidouillage, mais j’aime bien ne pas être enfermé dans un même style dans une sidebar : des alignements tous azimuts : un bordel organisé en somme.
Comme le dit Country sur les tables, c’est que ces dernières permettent de contourner les pbs d’implémentation selon les différents navigateurs. Les tables sont lues correctement par tous les navigateurs, du moins à ma connaissance.
Chalut
P.S. : et Batman dans tout ça ?
Anne
24.09.08
Oui et Batman dans tout ça?!! (lol)
Marie
24.09.08
Coucou Tatyana ^^ Contente que cette version bis te plaise! Oui, le rose, parce que je le vaux bien!
Si jamais tu décides de réunir tous tes flux RSS au sein d’un même agrégateur, je te conseille Netvibes! Cet outil peut être consulté n’importe où n’importe quand (pas de logiciel à installer), customisé, et classe les flux dans des dossiers que tu définis. De la bombe, baby!
@Anne et Gillou: héhé, un peu de teasing n’a jamais fait de mal à personne XD
Everholt
28.09.08
Joli le footer ! Et cette sidebar est bien comme ça :)
@Gillou : je m’inscris totalement en faux. On peut non seulement faire en css comme avec des tableaux mais on peut aussi faire bien d’autres choses. Recourir à un tableau pour de la mise en page n’est ni sémantique ni accessible.
Gillou
28.09.08
Salut Everholt,
merci pour ta remarque. Tu pourrais m’envoyer un lien pour apprendre STP.Via mon blog: enfin, si t’as le temps… Je suis nul en CSS, je m’en rends compte tous les jours.
@+
Marie
28.09.08
Everholt, merci pour ton feedback! :) Je te rejoins sur l’utilité des CSS…
Gillou, que veux-tu apprendre précisément? Car le monde du XHTML est vaste! Je peux peut-être t’aider.