25 outils no code à connaitre en 2021
👀 Lire plus

Allons-y pour ce site web builder Webflow. Ceci est une vue d'ensemble afin de savoir s'il est fait pour vous.

Voici mon avis détaillé sur Webflow.

Dans cet article, vous lirai :

  • C'est quoi Webflow
  • Ce que Webflow peut faire
  • Ce que Webflow fait bien et mal
  • Commencer avec Webflow
  • Si cet outil en vaut le prix

Allons-y.

Les liens dans cet article qui mène vers webflow.com sont des liens d’affiliation. Cela veut dire que si vous achetez un abonnement, j'aurai une commission. Merci de me soutenir sans me payer. Ce revenu versé par Webflow sert à la recherche et l'écriture (~ 10h/article) de mes ressources no code de qualité.

Mise en contexte

Webflow est un outil bien conçu avec une interface qui plaît bien aux designers.

D'ailleurs, leur publicité populaire avec Pablo Stanley témoigne de leur volonté à convertir tous les designers qui veulent créer un site web.

Mais au-delà du design, je crois fortement que Webflow soit pratique pour tous les créateurs.

Ce qui a vraiment différencié cet outil de tous les autres en 2012, c'est le responsive design. C'était le seul outil qui permettait d'utiliser les fameux breakpoints pour les différents écrans.

En 2013, ils ont publié la première version de Webflow à la scène tech sur Hacker News. La réaction était presque unanime, l'outil était révolutionnaire et était voué à un grand avenir.

Peu de temps après, les fondateurs sont entrés au Y Combinator, un incubateur de startup. Au fil des années, ils ont levé plus de 75 millions de dollars pour financer l'entreprise.

Aujourd'hui, Webflow mène le mouvement no code et a créé le premier congrès sur le sujet. Pour en apprendre plus sur l'outil et le fondateur Vlad Magdalin, je vous conseille cet épisode de podcast (en anglais) par Indie Hackers.

En résumé

Pour ✅

  • Plan gratuit avec sous-domaine (webflow.io)
  • CMS inclus
  • Leçons guidées qui vous prend par la main
  • Intégration avec plusieurs outils
  • Templates gratuits pour commencer facilement
  • Le drag-and-drop est facile à utiliser

Contre ❌

  • Site web multilingue
  • E-commerce limité
  • Petite courbe d'apprentissage pour apprendre l'outil
  • Tarification peut sembler complexe au départ

Pour qui 🤓

Webflow est un excellent outil no code pour :

  • Un site web avec ou sans template
  • Une boutique en ligne (e-commerce)
  • Un blog avec un design unique
  • Une landing page

Qu'est-ce que Webflow?

Webflow est un outil no code pour créer des sites web.

Le page builder fait un peu peur au départ, mais honnêtement, on s'habitue assez rapidement.

Le page builder de Webflow
Le page builder

Webflow est ni plus ni moins que le HTML, le CSS et le JavaScript accessibles sans coder. C'est ce qu'on appelle le front-end. En termes de design, il est donc possible de tout faire.

L'outil s'occupe de la création du site web et aussi de l'hébergement. C'est un tout-en-un.

Par contre, en termes de fonctionnalités, c'est pas tout gagner. Par exemple, pour créer un site web avec une zone membre comme Makerpad, vous aurez besoin d'un outil complémentaire, tel que MemberSpace.

Webflow est aussi un CMS, ce qui est utile pour les articles de blogue et autres données ayant la même structure de page.

Webflow CMS
CMS

Vous pouvez aussi vendre vos produits physiques et numériques, l'outil comprend une section e-commerce presqu'aussi complète que Shopify.

Webflow E-commerce
E-commerce

Mais le gros avantage de Webflow sur les compétiteurs est la qualité (et quantité) de leurs tutoriels. La rubrique Université regroupe la totalité des questions que vous pourrez vous poser. En plus, le formateur est drôle, ce qui rend l'apprentissage plus facile.

Est-ce que Webflow est bon pour les débutants ?

La réponse courte est : non.

Si vous n'avez jamais créé de site web avec une autre plateforme, vous allez trouver cela plus difficile.

