Structured content: Make stronger, scalable websites and apps
Years ago, when I was developing websites for people, I used existing content management systems and WYSIWYG (What You See Is What You Get) editors. I wanted something that would empower my clients to make content updates to their web pages without calling me late at night. Between us, I didn’t like these CMSes very much.
Traditional CMSes lump content and code together in their WYSIWYG. Additionally, I had to set up a server and database, and perform maintenance and updates to keep everything secure and running. If you’re maintaining a popular hosted CMS solution, you probably know the fear of some hoodie hacker taking over your site very well.
These were not things I enjoyed doing. And what’s more, my clients wanted more control over their content. WYSIWYG offers HTML editing, too. And even if my clients promised to not do it, they would eventually edit the HTML templates following a random online tutorial. The result was a broken site and the aforementioned urgent phone calls.
Legacy CMSes and HTML-based editing tools promise the dream of non-tech folks being able to create whatever they want, but the truth is that you still need to limit what they can do to prevent the site from falling apart.
The problem with HTML-based editing
The WYSIWYG editors in traditional CMSes are HTML-based. Why is this a problem?
Writing HTML seems simple, but it’s not. My clients wanted to do more with their websites so they’d go on the internet, find a snippet of code to copy and paste into their editor. Then they’d call me to take a look when things went wrong.
HTML is not portable to other platforms. If my client wanted to ship content to mobile apps, social media or different kinds of devices, I’d have to untangle the content from the code.
I couldn’t use my favorite technology. I like to play around with the latest and greatest technologies, such as everything Jamstack, when I’m building things for other people. And content systems that mix HTML, XML, CSS and JavaScript all together were holding me back.
All of the above amounts to a big heap of unstructured content. Our content platform flips everything around so that developers, like me, and their customers or clients are happy.
Contentful enables content creators to structure their content in tiny building blocks. You’re in charge of defining an author, a recipe or a blog post data structure with a few button clicks. And the best thing, all the content is then available as structured JSON and scalable APIs.
This approach makes the content reusable and platform agnostic. Plus, we include features that empower editors to make changes without breaking things. Let’s take a look at what sets Contentful’s content platform apart from those content solutions of the past.
Powerful APIs enable developers to use the tools they love to ship content anywhere
I cannot repeat this often enough, your content should be structured and should be ready to go wherever you want to have it.
Instead of lumping everything together, Contentful provides you with a set of APIs that deliver structured JSON. Using APIs and structured content enables developers to build whatever they want with the content in our content platform — websites, mobile apps, and omnichannel digital experiences. Everything is just one HTTP call away.
Because making HTTP calls is pretty much supported across all languages, platforms and frameworks, developers using Contentful can choose any technology that they like.
Here’s a summary of our APIs:
A Content Delivery API, which is read only and RESTful. Use this to pull in the digital content that’s ready for production.
A Content Preview API, which is also RESTful and read only. Use this to build preview functionality so editors can see how content will look in a mobile app or on a web page before they hit publish.
A Content Management API, which is a read and write API. This API allows you to change content, add content, and create new content. It’s how you control the content that you put into Contentful. We also provide an editing interface that sits on top of our content management API.
An Images API for managing and transforming images stored in Contentful.
A GraphQL API that lets you query any data that you want.
Learn more about Contentful APIs or see these in action in our webinar on structured content.
Structured content can be reused across channels and devices
Legacy CMSes were designed to manage content for posts and pages. This always felt limiting to me because not everything is a post or a page. In Contentful, content is structured in a content model that organizes different content types. These smaller pieces of content can be easily assembled into different experiences across channels and devices.
In this example we’re building up a content tree of reusable pieces like metadata, navigation, and the slug. You can use all these pieces together when you’re building a page, but you can also use them one by one. This keeps all your content reusable. Whatever you need, it’s just one API call away. You decide what kind of data structures your project or website needs to then fetch smaller or larger chunks of your content. You’re in charge!
Download white paper: How structured content frees creative teams and unleashes their productivity
Rich text field empowers editors to publish more without developer support
All of the above is great for developers because it gets the CMS out of their way, but we want editors to be happy and independent too.
Whether you’re an editor, a content marketing manager or a content strategist, the user experience is where Contentful really shines. A structured content model gives creators structure to add the right content in the right places. They can add strings, numbers, images, to name just a few of the field types we provide. Got an SEO specialist on your team? No problem. They can easily optimize for search engines, too.
To create longform content like case studies and white papers, we initially bet on Markdown as the best choice for a headless CMS. But let me tell you a secret: Markdown is not a scalable content solution, either. The format is unable to embed video or audio, fails to model content relationships and has limited formatting options. If you’re curious to learn more about that topic, have a look at a talk I’ve given.
To take things to the next level, we’ve created a Rich Text field to address all of your WYSIWYG use cases. It’s similar to a WYSIWYG editor, but with some key differences:
The Contentful Rich Text field is stored as pure JSON rather than HTML.
The field can be customized to provide guardrails for editors. For example, you can limit formatting options to provide a consistent look and feel across content entries.
Entries and assets within Contentful can be linked dynamically and embedded within the flow of the text.
With this and other fields within Contentful, developers can build up a visual entry editor that empowers editors to publish more and more in a predictable way – without needing developer support or fear of breaking things.
And unlike traditional HTML-based editing, this content is easy to reuse and manage. Editors can save time by updating content in one place, and it automatically updates in all the places it’s been used. Everything stays structured and up to date.
See Contentful in action
If you’re wondering how all this works, take a look at our structured content webinar where I go into more detail and then we do some live coding. You’ll see exactly how we define structured data and content, and set up an example project using Next.js and Contentful’s GraphQL API.
