History of content management systems and rise of headless CMS

Highlights

You'll learn:

• How content management systems focused on managing and presenting content within templates.
• The rise of multiple digital channels led to the evolution of headless CMS, separating the content layer from the presentation layer.
• The separation allows content to be pushed to any digital experience channel, like mobile apps, voice devices, or single-page applications.

Keep reading to learn more!

Three primary applications of content management systems

To understand how content management systems (CMS) evolved and why there are different types, let's look at how content has evolved on the web. To learn more, download The Ultimate Guide to CMS now.

Content management systems, or CMSes, have become a vital part of digital content creation and management. Whether you are building and managing a website, running an online store, or creating and managing digital content, CMSes provide the tools and features necessary for organizations of all sizes to achieve their goals efficiently and effectively. Let’s look at how CMSes are used in three main areas.

Building and managing websites

Building and managing a website is a crucial aspect of any business's digital presence. Popular CMS platforms like WordPress, Drupal, and Joomla offer user-friendly interfaces that make it easy to create and manage content. 

With drag-and-drop features, even users without advanced technical skills can design professional-looking websites. Additionally, CMS platforms are often optimized for search engines, boosting website visibility and ranking.

A CMS not only simplifies the process of building and managing a website, but it also enhances the design of web pages. Using a CMS, users can create interactive and responsive webpages that adapt to different devices like mobile apps. 

The modern CMS user interface enables effortless integration of multimedia elements into webpages, enriching the user experience and making sites more engaging.

E-commerce and online stores

In e-commerce, CMS plays a significant role in establishing and managing online stores. CMS platforms provide the tools for listing products, managing inventory, processing payments, and handling customer service inquiries. Some CMSes are specifically designed for e-commerce, such as Shopify and Magento, while others can be integrated with e-commerce platforms to facilitate seamless transactions.

Integrating CMSes with e-commerce platforms enables businesses to manage their online stores more efficiently, from automatically updating inventory and prices to order processing and customer data management. It also ensures the content delivery application (CDA) is synchronized with the content management application (CMA), resulting in a smooth and seamless shopping experience for customers.

Content creation and digital asset management

Digital asset management is another crucial aspect where CMS proves its worth. A digital asset manager integrated with a CMS can help businesses manage various types of digital content, such as images, videos, blog posts, and other multimedia files. These assets can be easily organized, accessed, and reused, improving efficiency and promoting consistent branding across all platforms.

Content creation is also made simpler with tools and features offered by CMSes. The drag-and-drop interface, for example, makes it easy to design web pages and create engaging content. Other features like the user-friendly content management application (CMA) allow for the easy editing and publishing of content. Moreover, some CMSes, such as headless and open-source CMSes, offer greater flexibility and customization options, catering to different content creation needs.

Three popular content management systems

Let’s look at three popular content management systems widely used today.

WordPress

WordPress is a popular CMS known for its simplicity and ease of use. It offers an extensive plugin library, which enhances website functionality and boasts a large community for support. However, it has limited scalability for complex websites and can present security vulnerabilities. WordPress best suits small to medium-sized businesses, bloggers, and individuals.

Pros

• Easy to use

• Extensive plugin library

• Large community support

Cons

• Limited scalability for complex websites

• Security vulnerabilities

Joomla

Joomla is a flexible and customizable CMS platform that excels in managing e-commerce websites. It supports multiple languages but has a steeper learning curve and fewer plugins than WordPress. Joomla is ideal for small to medium-sized businesses and e-commerce websites.

Pros

• Flexible and customizable

• Suitable for e-commerce websites

• Multilingual support

Cons

• Steeper learning curve

• Fewer plugins compared to WordPress

Drupal

Drupal is a robust open-source CMS ideal for some complex websites. It is highly scalable and provides robust security features. However, it requires technical expertise and has a steeper learning curve. Drupal is best for large enterprises, government organizations, and educational institutions.

Pros

• Highly scalable

• Robust security features

• Suitable for complex websites

Cons

• Steeper learning curve

• Requires technical expertise

WordPress, Joomla, and Drupal each serve distinct needs within content management systems. WordPress offers simplicity and a wealth of plugins, making it an excellent choice for small to medium-sized businesses, bloggers, and individuals. Joomla's flexibility and e-commerce capabilities make it a strong contender for small to medium-sized businesses and e-commerce platforms. Meanwhile, Drupal's robustness, scalability, and security features position it as the ideal option for government organizations and educational institutions. It is crucial to consider these aspects when deciding on the most suitable CMS for your specific requirements. Remember, each system has its strengths and weaknesses; the key lies in aligning these with your individual or business needs.

