Webflow : Revue (Avis, Caractéristiques, Prix)

Revue de l'un des CMS les plus puissants du marché : Webflow

Le marché est rempli d'outils de création de sites web qui promettent d'être des solutions universelles pour tous les défis de conception, mais lorsqu'il s'agit de la pratique, ils ne sont pas à la hauteur, tant du côté de la conception que du développement.

Seuls quelques outils tiennent réellement leurs promesses.

Webflow en fait partie, c'est d'ailleurs le choix numéro 1 que j'ai fait en développant ce site web. 

Qu'est-ce que Webflow ? 

Webflow est un outil de conception dans le navigateur qui vous donne la possibilité de concevoir, de créer et de lancer des sites Web réactifs de manière visuelle. Il s'agit essentiellement d'une plateforme de conception tout-en-un que vous pouvez utiliser pour passer de l'idée initiale au produit prêt à l'emploi.

Voici quelques éléments qui rendent Webflow différent :

• La conception visuelle et le code ne sont pas séparés.
  Ce que vous créez dans l'éditeur visuel est alimenté par HTML, CSS et JavaScript.
• Il vous permet de réutiliser les classes CSS.
  Une fois définie, vous pouvez utiliser une classe pour tous les éléments qui doivent avoir le même style ou l'utiliser comme point de départ pour une variation (classe de base).
• Il s'agit d'une plateforme et, en tant que telle, elle propose des plans d'hébergement.
  Pour 12 $ par mois, elle vous permet de connecter un domaine personnalisé et d'héberger votre site HTML. Et pour 4 $ supplémentaires par mois, vous pouvez utiliser le CMS Webflow.

Problèmes typiques rencontrés par les concepteurs de sites Web 

Il est important de commencer par comprendre les défis auxquels les équipes de conception web sont confrontées lorsqu'elles créent des sites web :

• Une déconnexion entre la conception visuelle et le codage.
  Les concepteurs visuels créent des mocks/prototypes dans un outil visuel (comme Sketch) et les remettent aux développeurs qui doivent les coder. Cela crée une série supplémentaire d'allers-retours puisque les développeurs doivent passer par une itération supplémentaire de codage.
• Il est difficile de coder des interactions complexes (notamment les transitions animées).
  Les concepteurs peuvent introduire de beaux effets dans des prototypes hi-fi, mais les développeurs auront du mal à reproduire la même disposition ou le même effet dans le code.
• Optimisation des conceptions pour différents écrans.
  Vos conceptions doivent être réactives dès le départ.
  

Fonctionnalités - Webflow

Comme la plupart des autres outils de création de sites Web, la base d'un site Webflow est un modèle. Il existe des centaines de modèles conçus par des professionnels parmi lesquels vous pouvez choisir. Vous pouvez personnaliser le modèle que vous avez choisi afin qu'il corresponde parfaitement à votre marque et à vos objectifs.

Webflow divise ses fonctions d'édition de modèles et de création de sites en quatre catégories de base : Concepteur, CMS, Hébergement et Éditeur.

Designer

En utilisant le concepteur de Webflow, vous bénéficiez de toute la puissance de CSS, HTML et JavaScript. Cependant, vous générez votre code à l'aide du concepteur visuel au lieu d'écrire le code ligne par ligne. Vous déplacez des blocs préconstruits, ajoutez des fonctionnalités et effectuez des personnalisations. Pendant ce temps, en coulisses, le concepteur crée un code propre et sémantique pour un site Web optimisé.

Si vous souhaitez modifier le code lui-même, sachez que vous bénéficierez de toutes les fonctionnalités incluses dans CSS3 et HTML5, notamment la prise en charge du modèle de boîte, des transformations CSS 3D, des transitions personnalisées, des flotteurs et des boîtes flexibles, et vous pourrez utiliser les dernières nouveautés en matière de typographie, de dégradés et d'organisation DOM.

Vous obtiendrez également des interactions basées sur des déclencheurs, comme des animations qui se produisent en fonction du défilement, du clic, du survol ou du chargement des pages par l'utilisateur, le tout sans avoir à connaître JavaScript.

Webflow est un hybride inhabituel. Il fonctionne comme un outil de création de sites  facile à utiliser pour ceux qui n'ont aucune connaissance technique, et il se présente comme une alternative supérieure à WordPress. En même temps, il offre des fonctionnalités complexes aux développeurs et aux concepteurs et les agences comptent parmi ses utilisateurs. Ces derniers notent que l'outil facilite la dissolution des silos de conception-développement - silos qui plombent souvent les projets numériques.

Vidéo ci-dessus : Webflow propose de nombreux tutoriels vidéo sur YouTube. Visitez leur "Webflow University" pour plus d'informations.

L'abondance de fonctionnalités s'accompagne d'une courbe d'apprentissage, mais si vous êtes familier avec l'interface des produits Adobe, vous vous sentirez comme chez vous. Webflow vous facilite la tâche en vous proposant une bibliothèque de composants préconstruits et personnalisables.

Tout ce que vous créez dans le concepteur est, par défaut, réactif et compatible avec les principaux navigateurs.

CMS Webflow

Webflow est un système de gestion de contenu (SGC) complet à la Drupal, Magento et WordPress, en plus d'être un puissant concepteur et outil de création de sites.

Vous pouvez facilement créer des webhooks personnalisés, importer du contenu depuis une base de données existante ou exporter du contenu au format JSON pour l'utiliser dans des applications mobiles natives. Si vous n'êtes pas un développeur, consultez les nombreux zaps (intégrations) conviviaux disponibles sur Zapier.com.

Webflow CMS, comme son concepteur, est axé sur la flexibilité et la capacité. Créez le contenu dont vous avez besoin sans être limité par des modèles, des structures de contenu centrées sur les blogs ou des langages de développement complexes. Ce que Webflow offre, ce sont des schémas, que vous pouvez construire et lier au design que vous souhaitez pour votre site Web.

Webflow se vante que son CMS est plus facile à utiliser que WordPress et consacre même une page web à "Webflow vs. WordPress". Ils affirment qu'il n'y a "rien à installer, des mises à jour automatiques, et pas de PHP, c'est l'alternative à WordPress dont vous avez besoin".

Lorsque vous travaillez avec du contenu, vous pouvez utiliser presque tout ce qui vous vient à l'esprit, y compris des couleurs, des images, du texte et des chiffres, et comme vous disposez probablement de données centrées sur le client, vous pouvez modifier dynamiquement votre contenu afin que vos pages soient personnalisées en fonction du visiteur.

Options d'hébergement web de Webflow

Comme la plupart des créateurs de sites, Webflow inclut des services d'hébergement dans ses forfaits. Cependant, au lieu d'inclure ce qui est essentiellement un plan d'hébergement partagé, Webflow héberge ses sites sur une "flotte de serveurs infiniment évolutive".

Plus de 100 datacenters dans le monde

Dès la mise en ligne, les technologies d'hébergement de Webflow sont prêtes à gérer tout le trafic généré par votre site.

La "flotte" de Webflow comprend plus de 100 centres de données et serveurs dans le monde entier, avec des réseaux de diffusion de contenu (CDN) alimentés par Fastly et Amazon CloudFront.

Chargement de sites en millisecondes

Webflow promet une fiabilité de niveau entreprise avec :

• 99,99% de temps de fonctionnement
• Pages du site qui se chargent en millisecondes
• Prise en charge du trafic des sites Web les plus importants grâce à sa base AWS. ("AWS" signifie Amazon Web Services.)

