Découverte d'un nouveau Builder de Site Internet : Webstudio

Introduction à Webstudio, le Nouveau concurrent de Webflow

Bonjour à tous ! Si vous êtes passionné par la création de site Internet ou encore si vous cherchez une façon de créer un site rapidement et visuellement beau, vous allez adorer cet article !

Je m'appelle Rémy et je suis créateur de site Internet, par mon entreprise https://wamimy.fr. 

Depuis des années je concois des sites Internets, et j'accorde une grande importance à la liberté de design, au coût total ainsi qu'au performance pour enfin et surtout regarder le Référencement Naturel SEO. 
Au fil des ans, j'ai testé des centaines de Builders, et ils ont tous eu des qualité et des défauts. Et je n'ai jamais réussi à trouver un builder qui a la facilité d'utilisation de Wordpress, les fonctionnalités avancées de design de Webflow, et la possibilité de créer des choses sur mesure comme un site Internet avec des fonctionnalités avancées, tout en ayant un coût peu élevé.

Mais aujourd'hui je vous présente : WebStudio ! Et je pense qu'il va faire parler beaucoup de lui ! Créé à partir de 2022, il n'a pas à rougir car il intégre de grande fonctionnalités et surtout de très grandes sont encore à venir !

Webstudio est OPEN SOURCE ! (Tout comme Wordpress). Cela veut dire que plus il va faire parler de lui, plus de fonctionnalitées vont être développé par des développeurs sympathiques ! Ce qui veut aussi dire que Webstudio est logiquement GRATUIT. 

