Qu’est-ce que Webflow ?

Webflow est un outil permettant de créer des sites web à l’aide d’un éditeur intuitif. C’est donc un véritable constructeur d’interface avec une promesse forte : pas besoin de savoir coder pour créer votre site web. Vous pouvez donc bâtir vos pages à l’aide de glisser-déposer et d’actions intuitives accessibles à tous.

Webflow home

Néanmoins, même si vous n’avez pas besoin de toucher nécessairement à du code, vous pouvez tout de même avec Webflow jouer avec les éléments HTML, CSS et JavaScript. Ce qui vous offre une personnalisation presque sans limite contrairement à des templates ou à des Kit UI. Webflow vous offre donc de la flexibilité en termes de personnalisation sans la contrainte de devoir toucher en détail à la partie code.

CSS Webflow

Un peu à la manière d’Adobe XD, vous avez donc une interface de création et d’édition assez visuelles. Vous placez vos éléments, modifiez leur taille, leur couleur, etc. Vous pouvez également implémenter des animations et des interactions directement dans l’éditeur, ce qui en fait un outil assez puissant. 

Webflow board

Alors bien sûr, vous ne touchez pas à du code certes, mais vous devrez quand même avec Webflow comprendre comment fonctionne la structure HTML (élément parent, section, header, etc.) et le CSS (personnalisation). 

Webflow propose également une API permettant aux éditeurs de créer gérer du contenu régulier comme un blog ou une rubrique actualité. À la manière d’un CMS classique type Wordpress, Webflow est donc en mesure de vous proposer des solutions pour que vous soyez flexible en matière de création de contenu. Ça n'est donc pas juste un éditeur de landing page. 

De plus, depuis peu, Webflow propose également des fonctionnalités de e-commerce, là encore très personnalisables en matière de design. 

Pourquoi utiliser Webflow ? 

Que ce soit pour des personnes ayant peu de connaissances en code ou pour des développeurs aguerris, Webflow peut se présenter comme une excellente solution.

D’une part car une personne ayant peu de connaissances techniques peut lancer son propre site assez facilement avec cet outil. Contrairement à d'autres CMS où il sera compliqué de créer une interface ultra personnalisée, Webflow offre la possibilité de personnaliser son site web sans vraiment de limite. Cela offre donc un gain de temps et d’argent pour les novices et les débutants.

D’autres part, même pour les développeurs, Webflow à son intérêt. En effet, il est possible qu’un développeur veuille créer un site web rapidement juste pour tester une idée ou une campagne. Il a donc la possibilité d’utiliser Webflow afin de ne pas perdre son temps sur des aspects techniques de code juste pour un projet de test. En plus de ça, Webflow est bien plus efficace lorsque vous avez des connaissances solides en code.

Les fonctionnalités de Webflow

Sachant que pour créer un site web efficace, beaucoup de fonctionnalités sont nécessaires, Webflow s'efforce de mettre à jour ses solutions pour proposer un outil qui soit à jour et adapté à chacun. 

On retrouve donc bien évidemment chez Webflow, de multiples fonctionnalités. 

  • Design
  • Animation
  • Référencement
  • Marketing
  • Intégrations
  • Hébergement
  • CMS
  • Composants
  • Gestion

Création de site web

C’est son point principal, Webflow propose donc de mettre en place des sites web avec un design entièrement personnalisable. Sachant que Webflow vous donne la possibilité de manipuler les éléments CSS, vous pouvez utiliser les grilles de CSS dans un premier temps pour facilement créer des web design propres avec des éléments automatiquement alignés.

Webflow s’occupe également de mettre en place un code sémantique qui soit propre au niveau de l’HTML conforme au W3C. Pas besoin de connaissances pointues ici donc. 

Bien évidemment, les éléments CSS de base comme les flexbox sont gérés et Webflow offre un moyen intuitif de les utiliser. On retrouve également d’autres propriétés populaires comme les z-index par exemple. 

Vous avez également la possibilité de créer un design system pour votre espace de travail. C’est-à-dire que vous pouvez mettre en place un élément de base qui sera répété plusieurs fois, comme un bouton. Vous n’aurez donc qu’à changer l’élément de base pour que toutes les copies de ces éléments soient modifiées automatiquement.

Webflow rend votre conception responsive également, c’est-à-dire que vos sites web seront adaptés à tous les formats d'écran et à tout type d'appareils.