Vous bénéficiez également de certificats SSL, d'une infrastructure conforme à la norme HTTP/2 et d'outils de collaboration qui permettent aux membres de votre équipe de travailler sur votre site avec vous.

Éditeur de Webflow

Selon Webflow, l'ajout de contenu est aussi simple que de remplir un formulaire, et lorsque vous êtes prêt à publier vos modifications, vous pouvez le faire en un seul clic. L'aperçu en direct signifie que vous ne verrez aucune surprise une fois votre contenu publié.

Parce que Webflow sépare le contenu des fonctions de support sous-jacentes, vous pouvez facilement modifier les choses sans craindre de casser une partie de votre site.

Vous pouvez également collaborer avec vos collègues sur tout ce que vous créez, et l'historique détaillé des versions vous permet de savoir exactement qui a modifié quoi et quand.

Outils d'optimisation des moteurs de recherche (SEO)

L'optimisation de votre contenu pour le SEO par Webflow peut se faire sans plugins supplémentaires.

La possibilité de définir votre titre et votre description méta est incluse directement dans l'éditeur, et vous obtenez des aperçus instantanés de ce à quoi ressemblera l'entrée de votre site Web lorsqu'il sera en direct sur Internet.

Modèles de WebFlow

Webflow propose plus de 25 modèles gratuits parmi lesquels choisir, en plus de trois wireframes. Que vous souhaitiez créer un site de commerce électronique, un blog ou un site de portefeuille de base, vous avez le choix entre de nombreux modèles. Chaque modèle donne des informations sur le type de site pour lequel il est le mieux adapté.

La quasi-totalité des modèles sont responsive, de sorte que la création d'un site web responsive pour mobile n'a jamais été aussi simple.

Imaginez-vous en train de travailler : Parcourez le site Webflow pour trouver des exemples de sites réels utilisant Webflow. Celui-ci est celui d'une entreprise canadienne qui conçoit des sites Webflow. En parcourant ces sites, vous pouvez également vous faire une idée de la manière dont vous pourriez vous vendre en tant que professionnel de Webflow.

Options WireFrame

Outre des dizaines de modèles, Webflow propose également trois options de maquettes : Startup, Portfolio et Business. Les maquettes fournissent les grandes lignes de votre site et offrent plus d'options de personnalisation que les modèles. Ce sont d'excellentes options pour les plus férus de design, mais elles ne nécessitent pas de connaissances en développement.

Tarifs - Webflow

Vous pouvez certes utiliser WebFlow gratuitement aussi longtemps que vous le souhaitez, mais votre compte restera en version d'essai. Vous bénéficiez d'un contrôle total de la conception et de la possibilité de publier votre site sur un sous-domaine webflow.io, mais vous êtes limité à deux projets.

Lorsque vous êtes prêt à souscrire un abonnement payant, vous pouvez choisir parmi plusieurs formules. Vous pouvez payer votre formule au mois le mois ou payer d'avance pour une année de service. Si vous optez pour cette dernière option, vous bénéficierez d'une réduction, de sorte que vos frais mensuels seront inférieurs à ce qu'ils seraient si vous payiez au mois.

Plans pour les particuliers

Si vous êtes un particulier qui n'a besoin que d'un seul site, vous n'avez qu'à payer l'hébergement. Il existe trois plans différents parmi lesquels vous pouvez choisir.

Ils diffèrent les uns des autres par le nombre de visiteurs autorisés par mois et le nombre de soumissions de formulaires que vous pouvez recevoir. Notez toutefois que le plan d'entrée de gamme, très basique, n'inclut aucune des fonctions du CMS ou de l'éditeur.

Plans pour les concepteurs et les indépendants

Si vous êtes quelqu'un qui construit beaucoup de sites Web, vous pouvez utiliser Webflow pour vous aider à concevoir votre site.

L'offre de base de ce niveau vous permet d'utiliser les outils WebFlow pour créer des sites, puis de facturer vos clients pour le travail effectué. Les options plus coûteuses, en revanche, vous permettent d'exporter votre code pour l'utiliser dans d'autres environnements.

Avec l'un de ces forfaits, vous bénéficiez de toutes les fonctionnalités de Webflow, ainsi que d'une assistance pour un nombre illimité de projets.

Plan pour les équipes et collaboration

Les options pour les équipes sont très similaires à celles disponibles pour les designers et les indépendants, mais les plans pour les équipes comprennent des outils de collaboration et, pour ceux qui ont des packs d'hébergement suffisamment importants, des prix de gros sur l'hébergement web.

Plans pour les sites e-commerce

Actuellement, Webflow propose plusieurs modèles pour les magasins de commerce électronique. Ceux-ci vous permettent de créer des grilles de produits personnalisées, des pages de produits personnalisées, des paniers d'achat personnalisés et des pages de paiement. Webflow dispose également d'un outil de commerce électronique à part entière (actuellement en version bêta).

Leur plateforme de commerce électronique vous permet de :

• Gérez vos stocks et exécutez vos commandes
• Enrichir les listes de produits grâce au CMS
• Personnalisez vos reçus et vos courriels de mise à jour
• Création de blogs et de pages de renvoi dans le CMS
• Permettez aux clients de régler leurs achats en toute sécurité sur votre propre domaine.

Annulation à tout moment

Si vous décidez d'annuler votre compte ou votre plan d'hébergement, vous pouvez le faire à tout moment. Webflow n'offre pas de remboursement, et votre plan restera actif jusqu'à la fin de votre période de facturation actuelle.

Si vous avez annulé un compte complet et que vous avez un ou plusieurs sites Web existants, votre site ne sera pas supprimé et vous ne serez pas "bloqué" - votre compte passera simplement au plan gratuit.

Lorsque vous choisissez un abonnement payant, vous pouvez choisir parmi les options destinées aux personnes n'ayant besoin que d'un seul site, aux concepteurs, aux indépendants ou aux équipes.

Support - Webflow

Webflow offre l'une des sections d'auto-assistance les plus robustes que nous ayons vues de la part d'un outil de création de sites Web. En plus de l'Université Webflow, où vous pouvez trouver des listes de vidéos à regarder (comme Intro to Design, Web Elements, ou SEO Fundamentals), il y a des cours individuels où vous pouvez vous plonger dans un sujet spécifique.

Les offres actuelles comprennent le cours accéléré Webflow 101 et le cours Ultimate Web Design. Si l'apprentissage numérique (ou en ligne) n'est pas vraiment votre tasse de thé, téléchargez l'un des livres électroniques disponibles pour apprendre le même contenu.

La communauté Webflow est un forum ouvert où vous pouvez trouver des idées et des réponses à vos questions.

Comment puis-je joindre un membre de l'équipe d'assistance Webflow ?

Si vous souhaitez entrer en contact avec un membre du personnel de Webflow, vous pouvez le faire du lundi au vendredi, de 6 heures à 18 heures, heure du Pacifique (UTC-8), via le formulaire de contact en ligne. Les demandes de fonctionnalités peuvent être enregistrées sur la page Wishlist du site Webflow.

Bien que Webflow ne propose aucun type de services de conseil, il tient à jour une liste d'experts Webflow qui peuvent vous aider à être opérationnel. Vous pouvez rechercher des freelances ou des agences sur la base de plusieurs types de critères, notamment la localisation, le type d'assistance fournie, le type de projet, la taille de l'équipe, etc.

Parce que Webflow offre un SLA, vous pouvez vérifier l'état de ses systèmes à tout moment en utilisant son site web de support.

Alternatives - Webflow

