Option 1 : Convertir le projet existant pour qu'il corresponde à l'approche Client-First
La conversion de nos anciens projets vers le modèle Client-First est très intéressante. Avant Client-First, nous avions des stratégies différentes, des conventions de nomination des classes différentes, et peut-être moins de connaissances. Nous voulons faire évoluer les anciens projets vers notre nouvel état d'esprit Client-First afin de les gérer et de les faire évoluer dans les meilleures conditions.
La complexité de cette initiative dépend entièrement de l'ancien projet. En fonction de la taille, du style de développement et de la stratégie de classes du projet, la tâche peut s'avérer complètement différente.
* C'est un processus qui prend du temps. *
Soyez conscient que la conversion d'un projet existant en Client-First est une tâche importante. Il y aura beaucoup de travail manuel si :
- Le site Web est volumineux.
- La convention de nomination des classes est très différente de celle de Client-First.
- Le projet a été construit par quelqu'un d'autre.
Quel que soit le temps que vous pensez que cela prendra, cela prendra plus de temps.
Analysez le projet existant et assurez-vous que le changement en vaut la peine.
Voici les étapes que nous suivrons pour convertir un projet en Client-First :
1. Copiez les classes utilitaires Client-First dans le projet
Étape 1:
Cloner le projet clonable officiel Client-First
Étape 2:
Supprimez les classes margin et padding sur la page Style Guide du projet clonable.
Copiez page-wrapper de la page Style Guide pour copier le contenu entier de la page.
Créez une nouvelle page dans le projet qui servira de guide de style (Style Guide) Client-First.
Collez le contenu de page-wrapper sur la nouvelle page.
Étape 3:
Utilisez l'extension Finsweet pour ajouter correctement les classes de marge (margin) et de padding au projet. Allez dans "Client-First" puis "Add spacing system". Cela crée les classes de marge et de padding dans le projet.
Pourquoi suivons-nous ce processus ? Nous l'expliquons en détail dans la documentation à propos de la spécificité CSS.
Étape 4:
Commencez à éditer le projet. Suivez les étapes ci-dessous.
2. Adoptez immédiatement la démarche Client-First
Une fois que nous avons nos classes utilitaires Client-First dans le projet, nous devons passer à 100% aux principes et stratégies Client-First. Nous ne devons pas suivre notre ancien système de nomination, nos anciens styles ou nos anciennes stratégies. Notre objectif est de nettoyer le projet de ses anciennes conventions, nous ne devons donc plus les utiliser.
Désormais, tout doit suivre les principes, les stratégies et les conventions de nomination de Client-First. Toutes les classes devant être renommées ou ajoutées doivent être conformes aux principes de Client-First.
Convertissez les px, em et vw en rem
Nous voulons convertir toutes ou la plupart des unités de mesure (toutes les tailles) du projet en rem.
Les rem et les % conviennent
Les px, em, ou vw doivent être convertis en rem.
Si le projet a été construit en px, l'extension Finsweet peut gérer la conversion. L'outil de migration “PX to REM” peut convertir toutes les valeurs px de notre projet en rem. Cela nous fera gagner beaucoup de temps.
Si le projet a été construit en em ou en vw, nous devons vérifier toutes les classes et mettre à jour manuellement les valeurs pour passer à des mesures basées sur les rem. Cela peut être un processus très long et fastidieux.
4. Définissez sur chaque page la structure de base
Implémentez la structure de base Client-First sur chaque page du projet. Cela peut nous obliger à supprimer ou à modifier des classes, à réorganiser le HTML et la structure actuelle de la page, voire à reconstruire la structure de base à partir de zéro.
Suivez les étapes suivantes sur chaque page du projet :
- Assurez-vous que la page entière est enveloppée dans un page-wrapper
- Ajoutez le symbole “Global styles” à la page
- Séparez la nav et le footer du contenu principal (main)
- Placez tout le contenu principal dans le main-wrapper
- Créez des classes section-[identificateur] pour chaque section de la page
- Implémentez le système universel d'espacement externe des pages (padding-global)
- Implémentez le système universel de conteneurs (container-[taille]).
5. Mettre en œuvre les principes Client-First
C'est probablement l'étape du processus de conversion qui prend le plus de temps.
Mettez à jour le guide de style
Mettre à jour le guide de style (Style guide) Client-First avec les styles du projet. Mettez à jour les tailles, la typographie et les couleurs.
Renommez les classes pour qu'elles correspondent à la méthode de nomination des classes "Client-First"
Toutes ou la plupart des classes du projet devront probablement être renommées selon les principes de Client-First.
Au fur et à mesure de la révision du projet, renommez chaque classe qui ne respecte pas la norme Client-First. Créez des dossiers et organisez le projet.
Il est recommandé de "dupliquer" une classe existante et de la renommer selon la norme Client-First.
Si une classe combinée (combo class) est à l'origine du style, il est recommandé d'utiliser l'outil "Merge Combo Classes" de l'extension Finsweet. Cela nous aide à créer rapidement de nouvelles classes basées sur les styles d’une combo class.
Ce processus se poursuivra au fur et à mesure de l'avancement du projet et des mises à jour. À la fin de la conversion, toutes les classes du projet devraient utiliser le système de nomination des classes Client-First.
Modifiez les éléments de texte pour suivre la méthode Client-First
Suivez les concepts de la stratégie typographique.
Mettez à jour toutes les balises heading H1 - H6 pour vous assurer qu'elles sont correctement stylisées. Assurez-vous que la plupart des éléments des headings n'ont pas de classe appliquée.
Appliquez des classes heading- partout dans le projet où la taille par défaut du heading doit être modifiée.
Appliquez des classes text- là où une variation de texte est nécessaire dans le projet.
Ajoutez des éléments d'espacement
Suivez les concepts de la stratégie d'espacement.
Ajoutez des éléments d'espacement dans le projet, là où c'est nécessaire. Appliquez les classes padding-section- pour unifier l'espacement vertical des sections.
Exemple de mise en œuvre d'un bloc d'espacement (spacing block) :
6. Publiez et testez le responsive sur tous les points de rupture (breakpoints)
Nous devons continuellement tester notre projet sur un lien webflow.io publié. Comme nous faisons des mises à jour importantes de notre projet, il se peut que quelque chose se casse pendant le processus.
Il se peut que nous ayons des problèmes de responsive sur mobiles. Nous pouvons avoir du CSS personnalisés qui n'est plus nécessaire.
C'est une bonne pratique de tester le projet pendant et après le processus de conversion. Lorsque nous terminons la conversion des pages, nous devons continuellement tester notre projet.
Des outils pour vous aider
Ajouter l'extension Finsweet à Webflow
L'onglet Client-First de l'extension Finsweet
L'onglet Client-First contient des outils spécifiques à l'utilisation de Client-First :
- Ajouter la structure de base à une page (Add Core Page Structure)
- Ajouter le système d'espacement (Add Spacing System)
- Calculateur PX à REM (PX to REM Calculator)
- Migrateur PX vers REM (PX to REM Migrator)
- Générateur de responsive fluide (Fluid Design Generator)
Les bonus de l'extension Finsweet
Ces bonus peuvent nous aider dans le processus de conversion :
- Réorganisation les couleurs (Color Swatches Reorder)
- Réorganiser les styles CSS (CSS Styles Reorder)
- Réorganiser les interactions (Interactions Reorder)
- Fusionner les classes combinées (Merge Combo Classes)
- Supprimer les classes (Remove Classes)
- Supprimer les styles (Remove Styles)
- Réorganiser les symboles (Symbols Reorder)
- Dissocier le CMS (Unbind CMS)
Conversion à Client-First en direct live
Dans cette session d'apprentissage en direct (Learn it Live), Finsweet montre le processus de conversion d'une page d'un site Webflow au système Client-First.
Option 2 : Redévelopper dans un nouveau projet
Dans de nombreux cas, le redéveloppement du site actuel dans un nouveau projet Webflow prendra moins de temps et sera plus facile à gérer sur le long terme.
Souvent, lorsque les gens convertissent d'anciens gros projets, nous entendons les mêmes commentaires.
"J'aurais dû le construire sur un nouveau projet !"
L'option 1 prend toujours plus de temps que ce que nous avions initialement prévu. Convertir un projet existant pour qu'il corresponde à l'approche Client-First peut être un projet de grande envergure.
Reconstruire le projet à partir de zéro peut être une meilleure solution et une meilleure opportunité d'apprentissage.
Une durée globale potentiellement plus courte
Si le projet que nous voulons convertir est très différent de Client-First, la mise à jour de la structure et des classes peut prendre beaucoup de temps.
Cela pourrait représenter des heures ou des jours de travail pour le changement de nom des classes et la réorganisation du projet. Repartir de zéro peut prendre moins de temps.
Cette affirmation dépend fortement de la taille, de la portée et des exigences du projet.
Gestion du projet sur le long terme
Le démarrage d'un nouveau projet sera toujours plus organisé que la conversion d'un projet existant. Dans un projet converti, d'anciennes classes apparaîtront toujours après la conversion.
Il se peut que des "choses bizarres" se produisent dans notre projet en raison de configurations existantes que nous avons oubliées ou que nous n'avons pas définies nous-mêmes. Si nous continuons à faire évoluer le site, il peut s'agir d'une bonne stratégie à long terme de partir d'un nouveau projet.
Option 3 : Ne pas convertir le projet en Client-First
Ce n'est peut-être pas une bonne idée de convertir le projet en Client-First. Évaluez le projet et décidez s'il vaut la peine de le convertir ou de le reconstruire.
Le site nécessitera-t-il beaucoup de maintenance ?
Le projet actuel est-il inutilisable ?
Y a-t-il un problème de mise à l'échelle du site ?
Si la réponse à chacune de ces questions est "Non", ce n'est peut-être pas une bonne idée de convertir le projet en Client-First. Il doit y avoir un avantage clair et un cas d'utilisation pour convertir ou reconstruire un ancien projet.
S'il y a une bonne raison, allez-y. Utilisez l'option 1 ou l'option 2 en fonction des exigences du projet.
Recommandations générales
N'oubliez pas que tous les projets sont différents. Il s'agit d'une recommandation générale, et non d'une recommandation basée sur un projet spécifique.
Choisissez l'option 2 : Redévelopper dans un nouveau projet.
Nous trouvons qu'il faut moins de temps pour construire un nouveau projet dans Webflow que pour apporter des modifications importantes à un projet mal construit.
Nous pensons également qu'un nouveau projet permet de mieux apprendre et comprendre le système Client-First. Nous pouvons nous concentrer uniquement sur les meilleures pratiques de mise en œuvre de Client-First au lieu d'être frustrés par la mise à jour de travaux antérieurs.