Globalement, il s’agit de déployer des systèmes graphiques cohérents, de structurer les niveaux de lecture, tout en conservant la Vibe “Cool décontracté” et le ton humoristique décalé. En ce qui concerne les couleurs, limiter au maximum l’utilisation de dégradés lourds, unifier les patterns de manière judicieuse dans le cadre d’une démarche eco-responsable.
L’idée à été de dynamiser titres, sous-titres & accroches principales dans des plans séquentiels, pour capter instantanément le regard du visiteur. L’objectif est d’obtenir l’animation la plus courte et fluide possible sans pollution visuelle, dans un style épuré et minimaliste.
La structure HTML sera directement recréé / injecté dans le code javascript afin de pouvoir la modifier plus facilement par la suite si nécessaire. Il faut concevoir une animation facile à reproduire en CSS, avec des variables (encapsulage de keyframes / mixins pour utilisations répétées)
La compression et le formatage des images est, comme toujours, le nerf de la guerre dans ce genre de projet. En prenant soin d’utiliser les attributs HTML “srcset=…” et “size=…”, on peut lire deux ou trois tailles d’image différentes en mode responsive. Appliquer l’attribut “loading=”lazy” sur toutes les “img” permet d’obtenir un affichage progressif garantissant une expérience utilisateur des plus fluides.
Il y aura peut-être des animations css d’entrée de jeu : afin de garantir une performance optimale et éviter de générer du CLS (Cumulative Layout Shift), il convient d’utiliser les bonnes propriétés (transform “translate()”, “scale()”, “rotate()”) / “opacity .. au détriment de “width” / “height” / “margin” / “display” / “top” / “left” … qui pénalisent les performances). Activer la compression Gzip en complément est une bonne pratique pour garantir un chargement ultra rapide.
Au delà même de la compression et du formatage des sources, il convient de limiter au maximum le nombre de plugins sous wordpress, et de restreindre le chargement des frameworks & bibliothèques inutiles dont je veux désormais me passer (par exemple, jQuery ne sera utilisé que pour le back-office WordPress). Il faudra donc customiser le code dans functions.php, sans fragiliser la stabilité ni la sécurité du site.