Bien sûr, Webflow n'est pas parfait. Il s'agit d'un outil tellement spécifique et très avancé, que je peux tout à fait comprendre pourquoi vous voudriez aller dans une autre direction.

C'est pourquoi, à la toute fin de cet examen de Webflow, je présenterai également quelques alternatives intéressantes, qui méritent d'être considérées.

1. Wix

Wix est loin d'être aussi avancé que Webflow, mais pour les débutants, il en est horriblement proche. L'éditeur Wix permet de faire des modifications au pixel près, donne des animations personnalisées, des centaines d'éléments divers, plus de 700 thèmes gratuits, et un énorme magasin d'applications. Si vous n'êtes pas assez confiant pour opter pour Webflow, Wix est une excellente option.

2. Shopify

Si vous ne cherchez pas à concevoir un site Web, mais à créer un site pour votre activité en ligne, Shopify est une excellente option. Il s'agit d'un site de commerce électronique. Il existe de nombreux thèmes magnifiques, entièrement optimisés pour la vente, qui vous permettent de vous concentrer sur ce point précis.

3. Squarespace

Si vous êtes un débutant, vous devriez vous tourner vers Squarespace plutôt que vers Webflow. L'édition de Squarespace, ainsi que les fonctions et extensions de référencement, sont limitées, mais cet éditeur est extrêmement facile à utiliser. Squarespace offre des fonctions commerciales et marketing décentes, ainsi que des modèles conçus par des designers.

Facilité d'utilisation - Webflow

• Pour commencer, le processus de configuration est très simple. Vous vous inscrivez, répondez à quelques questions, suivez un court tutoriel d'intégration et vous êtes prêt à commencer.
• Travailler avec le concepteur - Il y a une certaine courbe d'apprentissage, surtout si vous n'avez pas de compétences en conception de sites Web. Toutefois, si vous êtes prêt à prendre le temps de vous perfectionner, vous constaterez qu'il est assez facile de travailler avec lui.
• Utilisation de l'éditeur - L'éditeur est intuitif et les paramètres du projet sont simples et faciles à configurer.

Maintenant, il y a quelque chose d'important à noter - même si j'ai fait un peu de wireframing, d'édition de styles et de codage de base, je ne suis toujours pas un développeur de site web professionnel. Mais je vais essayer d'être aussi ouvert et informatif que possible pour tous les types d'utilisateurs ici.

Et honnêtement, j'ai trouvé que Webflow était assez facile à utiliser. Il n'est pas aussi facile que beaucoup d'autres constructeurs de sites Web, il faudra un certain temps pour apprendre toutes les subtilités, mais avec un tutoriel utile et des leçons de l'Université Webflow, je n'ai eu pratiquement aucun problème. Webflow a une chance d'être facile à utiliser : à la fois pour les débutants, les pros de la création de sites Web, et tout le monde entre les deux.

Pour ce faire, pour cet examen de Webflow, j'ai construit mon propre site Web. C'est ici - jetez-y un coup d'oeil.

Voici comment tout s'est passé :

Démarrer avec Webflow

Après m'être inscrit sur Webflow, j'ai été immédiatement confronté à un questionnaire rapide, qui tentait de tout configurer en fonction de mes préférences et de mon niveau d'expérience.

Les questions sont basiques, elles portent sur les objectifs d'un site Web, votre expérience, etc :

Une fois tout cela mis en place, on m'a proposé de participer à un rapide tutoriel d'intégration. Je vous conseille vivement de prendre part à ce tutoriel. Il est très bien fait et permet de comprendre la plupart des bases de la plateforme.

Une fois cela fait.... j'avais fini ! Et maintenant, je pouvais continuer à écrire cet article sur Webflow en construisant mon site web.

Construire un site Webflow

Un site Webflow est construit à l'intérieur de l'interface Webflow Designer. Il utilise un système de sections, dans lequel vous pouvez ajouter divers éléments.

À gauche, il y a une rangée comprenant plusieurs options de gestion du site. À partir des sélections effectuées ici, il est possible d'ajouter des éléments, de gérer des pages, d'afficher et d'ajouter divers actifs, et de gérer les collections de contenu ajoutées.

À droite se trouvent toutes les options de conception de votre site. C'est là que vous pouvez concevoir chacun de vos éléments, modifier leurs paramètres, gérer les styles et aussi ajouter diverses interactions, c'est-à-dire ce qui se passe lorsqu'un utilisateur survole ou clique sur un élément spécifique.

Vous pouvez choisir parmi plusieurs éléments préfabriqués à ajouter à vos sections ou construire des mises en page personnalisées. Vous pouvez également choisir parmi certaines des mises en page préétablies, afin de rationaliser l'ensemble du processus de conception.

Tous ces éléments et mises en page suivent un style de boîte. Ainsi, bien que vous puissiez les glisser et les déposer sur votre site, vous serez légèrement limité sur l'endroit où tout peut être placé au début. Le résultat sera propre et s'adaptera à tous les appareils.

Passons maintenant au contenu.

Le contenu lui-même est édité via une interface d'édition. C'est là que seront résolues toutes les questions les moins élégantes (est-ce un mot ? Ça devrait !) du site web. On peut y accéder en cliquant sur l'icône Webflow et en choisissant l'option disponible.

J'ai trouvé que l'édition était assez intuitive : modifier la copie ou les images, ajouter des liens et faire des choses mineures similaires était super simple et ne nécessitait aucune explication supplémentaire. En outre, l'éditeur était également très fluide et ne présentait aucun problème de performance, même sur mon Macbook Air âgé de 3 ans et exécutant 3 fenêtres Chrome avec 10 onglets chacune.

Les principales modifications du site Web peuvent être effectuées à l'aide du ruban ci-dessous. Ici, les contributeurs peuvent gérer les pages, et faire des choses comme ajouter une protection par mot de passe, ou modifier leurs options de référencement.

C'est également là que les rédacteurs peuvent gérer les collections, c'est-à-dire des groupes de contenu. Il peut s'agir d'articles de blog, de membres de l'équipe, de menus, etc.

C'est également à partir de cet onglet que tous les blogs seront publiés. Un onglet séparé "Blog Posts" affichera tous les articles publiés.

Université Webflow

Si tout cela vous semble un peu trop compliqué, ne vous inquiétez pas. Il suffit de s'inscrire à l'Université Webflow !

Il s'agit de la plateforme de didacticiels interne de Webflow qui explique tous les tenants et aboutissants du système, mieux que je ne pourrais le faire. Il y a des guides rapides pour expliquer la plateforme, des tutoriels pour résoudre des problèmes spécifiques, et même des cours d'apprentissage, parfaits si vous souhaitez devenir un concepteur web encore meilleur.

Je suis un ancien élève fier de l'être.

Bien sûr, je vous recommande de commencer par le cours pour débutants, qui vous expliquera ce qu'est Webflow et ce que vous pouvez faire avec. Les vidéos sont courtes, douces et riches en informations. Elles sont également toutes transcrites, ce qui les rend un peu plus faciles à suivre pas à pas.

J'en ai parlé ici pour une raison précise. Webflow peut être un peu délicat à utiliser, mais le principal "piège" vient simplement du manque de connaissance de la plate-forme ou des spécificités de la conception.

Grâce à l'excellente plateforme d'apprentissage, Webflow est aussi facile à utiliser que possible. Avec une telle liberté de création et tant de possibilités, il atteint presque le plafond de la facilité d'utilisation d'une plateforme.

6 différents types de sites que vous pouvez construire avec Webflow

