Développement Client-First Webflow : on vous explique
Finsweet a développé le Client-First system qui signifie littéralement « le client d’abord ». Il s’agit d’une stratégie de création de sites Web à destination de clients comme les développeurs Web. « The system is for you, your team and your costumer ». C’est l’élément central d’un plan de création de site. Il est accessible à toute l’équipe intervenant sur le projet Webflow via une documentation dédiée.
Un site créé via la méthode Client-First sera agréable, fonctionnel, pratique et design.
Un projet de création de sites Webflow Client-First renvoie à différents éléments, visuels et techniques, visant à satisfaire les clients. Les développeurs rendent les sites légers et performants en personnalisant les projets.
Cette méthode comprend plusieurs paramètres :
Les principes du Client-First system ont pour objectif de faciliter votre projet (your project) :
Utiliser les classes utilitaires pour remplacer certains éléments CSS et styles CSS répétitifs. Parmi les plus courantes figurent le padding-20 et le text-color-primary.
La création d’un site Webflow inclut la nomination et la maîtrise des classes CSS. L’équipe des développeurs Web gagne du temps grâce à la standardisation.
Client-First standardise les systèmes dans vos projets (your projects). Les éléments seront identiques pour chaque page du site : polices, mise en forme, affichage en REM, etc. Il est pourtant possible d’avoir des structures personnalisées.
Bien paramétré, le site est aussi facilement navigable.
La stratégie Client-First repose sur une structure de base, composée de classes et principes. Son objectif est de renforcer la base html du contenu des sites Web. Il faut maîtriser les composants en anglais du Webflow : padding, margin, heading, spacing, wrapper, button, etc.
Chaque structure de base comprend ces éléments :
La nomination des classes CSS est une stratégie efficace dans ce type de projet. Avant, les classes étaient de style images 37, heading_w-42, etc. Avec Client-First, elles deviennent heading-principal plutôt que section 1, par exemple. La nomination porte la fonction de la classe.
La convention de nomination du Client-First (nomination de classes et animations) facilite la stratégie de gestion du site. Elle utilise un langage universel, des mots non abrégés, évitant les confusions. La structure, pour une classe utilitaire ou personnalisée, est marquée par un tiret entre les classes et les sections.
Exemples :
Les préfixes (button, text, padding, heading, etc.) différencient les classes lors des actions.
Les classes (utilitaires) définissent une valeur par défaut. L’utilisation d’une classe heading-style-h2 donne au H1 le même style que le H2, sans modifier le code html.
Les classes utilitaires sont essentielles pour le projet Webflow. Possédant des propriétés CSS, elles identifient et allègent les styles CSS de la page. Ce type de classe possède des propriétés CSS pouvant être appliquées à différents éléments du projet. Il s’oppose aux classes personnalisées.
Exemples :
Une classe utilitaire est systématiquement une classe globale. Elle est conçue pour l’ensemble du projet : padding, margin, couleur de texte (text color), etc.
Exemples :
Les classes utilitaires ne concernent jamais une utilisation spécifique. Pour ce faire, il faut avoir recours aux classes personnalisées comme le heading_content, connues par le « _ ».
Voici des exemples :
Les classes utilitaires et personnalisées peuvent également être utilisées pour la création de classes combinées. Celles-ci se composent d’une classe de base, d’un élément « is- » et de la classe utilitaire ou personnalisée.
Exemple : button-is-blue ou button-is-red. Button est la classe de base et is-blue ou is-red ne fonctionne pas seul.
Pour mener à bien votre projet Webflow, il faut la documentation unique proposée par Client-First. Celle-ci comprend :
L’objectif est de fluidifier le travail de l’équipe et d’éviter au mieux les erreurs sur le projet. Gardez la documentation sur une plateforme en ligne pour rendre les mises à jour facilement accessibles.
Un Client-First est mis en place grâce à un guide de style déjà disponible sur Webflow. À vous de le copier et de le coller sur votre dashboard, puis de le personnaliser selon votre projet. Différentes classes utilitaires, non personnalisées, sont conçues pour cette stratégie. Ce guide comprend les éléments essentiels : typographie, espacement, couleur, composants d’interface, etc.
Adopter la stratégie Client-First dans ses projets Webflow permet d’obtenir un site plus performant et pratique. Voici quelques astuces pour optimiser l’utilisation de cette stratégie :
Avant, les projets de création de sites Web s’effectuaient avec des CMS (Content Management System). Ces derniers ont cédé leur place au Webflow qui est plus performant surtout avec sa nouvelle stratégie. Le Client-First Webflow est un concept basé sur l’expérience client, mais aussi sur l’efficacité des développeurs Web.
Cette approche permet d’optimiser les autres codes, comme le html. N’oubliez pas de mettre à jour la documentation des projets pour que les membres de l’équipe aient accès aux mêmes éléments.
