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.

Conclusion

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

6 Best AI Productivity Apps in 2024

There’s no escaping it: if you want to be successful, you need to be productive. The more you work, the more you…

3 Essential Design Trends, February 2024

From atypical typefaces to neutral colors to unusual user patterns, there are plenty of new website design trends to…

Surviving the Leap from College to Real-World Design

So, you’ve finished college and are ready to showcase your design skills to the world. This is a pivotal moment that…

20 Mind-Bending Illusions That Will Make You Question Reality

Mind-bending videos. Divisive Images. Eye-straining visuals. This list of optical illusions has it all. Join us as we…

15 Best New Fonts, February 2024

Welcome to February’s roundup of the best new fonts for designers. This month’s compilation includes some innovative…

The 10 Best WordPress Quiz Plugins in 2024

Whether it’s boosting your organic search visibility or collecting data for targeted email marketing campaigns, a great…

20 Best New Websites, February 2024

It’s almost Valentine’s Day, so this latest collection is a billet-doux celebrating the best of the web this month.

Everything You Need to Know About Image Formats In 2024

Always trying to walk the tightrope between image quality and file size? Looking to branch out from JPGs and PNGs this…

The 10 Best Logos of 2023 - Ranked

From vintage aesthetics to innovative new color schemes, we’ve seen a lot of creative logo designs this year. In this…

Exciting New Tools for Designers, February 2024

2024 is well underway and shaping up to be an interesting year. So, to help you keep your focus on working hard and…

The Art of Engineering AI Prompts

In the rapidly evolving world of artificial intelligence, the ability to communicate effectively with AI tools has…

15 Best New Fonts, January 2024

In this month’s roundup of the best new fonts, we find a large number of vintage, retro, and revival typefaces. Is it…