Avec Webflow, vous pouvez créer presque tous les sites auxquels vous pouvez penser. Des boutiques en ligne aux sites de portfolio personnels, vous pouvez tout faire en un seul endroit.

Voici quelques-uns des différents types de sites Web que vous pouvez créer avec Webflow (liste non exhaustive) :

SaaS et sites web professionnels

Il s'agit probablement du type de site Webflow le plus populaire. Certains des meilleurs sites Web SaaS tels que Jasper (anciennement Jarvis), Pipe et Ramp utilisent Webflow pour alimenter l'ensemble de leurs opérations de marketing de contenu SaaS.

Jasper AI utilise Webflow pour alimenter son site web

Ramp utilise Webflow pour alimenter son site web

Sites web des médias et des blogs

Le CMS (système de gestion de contenu) de Webflow vous permet de créer des sites multimédias évolutifs et appréciés de Google. Grâce à des outils de gestion de contenu flexibles, il est assez facile de créer des blogs solides et des sites médias de niche.

Living Cozy est un site Webflow dans le domaine de l'ameublement qui reçoit plus de 150 000 visiteurs par mois grâce au seul référencement Google.

Même ce site, Marketer Milk, est un site de curation construit avec Webflow. La page d'accueil est mise à jour chaque jour de la semaine avec des nouvelles fraîches sur le marketing, des ressources et des guides.

Si vous souhaitez devenir un meilleur spécialiste du marketing, pensez à vous abonner à notre newsletter hebdomadaire. Chaque semaine, nous vous envoyons le meilleur contenu marketing sélectionné sur le Web.

Boutiques E-commerce

Webflow Ecommerce peut être très puissant. Mais il peut aussi être très complexe en raison de sa puissance (est-ce même un mot ?).

Si vous êtes une boutique familiale et que vous souhaitez créer rapidement un site de commerce électronique avec une gestion minimale du backend, vous avez probablement intérêt à utiliser Shopify (pour le moment).

Webflow Ecommerce est une option viable pour les sites qui ont besoin de solutions totalement personnalisées. De la conception à la logistique d'expédition. Contrairement à Shopify qui vous offre un backend complet, le backend de Webflow Ecommerce est plutôt sommaire et vous oblige à intégrer des outils tiers comme Shippo ou Shipstation.

Pour certains grands magasins de commerce électronique (pensez à hims, Curology ou Depop), c'est une bonne chose, mais pour les petites entreprises, cela peut être un problème. Tout dépend de votre cas d'utilisation.

Il est également possible d'utiliser Webflow et Shopify en même temps.

Là où Webflow Ecommerce brille actuellement, c'est avec les produits numériques. Voici un exemple d'une boutique de commerce électronique de produits numériques réalisée avec Webflow.

L'Intendance utilise Webflow pour sa boutique en ligne.

La boutique en ligne Webflow Merch Store est entièrement réalisée avec Webflow

Sites web d'adhésion et de marché

Webflow a récemment annoncé qu'il apportait la logique et les adhésions à sa plate-forme. Cela signifie que vous pouvez créer des sites Web complexes avec un accès réservé aux membres.

Vous pouvez créer du contenu réservé, comme le fait Business Insider.

Que vous créiez une place de marché, un cours en ligne, un site Web de produits numériques ou une newsletter de type Substack, vous pourrez tout faire avec Webflow.

Avant que Webflow n'annonce la possibilité d'utiliser la logique et les adhésions, vous pouviez utiliser des plateformes comme Zapier (pour la logique) et Memeberstack (pour les adhésions). De nombreux sites Web ont encore cette configuration.

En fait, de nombreux sites Webflow qui sont essentiellement des applications Web fonctionnent actuellement via Webflow (la plateforme principale), Zapier (logique), Airtable (base de données) et Memeberstack (connexions des utilisateurs).

Mais bientôt, tout ce dont vous aurez besoin sera Webflow.

Swipe Files utilise Webflow pour ses adhésions.

Master The Handpan, une école en ligne, est réalisée avec Webflow

Unicorn Factory utilise Webflow pour sa place de marché

Portfolios et sites web personnels

Deux types de sites Web très populaires sont construits dans Webflow : les sites Web commerciaux et les portfolios.

Les portfolios dans Webflow sont si populaires que l'Université Webflow a publié un cours très populaire sur le sujet (c'est beaucoup de populaire).

Il existe des portfolios de conception web et de photographie étonnants réalisés avec Webflow. En fait, nombre d'entre eux ont été récompensés sur le site Web de conception Web Awwwards - un site de récompense de sites Web réputé (cela fait beaucoup d'awa... peu importe).

Le portfolio Webflow de Mathew est un retour en arrière sur Mac (et il est disponible pour être cloné).

Landing pages

Vous pourriez penser que les pages de renvoi ne sont pas un "type de site Web". Mais j'ai décidé d'en faire sa propre section parce que Webflow est un outil très impressionnant pour construire des pages d'atterrissage à l'échelle.

Avec Webflow CMS, vous pouvez créer un système de conception de landing pages (pensez à un modèle) que vous pouvez réutiliser à l'infini.

C'est très puissant si vous avez besoin de créer des pages de renvoi pour différents cas d'utilisation du produit, des catégories ou des pages d'audience. Que vous ayez besoin de pages de renvoi pour des campagnes publicitaires ou pour capturer plus de mots-clés pour la recherche organique, la création de pages de renvoi dans Webflow est assez sous-estimée.

Une page d'accueil de catégorie Upwork réalisée en Webflow

Comment fonctionne Webflow

Webflow est vraiment très grand. Il peut être difficile de connaître tout ce que la plateforme, et la société, ont à offrir.

Ici, je vais vous présenter tout ce que vous devez savoir sur Webflow dans son ensemble, des caractéristiques du produit aux ressources créées par la société et la communauté.

Ensemble des fonctionnalités du produit Webflow

À la base, Webflow est un constructeur de sites Web extrêmement robuste et flexible. La plateforme comporte différentes parties, livrées à différents moments, qui permettent aux utilisateurs de créer des sites Web très complexes.

Le concepteur

Le Webflow Designer est au cœur de Webflow. Il s'agit de l'interface dans laquelle vous créez et concevez des sites Web réactifs dans Webflow - c'est votre toile.

Dans le Designer, vous avez accès à votre panneau d'éléments, aux symboles (mises en page préconstruites), au navigateur, au commerce électronique, aux paramètres du CMS et au panneau de style.

Le Designer vous permet de faire glisser et de déposer des éléments HTML sur le canevas. À partir de là, vous pouvez visualiser vos éléments dans le navigateur (sur le côté gauche du Designer).

Une fois que vous avez vos éléments sur le canevas, vous utilisez le panneau de style à droite pour les styliser à l'aide de CSS.

Le Designer est essentiellement l'endroit où se déroule la conception du site Web. J'y reviendrai un peu plus en détail dans la section "Comment apprendre Webflow rapidement".

CMS

Le CMS de Webflow est l'endroit où tout votre contenu et vos données sont stockés. Si le designer est votre corps physique, votre système de gestion de contenu (CMS) est votre cerveau.

Vous pouvez y écrire, modifier et mettre à jour le contenu de votre site. Vous pouvez également utiliser le CMS pour créer différentes structures de contenu, qu'il s'agisse d'articles de blog, de pages/bios d'auteurs, de recettes de cuisine, de pages de répertoire, de pages de renvoi, etc.

Tout ce que vous créez dans le CMS, vous pouvez le lier à vos conceptions dans le Designer.

