Graphyzart version 4.0

0
55
vues
mockup graphyzart 4.0
 

Rétrospective

Visibilité

Depuis la version 3.0 du blog qui datait de fin 2014, l’audience se portait plutôt pas mal.
J’ai même reçu plusieurs demandes de collaboration, notamment une avec Dotmailer. Lorsque je parle de collaboration je préfère spécifier que mon jugement est toujours objectif et ma seule contrepartie est un peu de visibilité pour le blog. Les articles sur ce blog ont toujours été écris par envie et dans le but de faire découvrir des nouveautés et obtenir vos avis et points de vue pour brasser le plus d’idée possible.

J’ai aussi obtenu pas mal de retour de personnes impliqués dans les sujets des articles et c’est très motivant. J’essaie d’ailleurs la plupart du temps de mettre à jour les articles en fonction de ces discussions.

Mobilité

En version 3.0 graphyzart permettait à tout le monde de lire les articles du blog sur tous supports et n’importe où. Tout du moins dans la théorie. Car en pratique j’ai remarqué, malgré tous mes efforts, que les temps de chargement du site sur les appareils mobiles n’étaient pas au top. Les images prennent une place importante sur le site et leur chargement est en partie ce qui ralentissait le site. J’ai remédié à une partie de ce problème en compressant mes images au maximum, notamment à l’aide de compressor.io et du plugin WordPress WP Smush.

Mais l’un des plus gros soucis venait aussi et surtout du thème utilisé : Valenti. Un très beau thème et qui offrait un large éventail de possibilités et de customisations. Mais qui n’était pas si performant que ça. Il fallait donc que je revienne à l’essentiel avec un thème beaucoup plus léger. Pour être franc dans le thème Valenti, si on commence à toucher un peu aux fichiers php on se retrouve vite embourbé. Il s’agit d’un thème premium, il n’est pas réellement fait pour être personnalisé à la base. Le plus souvent les thèmes premium sont créé pour répondre à des besoins de création de site clef en main entièrement personnalisable via l’administration WordPress ou presque, c’est bien pour ça que leurs prix sont légitimes.

Le contenu

Le fait d’avoir offert aux visiteurs la possibilité de noter les articles m’a permis de définir vos envies et intérêts. Du coup j’ai pu adapter mes contenus et depuis quelques temps les articles les plus vus et appréciés font partie des plus récents (dans ce constat je prend en compte tous les retours, pas que la notation d’article).
D’ailleurs par rapport à cette question de notation, les revues de produits, applications et autres n’ont pas tellement fonctionné, il n’y a pas eu énormément de notation de la part des visiteurs mais beaucoup plus de notation sur l’article lui-même. J’ai donc pas mal réfléchis à ça pour la nouvelle version de graphyzart.fr.

Les collègues

Alors là je suis vraiment très content de cette partie puisque de base ma liste de collègues comprenaient des gens avec qui j’avais collaboré ou avec qui je collabore encore. Mais récemment j’ai décidé de proposer à des professionnels de faire partie de cette liste. Mes choix se porte sur des gens avec qui j’ai beaucoup communiqué et/ou qui ont fait l’objet d’un de mes articles. Et je suis fier à présent de pouvoir compter parmi eux deux personnes géniales :

  • Nicole Saidy, une Designer, Coach, conférencière freelance mais aussi enseignante pour le Wagon (mais pas encore en France à mon grand regret).
  • Brad Frost, un Designer, consultant, musicien et artiste, créateur de l’Atomic Design, une excellente méthodologie pour la création d’interface. Vous pourrez trouver mon article sur le sujet ici.

Si vous voulez faire partie de mes collègues ou que vous pensez à quelqu’un en particulier, n’hésitez pas à me le faire savoir et nous pourrons en discuter.

La refonte

Cette refonte s’est effectuée il y a environ une semaine, mais a été réfléchis pendant un bon moment. Il fallait avant tout que j’arrive à me réserver du temps pour le faire et de manière rapide. Après pas mal de recherches autant niveau performance que niveau fonctionnalité mon choix s’est porté sur le thème ionMag. Il s’agit d’un thème de type Magazine très bien fichu et totalement gratuit. Pour le coup en allant voir le code et en faisant quelques tests en local avec je me suis rendu compte que pour mes besoins il battait totalement mon ancien thème premium et le code était bien plus personnalisable et compréhensible.
Par rapport à l’ancien thème le site a un peu changé, mais dans un soucis d’unité j’ai voulu garder ma charte de couleur et une interface similaire à la précédente.

