Nouveau design du blog… la v3 est en ligne !

 

 

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 aysoon.fr 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 ?

33 Commentaires (ajouter le vôtre)
  1. Une belle réussite!
    Félicitation.

  2. 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.

  3. Très réussie cette nouvelle version de ton blog ! Simple sans l’être trop… bon résultat final =).

  4. 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 !

  5. Design unique très claire. En revanche ça ressemble un peut à vista, surtout le header.

  6. @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.

  7. blognaute

    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 !

  8. Bien mieux je trouve :D
    Je regrette par contre le choix des gravatars par rapport à la preview du blog

  9. Bravo ! La charte graphique est particulièrement réussie :)

  10. 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 ?

  11. 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)

  12. @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.

  13. 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 ?

  14. 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…

  15. 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).

  16. Moi j’aime bien : très classe, lisible, et dans la mouvance graphique actuelle.

  17. J’comprend ton choix, mais perso mon gravatar restera vide, la flemme de m’inscrire à un service de plus :D

  18. @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 !

  19. 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é !

  20. pascal

    Super. très lisible!

Poster un commentaire

© 2006-2012 Frédéric Cozic  
Propulsé par Wordpress sous licence Creative Commons