Webflow contre Bubble : 7 leçons que nous avons apprises en construisant notre site web sur Bubble

Continuez à lire pour en savoir plus.

Il y a quelques années, Bubble a lancé son nouveau moteur réactif au moment où nous avons entrepris un rebranding complet. Nous avons donc décidé de prendre le risque de construire notre nouveau site web avec Bubble plutôt qu'avec Webflow.

C'était une décision difficile. Bien que Bubble.io soit le langage de programmation visuel de choix pour les applications web, les applications web ne sont pas équivalentes aux sites web. Malheureusement, c'est sur les sites web que Bubble semble avoir des performances inférieures. Surtout par rapport à Webflow, qui devient rapidement la référence en matière de créateurs de sites web.

Cet article de Tinkso vous aidera à décider quel outil utiliser. En tant qu'agence no-code et partenaire Bubble Gold, nous sommes bien informés sur les avantages et les inconvénients de chaque outil.

Résumé :

Utilisez Bubble pour les sites web si vous prévoyez également de créer une application et avez besoin d'utiliser ses données.

Utilisez Webflow pour des sites web autonomes en raison de sa rapidité, de son design et de ses fonctionnalités CMS intégrées.

Webflow est moins cher, mais vous obtenez moins d'extensibilité en retour.

Qu'est-ce que Webflow ?

Webflow est une plateforme de conception et d'hébergement web qui inclut un CMS intégré. Avant tout, les créateurs choisissent Webflow en raison de la facilité avec laquelle ils peuvent réaliser de magnifiques designs. La granularité que vous obtenez avec cet outil est souvent comparée à celle des logiciels de design graphique. De ce fait, il commence à rivaliser avec des outils comme WordPress et Squarespace en tant que constructeur de sites web incontournable.

Les avantages de Webflow

Webflow est plus facile à utiliser que Bubble pour les débutants.

CMS intégré et fonctionnalités SEO automatiques.

Contrôle extrême et flexibilité dans la conception. Créez des animations avancées en seulement quelques clics.

Quels sont les inconvénients de Webflow ?

Dispose de peu d'intégrations natives, ce qui oblige les utilisateurs à injecter du code personnalisé.

Webflow n'est pas adapté à la création d'applications web complètes comme l'est Bubble.

Qu'est-ce que Bubble ?

Bubble est une plateforme de développement d'applications sans code qui permet aux créateurs de concevoir des applications web hautement personnalisées. Ceux qui connaissent déjà les principes de conception d'applications trouveront que les fonctionnalités de glisser-déposer de Bubble sont un jeu d'enfant par rapport à l'écriture et au déploiement de leur propre code.

Pourquoi nous aimons Bubble

Flexibilité, nous pouvons facilement créer tout, d'un prototype rapide à une plateforme B2B SaaS à grande échelle en utilisant Bubble.

Bubble est évolutif grâce à ses outils de gestion de base de données sophistiqués.

Créez des flux de travail et des logiques complexes sans écrire une seule ligne de code.

Quels sont les inconvénients de Bubble ?

La performance peut être un frein pour des applications plus complexes.

Bubble n'est pas automatiquement conforme aux normes de l'industrie telles que HIPAA, ce qui oblige certains utilisateurs avancés (comme les prestataires de services médicaux) à investir davantage dans la sécurité et les tests.

Les niveaux de tarification de Bubble augmentent rapidement et pourraient exclure certains utilisateurs.

Webflow vs. Bubble : Principales différences

Il y a quelques années, nous avons pris la décision consciente de choisir Bubble plutôt que Webflow pour reconstruire notre site web. Nous ne prévoyons pas de changement dans un avenir proche, mais si nous devions faire un nouveau choix, voici les critères que nous prendrions en compte. Voici comment Webflow et Bubble se comparent.

7 enseignements tirés de la création de notre site web sur Bubble plutôt que sur Webflow

Vous venez d'obtenir un aperçu général des éléments à considérer lors du choix entre Webflow et Bubble. Cela dit, nous avons examiné plus en détail bon nombre de nos choix. Voici quelques-unes de nos observations :

💰 Le prix est juste

Voici les tarifs sur le site de Webflow, à partir de juillet 2024 :

En revanche, voici les tarifs de Bubble :

Après avoir examiné cela, nous pouvons constater que Webflow est définitivement moins cher que Bubble, surtout si l'on considère le coût supplémentaire du CMS Headless. Mais encore une fois, Bubble est principalement un constructeur d'applications et, en tant que tel, il offre un excellent rapport qualité-prix. L'utiliser 'uniquement' pour créer un site web, c'est comme utiliser votre smartphone uniquement pour passer des appels.