Toutes ces fonctionnalités nécessitent plus ou moins de connaissances en développement web. Si vous êtes un développeur, il se peut que vous ayez envie d’intégrer du code que vous aurez écrit manuellement avant, Webflow vous offre la possibilité de le faire. Vous pouvez ajouter du code écrit à la main à du code généré avec Webflow. 

Animation

En matière d’animation, Webflow est assez puissant puisqu’il permet de mettre en place rapidement des animations, 3D ou non, là encore sans écrire de code. Vous pouvez donc ajouter des interactions et des mouvements sans forcément consulter ni même écrire du Javascript. 

Webflow animation

CMS

Un peu à la manière de Wordpress, Webflow vous propose un CMS capable de gérer un blog et d’afficher du contenu de façon dynamique. Vous pouvez donc avec Webflow décider d’afficher par exemple vos 3 derniers articles sur votre page d’accueil.

Webflow CMS

Webflow vous offre, comme pour les sites web classiques et les e-commerces, un système de pagination facile à déployer. Vous pouvez bien évidemment lier ces différents articles/produits facilement à l’aide de liens annexes.

Sachant que c’est un CMS, vous pouvez très bien collaborer en ajoutant des membres et des éditeurs à votre compte.

Intégration

Webflow ne vous empêche pas d’analyser le comportement de vos utilisateurs et les données liées à votre site web. En effet, vous pouvez facilement intégrer Google Analytics, Google Optimize, Zapier ou autres pour accompagner votre écosystème.

Référencement & marketing

Qu’est-ce qu’un site web sans référencement et sans stratégie marketing ? Webflow vous offre la possibilité de paramétrer certaines balises afin de correspondre aux attentes de Google (balise Alt pour les images par exemple).

Vous pouvez bien sûr paramétrer directement dans le CMS de Webflow les descriptions, les méta-descriptions, etc. de chacune de vos pages. 

Hébergement 

En termes d'hébergement, Webflow propose Amazon cloudfront., une solution de diffusion de contenu rapide et performante.

Pour ce qui est également de la redirection des pages et de la 301, Webflow vous facilite la tâche et vous permet de gérer les changements d’URLS tout en gardant un référencement optimal.   

Aussi, un peu à la manière de Github, vous pouvez choisir avec Webflow de versionner vos projets. Webflow enregistre automatiquement votre travail pour que vous puissiez revenir en arrière, sur des anciennes versions de votre travail. 

Comme tous les sites web, une base de données est nécessaire lorsqu’il s’agit de gestion de contenu et d’action dynamique. Webflow propose donc une base de données classique où vous allez pouvoir faire des tests avant d’envoyer votre contenu “officiellement” sur votre site. 

Accompagnement

Bien évidemment, comme avec chaque SaaS, chaque logiciel, chaque outil, la marque propose une aide en permanence pour que les utilisateurs ne soient pas perdus. Webflow propose une documentation un peu à la manière de Stripe par exemple où les développeurs pourront voir en détail comment l’éditeur et la partie code fonctionnent. 

En plus de ça, un forum, une assistance par mail et une communauté sont disponibles pour apporter de l’aide en continu aux utilisateurs de Webflow. 

Comment utiliser Webflow ? 

La prise en main de Webflow peut être un inconvénient pour certains. En effet, même si l'outil promet une utilisation intuitive et facile, il n’est néanmoins pas évident de prendre en main toutes les fonctionnalités de l’outil. 

Webflow est très complet, cela nécessite donc du temps avant de tout pouvoir maîtriser. Pour les designers ayant l'habitude de travailler sur Photoshop ou pour les développeurs faisant du front-end, l’apprentissage de Webflow peut se faire assez rapidement. Pour les autres, cela peut prendre logiquement plus de temps.

home webflow

Pour apprendre à utiliser Webflow comme il se doit, vous pouvez vous tourner naturellement sur le contenu que fournit Webflow, sur Webflow University. Les tutoriels proposés ici sont clairs, simples et accessibles. Il y en a des tonnes et des tonnes sur des sujets plus ou moins techniques. 

Néanmoins, il est possible que vous ne sachiez pas par où commencer et que vous soyez un peu perdu face à tout ça. Nous allons tenter d’aller droit au but ici est de découvrir les principales fonctionnalités de Webflow afin que vous puissiez prendre en main l’outil le plus rapidement possible. 

1 - Concept de box CSS

Le concept de box est LA chose que vous devez comprendre en priorité. C’est d’ailleurs l’une des seules choses techniques à comprendre pour utiliser Webflow comme il se doit. Le système de box correspond à la structure qu'imposent le HTML et le CSS lorsque l’on crée un site web. 