Web 1.0 managing static web content

Web 1.0 is the term used to refer to the first stage of development on the World Wide Web, characterized by simple static websites. The history of content management systems began in 1989 when Tim Berners-Lee proposed an internet-based hypertext system HTML and wrote the browser and server software in late 1990. HTML came from SGML, the Standard Generalized Markup Language, and was created at IBM by Charles F. Goldfarb, Ed Mosher, and Ray Lorie in the 1970s. The first websites were simple HTML text files. You used an FTP program to copy the files to a directory under a running web server. In 1993, Mosaic browsers began supporting images that could appear along with text, and static brochure-like sites shared company and product information.

In the early 1990s, the first step to managing content on a web page came with Server Side Includes (SSI). Server Side Includes lets you keep portions of your site separate from the main content, such as the site menu or a footer. Around the same time, the Common Gateway Interface came on the scene, letting you create interactive forms.

As early as 1990, Tim Berners-Lee said the separation of document structure from the document's layout had been a goal of HTML. In 1994, Håkon Wium Lie worked at CERN, and the use of the Web for publishing was growing. However, it wasn't possible to style documents, such as displaying a newspaper-style multi-column layout on a Web page. Lie saw the need for a style sheet language for the Web. Later, Lie was joined by Bert Bos, who was building a customizable browser with style sheets. By 1995, the World Wide Web Consortium (W3C) was up and running, and Lie and Bos worked together at the W3C on the first style sheet recommendations.

In August 1996, the first commercial browser to support CSS was Microsoft's Internet Explorer 3. The following browser to support CSS was Netscape Communicator, version 4.0. Netscape's initial implementation to support CSS was more of an attempt to stop Microsoft from claiming to be more standards-compliant than Netscape. Unfortunately, the Netscape browser frequently crashed when the page included Cascading Style Sheets. The battle for controlling standards between Netscape and Microsoft became known as the browser wars.

In 1996, ColdFusion added a full-scripting language called CFML. Processing forms with ColdFusion or using the Common Gateway Interface and programming languages like Perl and Python became the norm. From 1995 to 1997, server-side scripting was the rage. During this same time, Personal Home Page (PHP) and Active Server Pages (ASP) came into play with server-side scripting for generating content sent from the server to the Web browser. Like ASP and PHP, JavaServer Pages (JSP) arrived on the scene later in 1999 and was built around the Java programming language and was also fairly popular.

In 1997, Microsoft introduced iframes that let you split the HTML browser window into segments, with each frame showing a different document that could be used to display content from other sites and was popular for presenting ads and banners. The iframe tag brought security, navigation, and search engine optimization issues that eventually were addressed.

The DOM and dynamic HTML revolution

The turning point came in 1997 as dynamic content emerged with the Document Object Model (DOM) introduction. The DOM defines the logical structure of documents that lets you identify and programmatically control parts of a document. The DOM is an application programming interface (API) for HTML and XML documents. For example, the DOM lets you access and manipulate the styles of HTML elements, like the entire body (body) or a division (div) on a page.

Dynamic HTML using Asynchronous JavaScript and XML, commonly called Ajax, was a revolutionary breakthrough, letting developers request and receive data to update a Web page without reloading the page.

Figure 1. A Timeline of Milestones for Web Content Management

Web 2.0 and the role of a CMS

Dynamic content delivery brought new ways to present and interact with Web content, emphasizing sites being more social. The term Web 2.0 helped define what is also called the participative or participatory social web. Web 2.0 also refers to the surge in user-generated content and the ease of use to make websites work with other products and systems.

As the web moved from static brochure sites to interactive sites with dynamic content, the desire for collaboration and fresh, relevant content grew, and the need to manage content came to the forefront. Websites must be updated daily, with different people wanting to add and edit content. For example, the Marketing Department wants to update promotional material. Human Resources needs to post new jobs, the Public Relations Department needs to post press releases, the Docs Department needs to publish product documentation, the Support Department wants to interact with customers online, and so on. The role of a content management system was to provide the capability for multiple users with different permission levels to manage content for a website or a section of the content.

The core components of a CMS

