7 erreurs courantes sur un site Webflow

Beaucoup de personnes sont fières de réaliser un site web par elles-mêmes sans avoir à connaître un langage de programmation. Et c’est totalement compréhensible! Mais il y a quelques mises en garde et pièges que je pense que l’on devrait éviter lorsqu’on commence l’intégration d'un site web sur Webflow.

Les voici :

1. Ne pas nommer les classes

Lorsque vous commencez à utiliser Webflow, il est très facile d'ajouter et de supprimer des éléments, mais une chose qui peut être négligée est l'attribution de noms de classe aux éléments qui sont ajoutés. Ainsi, chaque élément porte le nom de "Div Block 1", "Div Block 2", et ainsi de suite. Lorsque vous consultez le navigateur, vous n'êtes pas en mesure de comprendre quel élément se rapporte à quoi et pourquoi il se trouve là. Cela peut être source de confusion pour le Designer et le Développeur qui créent le site.

Dans ce cas, je donne toujours à l'élément un nom de classe spécifique après l'avoir ajouté au projet. Par exemple, lorsque j'ajoute une section de héros, je lui donne le nom de classe "section-hero". Ensuite, lorsque j'ajoute un conteneur, je lui donne le nom de classe "hero-container". Tous les éléments ou composants qui suivent auront le mot-clé "hero" devant afin que je sache que les éléments se rapportent à la section "hero".

La présence d'un mot-clé devant le nom d'une classe est un excellent moyen de savoir à quelle section appartient chaque élément et pourquoi il s'y trouve. Ne vous privez pas de donner des noms de classe spécifiques à vos éléments, car il peut être très fastidieux de gérer le projet une fois qu'il a été créé.

2. Absence de structure du site

Une autre erreur qui peut conduire à un projet confus est de ne pas avoir de structure de site.

En général, il est bon de suivre la documentation Finsweet :

• Un "main-wrapper" pour inclure tout le contenu à l'intérieur d'un bloc div. Cela me permet de copier et de coller facilement des pages d'une page à l'autre.
• Ensuite, une section.
• Puis un container à l'intérieur de la section avec une largeur maximale. La largeur maximale peut être comprise entre 1170 et 1440 px soit entre 73 et 90 REM en fonction du projet.
• Puis les composants à l'intérieur du container.
• Chaque fois qu'une nouvelle section est créée sur le site, je répète ce processus.
• J'utilise généralement un mot-clé en commençant par la section et en allant vers le bas. Par exemple, si la section s'intitule "hero-section", le conteneur sera "hero-container" et tous les éléments à l'intérieur du "hero-container" seront précédés du mot-clé "hero". Cela permet au site de rester organisé et m'aide à savoir quels éléments se rapportent à quelle section.

3. Images trop volumineuses

Il s'agit d'une erreur assez fréquente chez les utilisateurs de Webflow. Les utilisateurs se plaignent souvent de la lenteur du chargement du site. Cela est généralement dû au fait que les images du site sont trop volumineuses. Les images d'Unsplash, par exemple, peuvent mesurer 3000 px par 5000 px en largeur et en hauteur et avoir une taille de fichier de plus de 3Mo. C'est très volumineux pour un site web. J'essaie généralement de conserver des images d'une taille maximale de 400 ko. Je recommande de redimensionner l'image si vous savez quelle taille elle aura - peut-être autour de 1200px en largeur selon les besoins de votre site.

Vous pouvez également utiliser un site web comme ImageCompressor pour compresser vos images dans un fichier plus petit →  https://imagecompressor.com/fr/

Puis l’idéal, une fois les images compressée,  c’est de les convertir en format WEBP → https://convertio.co/fr/

4. Overflow sur mobile

Une erreur fréquente que je constate sur certains sites Webflow est le débordement sur les petits appareils, en particulier les mobiles. Cela provoque un scroll horizontal. Ce problème peut être corrigé en utilisant des pourcentages ou des REM au lieu de pixels sur le site ou en redimensionnant le texte à une taille plus petite sur les petits appareils.

5. L’usage des colonnes

Les colonnes étaient bien au début du développement web, mais je pense qu'elles sont un peu dépassées maintenant que nous avons les flexbox et les grid et que Webflow fournit ces outils dans le Designer. L'utilisation des colonnes est un peu rigide et rend le responsive plus difficile à faire. J'opte pour l'utilisation de flexbox la plupart du temps car je peux rendre les éléments du site responsive en un seul clic. Pour ce faire, il suffit de faire passer une disposition flexbox de l'horizontale sur l'ordinateur de bureau à la verticale sur la tablette et le mobile, par exemple. Les grids peuvent être utilisée pour des mises en page plus complexes qui nécessitent différentes tailles pour les colonnes et les lignes.

6. Ajouter des interactions rapidement

Lorsque vous créez une interaction dans Webflow, vous pouvez assigner l'interaction à plusieurs éléments de la même classe plutôt que d'assigner la même interaction plusieurs fois à des éléments de la même classe. Cela peut représenter un gain de temps considérable.

7. Abonnement payant pour le compte au lieu d’un abonnement payant pour le site

La tarification de Webflow n'est pas toujours claire. Certains utilisateurs peuvent penser qu'ils ont besoin d'un plan de compte pour supprimer les limites de 2 pages et de CMS, mais en réalité, si vous savez que vous n'avez qu'un seul projet, vous pouvez simplement acheter un plan de site CMS et la limite de 2 pages ainsi que les limites de CMS sont supprimées. Un plan de compte est surtout nécessaire si vous savez que vous devez créer plus de 2 projets qui n'ont pas besoin de plan de site. Un plan de site vous permet également d'ajouter un domaine personnalisé à votre projet.

Voici les 7 erreurs que j'ai rencontrées le plus souvent au cours de mes deux années de travail dans mon offre de services Webflow. J'espère que cela vous aidera.

‍