Deadly BreakfastUseless is more

Une fois n'est pas coutume, je vais vous raconter un peu comment la refonte de mon portfolio s'est déroulée. Si ça peut vous donner une idée du temps qu'il m'a fallu pour faire cette refonte, j'ai commencé il y a un peu moins de 3 semaines, sans travailler 24h/24 dessus, bien évidemment. Je suis une habituée des refontes "flash-éclair" en 3 jours pour mon blog ou ce site là, mais cette fois j'ai voulu prendre mon temps, peaufiner divers éléments et découvrir de nouveaux trucs.

Etape 1 : Trier & épurer

L'idée de base était de simplifier mon ancien site pour mettre en valeur mon portfolio et mon CV, les illustrer de manière plus efficace.

Je souhaitais tout de même garder les éléments qui me plaisent comme le coté épuré de la structure générale, la navigation très très simple ou une page d'accueil avec une présentation concise. Mais il fallait tout de même faire le tri dans les différentes pages de contenu, les réalisations qui ne sont plus d'actualité et ajouter les derniers projets sur lesquels j'ai travaillé. Deux pages ont donc disparues (Lab et Photos), au profit de redirections vers des sections de mon portfolio qui se retrouve alors enrichi de projets plus funs et de séries photographiques.

Il fallait penser simple et épuré, voila donc la stratégie abordée pour commencer le maquettage, fait sous Balsamiq Mockups, un outil de maquettage performant que j'utilise depuis des années. Je vous épargne les maquettes de toutes les pages, mais voila déjà celle de la page d'accueil pour vous donner une idée.

Étape 2 : Changer le style et la couleur

Je ne voudrais pas me la jouer Picasso, mais je crois que je suis dans ma "période bleue". C'est peut être le printemps qui arrive, ou ma couleur de cheveux actuelle, mais le bleu s'imposait comme une évidence. Le bleu utilisé sur le site vient d'une de mes illustrations du #defidessinfévrier (que j'ai d'ailleurs utilisée pour faire un petit logo/avatar). Si vous êtes sur Mac, je vous recommande grandement Sip, un petit outil pour récupérer le code couleur de n'importe quoi affiché sur votre écran, dans le format de votre choix. Cadeau bonux, pour chaque code couleur, vous aurez un petit nom pour décrire votre couleur. Mon bleu est, parait-il, céruléen : bleu comme le ciel, quoi.

Coté illustration, je commençais un peu à me lasser de mes anciens petits dessins sur les diverses pages de mon ancien site et je voulais mettre en valeur un peu mon coté photographe sur mon site : j'ai donc choisi un autoportrait réalisé il y a peu pour ajouter un coté plus personnel à la page d'accueil. 

Coté style, j'ai souhaité garder la police de caractère qui me plaisait déjà énormément, mais en supprimant le coté "tout en majuscule" pour les titres et la navigation, afin d'améliorer la lisibilité. Je souhaitais aussi conserver les graphes sur la partie CV, en cherchant une véritable alternative à un simple Jpeg, avec un peu de mouvement, et surtout plus d'accessibilité.

J'ai donc commencé le maquettage haute fidélité sous photoshop, afin d'avoir une idée plus précise du rendu de ce nouveau design, mais sans forcément le peaufiner à 200%. En effet, sachant que j'allais intégrer moi-même le design et que j'étais totalement en accord avec le client final (c'est à dire moi), j'ai préféré ajuster les différentes tailles d'éléments directement à l'intégration :)

Étape 3 : Intégration et code

D'habitude je pars plus ou moins de zéro, en tapant toutes mes css sans la moindre auto-complétion... et puis cette fois, j'ai voulu découvrir de nouveaux trucs :

• Sublime Text : Un éditeur de texte vraiment chouette, bien pensé et plutôt agréable à utiliser, ça me change de Smultron !
• Sass : Je voyais plus ou moins comment ça fonctionnait en théorie, la mise en pratique a été plus que rapide ! Des variables et des fonctions dans des css, c'est le début du bonheur :)
• Yeoman : Quitte à passer à Sass et devoir compiler un fichier pour avoir le rendu final à chaque enregistrement, Biou m'a conseillé d'installer Yeoman, qui fait à peu près tout ce qu'un intégrateur peur rêver : compilation du fichier Sass à chaque enregistrement, rafraichissement automatique de la page sur laquelle vous travaillez à chaque enregistrement grâce à Grunt, installation simplifiée de plein de modules JS ou d'outils divers dont on peut avoir besoin pour son projet. Mon seul regret ? Tout se lance en ligne de commande : de quoi faire peur aux graphistes qui voudraient l'utiliser. L'installation s'est plutôt bien passée, mais coté export du projet, j'ai eu plusieurs problèmes.
• SVG et JS : Je n'avais jamais vraiment eu l'occasion de jouer avec du SVG dynamique couplé avec du JS. En cherchant un peu sur le net, j'ai trouvé une bonne base pour commencer le développement de l'affichage dynamique de graphes de mes compétences sur mon CV. Ça devrait bien faire 10 ans que je n'avais pas codé en JS, depuis la fac quoi. Bon évidemment, ces dernières années, ça m'est arrivé d'utiliser ou de modifier un peu de code, mais pas vraiment d'en écrire moi-même. Alors après quelques lignes de codes en compagnie de Biou (qui est un super prof au passage), je me suis lancée toute seule dans mes premières fonctions utilisant jQuery. Et ben franchement, si jQuery avait existé à l'époque ou j'ai fait mes études, ça aurait bien pu tout changer pour moi ! Au final, j'ai ajouté quelques petits bouts de codes dans mon site pour une expérience utilisateur plus sympa : des petits graphes sur mon CV, un tri par type de projets dans mes réalisations et une petite fonctionnalité cachée (mais je n'en dirais pas plus, non non non). 
• HTML5 et formulaires : le formulaire de contact avait déjà un système de vérification de données, mais en ajoutant un peu de code dans le formulaire, la validation se fait à la volée pour les champs requis ou le format de l'adresse e-mail.

Au programme de cette intégration, des petits trucs moins nouveaux, mais tout aussi appréciables :

• J'ai gardé quelques bonnes habitudes, comme prévoir une interface responsive qui s'adapte avec succès sur tout types d'appareils. Sur mobile, des polices de caractères alternatives, présentes dans les systèmes comme iOs, Andoid ou Windows phone permettent d'afficher le texte rapidement et avec style, même quand on a une connexion toute pourrie.
• Le Javascript apporte une meilleure expérience utilisateur, mais n'est pas essentiel au fonctionnement du site. Un texte alternatif s'affiche pour remplacer les graphes par exemple.
• Coté accessibilité, un soin tout particulier a été apporté aux textes alternatifs, comme pour les graphes du CV.
• La navigation principale reste ancrée en haut pour les affichages en grandes résolutions.

Le tout a été intégré sous Dotclear, comme c'était déjà le cas sur mon ancien site, et quelques jours plus tard, la version de test de mon site était en ligne.

Étape 4 : Tests et feedback

Après avoir envoyé un petit mail à plusieurs amis pour leur demander de tester et de me donner leur avis sur ce nouveau site, j'ai eu quelques retours très pertinents concernant des petits bugs d'affichages, des idées de fonctionnalités ou même des fautes de frappe : merci à eux :)
Il n'est pas toujours possible de trouver une solution à chaque point soulevé, mais ces quelques remarques m'ont permis d'améliorer un peu plus l'expérience utilisateur de ce site.

Et le lendemain ... la refonte de redisdead.net était en ligne !