Nouveau design du blog… la v3 est en ligne !
par Frédéric COZIC le 8 juillet 2007 à 13:43 - 33 commentaires

Voilà plusieurs semaines que je travaille à cette nouvelle version graphique du blog et je suis plutôt heureux qu’elle soit enfin en ligne.
Comment ce design a été conçu et réalisé ?
Ne trouvant pas un template qui me satisfaisait complètement et désirant avoir un design particulier, j’ai commencé à concevoir un template totalement unique. Grâce à la précieuse aide de Fox, directeur de création de son métier et que je ne sais comment remercier, nous avons beaucoup travaillé sur l’ergonomie générale afin de faciliter le parcours de l’œil et la navigation générale. Choix des couleurs, espacements conséquents, taille de police, interligne, etc.. tout a été essayé pour que la lecture des articles se révèle plus agréable. Par ailleurs, trouvant l’orange parfois trop présent et agressif comme couleur, nous avons décidé de passer dans des tons plus clairs (blanc cassé et bleu) souligné par un fond foncé pour faire ressortir le contenu. Certes, ce côté graphique (couleur, logo, etc) est complètement subjectif est ne plaira donc évidemment pas à tout le monde mais l’ergonomie du site devrait normalement satisfaire inconsciemment le plus grand nombre. En outre, et toujours dans une volonté de faire de blog.aysoon.com un blog professionnel, toute forme de publicité textuelle (type Google Adsense) a été supprimée ce qui en contre partie laisse plus de liberté d’un point de vue graphique.
Quelques nouveautés fonctionnelles
En ce qui concerne les commentaires du blog, je trouvais leur mise en place trop discrète dans la version précédente. Dès aujourd’hui, le nombre de commentaire est plus clairement indiqué et chaque commentaire peut être décoré par le gravatar de son auteur. Gravatar est un service de plus en plus important sur le web et qui vous permet de créer un avatar (une représentation graphique comme votre photo) en quelques secondes. Présent sur un nombre important de blogs et de services, je vous invite à créer le vôtre et ainsi de pouvoir apparaitre plus précisément lorsque vous commenterez sur ce blog.
Le module de recherche a été remis en avant en haut à droite avec la possibilité de faire uen recherche par tag, méthode souvent oubliée, disponible en cliquant sur le bouton TAG.
Les visiteurs peuvent dorénavant imprimer les articles de manière propre et simple grâce à un lien en bas de chaque article. Je ne suis pas pro-impression d’habitude à cause des problèmes de gaspillage de papier mais je sais combien c’est pratique d’imprimer de longs articles. Alors j’ai mis en place la fonctionnalité, charge à vous de ne pas en abuser et d’essayer d’imprimer deux pages par feuille. Merci.
Les trackbacks ont pour l’instant été supprimés du fait que peu de blogs les utilisent et que le nombre de spams, bien que parfaitement filtrés, ne cesse de croître… A voir à l’usage mais je ne pense pas les remettre un jour.
La sidebar de droite a été remaniée pour être plus claire. Un nouveau widget présentant les articles que j’estime les plus importants ainsi qu’un widget listant les derniers billets ont été ajoutés. Le widget des derniers commentaires a été simplifié tout en restant animé et fournit maintenant le gravatar de son auteur le cas échéant.
Une compatibilité travaillée
Chaque webmaster consciencieux le sait, l’intégration et le debugage entre chaque navigateur est un casse-tête sans fin. L’ancienne version comportait certaines incompatibilités avec des navigateurs comme Safari ou Opéra, je n’ai pas reproduit les mêmes erreurs cette fois-ci notamment en ce qui concerne l’utilisation de Mootools. J’ai donc passé de nombreuses heures à essayer de rendre le blog entièrement compatible avec Internet Explorer 6, Internet Explorer 7, Firefox 1.5, Firefox 2, Opéra 9 et même le tout récent Safari 3. C’est chose faite ! ouf… Même si le blog n’est pas exactement le même sur tous ces navigateurs, l’expérience utilisateur et l’ergonomie reste identique et c’est le principal.
De nouvelles pages apparaissent
Elles manquaient cruellement à ce blog, on me l’a souvent dit, les pages A propos, Contact et Abonnement ont été créées. Vous y trouverez plus d’informations sur le blog ou son auteur et comment me contacter.
En conclusion
Cette nouvelle version a été conçue et mise en place pour vous, fidèles lecteurs, j’espère donc qu’elle vous plaira. Je fais parti de ceux qui considèrent que ce sont les détails qui construisent un tout et que la forme d’un blog se doit d’être bien pensée. J’espère donc que ce nouveau template servira au mieux les futurs articles et vous donnera envie de revenir les consulter… ^_^ Bonne découverte
Qu’en pensez-vous ?






