Sommaire

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.

Pourquoi utiliser Webflow ?

• C’est rapide et convient parfaitement pour les petits et moyens projets web.
• C’est intuitif grâce à son interface fluide et réactive et la gestion responsive. 
• C’est adapté pour le référencement, grâce à l’optimisation des web performances et la génération d’images webp par exemple.
• C’est pratique pour des sessions de co-création entre designers et développeurs.

Les avantages de Webflow

Selon Pierre Stefani, Directeur Technique de Cosa Vostra :

• Un développement “visuel” très facile avec gestion intuitive du responsive
• Des animations Javascript faciles à mettre en place, avec un GUI (à l’instar d’After Effect par exemple)
• Un Code HTML complètement maîtrisé (ce n’est pas un page-builder qui génère un code sale)
• Des pages éditables par client (wording, image) si hébergement chez Webflow
• La personnalisation très poussée du design
• Des webhooks disponibles pour l’intégration d’outil nocode : weglot, make, airtable…

Les inconvénients de Webflow

Selon Pierre Stefani, Directeur Technique de Cosa Vostra :

• Un travail collaboratif compliqué. Un seul développeur à la fois.
• Non présence de git, le développement d’une feature impose de travailler en mode caché dans le cas d’un hotfix.
• Une interface tout de même complexe par moment et des compétences nécessaires en intégration pour obtenir un résultat convenable
• L’hébergement est payant et peut s’avérer relativement cher pour un petit projet.

Agence Webflow

L’approche novatrice de webflow entre webdesign, code de qualité et implémentation facile d’un CMS le rend simple d’utilisation pour les développeurs qui pourront, grâce à lui, concevoir et publier des sites web rapidement. C’est un outil de prédilection pour CosaVostra, cher à nos développeurs frontend spécialistes webflow, comme Alain et Inès qui utilisent Webflow depuis plusieurs années

Vous avez un projet de site internet webflow et souhaitez en découvrir davantage ? 

CosaVostra est là pour vous accompagner à chaque étape. 

Contactez-nous !

CosaVostra est une agence de conseil tech et créative qui accompagne ses clients dans leur stratégie digitale pour qu’ils gagnent en visibilité, en singularité, en efficacité. Nous croyons en un digital intelligent, centré sur l’utilisateur, conçu pour avoir de l’impact. C’est la raison pour laquelle nos meilleurs designeurs travaillent de concert avec nos devs de compétition pour créer les plus beaux sites web et app que vous pourriez imaginer.

On se parle ?

Pour en savoir plus sur l’agence, n’hésitez pas à nous suivre sur LinkedIn, Instagram et Facebook ! Sinon, vous pouvez directement nous contacter !