Un design dépassé

Bien qu'utilisant un framework récent et étant responsive, le design global du site criait davantage JE SUIS DÉMODÉ ! que Allez viens ! On est bien ! ... C'est principalement pour cette raison que j'ai voulu revoir son design. Pour trouver un peu d'inspiration pour corriger ça, rien de tel que d'aller faire un tour sur les sites qui drainent le plus d'utilisateurs sur Internet, et qui sont la source de plus de 90% du trafic sur mon blog : Google, Facebook, Twitter.

Je ne pense pas que le design de ces mastodontes du web soit sans faille, et un ergonome ou un designer d'UI serait certainement plus qualifié que moi pour en pointer les défauts. Toutefois, les utilisateurs y passant du temps, ils ont l'habitude de tel ou tel paradigme, disposition ou icône. Or le beau est surtout une question d'habitude, comme nous l'a montré l'histoire Women's Ideal Body Types Throughout History .

Bon c'est décidé, on rafraichit ! Mais avec quoi ! Pistolet à peinture, rouleau, éponge, pinceau, etc. On a que l'embarras du choix. Évaluons rapidement ce qu'on à.

Il est frais mon framework !

Il est évident que la mode est au flat design, même Apple s'y est mis. La faute à Android et Windows qui imposent leurs choix esthétiques au monde entier. Google a le mérite de distribuer sont Material Design (MD) qui permet aux développeurs Android de fournir des applications tierces au design cohérent et s'intégrant davantage au design général de Lollipop. Au moment du ravalement de façade, le MD n'existait pas sous forme CSS. C'est chose faite depuis quelques temps, avec Material Design Light, une implémentation allégée en CSS. Autant vous dire que je vous ferai un article dès que je l'aurait essayé.

Retour aux deux grands acteurs du marchés, Foundation et Bootstrap. Je n'ai pas de besoin particulièrement précis, et des frameworks génériques comme ceux-là feront très bien l'affaire. Je ne me suis donc pas attardé sur tous les autres frameworks qui existent même si je suis persuadé qu'il en existe des plus petits répondant autant voire mieux à mes attentes.

Si vous avez lu mon premier post sur Docker vous devez savoir que j'ai utilisé Foundation au début du projet. Alors pourquoi être passé à Bootstrap ?

Veni, Vidi, Vici

Foundation est un très bon framework, qui gère très bien le responsive design en se basant lui aussi sur un système de colonnes et différentes tailles d'écran symboliques (smartphone, tablette, standard, large). Il propose de nombreuses classes utilitaires communes, limite le nombre de div à insérer, propose une disposition sous forme de grille tout en CSS, se compile depuis SASS, etc. Alors qu'est-ce qui m'a fait migrer vers Bootstrap me direz-vous ? Principalement deux facteurs.

Primo, Foundation n'inclut pas par défaut sa police d'icône. La Foundation icons font est un projet tierce qui arrive avec son lot de dépendances (pas moins de 5 fichiers de police) et son fichier CSS chargé à part. Avantage ou inconvénient, je pense que les avis vont diverger, mais pour quelqu'un comme moi pas particulièrement à l'aise avec le front design, un framework all-in-one est sans contexte un atout !

Secondo, les scripts JS inclus sont pauvres. La plupart m'étaient inutiles, autant vous dire que la première version du site fonctionnait quasiment de manière identique avec ou sans JavaScript. Parce que si je ne me trouve pas à l'aise au milieu du CSS, avec du code JavaScript c'est encore pire. Toutefois, le script qui me manquait le plus, était celui qui est connu sous le nom de affix chez Bootstrap et qui permet de faire apparaitre ce petit bouton, en bas à droite, au bon moment.

Retour aux sources

Alors voilà, l'être Humain n'aime pas le changement. J'avais déjà travaillé avec Boostrap et j'y suis revenu. Pourtant, au fur et à mesure que j'écris ce billet, je me rend compte que le résultat obtenu aujourd'hui, j'aurai très certainement pu l'obtenir avec Foundation ; et peut⁻être même plus facilement qu'avec Bootstrap au vu du magnifique code Jekyll qui sert à afficher la grille de posts sur la page d'accueil.

Mais cette migration aura quand même eu du bon. Je n'ai pas souvenir d'avoir écrit autant de CSS de toute ma vie, et je me suis plutôt bien éclater avec les pseudo-balises comme :before pour les overlay ou :hover pour les quelques animations. Alors oui, l'objectif de l'utilisation d'un framework CSS, c'est justement de réduire la quantité de code à écrire, mais le problème avec Bootstrap, c'est qu'il est présent partout et que pour se démarquer ne serait-ce qu'un peu, il faut mettre les mains dans le cambouis.

Coté JavaScript aussi, je pense que mon niveau à bondi, même si je ne comprends pas toujours exactement les subtilités. Je me suis frotté pour la première fois à JQuery et JQueryUI ; mieux vaut tard que jamais.

Une évolution constante

Alors oui, la navigation n'est pas parfaite, le design n'est pas à la pointe et Bootstrap vient d'annoncer la sortie de la version 4 en beta. Mais c'est aussi ça la joie d'être développeur, jamais rien n'est fini, tout est en constante évolution.

Alors si vous avez des remarques, des suggestions, des problèmes de navigation, n'hésitez pas à laisser un commentaire, juste en dessous, par mail ou sur Twitter.

Sur ce, bonne rentrée à tous et à la prochaine.