This point is not well understood, but it has significant implications!



What we think of as "web design" is really two separate disciplines:

1. Website container

2. Content

Allow me to explain...

At its core, your website is simply a collection of content, and this content exists in a database.

By itself, this content doesn't do anything, and it doesn't have a "look" associated with it.

A basic web page is simply a piece of this content output at a URL.

What we generally think of as the "design" of a page like this is a combination of:

• everything that surrounds the content—header, nav menu, footer, etc

• the text, styles, and images used in the content

Let's give these two items distinct names so we can speak about them with exacting precision:

• Container: Everything that surrounds your content

• Content: Your content

Over the past 20 years, the discipline of web design has lumped Container design and Content design into the same process.

But this has been a gigantic, complicated, and costly mistake.

Remember—your content IS your website.

Your design will change; content is the foundation.

A much more sustainable way forward is to honor the distinct differences between Container and Content design.

Container design involves things like:

• branding incorporation
• brand-specific color scheme
• font selection
• navigation
• template mechanics
• legal stuff

Content design involves things like:

• typography
• basic formatting (think of this like word processor formatting)
• byline output
• images
• actual content construction, such as the use of lists, blockquotes, code, etc.

This modular approach to web design frees up some invigorating use cases.

For example, imagine you have a simple UI where you can control the design PATTERNS your content uses—sub-headlines in bold, blockquotes in green, etc.

Armed with nothing more than these controls, you could wrap your content in a variety of different Containers and achieve massively different "looks" for your website...

...with nearly zero effort.

(Imagine testing dozens of these scenarios in one day with your ACTUAL content.)

The flipside of this is that designers could focus on creating many different styles of Containers.

Like your Content, these Containers could have their own design controls which would enable you to tweak things like colors, elements (menus, titles, taglines), and features.

The convolution of Container and Content design makes the entire discipline of web design much more complicated than it needs to be.

By separating these two distinct disciplines, we achieve clarity and a simplicity that otherwise eludes us.

Templates, for example, can be quite complicated when we are forced to consider Container and Content simultaneously.

However, template design literally becomes one order of magnitude easier when only the Container is under consideration.

(Hell, it's the same on most templates)

Content design, on the other hand, can be fairly complicated, especially on specialty templates.

This is intuitive, too—a home page is going to be different from a product page or a blog/archives page, as illustrated here:

Historically, we have allowed Container design to dictate what we do with Content design.

This is an improper order of operations—it's like letting the kids drive from the back seat.

Instead, you should nail down how you want to present your content FIRST.

Figuring out how to present your content to visitors can be a years-long journey.

(No sense lying about this or trying to sugarcoat it. Progress and effective refinements take time.)

Obviously, that journey is going to be interrupted if you keep changing Container + Content.

A much better method of operations is this:

With a separate Content design layer, you can focus solely on nailing your content presentation.

This is the foundation for your entire website and the most valuable use of your time.

Once you've nailed the basics of your content presentation strategy, you can experiment with different Container layers in attempt to find one that is evocative of your brand/vibe/preferences.

But again, this stuff is second tier compared to your Content.

So let's recap:

The history of web design gets it exactly backwards.

Container design has both included and dictated Content design.

And every time you change your design (Container), you have to go through all Content and bring it up to speed with the new Container.

Depending on the size of the website, it can take WEEKS (and lots of ) to bring your content up to speed with the design conceits of a new Container.

Screw THAT.

Your Container needs to adapt to your Content—not the other way around.

One of the negative effects I've noticed from the broken approach I've described in this thread is this:

You don't think about your content in terms of patterns.

Ultimately, presentational styles are finite. Pick what you like and use them *consistently* in your content.

By taking a patternized approach to Content design, you can make sweeping presentational changes to ALL of your content at one time.

This is the opposite of the idiosyncratic approach espoused by the #WordPress Gutenberg editor and associated Page Builder Plugins.