There are two core elements of any content management system (CMS): The Content Management Application (CMA) and the Content Delivery Application (CDA). A CMA for website content allows for the administration of users and groups so that they can create, edit, and remove site content. The CMA also includes the front-end user interface that allows a person to add, modify, and remove content from a Web site without requiring knowledge of HTML, Cascading Style Sheets (CSS), or programming languages, thus eliminating the involvement of a developer. The Content Delivery Application (CDA) compiles that information and updates the website.

The rise of the monolithic CMS

It was apparent that a system was needed that would allow individuals and groups to manage and deliver content to the web. A monolithic CMS is a system that incorporates everything required for managing and publishing content to the Web. This type of CMS is a coupled system, meaning it is an all-in-one content-management solution. We will look more in-depth into the difference between coupled and decoupled systems later in this article.

Founded in 1985, FileNet is considered the first system that was a natural content management system. In 1995, FileNet introduced a complete integrated document management suite of programs with document imaging, document management, and workflow. Vignette came on the scene in late 1995 to make web publishing more accessible and personalized and is commonly credited for originating the term “content management system.” A year later, Vignette introduced StoryBuilder. Many enterprise CMSs began to appear around this time, including Interwoven (1995), Documentum (1996), FatWire (1996), FutureTense (1996), Inso (1996), EPiServer (1997).

Open-source CMS and frameworks

By the early 2000s, content management systems dominated the web. Open-source content management systems and frameworks began to appear. A framework is a programming library of pre-written code, such as the then-popular Zend framework written in PHP. OpenCMS, PHP-Nuke, Mambo, WordPress, Drupal, Plone, and Joomla offered free content management alternatives. WordPress gained popularity as an open-source solution focusing on blog content delivery and letting third-party developers add customizations and extensions. In 2006, Alfresco offered an open-source alternative to enterprise content management.

The website-building platform surge

Starting in 2003, easy-to-use website-building CMS sites offered premade templates for people who had no coding experience, such as WordPress (2003) and Squarespace (2003), followed later by Weebly (2006), and Wix (2006). While not pure content management systems, these building platforms provided a path to building a small, low-cost website that required no knowledge of HTML, CSS, and coding.

Web APIs, XML, and JSON

Most of Web 2.0 was making websites work with other products and systems. A Web API is a Programming Interface that allows access to a system, such as a website, through standard HTTP request methods. The data is typically wrapped in a standard format, such as XML or JSON, to make it easy to read and work with.

XML stands for eXtensible Markup Language, which is a data format. Like HTML, XML is a descendant of SGML, the Standard Generalized Markup Language. XML allows for transporting data through feeds and API calls because it's a platform-independent format.

JSON stands for JavaScript Object Notation, a format for storing serialized data with key-value pairs and transmitting that data between a server and a web application. JSON feeds can be loaded asynchronously faster than XML and RSS feeds. Some sites, such as Twitter, provide RSS feeds, which are easy to use on the server side but frustrating on the client side since you cannot load an RSS feed with AJAX unless you are requesting it from the same domain on which it is hosted. JSON also gained preference over XML since it has a smaller footprint, is easier to use, and works excellently with JavaScript-enabled browsers since JavaScript automatically recognizes JSON.

SOAP and REST

Developers often use machine-based interactions, such as REST and SOAP, to communicate object information back and forth for social and e-commerce sites. SOAP stands for Simple Object Access Protocol. REST stands for REpresentational State Transfer. REST is an architectural style, whereas SOAP is a protocol. An architectural style specifies guidelines that a developer must follow to be considered a RESTful API, including that it supports a client-server model, is stateless, cacheable, has a uniform interface, and is a layered system. A layered approach is one where you can keep data on different systems, so your APIs can be on one server, data on a second server, and use a third server to authenticate requests.

Developed in the early 1990s, SOAP did not come into the mainstream until the early 2000s. SOAP is a standardized, extensible, XML-based messaging protocol that is language-, platform-, and transport-independent with built-in error handling. SOAP uses Web Services Description Language (WSDL), a service description language. SOAP uses Web Services Description Language (WSDL), a service description language used to provide web services over the Internet. The WSDL specifies the available functions so a client program can connect and discover the functions offered by the web services.

