behaba v1.0
Je suis fier de vous présenter la toute première version du site behaba. Toute première ? Pas véritablement. Auparavant, mon site personnel avait pour nom “Clearideaz”, une désignation qui ne me satisfaisait plus et qui pouvait laisser libre court à de mauvaises interprétations.
Pourquoi behaba ?
Avant d’imaginer ma nouvelle identité, j’ai d’abord listé ce que je ne voulais pas. Je ne désirais plus de nom à consonance anglophone notamment.
J’ai ensuite dressé une liste des identités que j’appréciais soit par leur identité ou par leur signification. Parmi la liste, il y avait notamment :
Ce nouveau nom allait être lié à mon lancement en tant que freelance dans la conception de site internet. Il allait être forcément en rapport avec mes principes de travail. Je défend notamment une approche simple et sans “buzzword”. Les concepts fumeux qui révolutionnent la présence sur internet sont bien souvent de fausses promesses. Les clients ont besoin de termes compréhensibles. Je souhaitais revenir aux fondamentaux. Un site web, c’est avant tout du contenu, c’est une arborescence, une navigation. Le b-a-ba ! Eureka ! J’avais le nom, il restait l’orthographe. “b-a-ba” est trop complexe pour un nom de domaine. J’ai finalement opté pour “behaba”. Pour la baseline, encore une fois, je me devais d’aller droit au but. Pas de métaphore ou de sens caché, “Webdesign, code et méthode” allait signifier ma triple compétence de Webdesigner, Développeur et Chef de projet.
L’identité visuelle
Avant même le lancement du site internet, j’avais procédé à la réalisation du logo et des cartes de visite. C’était en quelque sorte un test pour bien valider que ce nom pouvait raisonner dans l’esprit des gens et c’est beaucoup moins coûteux que de se lancer tête baissée dans la réalisation d’un site internet.
Le logo se devait d’être simple et je l’avais donc basé sur une typo ronde faite maison sous Illustrator. J’ai intégré des lunettes parmi les caractères pour évoquer la lecture, l’étude (et donc pas uniquement pour souligner ma myopie ;)) Les lettres sont groupées par deux pour suggérer la méthode syllabique (qui fut également ma méthode d’apprentissage de lecture NDLR). Finalement, j’étais assez content du résultat car mon logo avait une signification, une histoire et était simple en lecture.
Suite à la diffusion de mes premières cartes de visites (imprimées chez Moo), les différents retours m’ont confortés dans le choix de mon identité.
Les cartes de visites accompagnées de leur étui conçues par Moo.com
Le lancement de la conception du site internet
Le webdesign
J’amorce donc le processus de création. Un premier temps, j’ai tenté l’approche qui consiste à travailler directement dans le navigateur. Je l’avais déjà utilisé pour des projets clients. Ce fut un échec, l’inspiration ne venait pas et je me confrontais sans cesse à des impasses. Le souci de ce procédé est qu’il ne permet pas une vision d’ensemble contrairement à la bonne vieille méthode sous Photoshop ou Illustrator.
Je suis donc revenu à la base (après tout, behaba, c’est ça ;)). J’ai commencé par créer un “moodboard”.
J’ai dégagé des grandes tendances. Le jaune revenait sans cesse dans les éléments qui attirait mon œil. J’ai donc sélectionné cette couleur comme seconde couleur dominante (la première étant le bleu du logo).
Sur la construction de la page d’accueil, encore une fois, j’ai répertorié ce que je ne me refusais à utiliser :
- Un slider,
- Une grille trop restrictive,
- Une mise en page trop convenue,
- Des icônes à la FontAwesome dès que l’occasion se présente.
À contrario, j’aspirais à une mise en page très personnelle (je recommande la lecture de la retranscription de la conférence “Design de soi” par Marie Guillaumet donnée à Paris Web en 2015), je voulais pouvoir mettre à profit mes compétences d’illustrateur. C’est également une tendance qui se dégageait du “moodboard”. Je souhaitais enfin prendre le contre-pied du flat design (un peu marre de voir les mêmes couleurs, les mêmes boutons, les mêmes typos…).
En premier lieu, j’ai travaillé sur mes illustrations. Je me suis dis que ce serait plus simple de construire les différentes pages autour de ces illustrations plutôt que l’inverse.
J’ai ensuite poursuivi sur la mise en page. J’ai travaillé l’ensemble du webdesign sur Affinity Photo, nouveau logiciel qui chasse sur les terres d’Adobe Photoshop. Le retour que j’en ai est très positif pour une application qui n’en est qu’à ses débuts.
Pour l’agencement des différentes zones, j’ai puisé l’inspiration sur les sites sur lesquels j’ai plaisir à naviguer. J’aimais beaucoup la manière dont Christophe Andrieu présente ses informations de contact en entête de page. J’ai repris ce principe. Il a également dépourvu son site de navigation claire, axant pratiquement tout sur le contenu de page et le fil d’ariane dans les pages intérieures. Je n’ai pas été jusque là mais je n’avais pas envie d’avoir une navigation placée de manière trop conventionnelle (du moins sur l’accueil).
Pour les boutons d’action, pas de trucs “bootstrappés” aux coins arrondis, je suis plutôt parti sur des liens traditionnels mis en valeur par une ligne de peinture. La plupart des couleurs est d’ailleurs traitée par une peinture (numérique) de type aquarelle.
Pour les typos, j’ai utilisé une fonte arrondie proche de celle que j’ai créé pour mon logo pour les titres (Comforta créée par Johan Aakerlund. Pour le texte de contenu, j’ai choisi la police Raleway.
Le développement backend et frontend
Le site clearideaz.com avait été bâti sur le CMS Statamic, un CMS propriétaire qui utilise des fichiers plats (flat files) à la place d’une base de données. L’outil m’avait beaucoup séduit à l’époque mais j’avais fais face à pas mal de soucis sur les performances. J’avais envie de conserver une structure basée sur des fichiers. L’expérience de rédaction et la gestion du versionnement et du déploiement est très confortable. Depuis 2014, l’éco-système des CMS connait des remous avec l’avènement des gestionnaires de contenus statiques. Je me suis beaucoup intéressé à ces outils et j’ai décidé qu’ils pourraient être un choix de raison pour mon futur site web.
J’ai expérimenté sur Wintersmith mais il me semblait que le rythme de mises à jour n’était pas assez soutenu et je rencontrais des soucis de flexibilité pour la construction de différentes parties (portfolio notamment). J’ai même failli revenir à WordPress après cette première expérience laborieuse. Mais en flânant un soir sur le web, je fis connaissance avec Metalsmith et c’était le début d’une belle histoire. L’outil se dit “pluggable” et ce n’est pas du bullshit. L’outil est extrêmement flexible puisque sa logique est basée sur les plugins. On peut alors aller très loin dans le traitement de ses fichiers de contenu.
En fin de compte, le temps passé sur le développement backend a été très rapide tant la prise en main de Metalsmith est facile. C’est sur le développement frontend que l’effort a été le plus important (et c’était tant mieux !). Je souhaitais avoir une structure HTML légère. Pas de soupe de <div />. J’ai essayé au maximum de limiter le nombre de balises m’obligeant ainsi à faire certains compromis sur la mise en forme. C’est également la première fois que je me lançais dans une intégration dont la structure était entièrement basée sur Flexbox et je suis véritablement tombé amoureux de ce module de CSS (je risque de faire des infidélités lorsque le module Grid sera supporté par la majorité des navigateurs). Quel plaisir de ne pas avoir à recourir sans cesse à des “clearfix” sur les conteneurs de flottants. À ce sujet, je vous conseille la lecture de CSS3 Flexbox par le très célèbre Raphaël Goetter.
Pour la partie Javascript, c’est également une première pour moi. J’ai souhaité coder de A à Z sans framework les différents scripts (du vanilla js !). C’était un risque mesuré car je savais que j’allais me reposer au maximum sur les possibilités offertes par CSS. Encore une fois, le compromis a été de mise. Je voulais éviter au maximum de multiplier les méthodes en fonction des possibilités des navigateurs. Aussi, j’ai préféré axer mes développements sur les navigateurs dits “modernes”. Exit IE9 !
L’hébergement
Le fait de passer sur un générateur statique offre de nombreuses possibilités concernant l’hébergement. En effet, le site ne générant plus les pages dynamiquement, on économise énormément de ressources serveurs et on peut donc revoir à la baisse le niveau infrastructure. J’avais le choix de garder mon petit “Simple Hosting” chez Gandi, d’héberger la bête sur mon Raspberry maison (hmmm… soyons sérieux). En allant un peu plus loin dans mes recherches, j’ai découvert Netlify qui est en fait une version améliorée de Bitballoon. L’intérêt réside essentiellement dans la simplification du processus de déploiement et par son utilisation poussée du CDN. Le site lui-même est hébergé par un CDN et cela lui procure de facto un temps de réponse optimal.
L’interface d’administration de Netlify permet de connecter son compte Github ou Bitbucket et de pouvoir ainsi lancer le déploiement lors d’un “push”[1] sur une branche spécifique du dépôt git. Netlify s’occupe en outre de compresser les images, le js, la css et le code html. Il dispose également d’une fonctionnalité permettant de mettre en place un formulaire de contact sans avoir à passer par un script php (ben oui, c’est du statique hein ;)).
C’est donc sans hésitation que mon choix s’est porté sur Netlify.
Conclusion
En définitive, ce projet m’a permis d’expérimenter une autre manière de penser un projet, de pouvoir utiliser de nouvelles méthodes de travail et de découvrir de nouvelles technologies. Nous n’avons pas souvent l’occasion de pouvoir prendre des risques sur les projets clients alors un site personnel est l’occasion idéale pour le faire. Auparavant, mon site internet était souvent la dernière roue du carrosse, je ne prenais pas le temps de réfléchir à sa conception et je n’étais jamais satisfait à 100% du résultat. Sur cette mouture, j’ai voulu professionnaliser la conception et même si je ne suis pas encore satisfait de tout (il y aura encore une dizaine de commits je pense…), j’ai le sentiment pour la première fois d’avoir réalisé quelque chose de personnel, qui ne suit pas le mouvement et qui réponds à la plupart des critères que j’avais défini en amont (performance, expérience utilisateur, accessibilité). J’espère que vous prendrez plaisir à naviguer sur mon espace personnel et je vous remercie de m’avoir lu !