Dans un premier temps je vais vous présenter les différentes fonctionnalitées de Webstudio ainsi que ses défauts (car oui, malgré tout il y en a quelqu'un). Enfin je vous parlerai de son prix et de mon avis.

Une interface simple et concise

La page principale

Comme vous pouvez le voir, la page principale pour gérer les différents site Internets ne paie pas de mine pour l'instant. Mais elle a le mérite d'exister et vous laisse la possibilité de choisir un template pré-configuré pour créer un site Internet Rapidement. Cependant, il est vrai que le principal inconvénient de Webstudio est là : Il existe peu de Template prêts à l'emploi. Mais ce n'est pas grave, car vous disposez malgré tout de composant prêt à l'emploi lorsque vous créez un site Internet. Et si vous êtes comme moi, je préfère personnaliser mon propre design sur mesure pour mon Site Internet ou mon client.

Le builder de Site

Si vous connaissez Webflow alors vous ne serez pas perdu avec Webstudio. Pour la petite histoire, c'est un ancien employé de Webflow qui a créé Webstudio pour notre bon plaisir !

Il intègre la quasi totalité des fonctionnalités de design de Webflow (et même plus ) :

Les TOKENS par Webstudio

Ce qui est intéressant avec Webstudio ce sont les Tokens. Pour expliquer voici un exemple. Imagine que tu dessines :

Webflow te donne une boîte de crayons de couleurs avec des couleurs fixes. Webstudio te donne les trois couleurs primaires et tu peux les mélanger pour créer toutes les couleurs que tu veux !

Les "tokens" dans Webstudio sont comme ces couleurs primaires. Ce sont des noms que tu donnes aux couleurs, aux tailles de texte, aux ombres etc.  Par exemple, au lieu d'écrire "bleu foncé" partout, tu écris "couleur-principale".

C'est plus facile parce que : Si tu veux changer de couleur principale, tu changes juste le mélange une fois.

Alors, où est la différence avec les tokens de Webstudio ?

Flexibilité et modularité : Dans Webflow, les variables globales sont souvent limitées à des valeurs simples comme les couleurs ou les tailles de police. Les tokens de Webstudio sont beaucoup plus flexibles.Tu peux créer des tokens pour des ensembles de propriétés, comme des ombres, des bordures, des espacements, etc. Tu peux même combiner des tokens pour créer des styles plus complexes. C'est comme avoir des "super-variables" !

Organisation et gestion : Webflow ne propose pas de système d'organisation avancé pour les variables globales. Webstudio te permet d'organiser tes tokens en catégories, de les nommer de manière claire, et de créer une véritable "bibliothèque" de styles réutilisables. Cela facilite la maintenance et l'évolution de ton design.

Intégration avec le design : Webstudio est conçu pour une intégration étroite avec des outils de design comme Figma. Tu peux importer tes styles directement depuis Figma et les convertir en tokens, ce qui garantit une cohérence parfaite entre ton design et ton code.

Point Noir sur les Animations

En revanche une des choses que Webstudio n'intègre pas nativement ce sont les animations. Mais rassurez-vous, le marketplace de Webstudio vous permet quand même de créer rapidement des animations avec Ani-Motion (la facon la plus simple et rapide) mais aussi GSAP. Ma seule inquiétude à ce jour est que GSAP a été racheté par Webflow et je me demande si à l'avenir son écosystème risque de ne pas se fermer... En tout cas ce qui est sûr c'est qu'une solution alternative seras toujours là.
A savoir tout de même que les animations natives sont sur la roadmap des développeurs de Webstudio pour début 2025  ! (Donc à l'heure de cet article, c'est seulement pour quelques mois). Et si vous êtes comme moi, cela ne fait pas de mal de maîtriser GSAP afin de réaliser des animations plus complexes et poussées !

Le Marketplace de Webstudio

Comme je viens de vous en parler, la section, Marketplace intègre les bibliothèques pour créer des animations avec Webstudio. Vous avez aussi la possibilité d'intégrer des Sliders (ou Swipers ou des carrousels), à votre site Internet ainsi qu'une bibliotheque de nombreux composants avec la bibliotheque CIQ Libraries-Sections.
Enfin, mais je n'ai pas encore testé, vous avez la possibilité de faire un site avec de l'Authentification (login, inscription...) en utilisant Firebased ou Supabased.

Les intégrations

La grande force de Webstudio est qu'il vous permet de créer un site Headless. Si vous n'êtes pas familier avec ce système, voici la définition de Gemini :

Avant (sans "headless") : Imagine une boutique avec un seul présentoir.  Tous les vêtements sont présentés de la même manière, peu importe le client. Avec "headless" : Imagine que la boutique a un stock de vêtements (le contenu) et plusieurs façons de les présenter : Site web : Les vêtements sont présentés avec des photos et des descriptions détaillées. Application mobile : L'application propose des filtres pour trouver rapidement des articles et permet de les acheter en un clic. Borne interactive en magasin : La borne affiche des looks et des conseils personnalisés en fonction des préférences du client.

Gemini 2024

En bref le headless vous permet de séparer votre contenu de votre site internet. Il permet aussi des chargements plus rapide pour votre site Internet (ce qui est bon pour le référencement) ainsi qu'une plus grande modularité. Cependant aujourd'hui tous les système headless que j'ai testé ont toujours demandé beaucoup trop d'effort de mise en place, surtout pour des personnes qui n'y connaissent rien.

Mais avec Webstudio cela devient très simple d'intégrer un CMS Headless. Imaginez vous centraliser toutes les informations de votre entreprise sur Airtable ou encore Notion. Vous pouvez créer des base de données spécifiques à votre site Internet, afin que son contenu se retrouve directement sur votre site.
Ou encore, imaginez vous souhaiter partir de Wordpress (car trop d'embrouilles en ce moment...) ou pour avoir plus de flexibilité dans votre design et de meilleures performance. C'est très simple, il vous suffit de connecter Wordpress à Webstudio et tout votre contenu déjà créé sera affiché sur Webstudio ! C'est très simple à faire, il suffit simplement de regarder les tutoriels de Webstudio et en quelques minutes tout est mis en place !

Finie la galère des sites Wordpress qui crashent !

Comme vous le voyez sur l'image vous pouvez aussi connecter Webstudio à des CMS headless ( je vous conseille Payload, mais cette méthode demande plus de configuration et je déconseille aux novices. Pour vous faire une idée des différentes connexion à Webstudio voici une page spéciale créée par les devs : https://webstudio.is/tools/headless-cms-finder

Le référencement Naturel dans Webstudio (SEO)

Le chargement ULTRA-RAPIDE de votre site Internet grâce à l'hébergement

Avec Webstudio vous avez la possibilité d'héberger votre site Internet. Ce qui est bien c'est que l'hébergement de Webstudio utilise un CDN ultra rapide, ce qui vous permettra d'avoir des temps de chargement au top. De plus, les sites sont basés sur REMIX (un cousin de NextJS), qui a l'avantage d'être un peu plus simple que NextJS et il est axé sur la vitesse de chargement des pages. Ce qui est incroyable c'est qu'il est très facile d'avoir avec Webstudio, une vitesse de chargement sur PageSpeed de Google qui atteint le score de 100 !

Sur cette photo, vous pouvez voir un site que j'ai réalisé avec Webstudio, SANS AUCUNE OPTIMISATION et en utilisant des bibliothèques comme Spliting.JS, GSAP, Ani-Motion... Autant dire que je peux améliorer ce résultat. Avant d'utiliser ces bibliothèques, j'ai obtenu 100 comme score Speed Page de Google.

L'intégration de toutes les balises de référencement SEO

Avec Webstudio vous avez la possibilité de personnaliser toutes les balises META (title, description, Open Graph, Réseaux sociaux etc.)

Ce qui est intéressant aussi, c'est que en connectant votre solution Headless, vous pouvez indiquer quel colonne utiliser pour la meta-title, meta-description...
Vous avez aussi la possibilité de rajouter des textes enrichis dans Webstudio.

SEO et les images dans Webstudio

Un autre bon point, c'est que vos images sont automatiquement converties en .Webp et vous avez la possibilité de rédiger les balises "alt" de vos images.

SON PRIX

Webstudio est OPEN SOURCE, c'est à dire qu'il peut être utilisé et téléchargé par tous. Ce qui est regrettable, c'est que le builder est difficilement hébergeable en Sefl-Host pour le moment. Par contre, vous pouvez utiliser Webstudio GRATUITEMENT, est vous avez la possibilité de télécharger gratuitement votre site Internet. Il vous restera à l'heberger sur Vercel ou Netlify. Cependant la version gratuit vous limite sur les accès Headless API. Pour cette fonctionnalité il faudra payer.

Webstudio à un forfait mensuel de 20€. A ce prix, vous pouvez créer autant de site que vous le souhaitez et héberger autant de site que vous le souhaitez ! Et ça c'est incroyable ! Vous avez aussi la possibilité de payer 1 fois à vie Webstudio pour 999€.

Je sais aussi que la volonté des développeurs et que le prix de Webstudio reste le plus bas possible, mais il est possible que de nouveaux abonnements soient mis en place en 2025 (pour des agences par exemple).

CONCLUSION

Pour conclure, je trouve que Webstudio arrive en véritable concurrent de Webflow. Concernant Wordpress, pour moi je l'ai laché il y a bien longtemps car je le trouve trop instable, trop fatiguant et trop vieux. (Désolé, mais cela reste mon avis).
Avant Webstudio je créais mes sites Internet à la main, mais cela prend beaucoup de temps. Concernant Webflow je ne trouve pas son prix équitable.
Cependant Webstudio est vraiment abordable surtout pour les agences et les freelances.

Il intégre toutes les fonctionnalités de Référencement, De chargement de Site Internet, de Design moderne et de Performance.

En fait, je ne me sens pas bridé par Webstudio.

AUTRES FONCTIONNALITES

Je n'ai pas pu parler de tout, mais Webstudio intègre d'autres fonctionnalités que j'adore comme :
- Le copier/coller depuis Webflow ou Figma

- L'intégration des polices d'écritures natives pour un chargement rapide des pages

- Le chargement des images en lazy et optimisées

- La gestion des animations CSS (comme hover) complexes, intégrer aux variables, permettant de réaliser des animations CSS simplement !

- ....

LA ROADMAP 

Sachez aussi que la Roadmap est prometteuse :

- Intégration des animations natives

- Intégration aux Ecommerces (j'ai hâte !)

- Intégration du multi-équipe (pour travailler en équipe ou avec son client)

Que du bonheur....

Merci de m'avoir lu,

C'était Rémy, votre créateur de site Internet !

Site Officiel de Webstudio : WEBSTUDIO.IS