webflow box

La structure des éléments sur Webflow, comme sur d’autres logiciels de design (Figma, Adobe XD, Sketch), repose donc sur le système de box (ou de boîtes). La différence ici est que vous ne pouvez pas placer les éléments n’importe où dans l’espace d’édition. Vous devez empiler les blocs les uns en dessous des autres.

Je vous conseille avant toute chose l’excellente vidéo de Webflow pour mieux appréhender ce système de boîte. 

2 - L’espace de travail (le concepteur)

L’interface de Webflow peut faire peur pour certains mais peut paraître familière pour d’autres. En effet, l’espace de travail peut faire penser à Photoshop ou Illustrator. Les designers ne seront donc pas perdus. 

espace de travail webflow

On retrouve donc les outils fondamentaux ayant pour objectifs de créer des éléments, de les placer, d’appliquer des filtres, d’ajouter des couleurs, des textes, des typographies, etc.

Le navigateur : sur le côté, comme pour photoshop avec les calques, vous aurez une vue d’ensemble de la structure de chacune de vos pages. Cela vous permet de voir la structure HTML mais de façon simplifiée. Vous pourrez y voir les différentes divs, les images, les boxs, etc. 

Webflow navigateur

Les pages : juste en dessous de la section navigateur, vous trouverez la partie “pages” qui vous donne un aperçu direct de toutes vos pages. Vous avez donc la possibilité ici d’obtenir plus de détails concernant les pages en question, vous pouvez les dupliquer, modifier leur nom ou en ajouter de nouvelles également. C’est aussi ici que vous allez pouvoir jouer avec la profondeur des liens et avec les dossiers. Lorsque vous ajoutez un dossier donc, cela rajoute un “/”nom du dossier”” dans l’URL correspondant. 

pages webflow

Détail de la page et paramètre de blog : vous avez la possibilité d’aller plus loin concernant les paramètres de chacune de vos pages. En cliquant sur l’icône de paramètre, vous allez pouvoir accéder à plusieurs options de balises notamment pour le SEO. C’est également ici que vous pouvez supprimer vos pages et ajouter du code personnalisé.

détail page webflow

Les actifs (assets) : la section “assets” est très importante si vous souhaitez être productif dans votre travail sur Webflow. C’est ici que sont référencés tous vos éléments et tous les composants que vous utilisez sur vos pages. 

asset webflow

Le panneau de style : c’est LA section avec laquelle vous allez le plus interagir à mon avis. C’est ici que vous ajoutez les marges, les couleurs, les tailles, les emplacements, etc. C’est également ici que vous allez pouvoir toucher au CSS et à la partie un peu plus technique liée aux classes CSS. C’est en d’ailleurs grâce à cela que vous pouvez avec Webflow mettre en place des design systems avec des composants réutilisables. 

style webflow

Les paramètres de blocs : Vous avez également accès à un autre panneau pour gérer les paramètres des différents blocs. Ce sont des paramètres liés aux URLS des liens, des filtres et d’autres éléments plus techniques mais nécessaires dans certains cas. 

paramètres de bloc webflow

Les interactions : C’est une des parties les plus amusantes de Webflow mais également un peu techniques. C’est ici que vous allez pouvoir mettre en place des interactions, des animations et des transitions. Que ce soit des animations aux scroll, des animations infinies, ou autres.

Interactions webflow

Les breakpoints : Webflow vous met à disposition 4 breakpoints représentant 4 écrans d'appareils différents. C’est avec ça que vous allez pouvoir gérer le responsive et l’accessibilité de votre site sur mobile et tablette. Vos différentes boxs se redimensionnent plus ou moins automatiquement en fonction de comment vous structurez votre page.

breakpoints webflow

Vérification de l’accessibilité : un peu comme si vous inspectiez l’élément sur une page web, vous pouvez faire glisser la taille de l’écran pour voir en temps réel comment votre page se réajuste par rapport à la taille de l’écran. 

3 - Panneau des éléments 

panneau des éléments

Cela peut faire peur au départ car il y a beaucoup d’éléments différents disponibles. Mais cela montre également toutes les possibilités de Webflow en matière de personnalisation. C’est donc un point positif. 

On retrouve donc dans ce panneau tous les différents types de layout, d’emplacement, de box, de grilles, etc. Certains d’entre eux sont liés à des propriétés bien définies, d’autres sont liés à des utilisations plus spécifiques. Dans tous les cas, Webflow vous rend la tâche plus facile en vous proposant des structures déjà toutes faites pour les utilisations récurrentes. 