Ainsi, si vous concevez une page d'article de blog dans le Designer, vous pouvez lier votre liste de collections CMS appelée "articles de blog" à votre conception. Ainsi, lorsque vous publiez un article de blog dans le CMS, il s'affiche dans la conception de la page d'article que vous avez créée dans le Designer.

Pour rendre les choses un peu plus claires, prenez la page sur laquelle vous vous trouvez actuellement. Il s'agit d'un modèle de page CMS que j'ai créé dans le Webflow Designer - spécialement conçu pour les articles de blog. Je n'ai créé ce modèle d'article qu'une seule fois et j'ai ensuite dit à Webflow que pour chaque article de blog que j'ajoute au CMS, l'article de blog doit s'afficher à l'intérieur de cette page modèle CMS.

Capture d'écran de la liaison du contenu du CMS à un design web

Vous pouvez accéder au CMS directement à partir du Designer, ou vous pouvez utiliser l'éditeur Webflow (qui est simplement un moyen plus convivial de modifier le contenu pour les différents membres de l'équipe, comme les spécialistes du marketing et les éditeurs de contenu, qui ne conçoivent pas réellement un site Web dans Webflow).

E-Commerce

Webflow Ecommerce est ce que vous utilisez pour créer, vous l'avez deviné, des sites de commerce électronique.

Il n'y a pas grand-chose à dire ici, si ce n'est que Webflow Ecommerce est un outil très souple permettant de créer des solutions de commerce électronique totalement personnalisées. Vous continuez à tout concevoir comme vous le feriez normalement pour tout autre site Web, dans le Designer.

La seule chose qui change est que vous devez spécifiquement être sur un plan de commerce électronique qui vous donne accès aux listes de produits, à l'inventaire et aux commandes. Nous parlerons des plans tarifaires plus tard.

Si une plateforme comme Shopify est la voiture entière, Webflow Ecommerce est un peu comme le cadre de la voiture + le moteur. Vous avez pratiquement tout ce dont vous avez besoin pour conduire la voiture avec Webflow Ecommerce, mais vous devrez l'associer à des outils tiers pour la faire fonctionner.

Pour les grandes marques de commerce électronique qui n'utilisent pas Shopify, cela peut être un avantage. En effet, elles peuvent très probablement continuer à utiliser leur propre logistique d'exécution et d'expédition personnalisée, mais elles ont maintenant la liberté de créer un site totalement personnalisé adapté à leur marque, de la page du produit à la page de paiement.

Pour les petits sites Web ou les magasins de vente en gros, il est préférable de s'en tenir à Shopify. Cependant, si vous faites du dropshipping avec Printful, vous pouvez utiliser Webflow - il existe une intégration spécialement conçue pour ce cas d'utilisation.

Logic

Au moment de la rédaction de cet avis, Logic n'est pas encore disponible pour le public. Mais il sera disponible en 2022. Logic permettra aux utilisateurs de créer des flux de travail plus personnalisés à l'intérieur de Webflow.

Pensez à l'automatisation.

Supposons que vous ayez un site Web d'offres d'emploi construit en Webflow. Lorsque quelqu'un publie une offre d'emploi, Logic prend cette soumission et la transforme en une véritable liste d'offres d'emploi sur votre site, sans que vous ayez à le faire manuellement. Bien entendu, vous pouvez définir des règles et personnaliser les choses pour les adapter au flux de travail exact dont vous avez besoin.

Vous pouvez le faire dès maintenant avec des outils tels que Zapier ou Integromat, mais vous n'aurez bientôt plus besoin de ces outils tiers.

Adhésions

Webflow Memberships est une autre fonctionnalité qui, au moment où nous écrivons ces lignes, est actuellement en bêta privée. Elle devrait être disponible pour le public cette année, en 2022.

Avec les adhésions, vous serez en mesure de créer des logins d'utilisateur sur votre site Webflow. Cela vous permettra de créer des contenus et des pages spécifiques sur votre site Web qui ne seront accessibles qu'aux personnes inscrites et connectées à votre site.

Tout comme avec Logic, vous pouvez actuellement le faire via un outil tiers comme Memberstack. Mais très bientôt, vous pourrez faire tout cela dans Webflow.

Je pense que créer des logiciels sans savoir coder n'est peut-être pas si loin après tout.

Hébergement

Enfin, pour compléter le tout, nous avons l'hébergement Webflow.

Webflow Hosting est le propre service d'hébergement web de Webflow. En fait, l'hébergement Webflow a été une raison importante pour laquelle j'ai fini par migrer vers Webflow en tant que plateforme de choix pour la création de sites Web.

Construit sur Amazon Web Services, l'hébergement Webflow est utilisé par certains des plus grands sites Web et leur inspire confiance. Vous n'avez pas à vous occuper des tableaux de bord d'administration, des FTP, des cPanel ou des configurations de domaine complexes.

Mais les principaux arguments de vente pour moi sont la vitesse, l'extensibilité du trafic, le SSL gratuit et la sécurité de niveau entreprise.

Le simple fait de savoir qu'un site web comme Metamask, qui reçoit plus de 12 millions de visiteurs par mois, est hébergé sur Webflow me rassure en sachant que je ne rencontrerai aucun problème de bande passante.

Ressources Webflow

Voici une poignée de ressources différentes qui sont produites par Webflow et la communauté :

Université Webflow

Webflow University est une ressource entièrement gratuite pour apprendre à créer des sites Web avec Webflow. Il existe d'excellentes critiques de Webflow University, car c'est aussi un excellent endroit pour apprendre la conception de sites Web en général.

Ils proposent des cours allant des tutoriels Webflow aux tutoriels sur le freelancing, en passant par les bases de la conception Web.

Webflow TV

Webflow TV est la plateforme de curation de Webflow qui rassemble en un seul endroit tout le contenu lié à Webflow et au web design.

Le contenu de Webflow TV est une combinaison de vidéos créées par la communauté et les fans sur YouTube. Elle abrite également un docu-série produit par Webflow et intitulé Generation No-Code.

Modèles de flux Web

La place de marché des modèles Webflow est l'endroit idéal pour trouver des modèles de sites Webflow de qualité supérieure. Tous les modèles de la place de marché sont conçus par des développeurs Webflow professionnels, et chaque modèle est soumis à un processus rigoureux de contrôle de la qualité avant d'être distribué sur la place de marché.

Ce qui est génial avec Webflow, c'est que chaque site Web est totalement personnalisable. Cela signifie que même les modèles de sites Web sont entièrement personnalisables. Si vous n'aimez pas un certain aspect du modèle, vous pouvez facilement le modifier vous-même.

Vous pouvez même copier et coller des éléments d'autres modèles pour les mélanger et créer quelque chose de totalement nouveau. J'ai dressé une liste de ce que je considère personnellement comme les meilleurs modèles Webflow du moment.

Vitrine du Webflow

La vitrine Webflow est pleine de contenu généré par les utilisateurs et de ressources Webflow. Les concepteurs qui créent dans Webflow peuvent présenter leurs projets dans la vitrine, ce qui permet aux autres d'utiliser leurs projets ou de trouver de l'inspiration.

Vous pouvez trouver des tonnes de projets "clonables" dans la vitrine. Certains concepteurs décident de rendre la pareille à la communauté en soumettant une grande variété de kits d'interface utilisateur et de modèles que les autres concepteurs Webflow peuvent utiliser gratuitement.

