Une refonte en profondeur

Cela faisait quelques mois que je travaillais sur le projet, le voilà : la nouvelle version de wabeo est en ligne.

Au programme il y a de nombreux changements, assez subtils pour certains, radicaux pour d’autres.
Comme souvent la refonte d’un site perso est l’occasion d’essayer de nouvelles choses, de mettre en pratique des idées ou d’expérimenter des technologies dont on n’ a pas l’habitude.

Une envie de refonte

Il est difficile d’être satisfait d’un site, une version est à peine finie que des nouvelles techniques sont apparues et que l’on a envie de tout recommencer.

Je suis particulièrement sujet à ce problème, d’autant que cette année a été riche en apprentissages pour moi. J’ai dévoré pas mal de livres qui m’ont beaucoup inspirés, insufflés des idées, des concepts et donnés envie de repenser ma pratique de web designer. Et wabeo est le laboratoire parfait pour expérimenter de nouvelles choses.

Beaucoup des points suivants feront d’ailleurs l’objet d’articles à venir.

De l’ajax, du vrai

J’avais déjà fait plusieurs sites en ajax, ainsi que des articles sur WordPress et l’ajax, mais cette fois-ci j’ai souhaité aller un peu plus loin.

Dans l’ancienne méthode que j’utilisais, lorsque l’on cliquait sur un lien c’est l’ensemble de la page qui était chargée, parsée, analysée puis importée. Il y avait donc autant de calculs que pour afficher la page directement. Pas de vrai gain de temps, donc… juste une expérience un peu plus ludique.

Sur cette version, le procédé est différent : Lorsque l’on clique sur un lien, l’URL est envoyée à un script php qui va l’analyser et retrouver le contenu correspondant. Ensuite ce même script va aller récupérer, s’il n’est pas mis en cache, les informations qui nous intéressent  et les  renvoyer au javascript au format JSON.

C’est ensuite le javascript qui va, en fonction du referer et de la nouvelle URL, définir quelle sont les animations à effectuer pour charger les nouveaux contenus.

Ça n’a l’air de rien comme ça, mais 6 type de referer x 6 type de liens ça fais 36 animations possibles ^^

L’API history

Dans mon ancienne façon de faire des sites en ajax, j’utilisais le « hashbang » (#!). Dans cette nouvelle mouture j’ai usé de l’API history d’HTML5 qui permet d’avoir le contrôle sur la  barre d’URL des navigateurs qui le supporte.

C’est plus joli et c’est complètement transparent pour les moteurs de recherche.

Du responsive tranquille

Ça devient incontournable, et c’est tant mieux. Le site est maintenant adaptable sur toutes les tailles et types d’écrans.

Le responsive n’est pas une contrainte graphique, au contraire dans le sens où il me permet d’utiliser la totalité de l’espace pour mettre en valeur mes informations.

J’ai essayé de faire des ruptures les plus simples et discrètes possibles pour ne pas faire trop « feu d’artifice » également.

Une approche « émotionnelle »

J’ai lu il y a quelques mois l’excellent livre d’Aarron Walter « Emotional Design » qui, il faut le dire, m’a mis une grande claque dans la face…

Il m’a invité à revoir mon approche du web design que j’ai mis en pratique ici, tant que je l’ai pu.

En gros il s’agit de susciter l’intérêt et la curiosité de l’internaute en abordant une posture aux antipodes du « corporate ». Je souhaite faire ressentir que derrière le site il y a quelqu’un d’humain et d’abordable.

Cela passe bien sûr par les textes et le graphisme, mais aussi par des évènements, des petites actions, qui se produisent lorsque l’on laisse un message, que l’on commente un article, que l’on scroll, que l’on tombe sur un lien cassé…

Une meilleure ergonomie

La précédente version du site manquait de catégories et de classement en général, j’ai amélioré cela en mettant en place deux catégories pour l’instant : WordPress et Webdesign.

J’ai également des tags qui sont accessibles par les page de détails des articles et qui permettent de naviguer dans des thématiques très précises.

J’ai utilisé, grâce au responsive web design, la totalité de la largeur disponible pour le pied de page. On y retrouve une masse beaucoup plus conséquente d’informations que précédemment. C’est devenu ma zone de « contact » qui est donc présente sur la quasi totalité des pages du site.

J’ai aussi travaillé le confort de lecture des articles en utilisant des polices d’écriture plus adaptées et une taille de texte plus importante.

Des pages pour les images

Une autre nouveauté est que les images du contenu ont maintenant des pages dédiées.

Je trouvais dommage de passer du temps à réaliser des visuels à la main pour ne pas pouvoir les présenter davantage.

Elles s’ouvrent toujours dans des boites modales lorsque  l’on clique dessus, mais on a ensuite la possibilité de se rendre sur une page et d’en apprendre plus. Sur la page d’attachement du WordPress, il est aussi possible de  télécharger l’image dans tous les formats.

C’est aussi un plus pour la SEO, je pense…  j’espère…

Du SVG

Pour alléger le poids du site, j’ai utilisé un maximum d’images en SVG, récupérées sur The Noun Project ou bien créées spécialement avec SVG-edit , les pictos ne pèsent presque rien.

Si vous naviguez avec firefox, vous remarquerez peut-être que le logo de Wabeo est lui même un SVG avec un clip-path, et un arrière-plan défilant.

Du webGL

Pour finir, et c’est ma grande déception, l’arrière-plan du site devait être en WebGL. Malheureusement la techno est pour le moment trop instable et faisait littéralement freezer des ordinateurs avec des cartes graphiques non compatibles. Mais sinon cela fonctionne parfaitement sur certains postes.

Si vous êtes curieux, cela devait ressembler à ça.

Cela dit, je ne désespère pas de mettre un fond WebGL en place d’ici quelques mois ^^

Remerciements

Beaucoup de personnes m’ont aidé pour cette refonte, soit par leurs avis, soit en m’apportant des solutions, ou  tout simplement en me supportant ^^

Merci donc à @did44, @rochdaniel, @bwebblog, @theloopfr, @raherian, @wanderer7790, @geoffrey_crofte, @GeekPressFR, @titifrim, @DauresC, @gcouprie, @P_vincent, @GeoffreyHug et tous les collègues dont je n’ai pas le twitter…

Alors, vous en pensez quoi ?