Webdesign

Pourquoi et comment utiliser Webflow

Parmi tous les éditeurs de site qui existent, lequel choisir ? Tous proposent des offres, des interfaces, des styles différents. Dans cet article, nous vous montrerons pour quelles raisons nous avons choisi Webflow, l'un de ces éditeurs, et comment nous l'utilisons, dans une optique de facilité et de gain de temps.

Webflow, un outil pratique, polyvalent et performant

Pourquoi utiliser Webflow ?

L'interface est très intuitive et pratique

Webflow possède une interface qui peut paraître compliquée aux premiers abords, mais la prise en main se fait assez facilement. Il est relativement aisé d'apprendre les bases rapidement grâce aux tutoriels disponibles sur le site Webflow et la chaîne YouTube de Webflow. En moins d'une semaine de pratique, on peut créer un premier site internet avec plusieurs pages, quelques animations et du contenu dynamique.

Les mises-à-jour sont simples et rapides

Lorsque nous créons un site web pour un client, nous voulons que celui-ci puisse ajouter lui-même tout le contenu qu'il souhaite par la suite. Grâce à Webflow et un court tutoriel, nos clients peuvent ajouter eux-mêmes les éléments qu'ils souhaitent. Nous n'avons pas besoin de nous échanger des mails pour mettre à jour le site de notre client : ce dernier est autonome et peut modifier son site en quelques minutes. C'est un gain de temps pour lui comme pour nous.

Pour la mise en place d'un CMS (système de gestion de contenu), Webflow constitue l'outil idéal. Une fois le contenu et les pages structurés, notre client peut modifier les pages lui-même et ajouter du contenu à ses bases de données. Par exemple, lorsque nous créons un site pour restaurant, le restaurateur peut modifier son menu en quelques minutes et être sûr que la mise en forme sera cohérente avec le reste du site internet. Il peut modifier les plats directement depuis l'interface éditeur.

Le mode éditeur où le restaurateur peut modifier, supprimer et ajouter des plats

La liberté de concevoir un site personnalisé

Un site web est rarement révolutionnaire d'un point de vue technique : ce qui fera la différence entre deux sites, c'est l'expérience utilisateur et le design. Webflow propose à ses utilisateurs une liberté totale concernant ces deux points, tout en fournissant une base technologique solide. Il est possible de modifier tous les éléments d'un site internet, rendre les pages cohérentes entre elles, et tester plusieurs mises en formes en même temps. Avec Webflow, nous pouvons concevoir un site qui plait à nos clients, et aux utilisateurs finaux, c'est-à-dire les clients de nos clients.

Des performances optimales

Les performances d'un site internet dépendent de nombreux facteurs comme nous avons pu le voir dans cet article. Webflow gère totalement l'hébergement, les protocoles de sécurité, la structure du code, l'optimisation des images, le référencement sur les moteurs de recherches, et bien d'autres paramètres. L'hébergement est de très bonne qualité, le temps de chargement des pages est réduit (attention à ne pas mettre d'images lourdes). De manière générale, il y a de nombreuses règles à suivre lors de la création d'un site internet pour qu'il soit performance et bien référencé. Webflow les intègre pour vous et se tient à jour.

Par exemple, les balises en tête du code, que Webflow génère automatiquement, seront parfaitement adaptées à votre site et vous offriront un référencement efficace. Autre exemple, lorsque vous créez votre site avec Webflow, celui-ci reçoit un certificat SSL (secure sockets layer) intégré, qui assure que votre site est sécurisé et fiable. Ainsi, dès lors que vous créez votre site avec cet outil, vous gagnez directement en crédibilité et en professionnalisme.

Une communauté active et de nombreux tutoriels

Pour apprendre à utiliser Webflow, il existe une multitude de vidéos Youtube tutoriels qui vous expliqueront tout de cet outil. Les tutoriels sont pédagogiques, rapides, dynamiques, et très complets. En cas de question, la communauté de Webflow est très active et n'hésite pas à vous donner des conseils utiles. Vous pouvez retrouvez tous les sujet abordés par les utilisateur sur ce forum.

Nous vous conseillons de consulter leur chaîne YouTube pour comprendre l'étendue des tutoriels. La chaîne vous propose une multitude de tutoriels sur des aspects très précis et utiles, comme l'ajout d'un chat en live, d'un calendrier interactif, ou d'une animation complexe.

Comment nous utilisons Webflow ?