Si vous avez besoin de trouver une certaine section d'un site Web, comme un flux de médias sociaux, une page de contact ou une animation de bouton sympa, il y a de fortes chances qu'il existe quelques projets clonables que vous pouvez copier et coller dans votre propre site Webflow.

Parfois, vous trouverez même des personnes qui publient directement des modèles de sites Web complets que d'autres peuvent cloner gratuitement.

Cependant, contrairement à la place de marché des modèles, n'importe qui peut poster sur la vitrine Webflow - sans contrôle officiel de la qualité. Vous devrez donc vérifier la qualité de la conception de certains projets clonables.

Experts en Webflow

Si vous n'avez pas le temps, ou l'expertise, pour créer votre propre site Webflow, vous pouvez demander à un expert Webflow de le faire pour vous. 

Webflow Experts est un excellent moyen de trouver des designers Webflow indépendants prêts à vous construire le site Webflow exact que vous recherchez. Tout comme sur la place de marché des modèles, chaque designer de Webflow Experts passe par un processus de candidature qui est examiné par une équipe interne de Webflow.

Forum Webflow

Le forum Webflow est un endroit idéal pour trouver des réponses à des questions très spécifiques sur Webflow. Vous rencontrerez probablement le forum lorsque vous serez en train de construire un projet Webflow et que vous serez bloqué sur quelque chose et finirez par le googler.

Lorsque j'ai personnellement commencé à apprendre à utiliser Webflow, le forum était un endroit idéal pour trouver des solutions à des problèmes spécifiques que j'avais, en particulier autour de l'ajout de code personnalisé à mes projets.

Si vous avez des questions auxquelles vous ne trouvez pas de réponse, vous pouvez simplement les poser dans le forum et quelqu'un de la communauté ou du service clientèle devrait y répondre.

Blog Webflow

Le blog Webflow est un blog consacré au responsive web design, à Webflow et à tout ce qui concerne l'inspiration en matière de web design.

Webflow publie beaucoup d'articles sur son blog. Si vous avez besoin de trouver des ressources pour l'inspiration, c'est sur le blog. Si vous avez besoin de trouver des nouvelles de l'entreprise, c'est sur le blog. Si vous avez besoin de tutoriels Webflow, c'est sur le blog. Vous l'aurez compris.

Mises à jour de Webflow

Webflow Updates est l'endroit où vous pouvez trouver des mises à jour sur toutes les nouvelles fonctionnalités qui sont publiées sur la plate-forme Webflow.

Qu'il s'agisse de versions de produits, d'améliorations ou de corrections de bogues, tout se trouve dans les mises à jour de Webflow.

Liste de souhaits Webflow

Webflow Wishlist est un endroit où vous pouvez demander certaines fonctionnalités pour Webflow.

Historiquement, Webflow a utilisé la liste de souhaits comme un moyen de mesurer la demande pour les nouvelles fonctionnalités.

Par exemple, la principale demande de la liste de souhaits concernait l'intégration de l'adhésion des utilisateurs à Webflow, et cette fonctionnalité est maintenant en version bêta !

Si vous voulez voir quelles fonctionnalités ont été demandées par d'autres, ou s'il y en a une que vous voulez demander, n'hésitez pas à consulter la liste de souhaits.

Témoignages de clients Webflow

Si vous voulez voir comment d'autres entreprises ont utilisé Webflow, les témoignages de clients sont un excellent moyen de le faire.

Il existe également une poignée d'études de cas sur le blog Webflow, mais c'est sur la page des témoignages de clients que vous trouverez des informations plus officielles.

Communauté Webflow

Et enfin, mais non des moindres, la Communauté Webflow. La Communauté Webflow est un endroit idéal pour s'impliquer dans tout ce qui concerne Webflow. Vous pouvez vous abonner à la Webflow Newsletter et être tenu au courant des différents événements Webflow.

Si vous voulez rester au courant de tout ce qui concerne Webflow, c'est une excellente ressource à consulter.

Webflow a également une présence assez active sur les médias sociaux, que ce soit sur Facebook, Instagram, Twitter ou LinkedIn. Si vous voulez rester le plus à jour possible sur tout ce qui concerne Webflow, je vous recommande de suivre au moins un de leurs comptes de médias sociaux. Twitter sera probablement le meilleur, selon moi. 

Performances - Webflow

Les constructeurs de sites Web ne sont peut-être pas connus pour leur excellente vitesse. Mais hé - Webflow n'est pas un constructeur de site web ordinaire. Pour cette dernière partie de l'examen de Webflow, j'ai vérifié la vitesse de la plate-forme avec GTMetrix, un outil qui mesure la vitesse du site et l'optimisation de la plate-forme.

Voici les résultats :

Il est important de noter que ce test a été effectué sur une installation standard de Webflow et qu'il n'y a eu aucun nettoyage ou optimisation pour obtenir des performances parfaites. Avec cela, un temps de chargement total de 2,4 secondes est en fait assez bon.

Webflow a des performances décentes. Elle pourrait être meilleure, mais vous pouvez toujours minimiser le site web pour l'améliorer. Ou simplement l'héberger ailleurs ! 

Comment créer un site Web à l'aide de Webflow

La meilleure façon de comprendre ce dont l'outil est capable est de construire un produit réel avec lui. Pour cet examen, je vais utiliser Webflow pour créer une page d'accueil simple pour un dispositif de haut-parleur intelligent fictif.

Définir la structure de la page

Bien qu'il soit possible d'utiliser Webflow pour créer une structure de votre mise en page, il est préférable d'utiliser un autre outil pour cela.

Pourquoi ? Parce que vous devez expérimenter et essayer différentes approches avant de trouver celle qui vous semble la meilleure. Il est préférable d'utiliser une feuille de papier ou tout autre outil de prototypage pour définir l'ossature de votre page.

Il est également crucial d'avoir une idée claire de ce que vous essayez d'obtenir. Trouvez un exemple de ce que vous voulez et dessinez-le sur papier ou dans votre outil de conception préféré.

Conseil : il n'est pas nécessaire de créer un design haute-fidélité à chaque fois. Dans de nombreux cas, il est possible d'utiliser des wireframes lo-fi. L'idée est d'utiliser un croquis/prototype comme référence lorsque vous travaillez sur votre site Web.

Pour notre site web, nous aurons besoin de la structure suivante :

• Une section Hero avec une grande image du produit, un texte et un bouton d'appel à l'action.
• Une section présentant les avantages de l'utilisation de notre produit. Nous utiliserons une mise en page en zig-zag (cette mise en page associe des images à des sections de texte).
• Une section avec des commandes vocales rapides qui permettront de mieux comprendre comment interagir avec un appareil.
• Une section avec des informations de contact. Pour faciliter les demandes de contact des visiteurs, nous proposons un formulaire de contact au lieu d'une adresse email classique.

Créer un nouveau projet dans Webflow

Lorsque vous ouvrez le tableau de bord Webflow pour la première fois, vous remarquez immédiatement une illustration amusante avec une ligne de texte courte mais utile.

C'est un excellent exemple d'un état vide qui sert à guider les utilisateurs et à créer la bonne ambiance dès le départ.

Il est difficile de résister à la tentation de cliquer sur "Nouveau projet".

Lorsque vous cliquez sur "Nouveau projet", Webflow vous propose quelques options pour commencer :

• un site vierge,
• 3 préréglages courants
• et une liste impressionnante de modèles prêts à l'emploi.

Certains des modèles que vous trouverez sur cette page sont intégrés au CMS, ce qui signifie que vous pouvez créer du contenu basé sur le CMS dans Webflow.

