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. 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.

CMS : Content Management System = est un système permettant de créer et d'organiser des données de manières dynamiques

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

  • Est-ce que le contenu est Google Friendly ? (= Adapté pour avoir un bon référencement SEO)
  • Est-il facile de connecter d'autres outils ?
  • Quelles sont les limites en termes de Design ?
  • A quel point peut-on animer le site ?
  • Est-ce que le site 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 le site ?

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 → 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 n 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.
  • 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
  • ANNONCE NOVEMBRE 2021 (BETA) :
  • 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, un freelance ou votre beau-fils pour faire votre site, Webflow 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.

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 :

Designer de Webflow - Source : www.octolio.io

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 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 - 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
  • Evenements
  • 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 - 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 de 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 ?

Intégrations et interconnexions

Une liste longue comme le bras en termes d'intégrations, cliquez ici pour en savoir plus à leur sujet.

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
Notion
5 MIN
de lecture
Passer de Trello à Notion

Vous avez décidé de passer à Notion ? Nous allons vous convaincre de franchir le pas pour passer de Trello à Notion.

Lire l'article
No Code
5 MIN
de lecture
Qu’est-ce qu’un MVP ?

Un Minimum Viable Product, ou produit viable minimum, consiste à créer un produit test.

Lire l'article
Webflow
10 MIN
de lecture
Réussir la refonte de son site web sans perdre ses positions

Vous lancez une refonte de site ? C’est le moment de renforcer votre stratégie de référencement naturel !

Lire l'article
Automatisations
5 MIN
de lecture
Automatisation CRM : 5 workflows simples pour démarrer

Pour optimiser vos ventes et votre flux de travail, l’automatisation de votre CRM deviendra indispensable.

Lire l'article

Planifions un rendez-vous !