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

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.

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.

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

Caractéristiques de 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.

Essayez gratuitement Webflow

‍

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.

Essayez gratuitement Webflow

‍

Options d'hébergement web

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.

Essayez gratuitement Webflow

‍

Tarifs

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.

Essayez gratuitement Webflow

‍

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

Essayez gratuitement Webflow

‍

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.

Essayez gratuitement Webflow

‍

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

Essayez gratuitement Webflow

‍

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. 

Essayez gratuitement Webflow

‍

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 :

Essayez gratuitement Webflow

‍

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.

Essayez gratuitement Webflow

‍

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.

Essayez gratuitement Webflow

‍

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.

Essayez gratuitement Webflow

‍

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.

Essayez gratuitement Webflow

‍

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.

Essayez gratuitement Webflow

‍

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.

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 cadre 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 (qui étend NGINX avec Lua) ; 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.

Conclusion

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.

Essayez gratuitement Webflow

‍