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.
Qu’est-ce que le développement Client-First ?
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 :
- Stratégie des classes : utilitaires ou personnalisées ;
- Stratégie de structure : guide de style, structuration de la page, balise html, etc. ;
- Stratégie de typographie : html system, classes utilitaires clonables, précédées du préfixe text- (text-color-green, text-color-white, text-size-small) ou heading- (heading-style-h3) ;
- Stratégie d’espacement ou spacing, basée sur les classes utilitaires : spacing block (padding-bottom et padding-size) et spacing wrapper (margin/padding-direction et margin-padding-size) ;
- Stratégie des dossiers (utilisation du tiret bas) : blog_heading_graphic (un blog contenant un élément graphique).
Principes fondamentaux du Client-First
Les principes du Client-First system ont pour objectif de faciliter votre projet (your project) :
- Webflow et Client-First sont des éléments complémentaires : le premier pour le style et la fonctionnalité, le second tourné vers les clients ;
- Méthode de structure standardisée pour mieux comprendre les sites Webflow : création de contenus et attentes client ;
- Méthode basée sur la structure unifiée permettant à l’équipe marketing de succéder aux développeurs Web sur le travail du contenu ;
- REM ou font-size REM pour un projet de site responsive. Une stratégie visant à afficher correctement le contenu sur tout appareil au format et à la taille souhaités (small, large ou middle). Un REM vaut 16 px par défaut, la référence pour calculer les REM pour les conversions. Tous les REM seront alors un multiple de 16 ;
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.
Avantages du Client-First pour le développement Webflow
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.
Structurer un projet Webflow avec Client-First
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 :
- page-wrapper (contenu de la page) : pas de style requis pour celle-ci afin d’éviter d’appliquer un style sur la balise html <body> ;
- main-wrapper (contenu principal) : cet élément correspond à l’utilisation de la balise html <main>, englobant toutes les sections du site Web ou presque ;
- section [identifiant] pour l’aspect visuel du Webflow designer : recourir aux styles n’est pas recommandé par les développeurs pour cet élément. Les classes sections sont personnalisées et différenciables entre elles. Vous pouvez modifier la couleur d’une section (text-color-block section-style-dark) sans affecter les autres sections. Choisissez ensuite la section sur laquelle l’appliquer : section_heading, par exemple ;
- padding-global ou espacement horizontal global (padding-right et padding-left du contenu) ;
- container-[size] pour la largeur du contenu : les styles possibles sont margin-right et margin-left ;
- padding-section-[size] pour les marges verticales des sections (margin) : les styles possibles sont le padding-top pour l’espacement en haut et le padding-bottom pour l’espacement en bas.
Nomination des classes et conventions
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 :
- Text-color-red : texte rouge
- Text-size-small : texte à une taille inférieure
- Text-color-blue : texte bleu
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.
Utilisation des classes utilitaires
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 :
- padding-global
- margin-large ou margin-small
- text-color-blue ou text-color-green
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 :
- heading-style-[h#] comme heading-style-h1
- text-weight-[epaisseur-du-trait]
- text-size-[taille]
- text-style-[propriete-css]
- text-color-[couleur] comme text-color-black
- text-align-[alignement]
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 :
- clients_slider_arrow
- Home_heading_texture
- form_component
- form_wrapper
- form_block
- form_label
- form_input
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.
Documenter votre projet Webflow Client-First
Pour mener à bien votre projet Webflow, il faut la documentation unique proposée par Client-First. Celle-ci comprend :
- Un guide de style et un design system comme éléments centraux ;
- La structure de chaque page : header, text body… ;
- Les flux d’interaction qui s’inscrivent dans la stratégie globale pour attirer les clients grâce à des éléments dynamiques ;
- Les choix spécifiques sur le projet.
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.
Meilleures pratiques pour optimiser votre utilisation de Webflow
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 :
- Créer des pages modulaires et repenser les différents éléments pour faciliter les mises à jour ;
- Créer des composants réutilisables et standardiser les styles pour avoir un site cohérent ;
- Utiliser des unités REM pour l’espacement (spacing) et le dimensionnement ;
- Utiliser les classes utilitaires pour remplacer le CSS dans l’application des styles récurrents et alléger le site ;
- Adapter les nouveaux composants au format existant ;
- Compléter la documentation centrale de vos projets.
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.
