If your business is considering switching to a headless CMS, you may be concerned about the impact on the content creation process. While the advantages of improved performance, flexibility, and scalability may be a no-brainer to your development team, your content team may be worried about losing the familiar editing experience provided by traditional CMS platforms like WiX or Wordpress. Content authors fear that the transition will result in a less intuitive editing experience, reducing their content creation process to impersonal inputs and selections.
However, there's hope! You can enjoy the benefits of headless architecture while preserving the editing experience content authors love. In this blog post, we'll explore some challenges of headless CMS and offer solutions to keep your content team happy and productive.
Authoring content in a headless landscape
By separating content and presentation, headless architecture allows organizations to manage content independently of its display on their website, mobile app, or other channels. Using a headless CMS, content authors can change content without disrupting the project’s design or structure, and, for the most part, technical and content teams can work independently of each other.
The challenge for content authors
When going headless, the visuals of the project are completely separated from the content authoring interface. While this separation is a key advantage of headless architecture as mentioned above, the default interface can challenge content authors who lack visibility into how their changes will affect the user experience.
For instance, a content author may need to experiment with headline length to ensure it aligns with the blog post layout, or swap out the main logo on their organization's website. However, without a proper preview function to validate these changes within the context of the platform, authors have to rely solely on the default CMS interface, which consists of text inputs and metadata. This can make it challenging for authors to feel confident about publishing their drafted content.
Take a look how a content author might experience editing a website without visual context of the project:
I wouldn’t feel comfortable publishing any new content or changes to existing content without seeing it in live preview first. It’s so much easier to plan the layout and flow of the page when you can see how it all comes together.”
Yena Lee, CMS Author, Rangle.io
Fortunately, there are solutions to address these challenges and make the transition to a headless CMS easier for content creators. One of the most effective solutions is the use of live preview functionality.
Live preview: A content author's best friend
With that said, let’s talk about how live preview functionality kicks these challenges to the curb.
In a nutshell, live preview levels up the editorial experience by enabling authors to view their edits in real time within the visual context of the project. Not only can authors breathe a little easier with the opportunity to catch and fix any front-end mistakes before publishing, but live preview helps make sure published content is accurate and high-quality. Without a doubt, including this functionality is a big deal for authors and essential to the headless CMS experience. We hear the same from our clients!
We absolutely need live text preview while making edits! Anything less would be moving backwards.”
Content Author, Rangle Client
Now that we understand the benefits of live preview, let's explore how to integrate this functionality into a headless CMS platform.
Integrating live preview
The specific tools and approaches available for integrating live preview will depend on the headless CMS platform being used and the project's requirements. The best-case scenario is that your organization's CMS has native preview functionality or there's an available add-on. If a third-party tool is required instead, it just may result in a less efficient workflow for authors or provide an inconsistent previewing experience.
Sanity.io, for example, is a highly customizable headless CMS with live preview functionality that bridges the gap between the content and visual layers. We use Sanity at Rangle (we wrote this blog with it!) and here's why we like it so far:
- It's native: Sanity's preview feature is built-in and seamlessly integrated with the CMS interface through the use of the iframe pane plugin, which is also developed by the Sanity team.
- Real-time editing: Our content authors can preview their real-time drafted changes in the Sanity interface and validate exactly how they will affect the front-end before publishing.
- Split pane view: The plugin adds a "split-view" editing pane option, which enables our authors to view the editing interface on one side while simultaneously seeing a live preview of the site (via iframe) on the other. This is a game changer!
Take a look at how we used the split-pane feature to validate the look and feel of this post before we clicked “publish.”
If you're interested in exploring Sanity.io's live preview functionality, we recommend their documentation about various approaches.
By choosing a headless CMS platform like Sanity that offers native live preview functionality, content creators can confidently produce high-quality content within a headless CMS environment.
Do you need help figuring out how to get live preview up and running on your site? Give us a shout at info@rangle.io!
