Une nouvelle peau pour le blog

Une refonte tous les ans, c’est la règle….
Blague à part, je suis assez fier de vous présenter le nouveau design du site ! Cela faisait quelques mois que je le travaillais, depuis la dernière refonte en fait.

Le précédent thème avait posé les bases d’un arrangement graphique que j’aimais, mais qui m’avait laissé sur ma faim. J’ai donc repris mes idées et les ai laissé mûrir quelques temps.
J’ai pris le temps de poser les concepts, les technologies, les envies, les images. J’ai voulu faire rendre une ambiance beaucoup plus minérale, cristalline, mais toujours dans cette ambiance aquatique, mouvante… J’ai aussi du faire un peu de level-up en canvas 🙂

Allé, je vous fais la visite du propriétaire !

Un design plus affirmé

Comme je le disais, à la base il s’agissait pour-moi d’arriver à sortir un design plus affirmé, plus proche de l’image que j’en avais en tête.
Je voulais que le site soit emprunt d’un imaginaire des fonds marins, des abysses, de l’eau, de la roche et de l’ombre… (et ouai) mais en stylisé.
J’avais envie de formes plus angulaires, de textures plus cristallines, et de couleurs plus vibrantes… j’ai essayé de n’utiliser ni noir, ni blanc purs.

Une grosse partie du travail a été passée à réaliser le fond. Je savais exactement ce que je voulais, mais absolument pas comment le faire. Je me suis donc un peu arraché les cheveux. Il y a donc, dans ce fond, 450 formes aléatoires qui se décrochent des parois pour disparaître lentement au milieu, puis réapparaître sur les bords.

Il devait être en canvas au début, mais pour des questions de performances, je l’ai basculé sur du webGL grâce à la librairie pixiJS.

Sinon, pour le reste du design, je me suis borné à l’usage de rectangles bleutés légèrement translucides. C’est simple et ça colle bien avec l’esprit du site.

Du full ajax, mais encore mieux

Le site reste en full ajax ; il l’est même encore plus qu’avant, puisque la recherche se fait aussi en ajax.
J’ai expérimenté une nouvelle méthode pour faire mes requêtes, une méthode qui n’utilise plus admin-ajax.php. Cela m’avait donné beaucoup trop de fil à retordre inutilement, dans la précédente version du thème.

Cette nouvelle méthode permet un affichage plus rapide des contenus. Mais on vous en parlera bientôt avec Julio de BoiteAWeb.

Les différentes transitions ont été un peu simplifiées. Je les ai rendues moins agressives (l’effet de rotation 3D au survol des miniatures d’article commençait à me piquer les yeux).
Elles sont également un peu plus uniformisées, mais c’est lié au fait qu’il y ait moins de variété dans les templates.

Des changements dans la structure

Dans la précédente version du blog, j’avais deux catégories : « WordPress » et « Webdesign ». Elles ont disparues.
Je rédige trop peu d’articles pour tirer parti d’une telle classification. J’ai décidé d’expérimenter plus largement le potentiel des tags, qui ne sont pas très nombreux, mais qui se croisent régulièrement.

Cette nouvelle mouture est plus light, il y a moins de templates : une home (avec les articles), un template de grille, un single, 404 (hé hé), et attachement.
J’ai conservé la page des fichiers attachés, en fait je trouve ça assez agréable d’avoir une page avec plus d’informations sur les images que je fais pour illustrer les articles.
Néanmoins, lorsque vous lirez un article et que vous cliquerez sur une image, elle s’ouvrira bien dans une lightbox, et vous proposera d’aller visiter la page d’attachment.

Gros travail sur les images

Previously on wabeo, j’avais testé les images en SVG. C’est très léger, mais à la longue, j’ai trouvé que c’était dur à maintenir et le support des fonctionnalités liées aux SVG est plutôt mauvais. Chaque navigateur le traite à sa sauce et je n’avais pas envie de repartir là dedans.
J’ai plus largement expérimenté le canvas (pour les logos) et le CSS. Sur un design assez angulaire, ça c’est révélé plutôt simple : beaucoup de border, de box-shadow et de pseudo-éléments.
Je remercie @One_div au passage, pour le coup de main sur les formes complexes, telles que les hexagones des avatars, dans les commentaires.

Pour les formes très complexes telles que les pictos, j’ai utilisé une fonte d’icône, composée via l’application icomoon.

Une meilleure lecture sur le site

Wabeo c’est surtout un blog. Pour ça je me suis donc appliqué à rendre la lecture plus agréable. L’article dispose de plus de place pour s’afficher, en desktop, en tablette et en smartphone. Les différentes sections sont également plus facilement identifiables.

J’ai centralisé les informations relatives aux articles sur une colonne uniquement. Deux colonnes c’était pas pratique. Merci Daniel pour le conseil !

Les polices sont aussi plus grosses, et mieux choisies (en tout cas j’y ai mis plus de temps).

Quelques plugins choisis

Je n’ai pas utilisé des masses de plugins WordPress.

• Pastacode pour l’affichage du code
• Juiz Social Post Sharer pour les boutons de partage
• Mention comments Authors pour se poker dans les commentaires
• WP Deferred Javascript pour optimiser le chargement des scripts
• SF Smilies (j’en avait marre des smileys par défaut)
• PAPII pour récupérer les infos relatives aux plugin directement sur l’extend de WordPress

J’ai aussi utilisé colorbox, un plugin de jQuery pour faire des boites modales, simple et très facilement paramétrable.

Qu’en pensez-vous ?

Alors, dites-moi ce que vous en pensez ? Je suis curieux 🙂

Je remercie encore chaleureusement tous ceux qui m’ont aidés, qui m’ont donné leurs avis, qui m’ont supportés…

Merci Daniel, Djimmy, Julio, Benny, Amandine, Anne-So, Vincent, Hélène et tous les ex-collègues de FC !