Homiz

Pour l’anecdote, mon chemin vers la spécialisation en web design et l’intégration WordPress a commencé en 2017, à la sortie d’un Master en Marketing & Vente, avec un focus sur l’innovation et le tourisme. Bon, Marketing & Vente… quel rapport avec le web me diriez-vous ? La question est légitime, et la réponse pourrait faire l’objet d’une dissertation. Cependant, pour en faire un bref résumé : la polyvalence demandée dans les métiers de marketing et communication, surtout dans les petites entreprises. Il faut être un véritable couteau suisse en ayant des compétences stratégiques en marketing, des compétences en rédaction pour créer les messages, des compétences graphiques pour créer des visuels, et des compétences web pour gérer un site.

À l’époque, je travaillais entièrement sur WordPress et Elementor. Puis, est venue le moment de quitter cette boîte pour me dédier entièrement envers cette passion découverte : le web design & création de sites. J’ai donc suivi une formation pour pousser plus loin mes compétences qui, à ce jour, étaient autodidactes et basées sur ma propre curiosité. Pendant cette année de formation, plusieurs sites étaient à créer, dont celui-ci, entièrement codé à la main.

Pourquoi apprendre à coder m’a été utile ? Surtout maintenant que tant de solutions dites “no-code” sont à portée de main ? Tout simplement car ça permet de :

• mieux comprendre l’importance d’une structure sémantique cohérente (non-seulement pour le référencement naturel, mais aussi pour la performance du site et l’accessibilité)
• d’apprendre à avoir une stratégie de développement qui permet de maintenir une cohérence visuelle tout au long de la vie du site et ses évolutions
• d’aller plus loin dans la personnalisation visuelle et d’ajouter des fonctionnalités plus poussées / qui optimisent le travail sans devoir ajouter X nombres d’outils différents. Parfois, un petit bout de code suffit pour remplacer tout un plugin !
• de comprendre ce qui va vraiment dans la création d’un site : les serveurs / hébergements / performance / optimisations / accessibilité / expérience utilisateur et j’en passe ! Le web design n’est que finalement le bout de l’iceberg qui dépasse de l’eau.

Revenons à Homiz. Avant d’attaquer les maquettes visuelles, les wireframes ont été créées. Qu’est-ce qu’un wireframe ? Simplement une maquette simplifiée, souvent en plusieurs nuances de gris, n’utilisant aucune image ou véritable texte. Le but des wireframes est de créer les placements visuels et s’imaginer le parcours de visite, sans distraction graphiques. Ça permet de réfléchir à la manière que le contenu brut pourra être mis en page (par exemple, des paragraphes accompagnés d’images, des onglets ou des accordions, des boîtes simples etc.).

Ensuite, la transformation de ces wireframes en maquettes graphiques permettant de placer les images choisies, les textes, …. Ça donne vie à la vision ! Maquetter avant d’intégrer permet aussi de savoir où on va, et d’avoir une stratégie d’intégration avant de commencer.

La stratégie d’intégration est essentielle, car elle permet d’optimiser le travail et de garantir la cohérence visuelle à travers les différentes pages. Du côté du texte, il faut déterminer la typo, les couleurs et les tailles des différents types de contenu (grands titres, petits titres, corps de texte …). Ensuite, déterminer les éléments et styles qui seront réutilisées à travers le site. De manière générale, on attribue des “classes” à ces derniers (cela relève du CSS !), permettant d’appliquer une règle de style aux différents éléments, mais aussi contrôler en un endroit ces derniers. Pour illustrer facilement, imaginez un bouton simple avec un fond bleu. Ce bouton il est utilisé à 15 différents endroits sur le site. Maintenant, imaginez qu’il faut changer ce bleu ! Grâce à la classe, il ne faut changer qu’à un seul endroit l’instance de bleu – et non modifier chaque bouton individuel.

Pour ce projet, l’intégration a été fait en “mobile-first”, une approche qui fait que l’on commence par les plus petits écrans, puis on applique des règles différentes pour les écrans plus grand au fur et à mesure. Souvent recommandée pour les sites codés à la main – aujourd’hui avec les constructeurs de page, l’approche n’est pas toujours autant de sens. Cependant, ça n’empêche en aucun cas de penser mobile-first !

Penser expérience mobile, c’est aussi :

• une présentation du contenu adaptée (évitons le « scroll » interminable !)
• une organisation du contenu qui permet l’accès aux infos essentielles rapidement
• une optimisation de la performance sur mobile, par exemple en utilisant des images légères aux dimensions adaptées, ou en limitant les animations. N’oublions pas que le réseau n’est pas au top partout et pour tout le monde !