Si vous êtes un webdesigner à la recherche d’un moyen de traduire vos idées visuelles en sites web impressionnants sans avoir à écrire de code, vous devriez jeter un coup d’œil à Webflow. Cet outil en ligne, accessible à tout moment, est un véritable logiciel en tant que service (SaaS) qui vous permet de construire des sites web réactifs directement dans votre navigateur. Dans cet article, nous explorerons en détail ce qu’est Webflow et ce qu’il peut vous offrir.
Qu’est-ce que Webflow, en bref
Webflow est un outil en ligne qui permet aux webdesigners de construire des sites web réactifs sans avoir à écrire de code. Grâce à son interface visuelle intuitive, vous pouvez créer votre site web en cliquant simplement sur les éléments et en les ajustant selon vos préférences. Pendant que vous travaillez sur votre design, Webflow génère automatiquement le code HTML, CSS et JavaScript en arrière-plan. Cela signifie que vous pouvez vous concentrer sur la création visuelle de votre site web sans vous inquiéter de la partie technique.
Pour qui est fait Webflow ?
Webflow convient à tous ceux qui souhaitent créer un site web réactif impressionnant sans avoir à écrire une seule ligne de code. Contrairement à d’autres constructeurs de sites web, Webflow vous offre une liberté totale pour personnaliser votre présence en ligne. Vous pouvez tout ajuster à votre guise, sans être limité par des modèles prédéfinis ou des directives de style. C’est pourquoi de nombreux designers utilisent Webflow pour donner vie à leurs idées visuelles. Avec Webflow, ils peuvent traduire leurs idées directement en site web, sans faire de compromis. Il est important de noter que Webflow est un peu plus complexe à utiliser que d’autres constructeurs de sites web tels que Wix ou Squarespace, mais la courbe d’apprentissage est rapide. Si vous prenez le temps de vous familiariser avec Webflow, vous pourrez vous gratifier de résultats incroyables et augmenter vos revenus.
Est-ce que Webflow est facile à utiliser ?
Si vous êtes familier avec des outils tels qu’Adobe, Figma ou Sketch, vous vous sentirez à l’aise avec Webflow. Le designer de Webflow fonctionne de manière similaire aux logiciels de retouche d’images populaires. Pour les autres utilisateurs, les premiers pas avec Webflow peuvent sembler un peu déroutants. Cependant, il existe de nombreux tutoriels en ligne et l’université Webflow pour vous aider à apprendre les bases rapidement. Une fois que vous aurez acquis ces bases, l’apprentissage continuera par la pratique. Si vous souhaitez apprendre Webflow de A à Z, vous pouvez consulter mon cours en ligne sur Webflow, qui est organisé de manière chronologique. Après avoir suivi la formation, vous serez à l’aise avec l’utilisation de Webflow.
Designer, CMS, Éditeur et Hébergement
Webflow répartit ses fonctionnalités en quatre catégories principales : le designer, le CMS, l’éditeur et l’hébergement.
Qu’est-ce que le designer Webflow ?
Le designer de Webflow est le cœur de cet outil. Il vous offre toute la puissance du CSS, HTML et JavaScript dans une interface visuelle. Vous pouvez assembler votre site web en disposant des blocs, ajouter des animations captivantes et personnaliser tout selon vos préférences. En arrière-plan, le designer de Webflow génère un code propre et sémantique pour un site web optimisé. Si vous souhaitez optimiser le code vous-même, sachez que Webflow intègre toutes les fonctionnalités CSS3 et HTML5, y compris le modèle de boîte, les transformations CSS 3D, les transitions personnalisées et les boîtes flexibles. Vous pouvez également ajouter des animations déclenchées par le défilement, le clic ou le chargement d’une page, sans aucune connaissance en JavaScript.
Comment fonctionne le CMS de Webflow ?
Webflow propose un système de gestion de contenu complet (CMS) similaire à Drupal, Magento ou WordPress. Il s’agit à la fois d’un puissant concepteur et constructeur de site web et d’un CMS. Le CMS de Webflow est flexible et ne limite pas la création de contenu à des modèles, à des structures centrées sur les blogs ou à des langages de programmation complexes. Au lieu de cela, Webflow vous propose des schémas que vous pouvez facilement intégrer à votre site web. En matière de création de contenu, vous êtes totalement libre.
En résumé, le CMS de Webflow offre toutes les fonctionnalités que vous pouvez attendre d’un système de gestion de contenu. Bien sûr, vous pouvez également créer des sites web sans utiliser le CMS de Webflow, mais si vous publiez régulièrement du nouveau contenu sur votre site web, le CMS intégré sera un véritable atout.
Qu’est-ce que l’éditeur de Webflow ?
Webflow prétend que l’ajout de nouveau contenu est aussi simple que de remplir un formulaire. Chaque fois que vous êtes prêt à apporter des modifications à votre site web, vous pouvez le faire en quelques clics seulement. Grâce à l’aperçu en direct, vous n’aurez aucune mauvaise surprise après la publication de votre nouveau contenu.
Étant donné que Webflow sépare le contenu des paramètres sous-jacents du site web, vous pouvez apporter des modifications à votre site web à tout moment sans craindre d’endommager d’autres parties de votre site web. De plus, vous pouvez collaborer avec d’autres utilisateurs sur un même site web. L’historique des versions détaillé vous indique qui a fait quoi et quand.
Comment mes clients peuvent-ils modifier leur site web ?
Webflow est conçu de manière à permettre à vos clients de modifier leur site web à tout moment, sans compromettre la mise en page de base ou apporter des modifications non désirées. Vos clients peuvent accéder à leur interface dédiée via une connexion personnelle (ils auront simplement besoin d’une adresse e-mail et d’un mot de passe de leur choix).
Une fois connectés, vos clients verront leur site web tel qu’il est présenté aux visiteurs, mais avec une différence : tous les champs de texte, les boutons, les liens, les titres et les images peuvent être modifiés. Les modifications apportées sont immédiatement visibles sur le site, sans être immédiatement publiées.
Lorsqu’un client est connecté, une barre d’outils apparaît en bas de la page. Il peut utiliser l’onglet “Pages” pour accéder aux pages individuelles et apporter des modifications SEO spécifiques dans les paramètres. Les clients peuvent également ajouter des articles de blog par le biais de l’onglet “Collections”. Ils peuvent ajouter des articles de blog, modifier des FAQ et bien plus encore.
Dois-je m’occuper de l’hébergement avec Webflow ?
Webflow vous offre un hébergement adapté à votre site web. Le plus intéressant, c’est que quel que soit le trafic que votre site web génère, il restera en ligne. Webflow utilise une technologie d’hébergement qui repose sur plus de 100 centres de données mondiaux opérés par Fastly et Amazon CloudFront, deux services de cloud computing bien établis.
Cette stratégie d’hébergement bien pensée garantit un temps de chargement de site web en millisecondes et une accessibilité de 99,99 % des sites web hébergés. En résumé, vous disposez d’un site web extrêmement rapide, quel que soit le trafic qu’il génère. De plus, les temps de chargement rapides sont essentiels pour un bon référencement et la sécurité est également assurée, avec des certificats SSL inclus.
Puis-je créer des sites web réactifs avec Webflow ?
La conception de sites web réactifs est devenue essentielle de nos jours, car la plupart du trafic provient des appareils mobiles tels que les tablettes et les smartphones. Les sites web doivent être optimisés pour ces appareils. Heureusement, Webflow propose toutes les fonctionnalités nécessaires pour rendre la conception réactive facile et agréable.
Dans le designer de Webflow, vous trouverez une barre en haut de l’écran qui vous permet de visualiser votre site web sur un ordinateur de bureau, un smartphone ou une tablette. Webflow a déjà rendu de nombreux éléments réactifs. Cependant, il se peut que certains éléments doivent être ajustés pour offrir un rendu encore plus agréable sur les appareils mobiles. Vous pouvez ajuster les images, modifier les tailles de police et bien plus encore. Vous pouvez tout personnaliser en fonction des points de rupture sélectionnés.
Le code généré par Webflow est-il propre ?
Webflow génère un code propre et sémantique qui est compris et apprécié par tous les navigateurs. Les développeurs qui utilisent Webflow sont impressionnés par la propreté du code généré en arrière-plan.
Ce que les développeurs avancés apprécient particulièrement, c’est la possibilité d’ajouter leur propre code à tout moment avec Webflow. Vous pouvez facilement ajouter des extensions externes ou des plugins JavaScript pour rendre votre site web encore plus puissant. Vous pouvez également ajouter votre propre code CSS.
L’API de Webflow vous permet de gérer et de modifier le CMS Webflow via Notion, ou de connecter Webflow à des services tels qu’Integromat, Zapier ou Airtable.
À quelle vitesse fonctionne un site web Webflow ?
Comparé à d’autres systèmes de gestion de contenu, un site web créé avec Webflow est très performant. D’ailleurs, les sites web créés avec Webflow obtiennent déjà de très bons résultats en termes de vitesse de chargement sur Google Page Speed (plus de 80 sur mobile et ordinateur). Avec quelques astuces, vous pouvez rapidement atteindre un score supérieur à 90. Vous pouvez en voir un exemple dans la vidéo suivante :
Webflow est-il convivial pour le référencement naturel ?
Webflow est conçu dès le départ pour être convivial pour le référencement naturel (SEO). Les temps de chargement rapides et le code propre sont appréciés par tous les moteurs de recherche. De plus, Webflow offre de nombreuses possibilités pour optimiser votre site web pour les moteurs de recherche. J’ai résumé 11 conseils SEO ici. Vous pouvez ainsi modifier les méta-titres et les méta-descriptions, créer une structure de navigation logique, minimiser le code, lier votre site web à Google Search Console, ajouter des textes alternatifs logiques, créer des redirections 301, etc.
Webflow est-il largement utilisé ?
Il est indéniable que WordPress est le leader incontesté parmi les CMS. Avec plus de 65 % de part de marché, WordPress est de loin la solution la plus utilisée. Cependant, Webflow gagne du terrain. Depuis sa création, l’entreprise a enregistré une croissance rapide du nombre d’utilisateurs. Lors de la conférence NoCode en 2021, Webflow a annoncé que la communauté Webflow avait publié plus d’un million de sites web depuis la dernière conférence en 2020. En 2021, plus d’un million d’utilisateurs ont rejoint la communauté Webflow. Au total, Webflow compte désormais plus de 3,5 millions d’utilisateurs (chiffre de 2021).
Combien coûte Webflow ?
Vous pouvez commencer à utiliser Webflow gratuitement pour tester l’outil. Votre compte Webflow restera en mode test tant que vous le souhaitez. Vous aurez cependant un contrôle total sur vos conceptions et pourrez découvrir Webflow et son designer à votre rythme. Il vous sera même possible de publier votre site web sur un sous-domaine Webflow.
Si vous souhaitez publier votre site web sous votre propre domaine et profiter de toutes les fonctionnalités que Webflow offre (comme la possibilité d’exporter votre site web en tant que code HTML), vous aurez besoin d’un plan payant. Vous pouvez payer ce plan mensuellement ou annuellement pour bénéficier d’une réduction.
Vous pouvez résilier votre plan d’hébergement à tout moment. Cependant, Webflow n’offre pas de remboursement et votre plan restera actif jusqu’à la fin de votre période de facturation en cours. Si vous avez un site web Webflow et que vous résiliez votre plan, vous aurez toujours accès à votre site web, mais selon le plan de test gratuit.
Lorsque vous choisissez un abonnement payant, vous avez différentes options. Il existe des offres pour les particuliers et les équipes. Si vous êtes une personne seule ayant besoin d’un seul site web, vous devrez payer l’hébergement vous-même. Vous avez trois plans différents parmi lesquels choisir. Ils diffèrent par le nombre de visiteurs autorisés par mois et le nombre de soumissions de formulaires que vous pouvez recevoir. Il est important de 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 le plan Lite ou Pro pour profiter de toutes les fonctionnalités de Webflow, ainsi que pour exporter le code de votre site web pour le réutiliser dans d’autres environnements. Avec la version Pro, vous pouvez également créer un nombre illimité de projets Webflow.
Comme le sujet des prix Webflow peut sembler compliqué pour beaucoup de personnes, j’ai rédigé un article complet à ce sujet : Webflow Preise einfach erklärt.
Existe-t-il des modèles pour commencer facilement avec Webflow ?
Comme la plupart des constructeurs de sites web, vous pouvez également commencer avec un modèle dans Webflow. Vous avez le choix parmi des centaines de modèles professionnels conçus par des experts. Chacun de ces modèles peut être personnalisé pour correspondre parfaitement à votre marque et à vos objectifs (vous pouvez personnaliser l’ensemble du design). Webflow propose lui-même plus de 25 modèles gratuits. Que vous souhaitiez créer une boutique en ligne, un blog ou un portfolio, vous disposez de nombreux modèles parmi lesquels choisir.
Est-il facile d’intégrer des animations dans mon site web avec Webflow ?
Si vous regardez certains sites web créés avec Webflow (j’ai présenté certains de mes favoris comme source d’inspiration), vous remarquerez rapidement des animations impressionnantes et attrayantes. Webflow facilite l’intégration d’animations et d’interactions dans les sites web. Vous pouvez créer des animations visuelles sans avoir à écrire de code. Il s’agit souvent d’animations déclenchées par le défilement de la page. Par exemple, des images qui grandissent, rétrécissent ou se déploient lorsque vous faites défiler la page. Vous pouvez également créer des effets de fondu pour le texte. Les effets au survol sont également faciles à réaliser.
D’ailleurs, vous pouvez simplement cloner certains projets de sites web avec des animations impressionnantes et les utiliser pour vos propres projets Webflow.
Comment se compare Webflow à WordPress ou Squarespace ?
Webflow se situe entre les créateurs de sites web faciles à utiliser mais fonctionnellement limités et les CMS complexes qui nécessitent parfois des compétences en programmation.
Il est souvent comparé à WordPress. WordPress est le CMS le plus utilisé au monde, principalement en raison de sa gratuité. Cependant, en termes de liberté de conception, vous êtes un peu plus limité avec WordPress. De plus, le code généré en arrière-plan par WordPress est souvent surchargé en raison des nombreux plugins disponibles, ce qui a un impact sur les temps de chargement des sites web et sur leur référencement. Une autre grande différence entre Webflow et WordPress est que vous pouvez créer votre site web visuellement, en cliquant sur les éléments, dans Webflow. Avec WordPress, cela n’est possible que si vous utilisez un constructeur de page. En ce qui concerne les prix, WordPress est généralement gratuit. Webflow, en revanche, devient payant lorsque vous souhaitez publier votre site web.
Webflow et Squarespace sont tous deux des constructeurs de sites web qui permettent de créer de superbes sites web sans écrire de code. Les deux produits vous permettent de construire votre site web visuellement. Cependant, il existe des différences significatives entre Squarespace et Webflow. Webflow offre beaucoup plus de possibilités de personnalisation pour votre site web, mais il est également plus complexe à utiliser. Squarespace est donc la meilleure solution pour les débutants et les personnes qui ne veulent pas passer trop de temps à concevoir leur site web. Pour les webdesigners professionnels et les agences, Webflow est le premier choix.
Inspiration : Quels sites web ont été 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 époustouflants. Les animations de site web sont particulièrement impressionnantes avec Webflow. J’ai sélectionné 11 sites web d’agences créatives pour vous inspirer. Vous y trouverez de petites et moyennes entreprises.
Il existe également de superbes portfolios Webflow de photographes, de concepteurs de sites web et d’autres créateurs. Les agences font également confiance à la puissance de Webflow pour créer des sites web impressionnants.
Y a-t-il une aide et un support rapides disponibles pour Webflow ?
Comme Webflow est une solution payante, les experts en sites web offrent un support professionnel via l’équipe Webflow. Vous pouvez envoyer vos demandes directement via le site Webflow et vous obtiendrez généralement une réponse dans quelques heures.
Les utilisateurs de Webflow bénéficient également d’une communauté en pleine croissance qui se soutient et s’inspire mutuellement. N’hésitez pas à consulter le forum Webflow, qui est immense et propose des réponses à presque toutes les questions que vous pourriez avoir concernant Webflow.
Où puis-je apprendre Webflow ?
Si vous êtes maintenant impatient de commencer avec Webflow, vous trouverez de nombreux tutoriels sur YouTube et sur le site Webflow. J’ai moi-même publié de nombreux tutoriels gratuits sur Webflow. Ils vous aideront à faire vos premiers pas avec cet outil et vous donneront des instructions concrètes sur les fonctionnalités spécifiques du constructeur de sites web.
Sinon, je vous recommande mon cours en ligne sur Webflow. Vous y apprendrez à utiliser Webflow étape par étape, en commençant par une page blanche jusqu’à des résultats impressionnants avec de belles animations.
Vous trouverez également une formation en ligne complète sur Webflow dans l’université Webflow, bien que celle-ci soit en anglais.
