Les 3 étapes pour améliorer votre quotidien de développeur

Introduction

Avez-vous déjà été irrité à l'idée de devoir recommencer toutes les étapes du développement de chaque nouveau projet à partir de zéro, avec l'impression que le poids de la monotonie vous tire vers le bas ? C'est une frustration courante parmi les développeurs : le sentiment que chaque projet suit le même processus fastidieux, laissant peu de place à la créativité.

Mais et si je vous disais qu'il existe un moyen de sortir de ce cycle et de transformer votre expérience de développement Webflow en une source de plaisir et de satisfaction ? Le secret est d'utiliser les meilleures pratiques et innovations qui vous permettront de faire passer votre flux de développement Webflow au niveau supérieur.

Dans ce guide détaillé, nous examinerons les techniques que vous pouvez utiliser pour rationaliser les étapes de développement de routine, surmonter les problèmes courants et libérer tout le potentiel de la plateforme. Alors attachez vos ceintures et préparez-vous à entrer dans un monde où l’efficacité règne.

Étape 1 – Préparer le terrain pour le succès

Lorsque vous démarrez votre nouveau projet Webflow, il doit disposer d'une base solide et efficace pour pouvoir évoluer à partir de là. Bien qu’il s’agisse d’une phase préparatoire, le développement a déjà commencé et il y a des points importants à considérer qui vous prépareront au succès.

1.1 Guide de style

Si vous considérez un guide de style comme un modèle pour votre projet, sa primauté devient claire. La création d'un guide de style marque le début de votre projet, garantissant que les classes et les styles se comportent de manière prévisible tout au long. Alors avant de vous lancer dans le développement de pages spécifiques, prenez le temps de travailler sur les styles. Il existe 2 approches pour créer un guide de style :

• soit créez votre propre projet de base à partir de zéro, adapté à vos préférences, soit
• utilisez des frameworks open source prêts à l'emploi tels que Finsweet , Relume ou Wizardry ou tout autre.

1.2 Variables

Grâce à une récente mise à jour de Webflow, l'utilisation des variables est devenue encore plus intuitive et efficace. En organisant les variables en groupes bien conçus, vous pouvez simplifier le développement et augmenter l'efficacité. Je recommande d'envisager de créer des groupes tels que :

• Couleurs communes
• Arrière-plan
• Texte
• Taille du texte
• Taille du texte Mobile
• Conteneur (largeur maximale)
• Tailles des icônes

Une fois ces groupes créés et associés aux classes correspondantes, vous pouvez passer au développement de pages Web en toute simplicité et en toute confiance.

Travailler sur la création de variables a toujours été une bonne pratique, et Webflow perpétue cette tradition dans le domaine du développement low-code. Ces groupes prédéfinis constituent une base solide pour tout projet, permettant un processus de développement plus fluide et plus structuré. Et si un client revient vers vous pour vous demander de changer la palette de couleurs du foncé au clair, vous vous serez reconnaissant d'avoir utilisé des variables.

1.3 Priorité à l'accessibilité

L'accessibilité est souvent laissée aux dernières étapes d'un projet, mais son importance ne peut être surestimée. Dès le début de votre projet, l’intégration des fonctionnalités d’accessibilité doit être au premier plan de votre esprit, influençant chaque décision et élément que vous ajoutez.

Webflow a mis à la disposition du public une liste de contrôle . Après l'avoir étudiée attentivement, vous aurez une idée des principaux points en la matière.

L'un des avantages les plus remarquables de Webflow est son tableau de bord d'accessibilité intégré, qui fournit des informations visuelles sur la façon dont votre projet est perçu par les personnes malvoyantes. Cette fonctionnalité vous permet de visualiser votre projet à travers plusieurs filtres d'accessibilité, simulant différentes conditions de visualisation et mettant en évidence les domaines potentiels d'amélioration.

Il s’agit de créer un environnement numérique plus équitable et inclusif. En donnant la priorité à l'accessibilité dès le départ, vous améliorez non seulement la convivialité de votre projet, mais vous démontrez également votre engagement à égaliser l'accès à votre projet pour tous les membres de votre public, quelles que soient leurs capacités.

