Introduction to content modeling

This article explains how to design a robust and scalable content structure for your web app using a schema.

What is a schema?

A schema is the definition of the content structure for your web app. A schema consists of three parts: models, components and remote content. Before adding content to Prepr, first design a schema with your content structure in a design tool of your choice.

We recommend the following steps to design a scalable schema:

• Choose a starting point from which to base your design. This could be a UX design, wireframe, sample web page or site map.
• Categorize and prioritize your content. Start modeling the highest priority content. For example, this would be articles for a news site or products for an e-commerce site.
• Design the main model first and list the detailed content as fields.
• Decide which of the fields can be grouped into reusable content, then design other models for these.
• Decide which of the fields can be structured into templates and create components for these.
• Design remote content for content that is maintained in another system.
• Define the field types and other settings (e.g. required) for the remaining fields.
• Review the schema together with all stakeholders, for example, the development team, marketing, etc.

See a high-level overview of a simple schema below:

For more details on how to design this example, check out the Articles example.

What is a model?

A model is the content structure of a content item that is used in multiple locations in your CMS. A model consists of a number of fields to store your content. Common examples of models are articles, landing pages and products.

See an example model below:

Take note that a field in a model can reference another model. In the Article model, the field Author(s) references a Person model. We design a separate model for person-related content so that it can be used for other purposes and not only for article authors, in other words, we design a more scalable schema. For more details, check out the Content reference field specs.

What is a component?

A component is a predefined set of fields that can be used in models. You can think of a component as a flexible, reusable template where you define fields once, and then fill them with different content every time you use it in a content item. This allows you to build dynamic layouts for landing pages, micro websites, case studies and testimonials.

See an example Social accounts component below:

The Social accounts component is a template for a list of Social accounts. This template allows different models to use it and ensures scalability. If another type of social account is added, this can be done by simply amending the component without changing the structure of the model that uses it. Also, we can have Social accounts content for a person or for a company. Both of these content items use the social accounts template, but their content differs.

What is remote content?

Remote content is content that is maintained in a system outside of Prepr. Add a remote source to your schema design if some of your content is maintained in another system.

Common examples of remote content are products in an e-commerce platform or items like job postings from a backend system.

The Prepr Remote Content feature allows you to seamlessly integrate 3rd party content in your content items for enhanced content delivery.

To start with, set up a remote source.

Content modeling principles

Here are some important design principles to help you design a robust and scalable schema.

• Design first
  As tempting as it is to dive into Prepr right away, it's important to design your schema first. This first step makes it easy to visualize your schema.
• Use a sample
  While designing, use a UI design example as a base to guide the design of your schema. A sample gives you a realistic view from which to work from.
• Design a robust schema
  Design a schema that is scalable, for example, define object relationships that caters for possible future situations.
  Modularize your content into models and components, in other words, avoid duplication.
• Keep it simple
  Find a balance between a simple and scalable schema. While it's important to avoid duplication, it is just as important to avoid too much nesting of models and components. A schema that is too modular makes the queries on the content too complex and results in a complicated user experience for editors.
• Get feedback
  While designing your schema, get feedback from all stakeholders. These include content authors, designers and other developers. Their feedback helps to identify any potential issues from any aspect of your web app.

Now that you understand the basics of schema design, let's take a look at some examples to get a clearer picture on how to design your schema.