Alex

Alex Monachino

Software Developer

Email
Brackets

The Generic
Content Structure

Sync content, design, and development, to enable quality and speed on a website team

What is it?

It is a reusable data structure, that can represent the content and design of all interfaces on a website.

Although expandable, a simple-but-useful version of the Generic Content Structure can be represented as:

Data

{
	title: String,
	text: Array of Strings,
	links: Array of (Link) Objects,
	assets: Array of (Image/Video) Objects,
	children: Array of (Generic Content Structure) Objects,
	design: String
}

Where each property is understood to be optional.

And, where the ‘children’ property is an array, of any amount, of this same data structure.

Why should I
care about it?

A single data structure, that is shared between all contributors on a website team, can be a catalyst for increased quality and speed.

It creates a separation of concerns when generating new interfaces, by providing a connection between the three specializations involved; content creation, user-interface/user-experience (UI/UX) design, and front end development.

Quality

Contributors can focus less on integrating their teammates’ work, and more on completing their own work, when the Generic Content Structure is used as a common connection point.

Keeping each contributor focused on their own specialization, and less on creating unique methods of collaboration, allows for more work time; enabling higher-quality deliveries.

For example, front end developers do not need to spend time handling uniquely-formatted content for each interface design. Time can instead be spent on writing performant, manageable code that can be used with any interface’s content.

Speed

When a teammate’s work is not yet completed, each contributor can still make reasonable assumptions about it, if the Generic Content Structure is used as a shared deliverable format.

Keeping each contributor unblocked and progressing their work, no matter the state of a teammate’s deliverable, enables parallel work streams; allowing more to be done in a set period of time.

For example, the time needed to create, approve, and hand-off content will not block a UI/UX designer’s ability to style it. Designs can be created based on the predictable format of the content, rather than the specifics of the content.

How do I
implement it?

For an in-house website team, processes for content management, UI/UX design, and front end development need to be synchronized.

Content Management

A content management system (CMS) can be set up to include reusable page sections, that take the shape of the Generic Content Structure.

CMS’s like Adobe Experience Manager (AEM) and Drupal allow developers to set the format of page sections called ‘Paragraphs’.

A user interface for non-technical contributors and multi-user support are included with most CMS’s, so that content creators can set up an account for data entry.

As text, images, videos, etc, are generated and approved, they can be added to these ‘Paragraphs’.

Multiple page sections can be stacked vertically, like building blocks, to create a page.

Most CMS’s also provide an application programming interface (API) for developers to access page content in the JSON file format.

JSON

[
	{
		"title": null,
		"text": null,
		"links": null,
		"assets": null,
		"children": null,
		"design": null
	}
	...
]

UI/UX Design

Interface/experience design styles can be created, rendered by a developer, and associated with a value entered in the ‘design’ field.

Tools like Figma and Sketch allow designers to create interfaces in a way that is collaborative, and easy to hand off to developers.

With awareness of the Generic Content Structure, and the ability to support variable numbers (arrays) of items, new interface design styles can be created whether or not specific content is available.

design: carousel

Parent title

Parent text – Mauris commodo quis imperdiet massa tincidunt nunc pulvinar.

Child 1 title

Child 1 text – Duis aute irure dolor in reprehenderit in voluptate velit esse.

Child 2 title

Child 2 text – Ut enim ad minim veniam, quis nostrud exercitation ullamco.

Child 3 title

Child 3 text – Excepteur sint occaecat cupidatat non proident.

Child 4 title

Child 4 text – Orci a scelerisque purus semper eget duis at tellus at.

While content is being created, reviewed, and revised, a developer can render the design style in code. The interface can be populated once content is finalized and approved.

And, when just one data structure is used to develop all sections of a website, a design style can be applied to any section, like a preset.

design: hero

Experience
the best

We built Lucid Air to achieve benchmark-setting range without compromising any of the high performance that makes it an extraordinary driver’s car.

design: typography

Experience
the best

We built Lucid Air to achieve benchmark-setting range without compromising any of the high performance that makes it an extraordinary driver’s car.

Discover AirRear end of a Lucid Air

JSON

{
	"title": "Experience the best",
	"text": [
		"We built Lucid Air to achieve benchmark-setting range without compromising any of the high performance that makes it an extraordinary driver’s car."
	],
	"links": [
		{
			"uri": "/air",
			"label": "Discover Air"
		}
	],
	"assets": [
		{
			"uri": "/assets/generic-content-structure-img1.jpg",
			"label": "Rear end of a Lucid Air"
		}
	],
	"children": null,
	"design": "hero" or "typography"
}

Front End Development

A front end developer can fetch page data from their team’s CMS, and then render code based on each section’s content.

Website frameworks like Astro and Gatsby provide the features to enable this; simple data fetching, code splitting, and support for UI frameworks that most developers are already familiar with.

A built-in JSON API, or a custom middleware, can be used to make CMS data accessible for front end developers.

In most web frameworks, a page file can be set up to import designed components, fetch CMS data, and render its output based on each section’s ‘design’ property.

Astro

---
import Carousel from '../components/Carousel.astro';
import Hero from '../components/Hero.astro';
import Typography from '../components/Typography.astro';
const page = await fetch('https://my-cms.com/page/my-page').then(a => a.json());
---
{page.map(section => {
	
	{/* 'carousel' design */}
	if ( section.design === 'carousel' )
		return <Carousel data={section} />;
	
	{/* 'hero' design */}
	if ( section.design === 'hero' )
		return <Hero data={section} />;
	
	{/* 'typography' design */}
	if ( section.design === 'typography' )
		return <Typography data={section} />;
	
})}

Individual components can be developed to intake Generic Content Structure data, and represent a UI/UX design style using HTML, CSS, and Javascript.

Within these designed components, HTML rendering should be dependent on a property value being non-null, because each data property is known to be optional.

This conditional rendering of HTML allows content creators to add or remove content, at any time, without the need to consult a developer or a designer.

Astro

---
import './Typography.css';
const content = Astro.props.data;
	
const extension = asset =>
	asset.uri.slice(-10).split('.')[1];
	
const format = asset => {
	const img = ['jpg','png','webp'];
	const vid = ['mp4','webm'];
	const ext = extension(asset);
	if ( img.includes(ext) ) return 'image';
	if ( vid.includes(ext) ) return 'video';
};
---
<section>
	
	{/* title */}
	{content.title &&
		<h1>{content.title}</h1>}
	
	{/* text(s) */}
	{content.text && content.text.map(text =>
		<p>{text}</p>)}
	
	{/* link(s) */}
	{content.links && content.links.map(link =>
		<a href={link.uri}>{link.label}</a>)}
	
	{/* asset(s) */}
	{content.assets && content.assets.map(asset => {
		if (format(asset) === 'image')
			return <img src={asset.uri} alt={asset.label} />;
		if (format(asset) === 'video')
			return <video autoplay loop muted>
				<source src={asset.uri} type={`video/${extension(asset)}`} />
			</video>;
	})}
	
</section>

Afterword

With a newfound level of synchronization and specialization, in addition to parallel work streams, a website team can produce new interfaces and experiences quickly and at a high quality.

Product leads / product managers can benefit from this in scenarios where quick turnarounds are common, and/or where there is a lack of structure between team members of differing specializations.

This article provides just an overview; the concept and implementation can be expanded and/or adapted for any application, brand, or team.

Any questions?

Feel free to contact me

Email

Didn’t like this article?

Wow. Well maybe check out the others

Back