SOAP is not as famous today and is being replaced with new APIs, such as REST and GraphQL. SOAP works well in distributed enterprise environments and is still used for B2B applications because you can define a "data contract" with it. However, 70% of public APIs are RESTful in the web world. When a RESTful API is called, the server will transfer to the client a representation of the state of the requested resource. REST uses multiple standards like HTTP, JSON, URL, and XML. A REST API uses a Web Application Description Language (WADL), and it doesn’t require the extensive processing SOAP does, so it is faster. It is also easier to use and more efficient and flexible than SOAP. RESTful web APIs are typically loosely based on HTTP methods to access resources via URL-encoded parameters and using JSON or XML to transmit data. JSON ensures reliable, fast, and accessible data exchanges, so it is the most common data exchange format for working with RESTful APIs.

Going mobile with Web 3.0

In the late 1990s and early 2000s, Nokia Symbian, Palm, and Blackberry mobile devices provided access to the Web. However, it wasn’t until the introduction of the iPhone in 2007 and the Android smartphone in 2008 that mobile phones impacted delivering web content. In 2010, smart tablets came on the scene. REST APIs and JSON data format were vital to delivering content to mobile devices. This megatrend of providing content to mobile devices ushered in the mobile web era, which has also been called Web 3.0, to identify the shift from computers and laptops to mobile content delivery. By the beginning of 2014, mobile internet use exceeded desktop use in the U.S.

This rise in content consumption by mobile devices presented a problem for the monolithic CMS that was explicitly created for delivering Web content to desktops and laptops. There was no way to provide content for desktop and mobile devices reliably. To address the rise of mobile web usage, developers began creating desktop and mobile versions of their websites, with mobile designs offering stripped-down versions of select desktop website pages.

The mobile sites were on a separate subdomain called mobile or “m.dot” sites since the subdomains would end in “.m.” One problem that arose is that Google does not provide indexing of m.dot sites. Instead, Google only annotates the m.dot URLs to say the main website is mobile-friendly.

In 2010, Ethan Marcotte introduced the term “responsive design,” which promoted a shift in thinking from the fixed design for desktop websites to responsive, fluid, adaptable layouts. To deliver on the promise of responsive design, the W3C created media queries as part of the CSS3 specification. A media query allows developers to ascertain the type of device and inspect the device's physical characteristics, such as the screen size. For example, using CSS you can use the @media rule to determine what screen size is being used and include a block of CSS properties for that device.

