Webflow : L’outil de développement low-code chez Cosa Vostra

Go with the Flow avec CosaVostra !

Webflow, c’est l’outil de développement low-code tendance et à la mode qui permet de créer des sites web ou des landing page rapidement.

C’est un des outils de l’agence qui est utilisé par les développeurs frontend et les UI Designers.

Suivez le courant. On vous explique tout.

Mais tout d’abord qu’est-ce que c’est WebFlow ?

Webflow est un logiciel de conception web SaaS fondé en 2013 par deux frères passionnés. Il compte aujourd’hui plus de 3,5 millions d’utilisateurs.

Webflow, c’est d’abord une interface hyper intuitive pour la création sites web où vous êtes totalement libre du markup HTML et du CSS généré… À la différence d’un wix, d’un squarespace ou le code est lui complètement bridé. À cela s’ajoutent 2 outils puissants : les collections qui permettent de transformer un site webflow en véritable CMS, et un outil de création d’animation javascript très visuel, façon After Effect avec gestion de timeline ou d’événements.

Comment fonctionne Webflow ?

L’interface

C’est l’interface et la gestion intuitive du responsive design qui permet à Webflow d’être un outil qui fait gagner du temps.

En effet, l’interface d’édition de Webflow est la fusion d’une interface classique (type Photoshop) avec des fonctionnalités très poussées de personnalisation (des styles, des polices, des formats, des couleurs, etc.).

Le sidebar de gauche permet d’intégrer à votre page web différents éléments web :

section, div, container, colonnes, paragraphes, images, rich-text, liste à puce, boutons, liens… Oui on ne va pas lister tous les éléments HTML5 !

Une fois un élément web sélectionné, par exemple une div, la sidebar de droite permet d’éditer son CSS : margin, padding, couleur, typographie, box-shadow, etc… C’est un peu déroutant pour un développeur frontend au départ, mais c’est efficace une fois que l’on maîtrise l’interface graphique de Webflow.

Custom ou ready components ?

Webflow met à disposition certains components web largement utilisés : tabs, accordéons, sliders… Ce sont ces éléments web où le markup est limité. Chez CosaVostra, on essaye d’éviter de les utiliser afin de maîtriser la sémantique web.

Lors de la création d’un site avec Webflow, il est possible d’avoir des templates tout prêts, mais chez CosaVostra, nous avons notre starter-theme Webflow maison avec nos bonnes pratiques (sémantique web, BEM et quelques petits hacks made in CosaVostra…) !! 💪

Design et code

Ayant une interface visuelle particulièrement intuitive et une gestion du responsive innée, il est souvent écrit que l’on design en même temps que l’on développe sur webflow… Cela peut-être vrai ! Mais pas chez CosaVostra.

Notre process de design passe par différentes étapes d’itérations, entre nos pôles UX / UI. Webflow permet justement de simplifier le travail entre les UI Designers et les développeurs frontend. Ce sont souvent des sessions de co-conception à base de partage d’écrans entre créatifs et techniciens qui permettent de gagner du temps, le tout en suivant le Design System établi en amont du projet.

No-code ou low-code ?

Aujourd’hui, la plupart des CMS se focalisent sur la simplicité d’utilisation. La plupart du temps, l’objectif 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.

Webflow est un peu plus sophistiqué.

En raison de sa grande richesse fonctionnelle, Webflow s’adresse peut-être moins aux débutants, même si le logiciel a été pensé pour les accompagner grâce à la Webflow Academy, permettant d’apprendre l’intégration web et webflow en même temps. Néanmoins, sans aucune connaissance web (aka pour un néophyte)… Webflow sera un outil difficile à prendre en main et une véritable usine à gaz pour la scalabilité d’un projet web.

Webflow a été adopté à ce jour par des dizaines de milliers d’utilisateurs exigeants : freelances, webdesigners, agences, startups et compte parmi ses clients de grands comptes comme Groupon, Pinterest, MTV, IBM, L’équipe…

WordPress ou Webflow ?

CosaVostra est historiquement une agence WordPress, dont nous sommes des experts avec un pôle dédié composé de 5 développeurs chevronnés à temps plein, dirigé par notre Head of WordPress, Emilien.

Webflow est souvent comparé à WordPress. En réalité, Webflow est juste “plus rapide” sur certains petits/moyens projets pour développer un site que sur WordPress, puisque la brique CMS est simple à mettre en œuvre avec une interface visuelle pour “attacher” les collections webflow à un markup.