Comme tout, vous devrez apprendre les termes. Qu'est-ce qu'un Grid, comment élargir cette section sur mobile seulement, comment faire une animation, etc.

Vous voulez apprendre rapidement un nouvel outil ?

Oubliez les templates et les tutoriels de base. Ayez votre design de page en tête ou sur un autre outil de design comme Figma et commencez directement avec une page blanche. Pour chaque tâche que vous voudrez accomplir, allez maintenant apprendre avec leur rubrique Université ou ailleurs sur Youtube. En voulant répondre à un besoin précis, vous retiendrez plus facilement la nouvelle information que si c'était simplement théorique.

Alors, Webflow permet de tout faire en design web. Il n'y a aucune limite contrairement à d'autres site web builders. Comme vous pouvez tout contrôler, vous allez devoir tout apprendre sur le design web.

Si vous voulez une simple landing page ou un site web avec peu de pages et un design "qui fait le travail", regardez des outils comme Dorik ou Carrd qui sont beaucoup plus simples pour les débutants.

Les points positifs de Webflow

Si vous ne l'avez pas encore compris, la plus importante raison pourquoi les gens utilisent Webflow c'est le design. C'est d'ailleurs l'élément qui est mis de l'avant sur toutes les fonctionnalités et qui fait différencier l'outil des compétiteurs.

Lorsque vous créez un compte, Webflow vous amène directement sur le builder pour que vous expérimentiez l'outil sans détour. L'interface appelé designer fait appel au drag-and-drop, un comportement très intuitif. Vous glissez ce que vous voulez là où vous voulez. C'est simple.

Une fois terminé, vous pouvez publier votre site avec le plan gratuit avec un sous-domaine qui termine par webflow.io, par exemple monsite.webflow.io. C'est super de ne pas avoir besoin de payer pour publier et partager un site web.

L'autre fort élément différenciateur de Webflow est le CMS (Content Management System). C'est là où vous placez le contenu écrit. Par exemple, vous avez une liste de restaurants avec leurs informations, vous aurez le même design pour chaque page, mais avec chacune leurs informations.

Si vous ne savez pas comment faire une tâche précise, croyez-moi cela va arriver, Webflow ont des vidéos très bien réalisés. Les vidéos ne sont pas qu'informatives, mais elles sont aussi drôles. Avec cette belle touche humoristique, l'outil se démarque encore des concurrents.

Aucun outil ne peut tout faire et c'est le cas aussi pour Webflow. On peut donc compter sur les intégrations. C'est à la fois un plus et un moins, cela dépend des besoins. Si c'est pour faire une tâche d'automatisation bien simple comme envoyer un courriel automatique en passant par Zapier, c'est un plus pour moi.

Pour que les internautes retrouvent votre site et vos pages sur les moteurs de recherches, Webflow a misé fort sur les contrôles SEO (Search Engine Optimization). Votre sitemap est fait automatiquement, vous créez les redirects si un URL est changé, le CMS et les images n'y échappent pas et l'hébergement est rapide. Google ❤️ Webflow.

Les points négatifs de Webflow

Comme je disais, Webflow n'est pas optimal pour les débutants. L'outil a été créé à la base pour les designers. Il y a donc une bonne courbe d'apprentissage tellement il y a des choses possibles à faire. En ayant un projet en tête, vous pouvez compter sur plusieurs jours ou semaines pour le terminer.

Si vous voulez ajouter une version anglaise de votre site, sachez qu'il n'est pas encore possible nativement de créer un site web multilingue sur Webflow. Vous devrez grosso modo passer par une intégration telle que Weglot.

La fonctionnalité de boutique en ligne (Ecommerce) est à mon avis limité comparativement à Shopify. En fait, pour vendre des produits numériques, ça fait le travail. Mais, on le sait qu'il y a TELLEMENT d'éléments à prendre en compte pour vendre des produits physiques.

Réglages de la fonctionnalité ecommerce sur Webflow
Réglages de la fonctionnalité ecommerce

La tarification est difficile à comprendre au début. C'est le seul outil avec des sites plans et accounts plans. Il y a plus d'informations à ce sujet plus bas dans l'article.

