Webflow ― Un bon outil No Code ?
En tant qu’ancienne Développeuse Front-End et nouvelle UX/UI, je suis arrivée devant Webflow avec beaucoup d’appréhensions. Je m’attendais à un outil moins performant que ce que je pourrais faire moi-même, mais plus rapide.
Je m’attendais à un Wix sur lequel j’aurai sans doute envie de m’arracher les cheveux, puisque pas forcément conçu pour une ancienne dév’ et surtout dans lequel j’aurai beaucoup de difficultés à reproduire à l’identique mon design créé dans Adobe XD.
La vérité, c’est que j’ai été surprise, et en bien.
Webflow est très complet, c’est un fait : j’y ai retrouvé tout ce qui faisait mon amour de l’intégration, en passant du flex au display: none; et autres joyeusetés. La possibilité de pouvoir choisir le type de valeur (em, %, px, vh, vw…) a été également un grand soulagement !
S’il y a des choses que je ne suis pas parvenue à faire, c’est uniquement parce que j’ai refusé de payer pour ce service (je suis en recherche d’alternance donc étudiante, et je voulais d’abord me faire un peu la main dessus avant d’envisager d’y laisser ma carte bleue 😉).
En dehors de ça, en toute honnêteté… Webflow est génial. Et promis, je pèse mes mots.
Comment tu t’y es mise ?
Après avoir finalisé la première version de mon hero (l’en-tête de mon portfolio) samedi dans la jorunée, c’est le cœur battant à tout rompre que je me suis rendue sur Webflow le soir-même (la peur au ventre, comme je vous le disais plus tôt).
« Je vais juste essayer de le prendre un peu en main avant de passer le reste de la soirée sur Borderlands 3 ou devant une série coréenne sur Netflix », me dis-je naïvement.
Il est 23h lorsque j’envoie à Romain Dao, sur le slack The Cacatoès Theory, le message suivant :
Je n’ai pas encore fait grand-chose, mais la gestion des hovers me fascine. La possibilité de créer mes propres classes et de les modifier comme je le souhaite m’amuse beaucoup !
Seule chose que je regrette : lorsque j’ajoute une classe à une classe existante (un modifier, pour moi, en bonne BEMeuse), je ne parviens plus à modifier la classe de base. (Exemple : Si je veux modifier bg alors que j’ai la classe bg — yellow sur mon élément, c’est bg — yellow uniquement que je modifie. Il faudrait que je modifie bg sur un élément qui n’a que bg pour que ça l’applique à tous les bg.) Cela dit, n’ayant expérimenté Webflow qu’une unique fois, il se peut que je n’ai pas trouvé comment faire et que la possibilité existe. 😉
(Petite édition : après avoir discuté avec Enzo Zaccaro, il m’a montré comment modifier directement la classe que je souhaitais. Je retire donc ce que j’ai dit au-dessus, c’est totalement faisable ! 😉)
Au final, les seules raisons qui me font arrêter de travailler samedi soir, ce sont l’heure et la fatigue !
Je passe le dimanche à hésiter entre continuer de m’amuser sur Webflow, finaliser mon design (pour pouvoir continuer de m’amuser sur Webflow lundi) et profiter de mon week-end (ce qu’il en reste).
La vraie avancée, c’est vendredi (21 août 2020) !
Ma semaine a été rythmée entre rendez-vous professionnels et personnels et la finalisation de mon design. J’ai été plus lente que ce que je pensais, mais j’ai préféré prendre le temps !
C’est donc vendredi 21 août que je termine le design sur Adobe XD et que je me mets, dans la foulée, sur Webflow. Il s’est presque passé une semaine depuis que j’y ai touché… Et je trépigne d’impatience !
Je n’ai pas fait attention à mon timing, mais je sais qu’une unique après-midi m’a permis de terminer mon hero (refait), la mise en place de mes projets, de ma partie contact et de faire le responsive.
En gros, une après-midi pour… Tout faire.
Certes, je triche : j’ai de très bonnes notions d’intégration qui m’aident à m’en sortir relativement facilement sur Webflow, puisqu’il n’y a rien que je ne connaisse pas dans le positionnement, les colonnes, le flex…
Ce qui m’a posé problème :
Il n’y a que deux choses qui m’ont bloqué (qui sont liées, et qui sont accessibles en payant 😉) :
- Les before et after : pour mes formes sous les mockups, je voulais utiliser les pseudo-éléments before et after. Dans la version gratuite, le custom code n’est pas accessible, et les pseudos-éléments doivent être créés avec du custom code (si j’ai bien compris ce que j’ai lu sur le forum de Webflow😂).
- La modification des SVG au hover : pour ma partie contact, je voulais que mes réseaux sociaux soient animés. Ils le sont et c’est génial ! Mais j’aurais souhaité “fill” mes SVG pour que les contours se remplissent au hover. Là encore, c’est le custom code qui le permet.
Dernier point : le custom domain. J’aurais préféré (puisque je le paie déjà) mettre mon travail sur Webflow sur mon site personnel… Mais c’est une fonctionnalité payante.
Je comprends tout à fait que les personnes ayant travaillé sur Webflow (et travaillant encore) aient besoin de vivre et qu’il soit normal que ce soit payant. 😉
Ce qui me fait arriver au point suivant…
Une très grande liberté gratuite !
Je vous l’ai dit, je suis bluffée. Les possibilités (sans payer) sont très très larges et permettent de faire déjà énormément de choses. Je pense notamment aux options de page :
J’ai pu modifier la manière dont mon site serait répertorié sur Google. J’ai pu lui ajouter des métas données qui seront affichées lorsqu’il sera partagé sur les réseaux sociaux. Je ne m’attendais pas à avoir accès à tout ça quand j’ai commencé sur Webflow !
La gestion des espaces est géniale aussi. J’ai moins compris le positionnement lorsque l’élément est en absolute ou en relative, mais je n’y ai pas passé énormément de temps.
Le plus fort de Webflow (selon moi), ce sont ses possibilités d’animations (sans parler du smooth scroll automatique lors du placement d’une ancre).
Je ne sais pas si j’ai fait ça correctement, mais en tout cas j’ai pu créer plein d’animations différentes au hover. On peut aussi créer des animations au tap sur mobile, des scroll into view (que j’essaie de dompter pour faire changer le background de mon menu lorsque j’arrive sur une section colorée. 😂) mais également lors du mouvement de la souris dans la page, quand la page scroll, quand la page charge…
Et je ne parle même pas du responsive ! 😱 En tant qu’ancienne Développeuse Front-End, j’étais très mitigée sur le No Code (ça menaçait mon métier, vous voyez…). Aujourd’hui, je me demande comment j’ai fait pour m’en passer. 😂 Le responsive est incroyablement facile. Les éléments réagissent bien, et la modification des classes n’a lieu que dans le breakpoint sélectionné.
La seule chose qui m’a posé problème (mais sans doute parce que je n’ai pas pris le temps de chercher, encore une fois…), c’est que j’aurais aimé que ma col-6 devienne une col-12 (100%) en tablette. Je n’ai toujours pas réussi, et j’ai mis ça sur le compte du custom code. 😉
Si je devais recommander Webflow…
Je le ferais sans hésiter, clairement !
Webflow risque de me faire perdre énormément de temps, puisque j’ai envie de créer un site pour n’importe quel concept qui me passe par la tête et que j’ai designé sur XD ! 😂 Utiliser Webflow est tellement agréable et fun que je n’attends que l’excuse parfaite pour y retourner… 😉 Bien sûr, mon expérience est facilitée par mon expérience en intégration. 😉
Webflow a changé ma vision du No Code et m’a donné envie de réitérer l’expérience !
Si vous souhaitez voir de vos propres yeux le résultat de mon dur labeur (grandement facilité par Webflow), c’est ici que ça se passe : https://margaux-membre.webflow.io/
Cet article a été rédigé après une unique utilisation de Webflow (qui a duré plusieurs heures, mais quand même, il n’y a eu qu’une production). Je ne suis pas une experte sur le sujet, n’accordez donc pas trop de valeurs à mes mots (mais croyez quand même en la véracité de ma passion).