Le but de cet article n'est pas de vous apprendre comment marche Webflow : les tutoriels vus au point juste avant sont là pour ça. Ici, nous vous partageons nos bonnes pratiques pour pouvoir gagner du temps et être plus efficace.

Les pages de style

Un site internet peut être est codé en plusieurs languages : HTML pour définir la structure du site, JavaScript pour gérer la dynamique du site et CSS pour gérer la mise en forme. Avec CSS, vous pouvez définir des classes, c'est-à-dire des mises en formes à appliquer à des éléments. Par exemple, si vous définissez une classe "typographie", vous pourrez choisir d'appliquer la même typographie à tous les textes de votre site internet. Par la suite, si vous modifiez une classe, la modification s'appliquera sur tous les éléments à laquelle vous l'avez appliqué. C'est ce que nous faisons avec Webflow, sans coder.

Prenons un cas concret : imaginez que vous vouliez un nouveau site internet. Nous l'avons créé et venons tout juste de terminer de le styliser. Nous vous le présentons mais vous trouvez qu'un bouton est légèrement trop épais. Au lieu de modifier le bouton pour chaque page (problématique pour les sites ayant des centaines de boutons), nous le modifions une fois dans la page de style. Tous les boutons possédant ce style seront affectés. Il ne reste plus qu'à vérifier chaque page et se demander "est-ce que le bouton a la bonne épaisseur partout ?". Tout ceci se passe dans la page de style.

La page de style sur Webflow

Intégrez toutes vos applications avec Zapier

Nous couplons le design et la technologie de Webflow avec l'automatisation de Zapier. Il s'agit d'un outil qui permet de connecter différents outils pour automatiser certaines actions. Nous automatisons les traitements manuels en fonction des besoins de nos clients. Grâce à la liberté de design de Webflow, nous pouvons récupérer de l'information et l'envoyer dans de nombreuses applications. Par exemple, nous utilisons cet outil pour gérer les formulaires de contact. Lorsque quelqu'un rempli un questionnaire de contact sur notre site, les informations arrivent directement dans notre Hubspot, notre CRM. Nous y gagnons un temps précieux et évitons un travail fastidieux. Cet article explique en détail les différentes fonctionnalités de Zapier.

Les intégrations avec Zapier les plus communes

Ajouter des segments de code personnalisé

Webflow ne peut pas anticiper tous les besoins en développement de site internet. Si nous souhaitons créer une interaction non prévu par Webflow, nous pouvons quand même l'ajouter au site internet. Pour y arriver, nous pouvons ajouter du code à différents endroits :

La fonction défini dans la balise <body> permettent d'ajouter du JavaScript personnalisé

Google Tag Manager

Pour avoir des statistiques sur l'utilisation de nos site internet, nous ajoutons des tracker dans les balises <body> et <footer>. Les trackers sont des outils qui permettent de récupérer des informations sur un site lorsqu'un internaute l'utilise, comme mentionné dans cet article. Nous savons d'expérience qu'un seul tracker ne suffit pas, et qu'il faut parfois en ajouter, en modifier, ou en supprimer. Google Tag Manager permet de simplifier tout cela.

Plutôt que modifier le code des sites que nous faisons à chaque fois qu'il faut modifier un tracker, nous intégrons un bout de code Google Tag Manager sur nos sites. Ensuite, nous intégrons les trackers sur Google Tag Manager. En quelques minutes, nous pouvons ajouter un nouveau tracker, en modifier ou supprimer un autre. De cette manière, nous travaillons uniquement sur Google Tag Manager, sans avoir à retourner sur Webflow à chaque fois que nous modifions un tracker.

L'interface ou nous avons accès à nos trackers

Pour plus d'informations, voici un guide très pratique pour comprendre pourquoi et comment utiliser Google Tag Manager.

Conclusion

Après avoir comparé et essayer plusieurs outils de conception de site internet, nous avons choisi Webflow et en sommes satisfait. Nous le recommandons pour tout site internet vitrine, sauf les sites de e-commerce qui vendent à l'international parce que Webflow n'est pas encore prêt à bien gérer cette partie.

N'hésitez pas à nous contacter si vous avez des questions ou si vous voulez créer un site sur Webflow.

Découvrez nos autres articles !

Parlons de votre projet

La meilleure façon de savoir comment nous pouvons vous aider à réaliser votre projet, c'est de nous en parler !

Appelez-nous
Appelez-nous
06 15 77 95 42
Écrivez-nous
Illustration Contactez-nous