L’héritage

  • Un mega menu dans le header avec les 3-4 derniers articles mis en avant.
  • Une grille des 3 derniers articles juste sous le menu sur la page d’accueil.
  • Le plugin Rating-Widget: Star Review System est toujours présent avec le podium qui remonte dans la sidebar.
  • Un widget de réseau sociaux pour me suivre à travers le web.
  • Il y a toujours une fonction de revue de produit mais les visiteurs n’ont plus la possibilité de donner une note.
  • Les fonctions de partage d’article.
  • Les articles en relation avec l’article en cours de lecture.
  • La recherche sur le site est toujours possible et en plus efficace (voir les nouveautés).
  • La liste des collègues est toujours présente comme vu dans la partie précédente.
  • En système de commentaire Disqus est toujours là et le restera.
  • Dans le footer j’ai gardé les mêmes informations à savoir :
    • Les liens utiles (contact, mentions légales et un lien vers mon portfolio).
    • Les archives classées par années (d’ailleurs plus le temps passe et moins il y a d’article malheureusement).
    • Les mots-clés du site.

Les nouveautés

  • Les call Ajax joue un rôle important dans le nouveau thème et font gagner un temps fou en chargement global. Dans le Mega Menu les articles sont chargés en Ajax ce qui implique que seules les catégories sont chargées dans le menu mais les articles eux-mêmes sont récupérés que lorsque vous vous intéressez à une catégorie. Vu le nombre de rubrique du blog c’est vraiment un gain considérable sur les perfs globales.
    megamenu graphyzart 4.0
    Aperçu du Mega menu sur graphyzart 4.0
  • Les images s’affichent au fur et à mesure du scroll. C’est à dire qu’elle n’apparaissent que lorsqu’elles se trouve dans la fenêtre de votre navigateur. Ce qui permet d’afficher le contenu au dessus de la ligne de flottaison beaucoup plus rapidement.
  • La fonction de recherche aussi offre une meilleure expérience. Maintenant l’icône de recherche se trouve dans le menu et la recherche peut donc se faire à tout moment, même en bas de page. Pendant que l’on tape sa recherche des suggestions d’articles sont affichés.

    rechercher sur graphyzart.fr
    Aperçu de la recherche sur graphyzart 4.0
  • La sidebar est de type sticky à présent (lors du scroll celle-ci se fixe à l’écran).

    sticky sidebar sur graphyzart 4.0
    Aperçu de la sidebar fixe au scroll d’un article
  • Maintenant tous les articles en relation remontent sous forme de slider chargé en Ajax.

    les articles en relation
    Aperçu du slider des articles en relation sur graphyzart 4.0
  • Petit truc sympa avec ce nouveau thème, un compteur de vue sur les pages d’articles. Cette petite fonctionnalité permet aux visiteurs de voir si l’article est beaucoup consulté et me permet de mon côté de voir l’implication des visiteurs en complément de google analytics (le nombre de vue a commencé à être comptabilisée à partir du week-end dernier).

    nombre de vue sur graphyzart 4.0
    Aperçu du nombre de vue sur l’article « un nouveau logo pour Skype »
  • Et enfin dans la navigation lors du scroll et sur appareils mobiles ont retrouve le logo Graphyz’Art dans sa version icône.
    logo graphyzart navigation desktop
    Aperçu du logo dans la navigation sur desktop

    logo graphyzart navigation mobile
    Aperçu du logo dans la navigation sur mobile

Conclusion

Avec cette nouvelle version votre expérience sur le blog sera sûrement meilleure. Les chargements beaucoup moins longs, et la lecture des articles n’en sera que plus agréable. Tout ça vous donnera, je l’espère, envie de revenir.
N’hésitez pas à donner votre avis et vos suggestions dans les commentaires ou même en privée en m’envoyant un mail via le formulaire de contact.