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.

refonte ajax responsive
Cette refonte de Wabeo était, une fois encore, l’occasion d’expérimenter les possibilitées de WordPress

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 ?

Contacter l'auteur :

willy bahuaud

Je suis Willy Bahuaud, intégrateur et développeur, spécialiste de WordPress.
Besoin de mes services ? Écrivez-moi !

19 commentaires

  1. Par Daniel — Il y a 4 années
    Comme je te l’ai déjà dit plusieurs fois, ce nouveau thème est tout simplement sulbime (et original en prime).

    Bravo pour le travail accompli l’artiste ;)

  2. Par sentimancho — Il y a 4 années
    Superbe design et integration. Joli boulot.
  3. Par Herbacha — Il y a 4 années
    Une de mes craintes dans ce genre de webdesgin original, c’est que les internautes se sentent complètement paumés…
    Parce que mine de rien, l’utilisateur lambda est habitué à un format bien précis de site, et je pense que dés qu’on sort des sentiers battus, il y a des chances qu’il n’y comprenne plus rien 😀

    Bon, en l’occurrence, la plupart de tes lecteurs ne sont pas Mme Michu, ce sont des internautes un peu chevronnés j’imagine, donc ça n’est peut-être pas une grosse problématique.

    Et puis même, je trouve que cette présentation reste plutôt claire et ergonomique, donc potentiellement accessible à tout public. C’est assez animé, assez « Responsive » comme tu dis, sans pour autant qu’il y ait des trucs animés dans tous les sens.

    Gros coup de cœur pour ce sommaire sur la gauche qui rend vraiment le plan de la lecture très clair. Et l’atmosphère du site me plaît bien. La police des titres donne un côté LittleBigPlanet (je ne sais pas si tu connais).

    Bref, beau travail, je vais te suivre sur twitter pour ne pas louper tes prochaines créations, c’est plutôt inspirant ;)

  4. Par Willy Bahuaud — Il y a 4 années
    Merci @sentimancho pour vos compliments.

    Mon point de vue sur l’originalité du design est simple : je pense qu’on ne doit pas forcément se laisser guider par les habitude des internautes. Bien sûr il ne faut pas les perdre complètement, cependant il est nécessaire d’aller vers d’autres type de design, d’ergonomie Sinon nous risquons de s’enfermer dans des designs figés par les habitudes d’utilisations des internautes.

    Bref, je pense que c’est une interface qui défini l’utilisabilité, et non l’inverse ;-)

    Mais ce n’est que mon point de vue.

    oui je connais Little Big planet, je ne suis pas partie de là ; mais je le prends comme un compliment 🙂

  5. Par LaurentA — Il y a 4 années
    Il y a du boulot dessous ce site internet. C’est intéressant cette approche permettant de garder les éléments important à l’écran grâce au scrolling.
  6. Par Charline — Il y a 4 années
    C’est réussi, bravo. J’aime beaucoup la page accueil, construite en verticalité.

    Personnellement je trouve juste le pied de page trop chargé et donc un peu trop long. Certaines infos aurait peut être gagnées à être condensées ou placées ailleurs.

    Coup de coeur pour le menu, le déroulement des items est original et j’adhère totalement 🙂
    Une version avec de la personnalité et tout en mouvement, j’aime !

  7. Par Arnaud — Il y a 4 années
    Vraiment réussi ton design !
    Par contre je suis pas fan du sommaire des articles à gauche.

    Mais sinon bon boulot ;)

  8. Par Osara — Il y a 4 années
    Je le trouve parfait ce site, juste les encarts un peu imposantes.

    J’adhère complètement à la navigation et à l’ergonomie.

    L’expérience côté utilisateur est réussie.

  9. Par romain — Il y a 4 années
    Pas mal, je trouve ça très réussi et surtout bien fini.
    Un site bien fini donne tout de suite une dimension de professionnalisme.
    Bravo!
  10. Par Fabien — Il y a 4 années
    Tout simplement magnifique !
    J’ai beau progresser (lentement) sur WP, ça me montre à quel point je suis loin … ;)
  11. Par david — Il y a 4 années
    Je rejoins un peu ce que dit Herbacha, mais il y a une cohérence générale dans tout ce qui compose le site. Donc on ne sent pas non plus si perdu que ça, malgré l’enchainement d’animations. (too much pour ma part)
    Backbone JS pourrait t’intéresser à l’avenir pour faciliter la conception de la structure du site (si j’ai le temps, je ferais un tuto dessus couplé a wordpress mais je pense qu’il doit y en avoir sur le net). C’est simple, rapide, et tu peux faire des trucs vraiment cool !
  12. Par Fabrice — Il y a 4 années
    Je l’ai déjà dit sur twitter, je réitère ici, superbe, ergonomique et fluide, bravo pour ce magnifique design !
  13. Par Rodrigue — Il y a 4 années
    Simplement énorme, j’ai vu aussi que tu met en place du Parallax sur un autre de tes sites ^^ moi j’adore jusqu’au choix des couleurs… Je te garde sous la main.
  14. Par Willy Bahuaud — Il y a 4 années
    Comme ça, là, j’ai du mal à comprendre ce que permet blackbone JS… donc si tu fais un tuto je suis carrément intéressé. En librairies JS qui m’intéresse beaucoup actuellement, il y a aussi angular…

    @rodrigue Merci beaucoup pour vos compliments !!

  15. Par Emmanuel — Il y a 4 années
    Hello,

    Eh bien là je dois dire je suis sur le Q ;-)
    Très belle réalisation et quelle technicité !
    A se revoir bientôt IRL, j’espère ;)

  16. Par Guillaume — Il y a 4 années
    Votre site est vraiment magnifique bon je suis pas le premier à le dire du coup ça démystifie un peu le compliment mais vous avez fait vraiment du très bon boulot .
  17. Par Prodjia — Il y a 3 années
    Super article et très belle refonte !
  18. Par Watt — Il y a 3 années
    Bonjour,

    Je viens de tomber par hasard sur votre blog, le design est vraiment sympathique en plus d’être original. On à pas l’impression d’arriver sur un WordPress brut de « dézippage  » comme on peut en voir beaucoup sur la toile…

  19. Par Ahmed — Il y a 12 mois
    j’aime bien le design, ergonomique et fluide. J’adore aussi les choix des couleurs… Bref, votre site est très réussi et surtout bien fini !

Commenter