Néanmoins, attention à ne pas abuser des layout prédéfinis, les containers par exemple ne vous donne pas la possibilité de modifier par exemple la width (largeur) ou autre. Ces éléments peuvent donc être intéressants au départ pour découvrir Webflow, mais attention à ne pas les utiliser pour de réel projet où vous souhaitez avoir la main sur la personnalisation des boxs. 

Div Bloc : c’est l’élément que vous devez maîtriser en priorité. On pourrait la comparer à une simple div en HTML, mais la Div Bloc est en fait un dossier dans lequel vous placez et regroupez vos éléments. Avec les propriétés Grid ou Flex, la Div Bloc sera nécessaire. 

Grid : avec la propriété Flex, Grid est un des éléments que vous allez naturellement le plus utilisé (demandez aux développeurs). Le système de grille est extrêmement puissant et va vous faire gagner beaucoup de temps dans la conception de vos pages. La grille se comporte comme un tableau invisible qui vient ranger vos box automatiquement, pour que tout soit correctement aligné. Pour en savoir plus, les vidéos de Webflow sur la grille sont excellentes : university.webflow.com/courses/grid?rfsn=915210.4b583c.

Le bloc de lien (link block) : comme son nom l’indique, il s’agit ici de donner des liens à vos éléments. Vous pouvez donc ici paramétrer la destination des liens vers une autre page, vers un contenu téléchargeable, un mail, un numéro de téléphone, etc.

Les typographies : c’est ici que vous gérez vos titres, sous-titres, paragraphes, listes, quotes et même les textes enrichis. Les textes enrichis sont des groupes de textes qui vont vous permettre de mieux faire comprendre vos pages à Google.

Le bloc de formulaire : bien sûr, Webflow vous propose une section pour mettre en place des blocs de formulaire plus ou moins complexes. 

Onglets (tabs) : comme son nom l’indique, vous pouvez créer assez facilement des onglets, que ce soit pour le pricing de votre produit, pour catégoriser ou pour présenter différentes fonctionnalités par exemple. 

Slider : pour mettre en place des carrousels efficaces. En paramétrant les sliders sur chacune de vos boxs en question, vous allez pouvoir présenter des images, des avis clients, etc.

4 - Télécharger des polices et autres

Avant toute chose, Webflow, comme tous les autres outils de conception et de création, ne dispose pas de toutes les typographies. Si vous souhaitez que votre site web colle à votre branding et à votre identité visuelle, vous vous devez de télécharger la police de votre choix sur Webflow. En allant directement dans les paramètres de pages, vous avez accès à une liste de police de base Google. Mais si cela ne vous convient pas, vous pouvez tout à fait ajouter vos propres fichiers de police. 

Offres & tarifs

D’abord, vous pouvez essayer Webflow gratuitement. Pas besoin de payer pour vous faire la main et créer vos premières pages. Attention néanmoins, vous êtes limité à 2 pages et le trafic maximum que vous pouvez obtenir avec ce projet est limité à 500 visiteurs par mois. C’est une offre relativement limitée mais c’est intéressant comme je l’ai dit pour tester l’outil avant de se lancer “officiellement”. Aussi, il est important de le mentionner, aucune carte de crédit n’est requise pour essayer Webflow gratuitement.

Ensuite, vous pouvez choisir une offre en fonction de vos besoins : 

  • Individuel : c’est ici que vous allez pouvoir commencer Webflow gratuitement et évoluer sur des offres à 16$ en Lite ou à 35$ en Pro. La différence ici entre les offres individuelles se situe au niveau du nombre de projets pouvant être créés et d’autres détails plus ou moins techniques.
  • Website : c’est avec ces offres que vous allez pouvoir utiliser des CMS, des e-commerces et construire de grands sites pouvant accueillir des centaines de visiteurs.
offre 1 Webflow
Webflow 2 offre

Note de fin

Une fois qu’on connaît les bases, pour se perfectionner, vous n’avez pas d’autres choix que de pratiquer. Plus vous passerez du temps sur l'éditeur, plus vous serez meilleur en termes de productivité et même en matière de design. N’oubliez pas également que vous serez tout de suite plus à l’aise en ayant la curiosité d’en apprendre un peu plus sur la partie code HTML CSS et JS. Webflow + connaissances en HTML CSS JS & UI = combo gagnant.