Réflexion sur l'importance que peut avoir son avatar dans la gestion de son identité numérique
Une belle réussite!
Félicitation.
Félicitations ! Je trouve cette nouvelle version bien plus pro, avec un ensemble plus propre et un bleu ciel très classe sans être trop violent à l’oeil.
Bref, pour moi tu as réussi ta transformation, je préfère cette version à la précédente.
Très réussie cette nouvelle version de ton blog ! Simple sans l’être trop… bon résultat final =).
Excellent ! Tout est bien intégré, et le preview du gravatar lors du remplissage du champs email est un chouette petit détails :)
Ps: par contre la page de contact aurait été mieux avec un petit formulaire (plugin contact :) )
Ps2: Le nombre d’abonné au flux à fait un bon je vois ! Félicitations !
Design unique très claire. En revanche ça ressemble un peut à vista, surtout le header.
@all : Merci pour tous ! heureux que cela vous plaise !
@k-ny : j’ai hésité pour le formulaire de contact, je ne suis pas sûr d’en voir le réel intérêt mis à part pour les personnes qui consultent le site sans avoir de messagerie accessible.. à réfléchir.
Je sais pas si ca ressemble a vista mais en tout cas c’est super reussit !
Si on commence a se demander keskiressemble a quoi, on va trouver des simulitudes entre des milliers de sites et de marques, on réinvente pas la roue !!! UNIQUE et tres pros, vraiment tres reussit. Cé ki le DA ? il faut qu’il me fasse le futur mien !!! jle veut !
Bien mieux je trouve :D
Je regrette par contre le choix des gravatars par rapport à la preview du blog
Bravo ! La charte graphique est particulièrement réussie :)
J’aimais déjà bcp l’ancienne version, et j’aime autant celle-là.
Peut être même plus :o)
Tu vas remettre ton twitter ?
Bravo, le site est très beau!
Il l’était deja et l’est encore maintenant. Je ne sais pas quel est le plus beau, par contre j’ai un petit reproche a faire sur celui la :
l’espacement permet de bien lire cependant ca donne une impression de vide, je m’explique, quand l’espacement entre les lignes et celui entre la sidebar et le contenu est faible, on a une impression de contenu fourni. (enfin c’est mon avis, mais bon c’est pas grave c’est tres bien comme cela)
Aysoon serait-il possible que tu nous donne les noms des widgets (et liens) utilisés ? (a moins que ca soit toi qui les ais crées)
@cr0vax : j’ai hésité en passant à gravatar mais les previews des sites dans ce format minuscule ne sont pas vraiment lisibles. Donc j’ai préféré laissez chacun gérer son image à travers son gravatar. Libre à toi de mettre dans ton gravatar un screenshot de ton blog :-)
Pour la petite histoire j’ai aussi hésite entre gravatar et MyBlogLog mais les possibilités offertes par la pseudo-API de MyBlogLog sont si petites que j’ai préféré Gravatar, bien plus facile à implémenter et très simple à personnaliser pour les utilisateurs.
Bravo pour le nouveau design. Trop la class.
Dommage que je ne maitrise pas autant que tant les jQuery qui font de super effets. un tutorial prochainement ?
Juste une petite remarque concernant les commentaires : avec le fond dégradé, le contraste n’est pas très élevé au milieu du commentaire (dans le sens vertical), et ça rend la lecture un petit peu difficile.
Ca dépend aussi sans doute des réglages de l’écran…
C’est pas JQuery Jean-Michel, c’est Mootools ;).
Félicitations pour ce nouveau design Frédéric (j’imagine très bien le travail que cela a demandé). Cela donne un look effectivement plus professionnel à ton blog. Par contre, j’augmenterais juste un peu l’interlignage pour aérer un peu plus ton texte (mais c’est un détail).
Moi j’aime bien : très classe, lisible, et dans la mouvance graphique actuelle.
J’comprend ton choix, mais perso mon gravatar restera vide, la flemme de m’inscrire à un service de plus :D
@Antoine : en ce qui concerne les espaces tout autour des contenus, il s’agit là d’un parti pris avec l’objectif de facilité l’accès au contenu à l’œil et de rendre la lecture plus aisée. En ce qui concerne les widgets utilisés, ils sont pour la plupart des adaptations maison de certains widgets existants dans DotClear2, pour les autres c’est du 100% maison (comme celui des derniers commentaires).
@Jean-Michel : comme le souligne Stéphane, il ne s’agit pas de JQuery mais bel et bien d’appels fait en Ajax grâce le framework Mootools 1.1.
@Stéphane merci pour la critique, je vais faire des essais d’espacement différent.
@cr0vax : Come on ! montre l’exemple et crée ton gravatar, cela prend 1min30 !
salut,
bravo pour ce travail énorme…!
J’aime beaucoup la façon dont tu as réussi à changer de couleur dominante (jaune vers bleu) sans que l’on perde nos repères ; on retrouve bien l’esprit d’Aysoon dans cette nouvelle version. Bien joué !
Super. très lisible!
Design très sobre, de beaux contraste pour faire ressortir les infos essentielles, je trouve ca très réussi !
Très beau design qui permet une lecture facile et logique du blog, j’aime beaucoup l’harmonie des couleurs bref bravo pour cette nouvelle version.
Que dire ?
j’adoooooooooooooore !
Superbe design ! Je suis jaloux ! il faudrait que tu me donnes des cours de design car je ne suis pas du tout bon dans ce domaine ;)
En tout cas encore bravo autant la V2 était déjà superbe mais je préfère de loin la V3
Le design rend ton blog encore plus agréable à lire. J’aime beaucoup, merci pour tes efforts.
Par contre, les commentaires sont “éblouissants”, très fatiguant.
Lol, Aysoon, tu m’prends pour un influenceurs :D
J’suis blogger du dimanche moi :D
J’m'inscrirai à gravatar si j’en ressens le besoin (CAD a priori si beaucoup de blogs l’utilisent)
@all : je suis vraiment heureux que ça vous plaise.. le but était de vous faciliter la lecture des articles sur le blog et pas sur vos lecteurs RSS… l’objectif semble atteint et j’en suis ravi !
@cr0vax : donc tu es un influençable ? pourquoi ne pas prendre les choses en main et faire bouger les choses !!! c’est comme cela que l’on devient influenceur !
Ouahhhh, aYsoon, je te dis RESPECT pour cette V3. Tu es le Jedi du CSS
@+
Génial ! C’est super beau et clair … Une belle réussite. J’aime beaucoup aussi le back ground des commentaires!
Bravo Frédéric !!!! Tu peux te reposer maintenant :)
La nouvelles présentation est plus claire, la disparation des publicité est un plus non négligeable. Ton blog à vraiment un aspect plus professionnel (il faut que je pense à refondre le mien ^^).
Le seul bémol serait pour la lecture des commentaire je trouve que le texte blanc sur un dégradé de couleur est peu lisible.
Pierre
héhé aysoon, je ne suis ni influenceur, ni influencable, je vis dans mon coin, je blog pour moi, et si je regarde mes stats, ce n’est que pour checker les blogs où j’ai laissé des commentaires (pcq ils apparaissent souvent dans mes referers)
Franchement c’est…………la perfection. Je préfère lire ton blog en direct que dans mon lecteur RSS. C’est absolument sublime et très rare des sites comme le tien !
Félicitations !
1ère visite sur ce blog… excellent design, je suis complètement fan … le contenu m’intéresse énormément; ce soir, je n’ai parcouru que quelques articles et ce très rapidement et pour une 1ère lecture, contenu excellent également ! Merci et encore félicitations …