Webflow est une plateforme en ligne qui permet de créer des sites web adaptatifs directement dans votre navigateur. Cet outil est destiné aux webdesigners qui souhaitent traduire leurs idées visuelles en sites web impressionnants sans avoir à écrire de code. En utilisant Webflow, vous pouvez construire votre site en cliquant et en le personnalisant selon vos préférences, tandis que l’outil génère automatiquement le code HTML, CSS et JavaScript en arrière-plan.
Pour qui est destiné Webflow ?
Webflow convient à tous ceux qui souhaitent créer un site web impressionnant et adaptatif sans avoir à écrire une seule ligne de code. Contrairement à d’autres constructeurs de sites web, Webflow offre une grande liberté de conception et vous permet de personnaliser tous les aspects de votre présence en ligne. Ici, pas de modèles rigides ni de styles prédéfinis. Le monde du design web est à votre portée. C’est pourquoi de nombreux designers utilisent Webflow pour traduire leurs idées visuelles en sites web sans compromettre leur vision. Cependant, il faut noter que Webflow est légèrement plus complexe à utiliser que d’autres constructeurs de sites web tels que Wix ou Squarespace. Cependant, la courbe d’apprentissage est raide. Donc, si vous prenez le temps d’apprendre Webflow, vous pourrez potentiellement augmenter vos revenus à long terme et obtenir d’excellents résultats.
La facilité d’utilisation de Webflow
Si vous êtes familier avec Adobe, Figma ou Sketch, vous vous sentirez rapidement à l’aise avec Webflow. Les webdesigners peuvent commencer à travailler avec Webflow de manière intuitive, car son interface est similaire à celle des outils de conception d’images couramment utilisés. Pour les utilisateurs moins expérimentés, il existe de nombreux tutoriels en ligne et une université Webflow pour apprendre les bases rapidement. Une fois que vous avez maîtrisé les bases, il vous suffit de vous lancer et de continuer à apprendre en pratiquant. N’hésitez pas à consulter mon cours en ligne sur Webflow, qui vous guidera pas à pas dans l’apprentissage de cet outil.
Webflow : Designer, CMS, Éditeur et Hébergement
Webflow se divise en quatre catégories principales pour éditer des modèles et créer des sites web : le Designer, le CMS et l’Éditeur.
Qu’est-ce que le Designer Webflow ?
Le Designer Webflow peut être considéré comme le cœur du constructeur de sites web. Il offre toute la puissance du CSS, de l’HTML et du JavaScript dans une interface visuelle. À l’aide du Designer, vous pouvez créer votre site en assemblant des blocs, en ajoutant des animations et en personnalisant chaque détail selon vos souhaits. En coulisses, le Designer génère du code propre et sémantique pour un site web optimisé. Si vous souhaitez optimiser vous-même le code, sachez que Webflow prend en charge toutes les fonctionnalités du CSS3 et de l’HTML5, y compris la boîte de modèles, les transformations CSS 3D, les transitions personnalisées et les boîtes flexibles. Vous pouvez également créer des animations déclenchées par le défilement, le clic ou le chargement de la page, sans avoir besoin de connaissances en JavaScript.
Comment fonctionne le CMS Webflow ?
Webflow est à la fois un système de gestion de contenu complet (CMS) comme Drupal, Magento ou WordPress, et un puissant outil de conception et de construction de sites. Le CMS Webflow vous permet de créer du contenu sans aucune restriction liée aux modèles, à la structure centrée sur les blogs ou aux langages de programmation complexes. Au lieu de cela, Webflow vous offre des schémas que vous pouvez facilement intégrer dans votre site web. En résumé, le CMS Webflow offre toutes les fonctionnalités dont vous avez besoin pour créer un site web, que vous souhaitiez ajouter régulièrement du nouveau contenu à votre présence en ligne ou non.
Qu’en est-il de l’Éditeur Webflow ?
Webflow prétend que l’ajout de nouveau contenu est aussi facile que de remplir un formulaire. Chaque fois que vous souhaitez apporter des modifications à votre site web, vous pouvez le faire en quelques clics. Grâce à l’aperçu en direct, vous n’aurez aucune mauvaise surprise une fois que votre nouveau contenu sera publié. Comme Webflow sépare le contenu des paramètres sous-jacents du site, vous pouvez apporter des modifications à votre site web à tout moment sans craindre que des parties de votre site soient endommagées. De plus, vous pouvez collaborer avec d’autres utilisateurs sur un même site web. L’historique détaillé des versions vous permet de voir qui a apporté quelles modifications et quand.
Comment mes clients peuvent-ils modifier leur site web ?
Webflow est conçu de manière à ce que vos clients puissent modifier leur site web à tout moment sans compromettre sa mise en page ou effectuer de modifications non désirées. Vos clients peuvent accéder à une interface dédiée en se connectant avec leur propre adresse e-mail et un mot de passe qu’ils auront choisi. Une fois connectés, vos clients verront leur site web tel qu’il est affiché aux visiteurs, mais avec une différence : tous les champs de texte, les boutons, les liens, les titres et les images sont modifiables. Les modifications apportées sont visibles immédiatement, mais ne sont pas publiées automatiquement. Lorsqu’un client est connecté, une barre apparaît en bas de la page, où il peut accéder à chaque page du site et effectuer des modifications SEO personnalisées dans les paramètres. Ils peuvent également ajouter des articles de blog sans votre aide en utilisant la même barre en bas de la page.
La gestion de l’hébergement avec Webflow
Webflow vous propose l’hébergement adapté à votre site web. Cette solution utilise plus de 100 centres de données répartis dans le monde entier, exploités par Fastly et Amazon CloudFront, deux services de cloud computing bien établis. Cette stratégie d’hébergement bien pensée garantit des temps de chargement rapides (en millisecondes) et une disponibilité de 99,99 % pour votre site web. En résumé, vous disposez d’un site web accessible et performant, essentiel pour un bon référencement et pour la sécurité. Les certificats SSL sont également inclus.
La création de sites web adaptatifs avec Webflow
Les sites web adaptatifs sont devenus indispensables de nos jours, compte tenu de la quantité de trafic provenant des appareils mobiles tels que les tablettes et les smartphones. Webflow offre toutes les fonctionnalités nécessaires pour faciliter le travail de conception adaptative. Dans le Designer Webflow, vous trouverez une barre en haut de l’écran qui vous permettra de visualiser votre site web dans les vues bureau, smartphone et tablette. De nombreux éléments de base de Webflow sont déjà adaptatifs, mais il se peut que vous deviez ajuster certains éléments pour qu’ils soient parfaitement adaptés aux appareils mobiles. Vous pouvez personnaliser les images, modifier les tailles de police et bien plus encore, de manière individuelle pour chaque point de rupture.
La qualité du code généré par Webflow
Webflow génère un code propre et sémantique, compréhensible et apprécié par tous les navigateurs. Les programmeurs soulignent souvent la propreté du code généré par Webflow, qui se rapproche étroitement des standards du web. De plus, Webflow vous permet d’ajouter votre propre code à tout moment. Vous pouvez facilement intégrer des extensions externes ou des plugins JavaScript pour rendre votre site web encore plus puissant. Il est également possible d’ajouter votre propre code CSS.
La plateforme Webflow offre également une API qui vous permet de gérer le CMS Webflow via des outils tels que Notion ou d’établir des intégrations avec des services tels que Integromat, Zapier ou Airtable.
La vitesse des sites web Webflow
Comparé à d’autres systèmes de gestion de contenu, les sites web créés avec Webflow sont très performants. Un site web créé avec Webflow offre de très bons résultats en termes de vitesse de chargement (plus de 80 sur mobile et desktop) dès le départ. Avec quelques conseils, vous pouvez facilement atteindre un score supérieur à 90. Jetez un œil à cette vidéo pour le voir par vous-même.
Webflow est-il optimisé pour le référencement ?
Webflow est optimisé pour le référencement dès le départ. Les moteurs de recherche apprécient les temps de chargement rapides et le code propre généré par Webflow. De plus, il existe de nombreuses possibilités d’optimisation pour les moteurs de recherche. Vous pouvez personnaliser les méta-titres et les méta-descriptions, créer une structure de navigation logique, minifier le code, connecter votre site à la Google Search Console, ajouter des textes alternatifs logiques, créer des redirections et bien plus encore. J’ai résumé 11 conseils SEO que vous pouvez appliquer à votre site Webflow pour l’optimiser davantage.
La popularité de Webflow
WordPress reste le leader incontesté des CMS, avec plus de 65 % de part de marché. Cependant, Webflow se fait une place de plus en plus importante. Depuis sa création, cette plateforme a connu une augmentation constante du nombre d’utilisateurs. Lors de la conférence NoCode 2021, Webflow a annoncé que plus d’un million de sites web ont été publiés par la communauté Webflow depuis la dernière conférence en 2020. En 2021, plus d’un million d’utilisateurs ont rejoint la communauté Webflow, portant le nombre total d’utilisateurs à plus de 3,5 millions (chiffres de 2021).
Les tarifs de Webflow
Vous pouvez commencer à utiliser Webflow gratuitement, et votre compte restera en mode d’essai aussi longtemps que vous le souhaitez. Cela vous permet de créer et de publier votre site web sur un sous-domaine de Webflow. Cependant, si vous souhaitez publier votre site web sur votre propre domaine et bénéficier de toutes les fonctionnalités offertes par Webflow (comme la possibilité d’exporter votre site web sous forme de code HTML), vous devrez souscrire à un plan payant. Vous pouvez payer mensuellement ou bénéficier d’une réduction en payant pour une année complète à l’avance.
Vous pouvez résilier votre plan d’hébergement à tout moment. Webflow ne propose pas de remboursement, mais votre plan restera actif jusqu’à la fin de votre période de facturation en cours. Si vous résiliez votre plan mais possédez toujours un site web sur Webflow, vous aurez toujours accès à votre site web, mais dans le cadre de votre plan d’essai gratuit.
Pour choisir un abonnement payant, vous avez différentes options. Il existe des offres pour les particuliers et les équipes. Si vous êtes un individu qui a seulement besoin d’un seul site web, vous devrez payer pour l’hébergement vous-même. Il existe trois plans parmi lesquels vous pouvez choisir, en fonction du nombre de visiteurs mensuels autorisés et du nombre de soumissions de formulaires autorisées. Veuillez noter que le plan de base ne comprend pas les fonctionnalités du CMS.
Si vous êtes un designer ou un freelance, vous pouvez utiliser les fonctions de Webflow avec le plan Lite ou Pro, qui vous permettent également d’exporter le code de votre site web pour une utilisation dans d’autres environnements. Avec la version Pro, vous pouvez créer un nombre illimité de projets Webflow.
Pour plus de détails sur les prix de Webflow, consultez ma publication dédiée : Explication simplifiée des tarifs de Webflow.
Modèles Webflow pour démarrer rapidement
Comme la plupart des constructeurs de sites web, Webflow propose des modèles préconçus qui vous permettent de démarrer rapidement. Vous avez le choix parmi des centaines de modèles professionnels que vous pouvez personnaliser à votre image (vous pouvez personnaliser l’ensemble du design). Webflow propose plus de 25 modèles gratuits. Que vous souhaitiez créer un site de commerce électronique, un blog ou un portfolio, vous trouverez de nombreux modèles pour vous aider.
Intégration facile des animations dans votre site web avec Webflow
Si vous regardez quelques sites web créés avec Webflow, vous remarquerez rapidement que de nombreuses animations attrayantes y sont présentes. En effet, Webflow facilite grandement l’intégration d’animations et d’interactions dans les sites web. Vous pouvez créer des animations visuelles sans avoir à écrire de code. Vous pouvez créer des animations qui se déclenchent en fonction du défilement, du clic ou du chargement d’une page, sans avoir besoin de connaissances en JavaScript.
Je suis convaincu que l’avenir du design web réside dans le storytelling, et cela n’est possible qu’avec des animations élégantes. Webflow met à votre disposition toutes les fonctionnalités nécessaires pour créer visuellement des animations, sans écrire de code. Il s’agit souvent d’animations par défilement, qui se déploient au fur et à mesure que vous faites défiler la page. Par exemple, vous pouvez créer des images qui grandissent, se rétrécissent ou s’ouvrent lors du défilement, des polices qui s’estompent progressivement, des effets au survol, et bien plus encore.
D’ailleurs, vous pouvez cloner des projets de sites web impressionnants comportant des animations pour les utiliser dans vos propres projets Webflow.
Comparaison entre Webflow, WordPress et Squarespace
Webflow se situe entre les constructeurs de sites web faciles à utiliser mais limités en termes de fonctionnalités et les CMS complexes qui nécessitent parfois des compétences en programmation.
Webflow est souvent comparé à WordPress. WordPress est le CMS le plus utilisé au monde, en grande partie grâce à sa gratuité. Cependant, WordPress offre moins de liberté en termes de conception par rapport à Webflow. De plus, le code généré par Webflow est beaucoup plus propre que celui de WordPress, qui peut être alourdi par l’utilisation de nombreux plugins, ce qui nuit aux temps de chargement des sites web et au référencement. Une autre grande différence entre Webflow et WordPress est que Webflow vous permet de construire visuellement votre site web, du début à la fin, alors que WordPress nécessite souvent l’utilisation d’un constructeur de site. En ce qui concerne les tarifs, WordPress est généralement gratuit, tandis que Webflow est payant dès que vous souhaitez publier votre site web.
Webflow et Squarespace sont deux constructeurs de sites web qui permettent de créer de superbes sites web sans écrire de code. Les deux offrent une approche visuelle pour construire votre site web. Cependant, il existe des différences importantes entre Squarespace et Webflow. Webflow offre beaucoup plus de possibilités d’individualisation pour votre site web, mais il est également plus complexe à utiliser. Squarespace est donc un choix préféré pour les débutants et les personnes qui ne veulent pas dépenser beaucoup de temps dans la conception de leur site web. Pour les designers web professionnels et les agences, Webflow est le meilleur choix.
Sites web créés avec Webflow
Si vous prenez le temps de parcourir les sites web créés avec Webflow, vous découvrirez de nombreux résultats impressionnants. Les animations présentes sur les sites web Webflow sont particulièrement remarquables. J’ai rassemblé 11 exemples de sites web d’agences créatives, de petites et moyennes entreprises, pour vous inspirer.
De nombreux photographes, designers de sites web et autres créatifs utilisent également Webflow pour créer des portfolios en ligne attrayants. Les agences font également confiance à Webflow pour créer des sites web impressionnants.
Support et aide rapide de Webflow
Étant donné que Webflow est une solution payante, les experts du site web offrent un support professionnel via l’équipe interne de Webflow. Vous pouvez envoyer des demandes d’assistance directement depuis le site web de Webflow et recevoir une réponse dans les heures qui suivent. En outre, les utilisateurs de Webflow bénéficient de la croissance continue de la communauté, qui se soutient et s’inspire mutuellement. N’hésitez pas à consulter le forum Webflow, qui propose des réponses à presque toutes les questions que vous pourriez avoir dans le cadre de votre travail avec Webflow.
Où puis-je apprendre Webflow ?
Si vous êtes prêt à vous lancer avec Webflow, vous trouverez de nombreux tutoriels sur YouTube et sur le site web de Webflow. J’ai moi-même publié de nombreux tutoriels gratuits sur Webflow, qui vous aideront à vous familiariser avec cet outil et vous guideront dans l’utilisation de ses fonctionnalités spécifiques.
En dehors de cela, je vous recommande de suivre mon cours en ligne sur Webflow. Ce cours vous guidera pas à pas dans l’apprentissage de Webflow, depuis une page blanche jusqu’à des résultats impressionnants, avec de superbes animations.
Vous pouvez également consulter la Webflow University qui propose une formation en ligne complète, mais uniquement en anglais.