Figure 2: Worldwide Mobile Growt
Source: StatCounter Global Stats (http://gs.statcounter.com/)

The paradigm shift to omnichannel

Omni means “all things” in Latin, so omnichannel refers to all possible channels. Just as the mobile track was disruptive to the delivery of web content, new channels, such as smartwatches, gaming consoles, and voice-activated devices like Amazon’s Echo (Alexa) and Google Home, continually appear, presenting content delivery problems for the traditional CMS. The paradigm shifts—from delivering content for a few channels to actual omnichannel content delivery that is flexible enough to support whatever tomorrow’s channels may come on the scene—demand a better solution, which was the decoupled and headless CMS solution.

The decoupled and headless API-First CMS solution

A decoupled system consists of two or more systems that can transact without being connected, similar to the separation of an HTML (content) file from a CSS (formatting) and a JavaScript (programming) file. A decoupled CMS allows developers to change the presentation (formatting) and behavior (programming) layer without affecting the site's content.

Decoupled and headless are frequently used interchangeably, but there is a difference. A headless CMS does not have a front-end system or presentation environment. A headless CMS is API-first, which integrates content management tools via API. Separating formatting from content allows you to publish content to any device or channel. A decoupled CMS typically includes a front-end formatting system of templates. A headless CMS separates managing content from presenting formatted content; in other words, it removes the interdependency of presentation and behavior layers from the content. Moving from a coupled system to a decoupled headless CMS opens up a new world of managing content.

The content hub architecture

Key to the success of working with a headless CMS is the content hub architecture. A content hub centralizes all your content in one place using an API to deliver content anywhere. This content-centric approach accelerates and simplifies content management, letting your developers use the best-of-breed tools to create digital experience platforms (DXP) with omnichannel content delivery to help create more personalized customer journeys and more impactful digital experiences.

Figure 3: The Content Hub Architecture

Integration and frameworks

Not only does the content hub architecture help you with omnichannel content delivery, but using a content hub also gives you more freedom for integration. A headless CMS following the content hub architecture lets you choose the best existing tools or services, such as marketing automation tools, analytics, a personalization engine, translation services, video delivery services, e-commerce platforms, and AI extensions.

The world of technology is constantly changing at a rapid rate. There is always a new way of capturing and delivering customer data better, faster, and cheaper. Integrating a headless CMS with a content hub architecture makes it much easier to be agile and switch to new tools and services without disrupting your content or content delivery.

Figure 4. Integration and the Content Hub

Security and CMS solutions

Most headless CMS offerings fall in the Content as a Service (CaaS) category, meaning the service is centralized and hosted on the Cloud. As with any CMS, you put your trust in your CMS vendor. This trust applies to any third-party applications that you integrate into your CMS as well. Using a reputable company with supported integrations that you can trust minimizes risk and ensures a safer, more secure site.

Scalability

Using a traditional CMS to handle traffic increases is a typical solution to add multiple servers running the CMS. This is time-consuming and expensive. A headless CMS can scale and additionally avoid database bottlenecks that you are likely to encounter using a traditional CMS. Scaling is much easier with a headless CMS since most headless CMS offerings are Cloud-hosted, so it is possible to adjust your Cloud infrastructure to match demand automatically.

Another important technology for delivering content fast and on a global scale is the Content Delivery Network (CDN). A CDN is a network of servers spread around the globe. Static assets and dynamic content of your website are cached and saved on all the CDN’s servers. When a person requests a page, the website retrieves cached content from the nearest CDN server and delivers it to the client. Having a CDN-enabled headless CMS vastly improves the performance of providing content worldwide.

The digital experience platform

Gartner defines a digital experience platform (DXP) "as an integrated set of technologies, based on a common platform, that provides a broad range of audiences with consistent, secure, and personalized access to information and applications across many digital touchpoints. Organizations use DXPs to build, deploy, and continually improve websites, portals, mobile and other digital experiences." The headless CMS approach is quickly becoming a crucial component of the new generation of Digital Experience Platforms (DXPs). DXPs go significantly beyond web content management to create rich, engaging experiences for audiences addressing a multitude of channels. This ties in nicely with the content-hub architecture to enable any integration needed to deliver content to any channel.

The importance of personalization

Personalization is critical to building an effective Digital Experience Platform. Personalization means understanding your visitors’ interests and tailoring content to fit their needs and preferences, providing them with an experience they find relevant. The more relevant a person sees your message, the more you increase customer loyalty and revenue. Personalization is a mission-critical marketing activity. Using a headless CMS, personal data is made available via APIs, web services, and open data standards, so you are not tied down by data stored in a pre-built system.

Personalization tools and services, such as Optimizely, Monetate, One Spot, Evergage, Salesforce Commerce Cloud, and Adobe Target, all help you track and act on a visitor’s behavior, location, profile, and other attributes to create a dynamically personalized, highly relevant experience. By creating a more meaningful experience for your visitors, you’re also generating better business results.

Artificial intelligence and machine learning

In July 2018, at a Town Hall meeting in San Francisco, Google CEO Sundar Pichai called artificial intelligence “one of the most important things that humanity is working on,” saying it is “more profound than electricity or fire.” Artificial Intelligence (AI) and Machine Learning (ML) are ushering in the next digital transformation era. All major tech companies are following this mega-trend. Google offers TensorFlow; IBM, Watson, and AI OpenScale; Adobe, Sensi; SalesForce, Einstein; Amazon Lex and Amazon Rekognition; Microsoft Azure Cognitive Services; and Facebook announced it is expanding its AI research division to roughly 170 scientists and engineers.

AI and machine learning are already having a significant impact on content management. Integrating your content hub with AI and machine-learning tools and services can help you discover hidden opportunities, speed up processes, and, most importantly, offer relevant digital experiences to customers. Personalization engines use AI and machine learning to deliver smarter, customized, and predictive customer experiences. In addition to the personalization services mentioned in the previous section, some examples of using content management with AI and machine language services and tools such as SEO optimization with CanIRank, MarketBrew, and BrightEdge; content creation and text analysis with MonkeyLearn, Acrolinx, Automated Insights, and Narrative Science; and translation services with KantanMT, and SYSTRAN.

The headless CMS solution

There will always be disruptive technologies that will change the CMS playing field. There is no doubt that AI and machine learning are going to play a massive role in the future of content management. The primary goal is to build the best digital experience platform with omnichannel delivery that is secure, scalable, and as future-proof as possible, such as Contentstack. By allowing you to integrate with new technologies and applications as they come on the scene, a headless CMS will likely be the longest-lasting solution in the history of content management systems.

Schedule a free demo today.

Written initially by Brent Heslop and updated by the Contentstack Team.