Étape 2 - Maîtriser le processus de développement

Vous entrez maintenant dans l’étape de développement direct de toutes les pages conformément au design. Voici quelques recommandations pour vous aider à passer cette étape avec succès :

2.1 Code personnalisé

"Arrêtez. Pourquoi ? Pour quoi ? Mais comment est-ce possible ?! Après tout, l'avenir est déjà arrivé et pourquoi avons-nous besoin du code maintenant ?" - pourriez-vous dire. Mais soyons honnêtes : sans connaissance du code, vous pouvez commencer à comprendre le développement Web et démarrer rapidement votre carrière, tout en restant compétitif et en créant des choses extraordinaires grâce à la simple fonctionnalité glisser-déposer de no-/. Les plates-formes low-code ne semblent pas être la vérité. Par conséquent, bienvenue dans le développement et l'apprentissage sans fin dont j'ai parlé dans mon article précédent .

2.1.1 HTML

Lorsque vous travaillez sur des plateformes low-code comme Webflow, il est tentant de s'appuyer uniquement sur des divs et des éléments de texte pour créer une structure. Mais c'est là que nous différons d'hier : au minimum, après avoir lu mon article, nous assumons la responsabilité de la qualité du produit fini. Assurez-vous que votre balisage respecte les conventions sémantiques en utilisant des éléments tels que <header>, <nav>, <main>, <aside>, <footer> et autres et corrigez le niveau des titres pour améliorer la clarté et l'accessibilité.

2.1.2 CSS :

• divisez mentalement tout votre futur code en global et local. Ajoutez du CSS global au composant Navbar. De cette façon, vous y aurez accès depuis n'importe quelle page, et vous verrez également comment les styles sont appliqués avant même de publier le projet.

