Pourquoi Webflow ?

Webflow est reconnu comme l'un des meilleurs logiciels de création de site web sans coder de 2021 !

Samuel Duc

Publié le

16/6/2022

Webflow

Webflow, le rêve des webdesigners devenu réalité le jour de sa sortie le 05 août 2013.

Aujourd'hui, Webflow est utilisé par des milliers de personnes à travers le monde. Au fur et à mesure du temps, Webflow a sorti sa formation gratuite et complète sur l'outil, puis un forum de discussion communautaire pour s'entraider sur un CMS qui peut s'avérer complexe lorsqu'on doit toucher au code.

Mais pourquoi Webflow ? Nous verrons dans cet article toutes les fonctionnalités de l'outil.

Lorsque vous êtes confrontés à la question concernant le builder à utiliser, les grands questions qui reviennent sont :

  • Est-ce que le contenu Webflow est Google Friendly (adapté pour avoir un bon référencement SEO) ?
  • Est-il facile de le connecter d'autres outils ?
  • Quelles sont les limites de Webflow en termes de Design ?
  • A quel point peut-on animer le site ?
  • Est-ce que mon site Webflow sera responsive (adaptable aux différentes tailles d'écrans) ?
  • Est-ce que mon site sera sécurisé ?
  • Est-il possible d'éditer facilement le contenu sans avoir de connaissances approfondies ?
  • Est-ce qu'il est compliqué de publier un site Webflow ?

C'est ce que nous verrons dans cet article, à savoir quel CMS est plus avantageux que l'autre sur toutes les questions que vous êtes peut-être en train de vous poser !

Qu'est-ce que Webflow en 2022 ?

Webflow est reconnu comme l'un des meilleurs logiciels de création de site web sans coder de 2021, grappillant petit à petit de nouvelles parts de marché pour se hisser sur le podium des meilleurs "builders" (logiciel de création de site) de notre ère.

Contrairement aux autres logiciels, Webflow a une puissante interface de design permettant le fameux Drag-and-drop (Glissé - déposé) et allie toutes les meilleures fonctionnalités du HTML, CSS et Javascript pour en faire une plateforme fortement personnalisable.

Quelles sont les plus importantes fonctionnalités de Webflow ?

Des fonctionnalités qui, seules, n'ont rien à envier aux autres logiciels mais cumulées, font toute la puissance de l'outil qui fédère de plus en plus cette communauté :

  • Un site web hébergé sur les serveurs de Webflow, pour des sites hautement sécurisés
  • La Webflow University → Des leçons pédagogiques en vidéos et à l'écrit pour apprendre à maitriser un outil pouvant s'avérer complexe dans la construction d'une grosse plateforme. Gratuite pour tous !
  • Un designer performant (designer = interface de développement du site en Front)
  • Capacité à créer un site en drag and drop
  • Intégration native du CMS = bases de données dynamiques interagissant avec les pages préalablement créées
  • Une partie "Editeur" intuitive pour faire des changements textuels, des images ou encore des contenus de vos bases de données

Webflow c'est aussi :

  • La création d'éléments réutilisables
  • Possibilité de designer jusqu'au pixel près
  • SSL = Secure Socket layer, est un protocole de communication sécurisé qui supporte plusieurs services de sécurité
  • ISO 27018 est aussi un protocole de communication sécurisé pour la protection des données hébergées sur des serveurs de type Cloud
  • La possibilité de faire des back-ups grâce aux sauvegardes automatiques
  • Exporter le code
  • De puissantes interactions et animations entre les éléments pour un effet "Whaouh"
  • Intégrations avec tous les outils ouverts
  • Modules e-commerce
  • Intégration native de memberships pour la gestion de vos utilisateurs en gérant le contenu exclusif dédiés à certains abonnements
  • Intégration native de la logique conditionnelle dans l'interface
  • Possibilité d'intégrer du code pour ajouter des fonctionnalités supplémentaires
  • Rapidité de chargement des pages
  • Faible consommation de mémoire vive (RAM)

Comme vous pouvez le constater, Webflow offre une multitude de fonctionnalités vous permettant de créer une plateforme sur-mesure sans coder. Que vous engagiez une agence spécialisée sur Webflow, un freelance ou votre beau-fils pour faire votre site, il vous permet de gérer l'entièreté de votre site sans avoir de connaissances poussées en informatique, simplement un peu de logique.

Regardons maintenant de plus près de quoi ce logiciel est capable de faire pour vous.

La Webflow University, apprendre tout en s'amusant

Webflow a su mettre en place un moyen pédagogique d'apprendre à ses utilisateurs de manière ludique (ludique ne veut pas dire non-productif, bien au contraire). Des vidéos pour comprendre l'outil littéralement de A à Z mélangé à une pointe d'humour et tout cela, gratuitement !

Cela veut dire que n'importe quelle personne avec un minimum de détermination et de quelques heures passées sur l'outil, pourra le maitriser et aider de nombreuses entreprises à se démarquer grâce à un site optimisé sous tous les angles.

Vous pouvez y retrouver des leçons pour tous les niveaux, du débutant au stade avancée :

  • Une leçon complète vous permettant de comprendre les fonctionnalités essentielles et fonctionnelles des différents éléments
  • Un challenge de 21 jours pour faire un site portfolio
  • Une leçon pour devenir Freelance
  • Une leçon sur les animations avec After Effect et Lottie Animations
  • Les fondamentaux du SEO
  • Comprendre le CMS et le Contenu Dynamique
  • Comment créer un business en ligne
  • Création d'un E-commerce sur Webflow
  • L'ultime leçon pour comprendre les sujets complexes de Design

Ce n'est pas la seule partie où vous pouvez apprendre l'utilisation de Webflow, vous pouvez en apprendre davantage sur le forum où toute la communauté expose ses problématiques et il est sûr à 99%, qu'une autre personne se soit confronté à l'un de vos blocages avant vous.

Webflow, une interface de Design sans limite

Si vous êtes arrivé sur cette article, c'est probablement que ce que vous avez essayé jusqu'à aujourd'hui ne convenait pas à vos attentes. La plupart des utilisateurs de Webflow ayant utilisé d'autres logiciels comme Shopify, Wix, Prestashop, Wordpress sont unanimes concernant la partie de développement Front-end (ce qui est visible sur un site).

Le Designer Webflow vous permet de construire la structure de votre site, d'en concevoir l'apparence, d'y ajouter du contenu, des interactions, des animations et du code personnalisé pour créer des sites Web, des Landing Pages, des prototypes (MVP), des présentations ou encore ce que votre imagination laisse entendre.

Dans le Designer, vous pouvez manipuler visuellement le contenu HTML, définir les propriétés CSS et créer des interactions sans écrire de JavaScript. À mesure que vous construisez votre site Web, le Designer crée un code propre, sémantique et prêt pour le Web.

Voici comment se présente le fameux "Designer" de Webflow :

Webflow interface designer
Designer de Webflow

Premier sentiment que vous allez avoir et vous ne pouvez pas y échapper, l'impression d'être dans un cockpit d'avion avec des boutons dans tous les sens mais la prise en main est assez rapide.

Avis à nos amis Designer habitués à travailler sur Photoshop, vous ne serez pas tant dépaysé !

Votre écran principal se compose dans un premier temps d'une feuille blanche que vous pouvez personnalisé comme bon vous semble.

Sur la gauche, une barre d'outils comprenant :

  • L'accès au menu principal
  • Ajouter de nouveaux éléments (Sections, Containers, Div Block, Textes, Liens, Formulaire...)
  • Capacité de créer des Symboles ce qui correspond à des éléments réutilisables après les avoir créer
  • Le menu de navigation pour voir la structure de votre page et des éléments dans d'autres éléments
  • Accès aux différentes pages
  • Menu d'accès au CMS
  • Menu d'accès aux paramétrages E-commerce
  • Un accès direct à un audit de votre site web pour analyser les performances
  • Outil de recherche
  • Accès aux vidéos tutoriels de la Webflow University
  • Page d'aides

Le menu de droite se compose de 4 parties :

  • Le menu de Style vous permet d'accéder aux fonctionnalités couvrant les propriétés CSS d'un élément sélectionné et de les modifier en temps réel
  • Menu de paramètres d'un élément pour lui apporter des propriétés supplémentaires
  • Gestionnaire de classes vous donnant accès à toutes les classes créées sur votre projet Webflow, un moyen rapide de renommer et/ou supprimer vos classes
  • Menu des animations et des interactions vous permettant de rendre votre projet plus dynamique et lui offrir une mouvance que seul le code pouvait faire jusqu'aujourd'hui

Le designer Webflow vous offre de quoi rendre jaloux tous les autres builders par sa capacité à vous laisser tester un marché en l'espace de quelques heures, créer un produit digital (formation), faire la première version de votre produit (MVP), écrire un blog sur une thématique qui vous tient à coeurs et surtout de pouvoir lui donner vie grâce aux différentes interactions !

Gestion de données grâce au CMS de Webflow

Le CMS est un des piliers du développement de site web dynamiques sur Webflow et en voici les principales raisons.

Définissons ensemble ce qu'est un CMS → abréviation pour Content Management System, simplement résumé vous sert à stocker des données et de les gérer comme bon vous semble afin de les rendre vivantes sur votre site web, visuellement.

L'image ci-dessus vous permet de voir comment est organisée la base de données en elle même et l'image ci-dessous de voir comment elle interagit directement avec votre site web.

CMS de Webflow
CMS de Webflow - Source : www.webflow.com

  1. On structure la donnée dans Webflow (Possibilité d'importer un CSV)
  2. Créer une collection (= exemple : Articles de Blog)
  3. Définir les champs (Titre de l'article, Description, Introduction, Temps de lecture, etc...)
  4. Créer du contenu relatif à cette collection
  5. On design autour des données pour rendre le contenu plus agréable à voir
  6. En créant des champs textes, images... Il est possible de relier les textes directement à votre base de données

Comme vous pouvez le constater, le CMS est idéale pour structure votre site web et rendre du contenu structuré, tant pour Google que pour vos utilisateurs :

  • Articles de Blog
  • Cours
  • Formations
  • Membres d'une équipe
  • Cas d'usages clients
  • Lister des outils
  • Catégoriser
  • Événements
  • Listing clients
  • Musique
  • Recettes

La liste est longue et n'a de limite, que votre imagination.

Pour éditer le contenu une fois créé, il vous suffit de vous rendre dans la partie éditeur afin d'ajouter un nouvel article de blog ou de re-structurer votre base donnée.

Qu'est ce que l'éditeur de Webflow ?

Webflow a créé un espace dédié aux équipes un peu moins technique afin de maintenir le site web sans demander à son développeur de plonger le nez dedans pour chaque changement.

Imaginez vous sur un site web et que vous puissiez éditer le texte comme dans un fichier word et changer les images comme sur un Powerpoint, l'Editeur de Webflow vous le permet désormais et ne demande aucune connaissance technique de l'outil.

Un autre menu, toujours dans l'éditeur, vous permet de gérer toutes vos données pour créer de nouveau contenu en toute autonomie et voici comment il se présente :

Editeur de Webflow
Editeur de Webflow - Source : www.webflow.com

Dans ce menu, se trouvent plusieurs onglets tels que

  • Les différentes pages (publiées ou non) de votre site
  • Les différentes collections du CMS
  • Vos commandes si vous avez une boutique e-commerce
  • La gestion de vos produits - code promo - réglages de votre boutique
  • Un accès à vos différents formulaires et toutes les demandes faites par ces derniers
  • Certains réglages sont disponibles pour votre compte Webflow
  • Possibilité de publier depuis l'éditeur

Une aubaine pour les équipes ayant besoin de modifier leur site sans passer par une tonne de processus compliquée et des développeurs qui vous coûtent un bras pour chaque changement. Grâce à l'éditeur vous pourrez faire vos changements avec un rendu sous vos yeux pour voir si le résultat vous est satisfaisant ou pas ?

Webflow, une multitude d'intégrations et interconnexions

Une liste longue comme le bras en termes d'intégrations. Quand il s'agit d'intégrations, on parle forcément de bout de code mais rien de compliqué, il vous suffit de copier le code de l'outil en question et de l'implémenter dans un module "embed" de Webflow vous permettant d'afficher, où vous le souhaitez sur votre site, des intégrations extérieures à Webflow.

Si l'intégration ne se fait pas de cette manière il existe des outils tels que Zapier, Integromat, n8n ou Integrately pour faire la connexion avec le back-office de votre Webflow, très utile pour la gestion des flux de données.

Pour finir en beauté, nous n'en avons pas encore beaucoup parlé mais Webflow a donc annoncé une bombe prévue courant 2022 concernant l'implémentation de logique conditionnelle et de la gestion d'abonnement directement en natif, ce qui promet de grandes choses pour l'avenir du meilleur CMS que l'on connaisse à ce jour.

Merci pour votre lecture, à bientôt !

Faites-vous accompagner

30 minutes

Pour discuter de votre projet, c’est ici

Nous contacter

Vous en voulez plus ?

Le registre du No Code

Toutes les actus
Webflow
6 MIN
de lecture
Webflow vs Squarespace, comparaison 2023

Webflow est connu pour sa puissance et son design, alors que Squarespace pour être facile et épuré.

Lire l'article
Automatisations
5 MIN
de lecture
Make ou Zapier ? Lequel choisir pour automatiser vos tâches en 2023

Make vs Zapier. Lequel choisir en 2023 ?

Lire l'article
Webflow
6 MIN
de lecture
10 raisons de migrer vers Webflow

10 bonnes raisons de migrer vers Webflow.

Lire l'article
Webflow
5 MIN
de lecture
Résumé de la Webflow Conf 2022

Si vous avez manqué l'annonce, voici un petit résumé de la Webflow Conf 2022.

Lire l'article

Planifions un rendez-vous !

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.