Content-First Reigns Supreme For Web Design

Down Arrow

“Content precedes design. Design in the absence of content is not design, its decoration”
- Jeffrey Zeldman

Content-first design is a term that has been around in the web design world for a while, but what does it mean? Below we take a look at content-first design, what it is and the benefits of content-first design to both designers and clients.

What is Content-first Design?

Content-first design is a philosophical view within the world of web design that states that in order to design a website you must first have the content defined.

Makes sense, doesn’t it? After all, an architect doesn’t draw up blueprints for a building until they know what that building is going to be used for. An editorial designer doesn’t start laying out a magazine before the articles have been written. For these professions and many others, form must follow function, and for majority of websites, the function is to display the content.

Content of course doesn’t just include copy, it encompasses a variety of media including graphics, illustrations, videos, audio and images.

Content design is all about knowing what your designs purpose is, and how it will achieve that purpose, before starting any designs.

But there is much more to content-first design than having real content instead of Lorem Ipsum (placeholder text) and placeholder images. Content-first is a fundamental approach that places content at the very heart of the project. More like “Content-central Design”.

Benefits of Content-first Design

1. Refined information architecture

When the content has been decided and you have everything in place before the design process is started, it’s much easier to define your overall sitemap and ensure that it’s clean and logical.

The extra time spent thinking about this not only creates a much more user-friendly website, it also creates a site structure that search engines will love.

2. Content-first design is better for the story

Every website has a story or a message that it wants to convey to its visitors. This all comes from the client goals, the brief they gave you, the industry or niche, and so on.

But at the end of the day to be able to connect with its visitors on any level, the website needs a powerful story.

In this case, the story is the text content of the website which is much better at telling the story than anything else.

The content first approach in web design focuses on storytelling and making the design a tool to tell the story, not making the design the main focus.

3. Design-optimised content

As the client you want your website to look the best it can and to really stand out in your industry and impress your visitors.

If the content has been decided first the designer can create much more appealing and beautifully designed elements based on that content.

If the client has given you content which features lots of quotes, you can make these look much more appealing and stand out within the website design.

However, if the designer receives this content after completing the designs, these kinds of elements may have been overlooked. Therefore not being given the attention the client had hoped for.

4. Site consistency

From a development perspective, knowing the site content first can make the website code much cleaner and lighter, which in turn will make the website run faster; benefiting everybody.

It can also ensure that all title and text font sizes are consistent throughout the website design as all the content would have been planned out and no additional content will have to be squeezed into the design at the end of the project.

5. Speeds production


Everybody wants the development of the website to run as smoothly as possible and be created and set live within the given time frame.

When design kicks off without content the process often turns into an endless back and forth between designers, project managers, and the client. This usually results in lots of tiny, time-consuming text changes which the designer has to apply to the mockups.

Every step in this process increases the chance for miscommunication, crossed wires, and, in the worst-case scenario, the wrong copy getting published.

Waiting for the content after the design has been completed can often result in the project running on for months, and delaying the go-live date. So for the client, content-first is win-win.

6. Content-first is mobile friendly


Mobile-first and content-first design go hand in hand, you can’t really have one without the other.

Content-first is essential for determining your breakpoints when it comes to responsive design. Otherwise, you are guessing based on a visual with placeholder content. Dropping in the content later on usually results in redesigning and restructuring the website and serving a “watered down” version of the site on mobile devices to improve the experience on smaller screens.

An Example without Content-First


In the example image above we have a simple blog post block that would appear under a latest news section. On the left we have the version that was generated in the design stage with placeholder text, on the right we have an example of what the real content could look like.

Before seeing the content the designer has no idea of the required length of title, author name, snippet text length or tag name length. This makes this section appear untidy once the content has been added.

If the content had been provided before the design process had started, these larger length elements would have been accounted for and designed in a different format ensuring that the design remained clean, tidy and visually appealing.

Getting Started With Content-First

If you are looking for a new website and wanting to approach your web design content-first you have a few options. Write the content yourself and provide it to your designer, hire a professional copywriter to help produce your content, or, if you are working with a full-service digital agency (yay, that’s us!) they will often have somebody employed that can create great content and help you with your content strategy. Remember, you can always make small tweaks to your content later on if your website has been built with a Content Management System. 

comments powered by Disqus

Get in touch today!

Start your project