Ainsi, bien que Webflow soit excellent pour les animations et en tant que CMS, il offre beaucoup moins que Bubble. Vous ne pouvez pas créer une application à grande échelle avec Webflow. C'est pourquoi il est moins cher. Comme nous l'avons noté précédemment, Webflow nécessite des injections de code personnalisé pour réaliser des fonctionnalités que Bubble propose en standard. Le code personnalisé signifie plus d'heures de développement. Cela vous coûtera probablement plus cher que même les 349 $ par mois pour le plan le plus cher de Bubble.

Nous pensons même qu'il est judicieux d'utiliser Bubble pour votre site web si vous êtes déjà en train de créer une application sur Bubble ou si vous devez afficher des données de votre application sur votre page d'accueil.

Quand Webflow en vaut-il la peine ?

Si vous n'avez pas besoin d'utiliser beaucoup de données dynamiques sur votre site web ou votre page d'atterrissage, ou si vous ne construisez pas une application sur Bubble, il y a peu de raisons d'utiliser Bubble pour créer votre site web. Dans ce cas, Webflow est un meilleur choix avec un CMS plus performant.

🖼️ Lequel est le plus facile à utiliser, Webflow ou Bubble ?

Dans l'ensemble, concevoir votre page dans Webflow est plus facile qu'avec Bubble. Webflow propose davantage d'éléments et de mises en page prêts à l'emploi adaptés au design de sites web. De plus, l'éditeur est tout simplement mieux conçu.

L'éditeur UX de Weblow est supérieur à Bubble

En ce qui concerne des éléments tels que les animations, Webflow a un avantage clair. Nous avons expérimenté avec la GreenSock Animation Platform (GSAP) depuis un certain temps et vous pouvez la voir en action sur check.tinkso.com. Elle est excellente pour l'animation web.

Webflow utilise sa propre bibliothèque d'animations et l'interface qu'ils fournissent rend certainement l'expérience sans code meilleure. Cependant, GSAP est extrêmement polyvalent, et apprendre les bases ne sera certainement pas une perte de temps. Nous avions besoin d'animations web similaires ou meilleures qu'avec Webflow, et l'éditeur réactif a indéniablement facilité l'implémentation.

[Image: Image]

Les animations GSAP, bien que pas très simples, sont possibles avec Bubble.

📱Réactivité mobile

L'éditeur réactif de Bubble, bien qu'il lui manque encore certaines fonctionnalités cruciales, a été une bénédiction en matière de design réactif. Nous avons terminé de construire notre framework openBuild peu après la création de notre site web et cela se passe très bien jusqu'à présent. Surtout maintenant que nous avons plus d'options conditionnelles pour distinguer entre les portées d'affichage (marges, tailles de police, largeur et hauteur).

Cependant, Webflow dispose toujours d'une meilleure interface pour le design réactif et utilise de manière plus intelligente les requêtes média par viewport. De cette façon, vous pouvez concevoir de manière beaucoup plus granulaire pour différents écrans.

✍️Choisir un CMS

Les capacités de CMS de Bubble sont presque inexistantes. C'est bien connu. Nous avons opté pour un CMS headless et en avons essayé plusieurs. Contentful, Preppr, Ghost et Strapi figurent parmi eux, mais beaucoup avaient une structure d'API assez complexe - pas très compatible avec la manière dont nous l'utilisons pour afficher des données dans les éléments de Bubble. Nous avons choisi Storyblok avec sa structure d'API conviviale, son interface facile à utiliser, ses options de localisation, son optimisation d'images et son prix abordable. C'est un grand pas en avant par rapport à Bubble, se charge super rapidement et offre même plus d'options que la solution native de Webflow.

L'inconvénient de l'utilisation d'un CMS sans tête est que vous devez travailler pour garantir que vos pages et votre contenu sont optimisés pour les moteurs de recherche. De plus, vous pourriez avoir besoin d'éléments HTML pour afficher du texte enrichi, ce qui nécessite à son tour un peu de CSS personnalisé pour s'assurer que votre contenu est esthétiquement agréable.

Storyblok propose un aperçu de l'histoire sur la page Bubble et offre tout ce dont vous avez besoin dans un CMS.

👑 Est-ce que Bubble est meilleur que Webflow pour le SEO ?

Webflow est généralement meilleur pour le SEO – il est généralement plus rapide et dispose de fonctionnalités SEO prêtes à l'emploi. Pendant ce temps, il y a quelques petits mais importants détails à couvrir en ce qui concerne le SEO dans Bubble. Avec un CMS headless, vous devez vous assurer que le contenu dynamique et les pages sont servis avec les bonnes métadonnées SEO. Cela nécessite soit un javascript personnalisé, soit vous devez stocker certaines de vos métadonnées de contenu dans la base de données Bubble afin de pouvoir définir les bonnes balises de métadonnées sur vos pages dynamiques.

