What is atomic content design?

There are now more digital channels than ever—ranging from the traditional desktop websites and mobile apps to IoT and wearables. User expectations are also higher than ever, as people expect to digest what they need, when they need it, and in the exact spot where they are now.

While new technologies and principles like headless CMS and content operations help contribute to iron out issues related to efficient delivery and production of content, they do not solve everything.

How do you for instance ensure that a piece of complex and verified content reaches the right person at the right time? A manufacturing engineer may need a project description with a set of building instructions together with a different set of safety precautions, while a medical professional may need a compound article to acquire facts about symptoms and a recommended treatment for the given category of diseases.

One way to solve this extremely complex content structure is to split the content into so-called semantic atoms—through an “atomic content design.”

But what is atomic content design? Here is our definition:

Definition of atomic content design

Atomic content design is a content model where structured contents have been broken down into their smallest constituent parts, ready to be reused in larger contexts.

Exploring the atomic model

Together with the Norwegian Directorate of Health, the Norwegian agency Conteir created an atomic content design model in order to fulfill requirements from both government and end users. The main contributors to the model were Carel Skogstad from the Directorate and Eirik Hafver Rønjum from Conteir.

According to their content principle, healthcare and medical contents must be reusable and readily available for physicians, patiens, and governance alike—thus prompting the introduction of semantic atoms.

Rønjum describes the atomic content design model as consisting of two main elements: an “infobit” and an “info structure.”

See also: Leverage content operations in your organisation »

Infobits

An infobit is the smallest semantic unit in the content model. It does not have a fixed size and contains both data and metadata. The role of the latter is to define the semantic role of the infobit and to be productive in machine treatment of data—like the composition of a topic page or distribution of content related to a medical code.

In the example of the Norwegian Directorate of Health, an article about uncomplicated acute rhinosinusitis sources several infobits into one structure. Examples of metadata include:

• “What?” (“medical recommendation”)
• “Part of?” (“guidelines for antibiotics”)
• “Who?” (“physician”)

The flipside of the infobit coin in this article is the content:

• “For whom? / symptoms” (”sneezing/nasal congestion”)
• “For whom? / diagnosis” (“rhinosinusitis”)
• “Treatment” (“phenoxymethyl penicillin”)

Both physicians and patients use the digital services of the Norwegian Directorate of Health, and contents like this fill several needs at once. The recommendation in this case sources multiple infobits that are carefully reviewed and validated by medical professionals.

See also: How a digital experience cloud can lift your business »

Info structure

Whereas infobits are the building blocks of meaningful content, an info structure defines how the infobits can be combined into a greater whole—like the example with the medical recommendation above.

Info structure units can be both hierarchical and linear, or a combination. An info structure in itself may also be a building block in a larger info structure—an info structure may thus consist of both infobits and other info structures.

But, as Eirik Hafver Rønjum points out, an info structure is defined as a semantic unit in this context, and must not be confused with how content is structured and presented on the websites of the Norwegian Directorate of Health.

Headless brings it together

Managing infobits and info structures and distributing them to the right place would be impossible with a traditional CMS, where content and presentation are closely linked. Instead, a headless or hybrid approach makes atomic content design possible.

With headless and hybrid, content is separated from presentation. The content is instead structured, form based, and delivered through an API to required channels. In the above example, “channels” may refer to what content types that can source a given infobit and in what order.

In an atomic content design model, queries for content can be directed towards both infobits and info structures. An infobit delivers its own meaningful unit—e.g. symptoms and diagnostics—while an info structure is a collection of infobits—e.g. guidelines, recommendations, circulars, articles, statistics catalogue, or a statistics component.

Learn more: Headless CMS explained »

Widely known principles

Atomic content design may sound both foreign and familiar. Foreign because there are not many articles about the concept yet on the web, and familiar because you might have heard of “atomic web design” or similar principles.

Paul Andrew on the Speckyboy Design Magazine does a great job in explaining atomic web design. It is a bottom-up approach to build digital interfaces, influenced by chemistry. And according to Brad Frost, “atomic design is methodology for creating design systems,” consisting of atoms, molecules, organisms, templates, and pages.

Netlife has been critical of the atomic web design model, pointing out that a whole cannot be meaningfully crafted with an explicit base in individual parts that have no plan. Instead, Netlife calls for principles defined from a holistic approach, before building parts more organically and in accordance with the unity. We can see that this principle is employed in the atomic content design model, where infobits and info structures are given meaning primarily through their larger contexts.