Les modèles sont parfaits lorsque vous voulez être opérationnel très rapidement, mais comme notre objectif est d'apprendre à créer le design nous-mêmes, nous choisirons "Blank Site".

Dès que vous créez un nouveau projet, nous voyons l'interface de conception frontale de Webflow.

Webflow propose une série de vidéos d'initiation rapide. Elles sont pratiques pour toute personne qui utilise Webflow pour la première fois.

Une fois que vous aurez terminé les vidéos d'introduction, vous verrez une page vierge avec des menus des deux côtés.

Le panneau de gauche contient des éléments qui vous aideront à définir la structure de votre mise en page et à ajouter des éléments fonctionnels. Le panneau de droite contient des paramètres de style pour les éléments.

Commençons par définir la structure de notre page. Le bouton en haut à gauche avec un signe plus (+) est utilisé pour ajouter des éléments ou des symboles au canevas.

Tout ce que nous avons à faire pour introduire un élément ou un bloc visuel est de faire glisser l'élément approprié vers le canevas. 

‍

Alors que les éléments devraient être familiers à tous ceux qui construisent des sites Web, les symboles peuvent encore être un nouveau concept pour beaucoup de gens.

Les symboles sont analogues aux fonctionnalités d'autres outils de conception populaires, comme les composants de Figma et XD.

Les symboles transforment tout élément (y compris ses enfants) en un composant réutilisable. Chaque fois que vous modifiez une instance d'un symbole, les autres instances sont également mises à jour.

Les symboles sont parfaits si vous avez un élément tel qu'un menu de navigation que vous souhaitez réutiliser constamment sur le site.

Webflow fournit quelques éléments qui nous permettent de définir la structure de la mise en page :

• Sections. Les sections divisent des parties distinctes de votre page. Lorsque nous concevons une page, nous avons généralement tendance à penser en termes de sections. Par exemple, vous pouvez utiliser des sections pour une zone Hero, pour une zone de corps et pour une zone de pied de page.
• La grille, les colonnes, le bloc div et les conteneurs sont utilisés pour diviser les zones dans les sections.
• Composants. Certains éléments (par exemple, la barre de navigation) sont fournis dans des composants prêts à l'emploi.

Ajoutons un menu supérieur à l'aide du composant préfabriqué Navbar, qui contient trois options de navigation et des emplacements pour le logo du site :

Créons un symbole pour notre menu de navigation afin de pouvoir le réutiliser.

Nous pouvons le faire en allant dans "Symboles" et en cliquant sur "Créer un nouveau symbole". Nous allons lui donner le nom de "Navigation".

Remarquez que la couleur de la section est devenue verte. Nous voyons également combien de fois elle est utilisée dans un projet (1 instance).

Maintenant, lorsque nous avons besoin d'un menu sur une page nouvellement créée, nous pouvons aller dans le panneau des symboles et sélectionner une "Navigation" prête à l'emploi.

Si nous décidons d'introduire un changement dans le symbole (par exemple, renommer une option de menu), toutes les instances auront ce changement automatiquement.

Ensuite, nous devons définir la structure de notre section Hero. Utilisons la grille pour cela. Webflow possède un éditeur de grille très puissant qui simplifie le processus de création de la bonne grille - vous pouvez personnaliser le nombre de colonnes et de lignes, ainsi que l'espace entre chaque cellule. Webflow supporte également la structure de grille imbriquée, c'est-à-dire une grille à l'intérieur d'une autre.

Nous allons utiliser une grille imbriquée pour une section Hero : une grille parent définira l'image, tandis que la grille enfant sera utilisée pour l'en-tête, le paragraphe de texte et le bouton d'appel à l'action.

Maintenant, nous allons placer les éléments dans les cellules.

Nous devons utiliser les éléments Heading, Paragraph, Button et Image. Par défaut, les éléments remplissent automatiquement les cellules disponibles lorsque vous les faites glisser et les déposez dans la grille.

Bien qu'il soit possible de personnaliser le style du texte et des images et d'ajouter du contenu réel plutôt que des espaces fictifs, nous allons sauter cette étape et passer aux autres parties de la mise en page : "la mise en page en zigzag".

Pour cette mise en page, nous utiliserons une grille 2×3 (2 colonnes × 3 rangées) dans laquelle chaque cellule contenant du texte sera divisée en 3 rangées.

Nous pouvons facilement créer la première cellule avec une grille à 3 lignes, mais lorsqu'il s'agit d'utiliser la même structure pour la troisième cellule de la grille principale, nous avons un problème. Comme Webflow remplit automatiquement les cellules vides avec un nouvel élément, il essaiera d'appliquer la grille enfant à 3 rangées au troisième élément.

Pour changer ce comportement, nous devons utiliser Manual. Après avoir réglé la sélection de la grille sur Manuel, nous serons en mesure de créer la mise en page parfaite.

Comme pour la section Hero, nous allons ajouter le contexte fictif aux sections de la grille. Nous changerons les données après avoir terminé la mise en page visuelle.

Nous devons maintenant définir une section avec des commandes utiles.

Pour gagner de la place, nous allons utiliser un carrousel. Webflow dispose d'un élément spécial à cet effet : Slider.

Une fois que tous les éléments requis sont en place, nous pouvons créer un rythme vertical en ajustant la position de chaque élément que nous utilisons.

Tout d'abord, nous devons ajuster l'espacement des éléments dans les grilles. Modifiez la marge et le Padding et Align Self pour l'image afin de la placer au centre de la cellule.

Il est maintenant temps de remplacer le contenu factice par du contenu réel.

Pour commencer à ajouter des images, nous devons cliquer sur l'icône de l'élément Image et sélectionner l'image de notre choix.

Remarquez que Webflow stocke toutes les images dans une zone spéciale appelée Assets. Tout média que nous ajoutons, qu'il s'agisse d'une vidéo ou d'une image, va directement dans cette zone.

Après avoir introduit une image dans la mise en page, nous devons modifier les sections En-tête et Texte.

‍

Webflow fournit un style visuel pour chaque élément que nous utilisons dans notre conception.

Prenons l'exemple d'une section Heading.

Il est possible de jouer avec :

• la couleur de la police,
• le poids,
• l'espacement,
• les ombres
• et d'autres propriétés visuelles de cet objet.

Voici ce que nous obtiendrons en ajoutant une copie réelle et en jouant avec la couleur de la police.

Une fois que nous avons une section Hero propre et agréable, nous pouvons ajouter du contenu à notre mise en page en zigzag.

À chaque fois que nous donnons un style à un élément, nous lui attribuons un sélecteur (une classe), afin que Webflow sache que le style doit être appliqué spécifiquement à cet élément.

Nous pouvons utiliser la même classe pour donner un style à d'autres éléments.

Dans notre cas, nous avons besoin du même style pour les images, les titres, les descriptions et les liens que nous avons dans la mise en page en zigzag.

Appliquer le même style "benefit" pour toutes les images de la section en zigzag.

Webflow permet également de créer des classes combinées - lorsqu'une classe est utilisée comme classe de base, et qu'une autre classe est utilisée pour remplacer les options de style de la classe de base.

Dans l'exemple ci-dessous, nous remplaçons la couleur de la police par défaut du titre en utilisant la classe "Zig-Heading-Second".

Les classes combinées peuvent vous faire gagner beaucoup de temps, car vous n'aurez pas besoin de créer un style à partir de zéro.

Utilisation d'une classe combinée pour l'en-tête.

L'indicateur orange est utilisé pour mettre en évidence les propriétés qui ont été héritées de la classe de base. 