Comme je disais dans les bons coups de Webflow, selon vos besoins, vous devrez peut-être utiliser des intégrations. Pour créer une application web, je choisirais plutôt Bubble qui inclut beaucoup de fonctionnalités web app native.

Commencer avec Webflow

Pour créer un site web avec Webflow, voici un bref aperçu des étapes clés.

Étape 1: Créer un compte

Créez un compte sur Webflow. Ce compte sera gratuit tant et aussi longtemps que vous voudrez et les sites publiés le seront avec le sous-domaine monsite.webflow.io

Étape 2: Créer le site web

Prenez le temps de vous familiarisez avec le tableau de bord, normalement en quelques heures vous devriez être capable de savoir comment faire l'essentiel.‍

En gros, la partie HTML se retrouve à gauche et la partie CSS se retrouve à droite.

Le HTML et CSS dans l'interface Webflow
Le HTML et CSS dans l'interface 

Dans les trucs un peu plus complexes, il y a les interactions et animations qui demandent plus de temps. Je vous conseille ce cours pour en apprendre sur le sujet.‍

Chaque page est accessible dans l'onglet Pages à gauche de l'écran.

Webflow Pages
Les pages

Et les éléments sont accessibles avec le bouton +.

Webflow Elements
Les éléments

Étape 3: SEO, hébergement et autres

Ajoutez les informations essentielles (titre, description et image) sur votre site pour Google et les réseaux sociaux.‍

Enfin, choisissez votre plan d'hébergement.

Étape 4: Publier 🎉

Bravo, votre site est actif!

Tarification de Weblow

Webflow a deux types de plans pour combler tous les besoins.

Sachez cependant qu'il est possible d'utiliser l'outil gratuitement, pour la durée que voulez et avec le sous-domaine webflow.io.

Site plans

Tous les plans site permettent de connecter son nom de domaine.

Basic:  Pour $12 USD/mois payable à l'année ou $15 USD/mois payable mensuellement, vous avez droit à 25 000 visites sur votre site par mois, à créer 100 pages et 500 réponses dans un formulaire. Par contre, vous n'avez pas droit au CMS.

CMS: Le nom le dit, CMS vous donne droit au... CMS, jusqu'à 2000 items de collection. Pour $16 USD/mois payable à l'année ou $20 USD/mois payable mensuellement, vous avez droit à 100 000 visites sur votre site par mois, à créer 100 pages, 1000 réponses dans un formulaire.

Business: Si cela ne vous suffit pas, ce blog n'est pas pour vous 😉.

Ecommerce plans

Ces plans permettent la majorité des fonctionnalités des plans site, à quelques différences près.‍

Standard:  Pour $29 USD/mois payable à l'année ou $42 USD/mois payable mensuellement, vous avez droit à toutes les fonctionnalités du plan site CMS ainsi que 500 produits dans votre boutique, à 2% de frais de transaction et 3 personnes pour gérer le compte.‍

Plus: Pour $74 USD/mois payable à l'année ou $84 USD/mois payable mensuellement, vous avez droit à toutes les fonctionnalités du plan site Business ainsi que 1000 produits dans votre boutique, à 0% de frais de transaction et 10 personnes pour gérer le compte.

Advanced: Si encore une fois ces plans ne suffisent pas, ce blog n'est pas pour vous.

Account plans

Ceci s'applique davantage aux agences pour pouvoir, entre autres, ajouter son logo dans l'Editor et avoir accès à plus de projets. Je n'irai pas plus loin, car ce n'est pas pour vous.

Maintenant, c'est à votre tour 🥸

J'espère que vous en savez un peu plus sur Webflow.

Je suis curieux : Quel site voulez-vous créer ? Avez-vous un design en tête ?

Faites-le moi savoir en laissant un commentaire en bas.

Frank
Frank
Je test tous les outils no code et je documente ici.

Rejoindre la conversation

Table des matières
Génial! Vous vous êtes inscrit avec succès.
Bienvenue à nouveau! Vous vous êtes connecté avec succès.
Vous vous êtes abonné avec succès à Non Codeur.
Votre lien a expiré.
Succès! Vérifiez votre e-mail pour le lien magique pour vous connecter.
Succès! Vos informations de facturation ont été mises à jour.
Votre facturation n'a pas été mise à jour.