How to be web content agnostic (and why you should)

Ben Moss.
February 19, 2015
How to be web content agnostic (and why you should).
You cannot design without content. It’s a mantra repeated by designers worldwide, it’s a plea in countless emails to clients, it’s a cornerstone of responsible design. One of the most respected names on the Web, Jeffrey Zeldman, summarises it neatly in a pinned tweet: This is because design is about solving problems. If content were a pill, design would be the sugar coating. However designing with content is contrary to the direction the Web is moving in, and may even be damaging for your clients…

The myth of designing content

The truth is, you aren’t designing with actual content. Let’s leave aside the idea that clients don’t deliver content on time — plenty do, and those that don’t simply need you to project manage — for the sake of discussion, let’s assume you begin the design process with a nice shiny email from your client with comprehensive content attached. You’re still not designing the actual content, because the nature of content on the Web is that it’s transient. [pullquote]changes in content should not necessitate a redesign[/pullquote] When was the last time you worked on a website that didn’t run on a CMS? Did you think the company just wanted to keep their phone numbers up to date? Companies don’t change their phone numbers. What they do is let the VP of marketing run riot with the WordPress login the first weekend your back is turned. Content on the Web is always temporary. Natural changes in content should not necessitate a redesign. We’ve sold ourselves the myth of designing content because it syncs nicely with our view of good design being invisible. However, with this approach what we’re really designing is a single iteration of content, the lifecycle of which is undetermined. Designing content is damaging for clients if we allow ourselves to be seduced by the idea that we’re working with fixed content. Think of being content agnostic as responsive design, from the other direction: whilst still respecting content, we accept that it’s substantially unknowable and so our designs must adapt to whatever content is inserted.

Designing dummy content

Unless you’re typesetting an academic essay written entirely in latin, then lorem ipsum will not be representative of your content, and most web designers rightly avoid it. However, it’s wrong to say that dummy content serves no purpose. Dummy content can be valuable if it’s prototypical of site content. Ideally it will have three characteristics:
  • it will be the same language as your content;
  • it will be the approximate length and rhythm as your content;
  • it will be on a similar subject to your content.
These three characteristics will ensure you encounter the same problems in your design process, as your actual content will when live. Take for example a staff biography. Provided you know that it’s written in English, is the résumé of a senior manager with an engineering background, and will be a single paragraph of no more than 100 words, then you can design that element. Staff bios are frequently updated, and staff turnover is often high. Any solution you provide needs to be robust enough to adapt to these kinds of changes, or it’s not fit for purpose. Our work isn’t theoretical, but that doesn’t mean we need actual content to design. What we need are content models: accurate prototypes that allow us to explore design issues, without the restrictions of ‘final’ copy.

Design precedes content

When we expect content to change, we have to design not content, but placeholders for content. Take a look at a newspaper. It is a practical impossibility that the entire content be designed each night. Thousands of lines and hundreds of columns are slotted into a pre-designed structure. When the structure doesn’t fit the content, it’s the copy that is padded or truncated; not the design. Pt size on inserts can be tweaked, images can be scaled, but in general terms the design of a newspaper dictates its content. Happily we don’t face the same issue on the Web; we have scrolling. However, similar problems online are resolved with similar solutions. The Guardian newspaper has just launched an excellent responsive redesign of its website. When designing headlines, they’ve worked to ensure that a five word headline sits comfortably alongside a fourteen word headline. The approach is successful because the team at The Guardian have designed the site, not for content, but for a range of potential content. There are restrictions — you couldn’t insert a fifty word headline — but the solution is flexible enough to handle content growth. theguardian Because content is liable to change, design will inevitably precede content. The solution to this problem is to adopt a content agnostic approach using techniques such as Samantha Warren’s Style Tiles to design for models of content that are robust enough to survive in the wild.

Design is content

We know from eye-tracking research that the only time your content is read is when it’s parsed by Googlebot. Most human beings never read websites, they barely look at websites. You and I might, but we’re the exception. Most humans scan a page quickly, click something that looks interesting and repeat the process until they land on an approximation of what they were looking for. And so, the client’s core message isn’t conveyed by content, it’s conveyed by brand. The colors, type, imagery and a few snatches of content here and there, are what most users base decisions on. This is the main reason micro-copy is proving to be such a vital part of web design: you won’t make a sale with the opening paragraph of your ‘About Us’ page, but you might with the privacy statement above your contact form. [pullquote]what we’re really designing…is the framework within which to create content, not the content itself[/pullquote] With the rise of SaaS, designers are increasingly finding that their design work, visual, UX, and strategic, is taking on the role of content. As the Web continues to move away from passive content delivery, to active content creation, design becomes increasingly important as the primary means of communicating. A product designer doesn’t need to know what words a pen will write in order to design it. He needs to know the general use — whether it will be a brush pen, fountain pen, or rollerball — but the words that it will write are irrelevant to the design process. The Web is increasingly becoming a place of content creation. We can provide parameters — a maximum 140 characters being the obvious example — but what we’re really designing, whether we do it for clients or their customers, is the framework within which to create content, not the content itself.


The myth that we’re designing content is rooted in print design, when content was final as soon as it was dispatched to the printers. Designing content for the Web requires that we embrace the inherent transient nature of our content, or risk limiting the content’s potential by imposing a rigid design on it. As the definition of what consitutes a website continues to evolve, design will continue to function as content, and content will continue to perform as a design solution. What we design is not a site’s content — which is transient — but rather its aims, its values, its aspirations; what we design is (for want of a better word) its soul. Far from being decoration, a content agnostic approach forces us to produce a robust design solution that doesn’t impose itself on future content. Design precedes content. Content in the absence of design is not content, it’s a brief.

Ben Moss

Ben Moss has designed and coded work for award-winning startups, and global names including IBM, UBS, and the FBI. When he’s not in front of a screen he’s probably out trail-running.

Read Next

15 Best New Fonts, July 2024

Welcome to our monthly roundup of the best fonts we’ve found online in the last four weeks. This month, there are fewer…

20 Best New Websites, July 2024

Welcome to July’s round up of websites to inspire you. This month’s collection ranges from the most stripped-back…

Top 7 WordPress Plugins for 2024: Enhance Your Site's Performance

WordPress is a hands-down favorite of website designers and developers. Renowned for its flexibility and ease of use,…

Exciting New Tools for Designers, July 2024

Welcome to this July’s collection of tools, gathered from around the web over the past month. We hope you’ll find…

3 Essential Design Trends, July 2024

Add some summer sizzle to your design projects with trendy website elements. Learn what's trending and how to use these…

15 Best New Fonts, June 2024

Welcome to our roundup of the best new fonts we’ve found online in the last month. This month, there are notably fewer…

20 Best New Websites, June 2024

Arranging content in an easily accessible way is the backbone of any user-friendly website. A good website will present…

Exciting New Tools for Designers, June 2024

In this month’s roundup of the best tools for web designers and developers, we’ll explore a range of new and noteworthy…

3 Essential Design Trends, June 2024

Summer is off to a fun start with some highly dramatic website design trends showing up in projects. Let's dive in!

15 Best New Fonts, May 2024

In this month’s edition, there are lots of historically-inspired typefaces, more of the growing trend for French…

How to Reduce The Carbon Footprint of Your Website

On average, a web page produces 4.61 grams of CO2 for every page view; for whole sites, that amounts to hundreds of KG…

20 Best New Websites, May 2024

Welcome to May’s compilation of the best sites on the web. This month we’re focused on color for younger humans,…