Version 4 du blog : le graphisme (1/3)
ENFIN la nouvelle version est en ligne ! Elle aura mit longtemps à accoucher mais c’est chose faite maintenant ;)
Comme vous devez vous en rendre compte si vous passez de temps à autre sur le blog, cette nouvelle charte graphique change complètement la donne et est très différente de l’ancienne, autant graphiquement que d’un point de vue structurel. Cela va dans le sens de la reprise en main de H.S.I. et de ces nouvelles orientations (j’y reviendrai dans un billet plus tard dans la journée). Je sais que cela ne plaira pas forcément à tout le monde mais ce blog restant avant tout un blog personnel, sans visées particulières en terme de monétisation, d’expertise, de classement quelconque, … je peux me permettre d’avoir un habillage personnel également :)
Un petit peu d’histoire …
L’idée de la refonte du blog est née courant mai, juste après la semaine anniversaire que j’ai proposée, et pour la première fois j’ai eu un vrai graphiste sous mes coups de fouets la main. Contrairement à mes 3 premières versions je n’ai donc pas été limité par mes capacités propres mais j’ai pu demander (presque) tout ce qui me passait sur la tête. Donc pour la réalisation les honneurs doivent être rendu à Ludovic Sadier et pour ce qui est moins réussit c’est à moi qu’il faut le reprocher (ou au thème comfy qui a servit de base structurelle).
Ludovic est un « ami du web », rencontré lors d’un projet commun que nous avons eu par le passé. J’ai toujours apprécié son travail et lorsqu’il m’a proposé d’effectuer une refonte du blog j’ai tout de suite accepté, je savais que j’allais pouvoir lui faire mettre en image ce que j’avais en tête.
La conception a été assez intéressant à faire à 2 : je posais mes idées et il les réalisait, parfois en me proposant d’autres essais ou en m’expliquant pourquoi graphiquement ce n’était pas équilibré, … j’ai donc apprit quelques petites choses intéressante d’un point de vue purement graphique (même si je suis resté intransigeant sur certains points à son grand dam ^^).
Cela a prit nettement plus de temps, alors que mes anciennes versions ont été développées en maximum 1 semaine, pour l’actuelle il aura fallut plusieurs mois : temps de communication supérieur qu’avec moi-même, vacances, travail respectif, ébauches, propositions, discussion, multiples échanges de mails, intégration plus compliquée que prévue,… mais au final je crois vraiment que le jeu en valait la chandelle. En tous cas je suis entièrement satisfait.
Alors évidement ça perd un peu le côté personnel présent auparavant et l’information s’affiche un peu différemment mais ce qui est sûr c’est que cela correspond entièrement à ce que j’attendais et que ça me semble plus « frais », coloré, agréable. L’aspect visuel est aussi amélioré grâce aux vignettes images.
Page d’accueil
L’objectif avec la page d’accueil n’est plus de proposer les 4-5 derniers billets mais d’en faire un centre nerveux de ce qu’il est possible de voir sur Homo Sapiens Internetus. Le visiteur qui arrive sur l’index ne connait, en général, pas le blog, d’où l’idée de lui proposer divers modules thématiques afin qu’il puisse survoler les sujets les plus souvent abordés. D’un point de vue uniquement référencement cela devrait proposer quelques dizaines de liens à Google & Co, aussi bien vers des billets récents que plus anciens.
Pour le module « A la une » vous êtes habitués, il s’agit de mettre en avant 7 articles intéressants mais contrairement à d’autres site je ne vais pas y proposer les derniers articles publiés, ce sont plutôt des billets qui marchent bien ou que j’aime particulièrement. Mais ne nous leurrons pas, cette présentation en module et à base de quelques effets de javascript alourdit un peu les choses et augmente franchement les appels à la base de données : comme la page ne représente que 3,5% des entrées du blog je me le suis permit.
Page article
Point de vue structure les pages ne sont pas très différentes de ce que vous trouvez habituellement puisque le but reste avant tout de proposer le contenu de manière optimale. J’ai par contre essayé de travailler l’interlignage, les titres, les listes, … de manière à ce que la mise en page soit la plus optimale possible en terme de lecture (oui je sais je fais long dans mes billets donc faut penser à ce genre de détails ;)). Je pense que les liens sont bien visibles, que les images sont bien mises en évidence, de même que les citations. J’ai aussi opté pour une classe spéciale concernant les commentaires personnels que je fais au sein des articles (comme ceci en est un exemple). Bref je pense que la lecture est assez bien travaillée mais je suis à votre écoute en commentaire comme sur tous les autres points bien entendu ;)
Un exemple de citation quelconque
- liste 1
- liste 2
- liste 3
Pages tags/catégories
Ces pages sont travaillées de manière à présenter plus des 5 derniers billets concernés. Ici j’ai opté pour présenter les 10 derniers et cela de manière la plus intéressante possible avec miniature d’image, introduction texte, … bon il me reste un peu de travail pour que toutes les pages soient complètes niveau des vignettes mais ça viendra petit à petit.
Pied de page
Il est composé d’une ancre permettant de remonter en haut de page directement et de 3 modules principaux que sont l’édito, les tags et les articles populaires. L’un ou l’autre changera éventuellement dans le futur pour accueillir une nouvelle zone mais pour le moment ça me parait pas mal.
Conclusion
Il reste pas mal de choses à implémenter en terme de fonctionnalités et de présentation mais cela dit je m’y attellerai plus tard, là il fallait que cette version sorte sinon ça allait encore trainer des semaines et j’avais envie de lancer la chose au plus vite car cette version me donne vraiment envie de vous proposer de beaux articles pour aller avec :)
J’ai testé l’affichage avec ce que j’avais sous la main et ça devrait être fonctionnel avec Firefox 2 et 3, Chrome, IE8 sous Windows. IE7 et IE6 sont opérationnels aussi même s’il me reste à peaufiner quelques petites choses (notamment les PNG sous IE6). Sous Mac ça passe sous Safari et Firefox et sous Linux j’ai testé Opéra, Firefox et Flock. Le tout en résolution 1280 et +. Bref les principaux navigateurs et résolutions des visiteurs de HSI sont respectés même si je ne doute pas que certains d’entre vous avec des configurations « hors-standard » trouveront des bugs ;)
Maintenant à vous de me donner votre sentiment général dans les commentaires, tout du moins pour la partie graphique puisqu’en terme de ligne éditoriale et de communautaire d’autres billets arrivent dans la journée.
Et pour ceux qui suivent le blog via RSS, les captures des précédentes versions :
Version 1 :
Version 2 :
Version 3 :
Version 4 : la version actuelle
NOTE : Ludovic est en recherche d’emploi actuellement mais possède le statut d’auto-entrepreneur, et même si j’aimerai pouvoir continuer à l’exploiter gracieusement quelques années, il est libre pour toutes missions que vous voudriez bien lui confier. Vous pouvez consulter son portfolio, son compte Twitter ou le contacter directement.
31 commentaires
Laisser un commentaire
Posté dans 
Ce billet possède 
- 
Bravo pour cette nouvelle version Chris !! La page d’accueil est fichtrement belle :)