Un autre facteur important est d'utiliser des éléments de lien au lieu de boutons ou de groupes pour la navigation. Les liens permettent à Google de comprendre la structure de votre site web, mais avec Bubble, nous avons l'habitude d'utiliser des groupes et des éléments de bouton qui ne contiennent aucune information a href. Cela perturbe Google et empêche certaines pages d'être indexées. Ne pas utiliser d'éléments de lien peut causer de gros maux de tête !

⚡Performance sur Bubble vs. Webflow

L'éditeur réactif de Bubble est devenu beaucoup plus convivial en matière de rendu de page car il utilise des flexbox et des grilles CSS pour réduire la taille du HTML. Cependant, il reste encore du CSS en ligne qui alourdit la page. De plus, le processus de rendu du site web ou de l'application côté client prend encore un temps considérable. Cependant, en comparant Webflow et Bubble via Google Lighthouse, il apparaît qu'en termes de performance, Bubble est en réalité très similaire à Webflow.

Bubble.io vs webflow.com performance web

🌍 Multilingue & Localisation

Tant Bubble que Webflow disposent d'intégrations avec Weglot. Bien que l'éditeur réactif de Bubble représente un grand pas en avant pour la mise en œuvre de Weglot, nous l'avons trouvé encombrant et, dans de nombreux cas, nécessitant un support personnalisé de l'équipe Weglot. Pour Bubble, nous avons donc opté pour la fonctionnalité native 'apptext' qui fonctionne très bien.

Nous exportons le fichier de langue dans une feuille Google et ensuite nous exécutons un scénario Make.com pour traduire en plusieurs langues en utilisant DeepL.

Si vous utilisez Storyblok, leur CMS offre d'excellentes options de localisation, rendant notre contenu dynamique également facile à traduire.

Le Verdict Final

Après toutes ces discussions, examinons les mises en œuvre concrètes de Webflow et de Bubble.

Quand utiliser Webflow plutôt que Bubble : une étude de cas

S'il n'était pas clair jusqu'à présent, Webflow est l'option la plus adaptée pour un site web autonome. Le type de site qui nécessite seulement quelques pages d'atterrissage et un blog. Rien de compliqué.

Quand utiliser Bubble plutôt que Webflow : une étude de cas

Nous avons beaucoup parlé de la façon dont Bubble devrait être votre premier choix pour créer des applications web. À quoi cela ressemble-t-il en pratique ?

Entrez Steelcase, un leader dans la conception de mobilier et d'espaces de travail. Dans l'espoir d'améliorer leur collaboration avec leurs clients pour soutenir de nouvelles méthodologies de conception, Steelcase nous a contactés pour faciliter le processus.

Nous avons rapidement compris que le principal défi de Steelcase était qu'ils ne disposaient pas d'outils adéquats pour les aider à soutenir leurs clients tout au long de leur processus de conception. Naturellement, cela nécessitait une application web sur mesure qui leur permettrait de créer, maintenir et communiquer des solutions en harmonie avec leurs clients.

Fort de notre expérience avec Bubble et la création d'applications sans code, la solution était évidente. Nous avons réalisé un sprint de conception rapide de 5 jours pour prototyper un outil de collaboration. Rapidement, Steelcase a pu proposer des sites web spécialisés à ses clients et mieux comprendre leurs besoins pour une application de collaboration complète.

Sans l'interface dynamique de glisser-déposer de Bubble, ses nombreuses intégrations et sa flexibilité, il aurait été difficile de réaliser ce projet aussi efficacement. Le codage aurait pris beaucoup plus de temps, et Webflow est complètement hors de question. Il ne disposait d'aucune des intégrations de création d'applications dont nous avions besoin. Par exemple, Webflow ne peut pas intégrer les données d'application comme le fait Bubble.

Comment construire votre application web sur Bubble

Comme nous l'avons mentionné dans notre analyse, la courbe d'apprentissage avec Bubble est raide. Bien que nous ayons produit un prototype fonctionnel en utilisant Bubble en 5 jours, un novice complet ne peut pas créer des applications web sur Bubble aussi rapidement qu'un professionnel.

Si vous avez déjà des idées sur ce que vous souhaitez construire, mais que vous n'êtes pas sûr de la manière de le réaliser, contactez-nous pour obtenir des éclaircissements. Chez Tinkso, nous sommes partenaires Gold de Bubble, ce qui signifie que Bubble a vérifié nos compétences de pointe dans l'utilisation de leurs outils.