L’édition visuelle arrive sur le CMS sans tête

Il y a quelques années, mon amie Maria m’a demandé de créer un site Web pour son cabinet d’architecture. Pour des projets comme celui-ci, j’utiliserais normalement un système de gestion de contenu (CMS) sans tête et créerais un frontal personnalisé, mais cette fois, je lui ai conseillé d’utiliser un constructeur de site comme Squarespace ou Wix.

Pourquoi un créateur de site ? Parce que Maria est une personne très visuelle et créative et je savais qu’elle voudrait que tout soit parfait. Elle avait besoin de la boucle de rétroaction visuelle d’un constructeur de site et Squarespace et Wix sont deux des offres les plus importantes dans l’espace d’édition visuelle.

D’après mon expérience, les créateurs de contenu comme Maria sont beaucoup plus productifs lorsqu’ils peuvent voir leurs modifications reflétées sur leur site dans un aperçu en direct. Le problème est que l’édition visuelle n’a traditionnellement été prise en charge que par les constructeurs de sites, et ils sont souvent des variétés de code « faible » ou « sans code ». L’édition visuelle n’a tout simplement pas été le genre de chose que vous voyez sur une pile plus moderne, comme un CMS sans tête.

Heureusement, cette expérience d’édition visuelle commence à faire son chemin vers les CMS sans tête ! Et c’est ce que je souhaite faire dans ce bref article : vous présenter les CMS headless qui proposent actuellement des fonctionnalités d’édition visuelle.

Mais d’abord…

Qu’est-ce que l’édition visuelle, encore ?

L’édition visuelle existe depuis les débuts du Web. Quiconque a utilisé Dreamweaver dans le passé a probablement expérimenté une première version de l’édition visuelle.

L’édition visuelle consiste à voir un aperçu en direct de votre site pendant que vous modifiez le contenu. Il donne au créateur de contenu une boucle de rétroaction visuelle instantanée et montre ses modifications dans le contexte de son site.

Il existe deux caractéristiques déterminantes de l’édition visuelle :

• Un aperçu en direct pour que les créateurs de contenu puissent voir leurs modifications reflétées dans le contexte de leur site.
• Éléments de page cliquables dans l’aperçu afin que les créateurs de contenu puissent facilement naviguer vers les bons champs de formulaire.

L’édition visuelle est la norme parmi les constructeurs de sites sans code et à faible code comme Squarespace, Wix et Webflow. Mais ces outils ne sont généralement pas utilisés par les développeurs qui souhaitent contrôler leur pile technologique. Heureusement, nous voyons maintenant l’édition visuelle arriver sur les CMS sans tête.

Édition visuelle dans un CMS sans tête

Un CMS sans tête traite votre contenu plus comme une base de données découplée du rendu de votre site.

Jusqu’à récemment, les CMS sans tête comportaient un gros compromis : les créateurs de contenu sont déconnectés du front-end, ce qui rend difficile la prévisualisation de leur site. Ils ne peuvent pas voir les mises à jour au fur et à mesure qu’ils les font.

Une interface CMS sans tête typique fournit simplement des champs de formulaire pour modifier le contenu. Cela manque le contexte de ce à quoi ressemble le contenu sur la page. Cette UX peut sembler archaïque pour les personnes familiarisées avec les expériences d’édition en temps réel dans des outils tels que Google Docs, Wix, Webflow ou Notion.

Heureusement, une nouvelle vague de CMS sans tête offre une édition visuelle d’une manière qui a du sens pour les développeurs. C’est une excellente nouvelle pour tous ceux qui souhaitent donner à leur équipe une expérience d’édition similaire à Wix ou Squarespace, mais en plus de leur propre pile open source.

Comparons l’expérience d’édition CMS avec et sans édition visuelle sur la page d’accueil de Roev.com.

Vous pouvez voir que les commentaires instantanés de l’aperçu en direct combinés à la possibilité de cliquer sur des éléments de la page rendent l’expérience d’édition visuelle beaucoup plus intuitive. Les améliorations sont encore plus spectaculaires lorsque le contenu est imbriqué profondément dans les sections de la page, ce qui le rend difficile à localiser sans cliquer sur les éléments de la page.

CMS sans tête prenant en charge l’édition visuelle

De nombreuses offres CMS sans tête populaires prennent actuellement en charge l’édition visuelle. Examinons quelques-unes des options les plus populaires.

Tina

TinaCMS a été conçu dès le départ pour l’édition visuelle, mais offre également un mode « d’édition de base » similaire aux CMS traditionnels. Tina dispose d’une interface d’administration open source et d’une API de contenu sans tête qui reste synchronisée avec les fichiers de votre référentiel Git (tels que Markdown et JSON).

Bloc d’histoire

Bloc d’histoire est un CMS sans tête qui a été l’un des premiers pionniers de l’édition visuelle. Storyblok stocke votre contenu dans sa base de données et le rend disponible via les API REST et GraphQL.

Sanity.io (via leur plug-in iframe)

Santé mentale est un CMS headless traditionnel avec une interface d’administration open-source. Il prend en charge l’édition visuelle grâce à l’utilisation de son Plug-in Iframe Pane. Sanity stocke votre contenu dans sa base de données et le rend disponible via l’API.

Constructeur.io

Constructeur.io est un CMS sans tête à code source fermé, axé sur l’édition visuelle, qui stocke le contenu dans la base de données de Builder.io et le rend disponible via l’API.

Stackbit

Stackbit est une interface d’édition à source fermée conçue pour être complémentaire aux autres CMS sans tête. Avec Stackbit, vous pouvez utiliser un autre CMS sans tête pour stocker votre contenu et modifier visuellement ce contenu avec Stackbit.

Vercel

Bien qu’il ne s’agisse pas d’un CMS, les aperçus de déploiement de Vercel peuvent afficher un bouton modifier dans la barre d’outils. Ce bouton de modification recouvre une interface utilisateur qui aide les créateurs de contenu à naviguer rapidement vers l’emplacement correct dans le CMS.

Conclusion

Maintenant que les développeurs ajoutent des modifications visuelles à leurs sites, je vois des créateurs de contenu comme Maria devenir super productifs sur une pile axée sur les développeurs. Les équipes qui mettaient du temps à mettre à jour le contenu avant de passer à l’édition visuelle sont désormais plus actives et efficaces.

Il existe de nombreuses options intéressantes pour créer des expériences d’édition visuelle sans compromettre le contrôle et l’extensibilité des développeurs. La promesse de Dreamweaver est enfin là !

(jj, a)