• Écrivez des styles pour les états de survol dans le code, à l'aide de requêtes multimédias. Cette méthode garantit que la position du haver est affichée uniquement sur le bureau :

  
  

 <style> @media screen and (hover:hover) { //Insert your code here... } </style>

• Écrivez des styles distincts pour les écrans larges de 1 024 px afin de résoudre les problèmes de mise en page uniques spécifiques aux appareils de cette taille particulière.

  Bien qu'il soit facile de créer un design réactif dans Webflow, les mises en page des tablettes commencent à 991 pixels de large. Il s'avère que l'écran 1024 s'applique à lui-même tous les styles de bureau. Cependant, je n'ai pas encore eu un seul projet dans lequel je n'aurais pas eu à écrire séparément des styles pour un écran 1024. Je considérerais cet élément comme obligatoire pour la vérification. L'enregistrement ou non des styles séparément dépend de chaque projet individuel.

• Ajoutez des commentaires à votre code CSS pour améliorer la lisibilité et faciliter la collaboration avec d'autres développeurs. Facilitez-vous la vie et celle des autres développeurs lors des modifications ultérieures du projet. Laissez le projet tel que vous aimeriez le voir si vous en avez hérité d'un développeur précédent.

 <style> /* About page Start */ //Insert your code here... /* About page End */ </style>

• Au lieu de compter uniquement sur les animations Webflow, je recommande fortement d'utiliser des animations CSS pour rendre votre page plus simple et plus efficace sans affecter les performances de la page.

  L'outil d'animation intégré à Webflow permet à un débutant de créer plus facilement un bon site Web avec de nombreuses interactions. Cependant, si l'on parle de méthodes de développement avancées, il est important de noter que les animations CSS sont extrêmement légères et ne ralentissent pas la page par leur présence. A l’inverse, les animations webflow, qui visent essentiellement uniquement à modifier les propriétés CSS des éléments, fonctionnent via JS et ralentissent ainsi la page. Cela n’est pas perceptible dans les petits projets, mais l’est dans les grands. Dans tous les cas, je vous conseille d'utiliser autant que possible CSS sur n'importe quel projet, au lieu des animations Webflow natives, même pour la pratique. On se souvient qu'une habitude apparaît après de nombreuses répétitions . Formons-le.

• Si l'interaction de l'utilisateur avec les animations Lottie n'est pas prévue, il est préférable d'utiliser un fichier mp4 au lieu de .json et même un .json optimisé. Les performances dans Safari vous en remercieront.

2.1.3 Javascript :

Ce sont des bonnes pratiques qui ont longtemps été considérées comme allant de soi :

• Suivez les meilleures pratiques en matière de placement JavaScript, notamment en utilisant les paramètres globaux pour les scripts de projet globaux et les paramètres de page pour les scripts locaux.

• Utilisez les attributs <async> et <defer> pour les scripts qui peuvent être chargés en parallèle afin d'optimiser les temps de chargement des pages.

  
  

2.2 Composants Webflow

À quelle fréquence, lorsque vous étudiez la conception de votre projet, vous posez-vous la question : quels éléments répétitifs du projet puis-je utiliser comme modèles dans différentes pages ? Les composants de Webflow vous permettent de maintenir un flux de travail de conception cohérent, efficace et évolutif en créant des blocs personnalisables à partir d'éléments et d'éléments enfants. Vous pouvez réutiliser ces blocs sur votre site et les modifier en un seul endroit pour éviter de réviser individuellement chaque mise en page récurrente (source - https://university.webflow.com/lesson/components?topics=layout-design ).

Cela peut souvent être :

• Barre de navigation
• Bas de page
• Bouton : s'il n'est pas standard, a une conception et des effets personnalisés et/ou une structure ramifiée.
• Bannière CTA - une ou deux de ses variétés sont souvent utilisées tout au long du projet.
• Et mon symbole le plus utilisé est Section - il devrait y avoir une section vide avec une balise et une classe, à l'intérieur de toutes les classes standard, y compris un conteneur, un titre 2, un paragraphe et plusieurs blocs div vides. C’est le composant le plus couramment utilisé que vous utiliserez, je vous le promets. Ajoutez-le simplement, dissociez-le et terminez la partie de développement. En l'ajoutant comme base, vous pouvez gagner beaucoup de temps au lieu d'ajouter chaque bloc div séparément.

En utilisant du code, vous pouvez étendre les capacités des composants Webflow et fournir au client un système de gestion de projet incroyablement flexible sans accès à la structure des pages HTML. Il s'agit d'une toute nouvelle approche du développement Web qui permet au client de contrôler de nombreux aspects de conception du projet une fois que le développeur a terminé le projet. À l'avenir, le client pourra facilement créer de nouvelles pages de manière indépendante sur la base de composants déjà créés. Et ce n'est que s'il est nécessaire de développer des éléments fondamentalement nouveaux qu'il sera nécessaire d'embaucher un développeur. Lorsqu'ils travaillent avec des composants, les clients n'ont pratiquement aucune chance de détruire votre structure HTML parfaitement préparée (cependant, nos clients sont souvent très capables).

2.3 Regroupement des ressources multimédias

Utilisez le regroupement des actifs lorsque cela facilite leur recherche et leur gestion. Par exemple, vous disposez d’une barre de navigation massive et de nombreux liens contenant des icônes. Le designer en a déjà préparé certains, a promis de terminer l'autre partie en 3 jours, et la dernière partie est encore à l'étude par le client. Pendant que le concepteur dessine de nouvelles options, puis que le client en examine la moitié, apporte des modifications et approuve l'autre moitié, et enfin vous les envoie pour développement, vous aurez probablement déjà de nombreuses autres images dans le panneau des ressources. Les images d'icônes seront cassées et les trouver/remplacer à l'avenir ne sera pas pratique. Dans ce cas, regrouper les actifs vous facilitera la vie. Le regroupement vous permet de garder tous les médias de votre projet propres et organisés.

2.4 Faites le plein d'un dossier Archive pour sauvegarder :

• versions statiques des pages СMS dynamiques . En cas de changements ou de modifications, il vous sera beaucoup plus facile de le faire dans une version statique puis de le transférer vers la page СMS. La particularité des pages СMS dans Webflow est telle que lorsque vous connectez tous les éléments nécessaires aux champs correspondants dans la Collection, vous ne pourrez pas copier l'élément dans lequel cette connexion est présente et le transférer vers une page statique.

• Une page avec les versions initiales des éléments. La pratique fréquente de nombreuses modifications nous oblige à être prudent et à ne pas supprimer du projet ce qui a déjà été construit. Déplacez-le vers la page d'archives et laissez-le jusqu'à des temps meilleurs.

• Page de test pour les expériences.

  
  

Étape 3 - Modifications finales

Ce qu'il est important de faire à la fin du projet avant de le transférer au client, pour ne pas laisser le sentiment que votre projet a vraiment progressé maintenant :

3.1 Nettoyage du projet :

• supprimez les classes et les animations inutilisées.

• supprimer le code commenté et inutilisé.

• supprimer les supports inutilisés. S'il y a beaucoup d'éléments inutiles dans le panneau et qu'il n'est pas possible de les supprimer individuellement, je suggère un hack : supprimez tous les éléments - publiez le projet - rechargez le flux Web - et entrez dans l'élément du panneau uniquement les médias utilisés. dans le projet.

  
  

3.2 Créer un manuel d'utilisation du projet pour le client.

En plus de la page du guide de style, il devrait y avoir une page décrivant comment utiliser le projet terminé. Un bon développeur est celui qui réfléchit à la manière dont le client gérera le projet à l'avenir. Dans quelle mesure il sera facile d'apporter des modifications et quel degré de liberté le client aura dans sa gestion. Grâce au webflow, cela peut être aussi proche de la perfection que possible. Ayant des connaissances CSS et une compréhension des principes de fonctionnement des composants webflow, vous pouvez monter un projet dans lequel il sera facile de modifier les pages actuelles ou d'en créer de nouvelles.

3.3 Donnez des noms uniques aux sauvegardes.

Le principe de descriptivité s’applique à tout ce à quoi vous, en tant que développeur, donnez un nom. Chaque partie du projet doit être intuitive pour vous et vos collègues à l'avenir.

Conclusion

En conclusion, résumons brièvement les principaux points sur lesquels vous devez vous concentrer pour améliorer votre quotidien de développeur.

Étape 1 - Préparation

• Créez un guide de style pour garantir la cohérence et la prévisibilité des éléments de conception.
• Configurer des variables pour rationaliser le développement et améliorer l'efficacité
• Donnez la priorité à l’accessibilité dès le départ pour créer des sites Web inclusifs et conviviaux.

Étape 2 - Développement direct

• Ajoutez la puissance de codage en tant que compétences précieuses pour débloquer des possibilités infinies en matière de développement Web.
• Utilisez les composants Webflow comme outils puissants pour pérenniser vos projets.
• Organisez les ressources multimédias en groupes pour un accès et une gestion faciles.
• Conservez un dossier Archive pour stocker les éléments inutilisés pour une utilisation ultérieure.

Étape 3 – Dernière ligne droite

• Nettoyez les éléments et les actifs inutilisés pour optimiser les performances du projet.
• Créez un guide client pour faciliter le transfert et la gestion transparente des clients.
• Enregistrez une sauvegarde appelée significative de vos projets pour vous protéger contre la perte de données et assurer la continuité.

L'adoption des meilleures pratiques est essentielle pour maximiser l'efficacité et la productivité du développement Webflow. En suivant cette approche, vous gagnerez non seulement du temps sur les tâches répétitives, mais vous libérerez également de précieuses ressources pour la détente, le développement personnel et la création de projets innovants. Transformons nos flux de travail et libérons notre créativité pour créer des choses encore plus cool.

Merci d'avoir lu!

Je suis heureux de partager mes réflexions et mes expériences pour contribuer à faciliter la vie des autres développeurs. En partageant ce que j'ai appris, j'espère rendre le processus de développement plus fluide et créer de meilleures expériences pour tout le monde.