Présentation du logiciel Webflow
Webflow, fondé par deux frères en 2013, est un CMS un peu particulier. Il permet la création de site internet sans connaissances approfondies en code, comme wix, Shopify ou Weebly. Mais à la différence de ses concurrents, Webflow s’adresse avant tout aux webdesigners. La grande force de Webflow, outre son interface intuitive, est qu’il permet de créer des sites au design ultra-personnalisé. Il s’agit d’un des meilleurs logiciel CMS de création de site sur le marché.
Fonctionnalités
Aujourd'hui, la plupart des CMS se focalisent sur la simplicité d'utilisation. A chaque fois, l'idée est de pouvoir créer son site web facilement et rapidement, en partant de blocs de contenus préfabriqués qu'il n'y a plus qu'à personnaliser. Un peu comme un jeu de LEGO. Webflow, qui est un logiciel SaaS Cloud, est un peu plus sophistiqué.
En raison de sa grande richesse fonctionnelle, en particulier pour ce qui a trait à la personnalisation du design, Webflow ne s'adresse peut-être pas aux "grands-débutants". La cible de ce CMS, ce sont les webdesigners ou plus généralement toutes les personnes qui veulent créer un site web en ayant un contrôle total sur les aspects de design - sans être des as du code pour autant. Cet aspect de Webflow le rapproche d'un CMS comme Webydo. Webflow a été adopté à ce jour par des dizaines de milliers d'utilisateurs - particuliers exigeants, freelances, webdesigners, agences, startups. Plus de 500 000 sites ont été créés à partir de cet éditeur. Webflow compte parmi ses clients de grands comptes comme Groupon, Hewlett-Packard, Pinterest, MTV, IBM...
Découvrez notre guide complet sur l'art d’optimiser les images pour le web : choix du format, compression et bonnes pratiques.
L'interface d'édition de Webflow est un mixte entre une interface classique type Wix et Photoshop. On retrouve le côté très intuitif : l'interface est WYSIWYG, vous pouvez modifier n'importe quel élément de contenu de votre page en cliquant dessus avec la souris. Mais à côté de ça, Webflow propose des fonctionnalités très poussées de personnalisation des styles, des polices, des formats, des couleurs, etc. Le tout sans avoir besoin de toucher une ligne de code, même s'il est possible d'intégrer librement du code. Traditionnellement, les webdesigners fabriquent le design du site pour le compte de leurs clients en utilisant un logiciel comme Illustrator ou Photoshop et externalisent ensuite la production du site (de son code) à un développeur. Avec Webflow, les webdesigners peuvent créer le design du site et son code en même temps, c'est-à-dire contrôler toutes les étapes de production du site. C'est le gros point fort, la valeur ajoutée de Webflow : Design without Code. Webflow permet de créer des sites web avec un design contrôlé au pixel près.
Webflow s'adresse aussi bien aux webdeveloppers qu'aux débutants avec un peu d'expérience dans les logiciels de création de site.
Maintenant que les présentations sont faites, entrons dans les détails. Pour utiliser Webflow, vous devez commencer par créer un compte (nom, prénom, email, mot de passe). Nous reviendrons plus bas sur les différentes offres et les prix webflow et forfaits. Une fois que vous avez créé votre compte, la première étape consiste à choisir un design pour votre site web. Vous avez trois options : partir de rien (canva blanc), d'une structure (framework) ou bien choisir un template prêt à l'emploi. Webflow propose plus de 150 templates, couvrant toutes les thématiques et tous les besoins.
Les templates sont tous globalement de grande qualité, classes et bien finis. Ils sont tous responsive. Les templates sont classés par catégorie : Business, Portfolio, Event, Blog, etc. A noter qu'il n'y a pas de templates "ecommerce". C'est un aspect que nous n'avons pas mentionné tout à l'heure : Webflow n'est pas adapté à la création de sites ecommerce. Si vous choisissez la formule gratuite de Webflow, seul une trentaine de template sont gratuits. Les autres peuvent être achetés individuellement. Dans les formules payantes, les templates premium sont en libre accès (gratuits).
Bien entendu, tous les templates sont personnalisables à un haut niveau. Vous pourrez modifier tous les éléments de design, les blocs, leur contenu, leur emplacement, etc.
Une fois que vous avez choisi votre template, vous êtes automatiquement redirigé sur l'interface d'édition. Celle-ci permet d'éditer les moindres aspects de votre site, de créer de nouvelles pages, de construire l'arborescence du site, de prévisualiser le rendu, du publier les pages et d'exporter le code (menu de gauche). En effet, si vous choisissez un forfait payant, vous pouvez à tout moment exporter le code de votre site - ce qui permet de publier le site sur un autre hébergeur. C'est dans le menu de droite que vous pouvez personnaliser le contenu et le style de tous les éléments de votre site. Le contenu des options proposées dans ce menu varie en fonction de l'élément que vous souhaitez éditer. Vous apprécierez le niveau de personnalisation très poussé du design. C'est là que l'on retrouve le côté Phososhop de Webflow.
Concernant la typographie par exemple, non seulement vous avez accès à un très grand choix de polices de caractères, mais en plus de cela Webflow vous permet de charger des Google Fonts, des Adobe TypeKit Fonts ou même des polices personnalisées.
Découvrez 12 exemples pour réussir le design de la page d’accueil de votre site web.
Vous pouvez, depuis le menu du haut, visualiser votre site sur les différentes tailles d'écran. Vous pouvez modifier la version mobile de chacune de vos pages pour optimiser l'affichage. Si les modifications apportées sur la version desktop sont transcrites automatiquement sur les versions mobile, cela n'est pas vrai dans l'autre sens. Ce qui est très pratique. Cela vous permet de personnaliser la version mobile sans impacter la version desktop.
Webflow propose des dizaines de tutoriels accessibles depuis l'interface d'édition pour vous aider dans la prise en main du logiciel. Car si l'interface est globalement très intuitive, la richesse fonctionnelle de Webflow implique néanmoins un certain temps d'adaptation et de prise en main. Il y a une vraie courbe d'apprentissage. Tous les tutoriels, comme l'interface d'ailleurs, sont en anglais. Vous pouvez, depuis le menu de gauche, ajouter tous types de contenus sur votre site :
Webflow s'adresse aussi bien aux webdeveloppers qu'aux débutants avec un peu d'expérience dans les logiciels de création de site.
Une fois que vous avez sélectionné un élément, vous n'avez plus qu'à le glisser-déposer sur la page à l'emplacement de votre choix à l'aide de la souris. Pour chaque élément que vous ajoutez sur votre page, vous pouvez décider de le faire apparaître ou non sur les versions mobiles de votre site. Ce qui est très pratique et témoigne encore une fois du souci de Webflow pour les enjeux responsive. A noter aussi que vous pouvez à out moment revenir en arrière, en faisant un undo. Webflow génère par ailleurs des sauvegardes automatiques de votre site. Vous pouvez d'ailleurs à tout moment sauvegarder votre site en pressant Ctrl + Shift + S.
Attardons-nous un instant sur les fonctionnalités de blogging. Webflow peut très bien être utilisé pour créer des blogs. Vous avez deux possibilités : partir d'un template "blog" ou bien ajouter une partie "blog" sur votre site d'entreprise, d'événement, etc. Webflow vous permet de gérer les auteurs, de catégoriser les articles, d'intégrer des balises dans vos articles. Vous pouvez intégrer des images ou des vidéos à l'intérieur de vos posts, générer un flux RSS et même intégrer un module "Related Posts".
Découvrez 8 règles d’or d’ergonomie web à connaître avant de créer votre site internet.
Quatre derniers points pour terminer ce passage en revue des fonctionnalités de Webflow :
- Le SEO : Webflow vous permet de personnaliser, pour chaque page, la balise Title et la Meta Description. Il n'est en revanche pas possible de personnaliser l'URL. Vous pouvez aussi, pour chaque image, renseigner la balise ALT. Webflow génère automatiquement le sitemap du site. Le code, de ce que nous avons pu en voir, est très propre, ce qui a un impact positif sur le référencement. De la même manière, le temps de chargement des pages est globalement très courts. Webflow permet de créer des sites web "SEO-friendly".
- Les applications tierces. C'est le point faible de Webflow. Il y a très peu d'intégrations possibles avec des outils tiers. Vous pouvez ajouter une carte Google Maps, connecter votre site à Google Analytics et ajouter des liens vers vos réseaux sociaux. C'est à peu près tout...
- Le support client. Vous pouvez contacter le support par email uniquement (la réactivité est moyenne d'après les retours d'expérience). Pour vous accompagner dans la création de votre site web, Webflow met à votre disposition une base de connaissance et une série de vidéos tutoriels. Il existe également un forum, très actif. Tout est en anglais.
- Les pages 404. Webflow permet de personnaliser votre page 404, c'est-à-dire la page sur laquelle est redirigé l'internaute lorsqu'il cherche à accéder à une page qui n'existe pas ou plus. Peu de CMS offrent cette possibilité.
Terminons par un passage en revue des principaux avantages et inconvénients de la plateforme Webflow. Les avantages pour commencer :
- La personnalisation ultra-poussée du design, qui permet de contrôler l'apparence du site au pixel près sans avoir besoin de toucher à une seule ligne de code.
- La possibilité d'exporter le code du site sur d'autres plateformes.
- La possibilité d'utiliser des polices de caractère personnalisées.
- La richesse de l'interface d'édition.
- La qualité des templates.
Les inconvénients :
- L'interface est relativement complexe, parce que très riche d'un point de vue fonctionnel. Webflow s'adresse clairement à des "pros" (webdesigners, agences, startups...).
- Les possibilités très limitées d'intégration avec des outils tiers.
- Webflow ne permet pas de créer des sites ecommerce.
- Webflow est relativement cher pour ceux qui ont des besoins simples.
Si vous souhaitez créer des sites au design très personnalisé et que vous avez l'habitude d'utiliser des outils comme Photoshop ou Illustrator, Webflow est surement le logiciel qu'il vous faut. Si vous êtes débutant et que vous avez des exigences "normales" en termes de design, nous vous recommandons des solutions plus accessibles comme Wix ou Shopify.
Découvrez notre guide complet pour apprendre à réaliser des maquettes fonctionnelles web (wireframing).
Webflow s'adresse aussi bien aux webdeveloppers qu'aux débutants avec un peu d'expérience dans les logiciels de création de site.
Offres & tarifs
- Trois offres destinées aux particuliers ou entreprises qui souhaitent créer un site pour eux-mêmes (Hosting Plans).
- Trois offres à destination des professionnels (webdesigners, freelances) qui souhaitent utiliser Webflow pour créer des sites web pour leurs clients (Designer Plans).
- Une offre à destination des agences et des équipes, qui souhaitent créer des sites en mode collaboratif (Team Plans).
Liste des fonctionnalités
| Design | Oui | Les templates proposés par Webflow sont clairement bluffants et en nombre assez important (plus de 150). Surtout, Webflow est probablement le logiciel qui offre le plus de flexibilité et de profondeur pour ce qui est de la personnalisation du design. |
| Editeur de pages | Oui | L'interface d'édition de Webflow est très complète - en particulier en ce qui concerne les fonctionnalités de gestion du design (qui font penser à Photoshop). Pour un débutant, l'interface est toutefois plus difficile à prendre en main qu'avec un logiciel comme Wix, Weebly ou Shopify. |
| Formulaire de contact | Oui | Avec Webflow, vous pouvez créer des formulaires ultra-personnalisés pour collecter des leads / gérer des inscriptions. |
| Widgets | Oui | Webflow permet d'intégrer des images, du texte, des vidéos, des formulaires, des galeries, des boutons de réseaux sociaux, etc. En revanche, le nombre d'intégrations disponibles avec des outils tiers est très limité. |
| E-Commerce | Non | Webflow ne propose pas de fonctionnalités ecommerce en natif. Il est néanmoins possible, dans l'absolu, de créer une boutique en ligne sur Webflow à condition de plonger les mains dans le code. |
| Blog | Webflow propose des fonctionnalités avancées pour créer un blog ainsi que des templates spécialement conçus à cet effet. | |
| Nom de domaine personnalisé | Oui | Webflow vous offre un sous-domaine. Vous avez aussi la possibilité, comme alternative, d'acheter un nom de domaine ou de connecter votre nom de domaine. |
| Espace disque | N/A | |
| Support | Oui | Vous pouvez contacter le support de Webflow par email. Vous trouverez sur le site de l'éditeur une base de connaissance, un blog, un forum et une série de vidéos tutoriels (plus de 100 heures). Toute est en anglais. |
Exemples de sites réalisés avec Webflow
Bag's Concept
http://bagsconcept.webflow.io/Blaise Posmyouck
https://www.blaiseposmyouck.com/Apt London
https://www.wannabe.toys/
vous pourriez mettre votre article à jour quand même, ça fait plusieurs mois que Webflow propose des fonctionnalités e-commerce, l’article est périmé
Effectivement, vous avez raison, comme l’a également fait remarquer un autre utilisateur, Webflow propose maintenant des fonctionnalités ecommerce. Pour le reste du contenu de l’article, comme les points abordés sur les templates, les fonctionnalités de bloggling etc. l’article reste pertinent.
Bonjour, je suis consultant en Emploi à la recherche d’un template pour mon site.
Peut-on personnaliser (couleur, fond d’écran etc…) un template payant.
Merci de votre réponse
Bonjour, comme mentionné dans l’article, Webflow est probablement le logiciel qui offre le plus de flexibilité et de profondeur pour ce qui est de la personnalisation du design. Je vous invite à relire l’article pour d’éventuelles précisions.
A bientôt
Si on ne peut pas exporter avec la formule gratuite, comment on héberge le site soi-même ?
Via la souscription à un SitePlan directement depuis l’interface Webflow 🙂
On peut désormais faire du e-commerce avec webflow