Voici à quoi ressemblera notre mise en page après les modifications :

Webflow propose une fonction très utile pour aligner le contenu, appelée "guide overlay", qui se trouve dans le panneau de menu de gauche.

Lorsque vous activez le guide, vous verrez les éléments ainsi que la grille de positionnement.

Après avoir terminé avec une mise en page en zigzag, nous devons ajouter des informations sur les commandes vocales dans la diapositive.

Ajoutez une section Heading dans une diapositive pertinente et modifiez les options de style visuel de cet objet.

C'est aussi simple que cela !

Enfin, nous devons ajouter un formulaire de contact à notre site Web. Ajoutons une section juste en dessous du Slider.

Il y a deux façons d'ajouter un formulaire à la page.

Tout d'abord, Webflow dispose d'un élément spécial pour les formulaires Web appelé Form Block.

Un formulaire créé à l'aide de Form Block comporte trois éléments :

1. Nom
2. Adresse email
3. Bouton de soumission

Pour notre formulaire, nous aurons besoin d'un champ Message.

Nous pouvons facilement en créer un en dupliquant l'élément Email Address et en le renommant.

Par défaut, le bloc de formulaire est aligné à 100 % sur la largeur, ce qui signifie qu'il occupe toute la largeur du conteneur.

Nous allons utiliser les paramètres de la grille pour ajuster la largeur du formulaire.

Deuxièmement, Webflow permet d'intégrer du code personnalisé directement dans la page.

Cela signifie que nous pouvons créer un formulaire dans un outil comme Typeform, copier le code d'intégration qu'il fournit et le placer dans le composant appelé Embed que nous avons placé dans la section.

Notez que les éléments intégrés n'apparaîtront qu'une fois le site publié ou exporté, et non pendant que vous concevez le site.

Une fois que tous les éléments sont en place, nous devons optimiser notre conception pour le mobile.

Près de la moitié des utilisateurs (à l'échelle mondiale) accèdent aux sites Web sur un mobile. Ce que vous pouvez faire dans Webflow est de redimensionner la fenêtre du navigateur afin de voir à quoi ressemble votre conception avec différents points de rupture.

Changeons notre vue en Mobile en cliquant sur l'icône Mobile - Portrait.

Comme vous pouvez le constater, le design est mauvais sur mobile. Mais il est relativement facile d'optimiser la conception à l'aide de Webflow. 

Il vous permet de modifier :

• l'ordre des éléments,
• l'espacement entre les éléments,
• ainsi que d'autres paramètres visuels pour que le design soit parfait sur mobile.

Après avoir apporté des modifications à notre design, deux options s'offrent à nous :

1. nous pouvons exporter le design et l'utiliser sur notre propre hébergement web (c'est-à-dire l'intégrer dans votre CMS existant)
2. ou nous pouvons utiliser l'hébergement fourni par Webflow.

Si nous décidons d'utiliser la deuxième option, nous devons cliquer sur le bouton Publier et sélectionner les options de publication appropriées, c'est-à-dire le publier sur le domaine webflow.io ou sur un domaine personnalisé.

Si vous décidez d'exporter le code, Webflow préparera un zip complet avec HTML, CSS et toutes les ressources que vous avez utilisées pour créer votre design.

Le code exporté vous aidera à construire une base solide pour votre produit.

Verdict Final - Webflow

Webflow est un excellent outil pour créer des prototypes haute-fidélité et inviter les membres de l'équipe et les parties prenantes à donner leur avis.

Les personnes qui examineront votre prototype n'auront pas besoin d'imaginer comment le produit fini se comportera et aura l'air - elles pourront en faire l'expérience !

L'outil simplifie la transition d'un prototype à une interface utilisateur entièrement finie, car vous concevez des produits avec du code réel, par opposition à la création de maquettes cliquables dans Sketch ou tout autre outil de prototypage.

Vous ne perdrez pas de temps à utiliser un logiciel pour créer des prototypes et un autre pour transformer ces prototypes en produits réels. Webflow résout ce problème pour vous.

FAQ - Webflow

Si vous avez une question à laquelle vous n'avez pas trouvé de réponse dans cette revue, contactez-nous et nous trouverons une réponse pour vous !

Comment Webflow se compare-t-il à des outils comme Wix, Weebly ou Squarespace ?

Webflow est un outil de création de site facile à utiliser et à personnaliser par glisser-déposer. Wix et Weebly ont tendance à limiter le nombre de personnalisations que vous pouvez faire - la plupart des créateurs de sites le font, c'est le compromis pour ne pas avoir à coder un site !

Webflow propose l'un des constructeurs de sites les plus personnalisables du marché. Attendez-vous à passer un certain temps à comprendre le fonctionnement du constructeur, mais la récompense sera un site Web bien construit et réactif que vous pourrez adapter aux besoins de votre entreprise sans dépenser des milliers d'euros.

Quel est le framework utilisé par Webflow ?

Webflow utilise son propre framework propriétaire.

Cela peut être important à savoir si vous êtes un fan inconditionnel de frameworks comme Bootstrap, Zurb Foundation, Materialize, Kurb, etc.

Certains utilisateurs de Webflow ont incorporé Bootstrap : ils rapportent que c'est faisable mais délicat.

Quelles technologies Webflow utilise-t-il pour améliorer la vitesse des pages ?

Webflow utilise actuellement les technologies suivantes : OpenResty; Varnish, un accélérateur d'applications web impressionnant ; le CDN (content delivery network) Amazon S3 ; NGINX ; Amazon CloudFront ; CDN JS ; JQuery CDN ; et UNPKG.

Les professionnels utilisent-ils Webflow ?

Webflow est destiné aux professionnels de la conception de sites Web - ou à ceux qui souhaitent le devenir. Il s'agit d'un outil puissant et avancé pour les sites Web personnalisés.

Webflow est-il bon pour les débutants ?

Webflow offre peut-être le moyen le plus convivial d'apprendre la conception de sites Web, le HTML et le CSS, ce qui en fait une option assez solide pour les débutants.

Webflow est-il vraiment gratuit ?

Vous pouvez commencer à utiliser Webflow gratuitement. Cependant, pour publier un site Web sous votre domaine, vous devez acheter l'un des plans de site qui commencent à partir de 12 $ par mois.

Webflow est-il meilleur que WordPress ?

Il s'agit plutôt de savoir lequel vous convient le mieux, et non pas lequel est meilleur que l'autre. WordPress est une plateforme open-source où vous pouvez créer à peu près n'importe quoi, mais vous devrez connaître un codage avancé. Webflow supprime ce besoin, c'est donc certainement l'option la plus facile.

Webflow a-t-il un bon rapport qualité-prix ?

Pas vraiment. Webflow est un constructeur de sites Web qui se situe dans le haut de gamme du marché, mais il existe d'autres plateformes de qualité similaire dont les prix sont beaucoup plus raisonnables. Wix, par exemple, est beaucoup moins cher, avec des prix compris entre 11 et 35 dollars par mois. Webflow, en revanche, facture jusqu'à 212 $/mois pour son plan supérieur.

Faut-il payer pour l'hébergement avec Webflow ?

Non. Webflow, comme tout constructeur de site web, héberge votre site web pour vous. Cela signifie que le coût des éléments tels que l'hébergement et la sécurité est couvert par votre redevance mensuelle.

Si vous utilisez une plateforme auto-hébergée comme WordPress, vous devrez payer l'hébergement séparément. Vous pouvez en savoir plus sur les meilleurs hébergeurs web ici.