O'Reilly logo

O'Reilly School of Technology

Log In

Call 707-827-7288

Live Chat

Overcoming the Bottleneck in Content-Driven Website Design

Students of web design need to understand the relationship between content and presentation. It affects all programmers who work on the web, no matter which language they use. As an experienced designer and instructor of the O’Reilly School of Technology Introduction to HTML/CSS course, I’ve found that an effective approach to design begins with a sharp focus on content. Still, sometimes that content is difficult to gather, which can result in complications and delays.


What Do We Mean by Web Content?

The text, images, and other multimedia in a site make up its content. Altogether, these items comprise the site’s content inventory. Some designers will use filler text like “Lorem Ipsum” to start work on a design before the actual content is collected, but this practice runs counter to content-driven design. When content is not available, there are options available to overcome this bottleneck in the content-driven design process.


What is Content-Driven Design?

Website development is reliant upon certain resources. Some of these are technical concerns, such as the choice of host, server, or scripting language, but in the end, no matter how elevated a developer’s level of technical competence may be, without content, there is no website.

Central to the notion of content-driven design is the demand for “content first.” Website design follows content, not the other way around.

Living up to this ideal means abandoning the classic Lorem Ipsum filler text. This placeholder content is used to fill a design and give an approximate visual representation of how text will flow through that design. Some variant of Lorem Ipsum has been used in typesetting since at least the 1960s. Some reasons to avoid Lorem Ipsum include:

• It can be pushed live accidentally.
• The placeholder text does not allow for a one-to-one semantic relationship between content and presentation.
• Lorem Ipsum can distract clients, leading them to ask questions about the placeholder text, instead of focusing on the actual design.


Bottleneck and Points of Failure

The reliance on content in website design creates a bottleneck in the process. A single point of failure is a part of a system that will stop the entire system from working if that one part fails. The content-first approach can result in delays when content is unavailable. This problem can occur at any scale, but is more prevalent with smaller projects.

On large-scale web development projects, acquiring content before starting the design is often a non-issue. Clients with larger projects frequently have content-developers on staff. These clients have access to curated data and content experts with insight into the unique culture of the organization.

Conversely, for street-level web designers working for a small client, getting web content can be like getting blood from a stone. The entire process will come to a halt until the developer can manage to squeeze the content from a busy, reluctant, or unmotivated client. These client behaviors create choke-points in the design process. Under these circumstances, even the ideal of content-driven design fails. If you wait for a small or problematic client to build the entire content inventory, it could be years before you launch.


Overcoming the Content Bottleneck

There are a few techniques at your disposal to manage a situation where content is difficult to collect. In each case, you will have to narrow your expectations to achieve a realistic result. This means you have to manage your client’s expectations as well.
Generally, text will make up the majority of your content inventory. It will often be the most difficult to obtain, because you’ll probably need to develop a certain degree of expertise in the subject matter. Start with the basics, like public domain information about the client:

• phone number
• address
• hours of operation
• qualifications, certifications
• basic mission statement
• slogan
• logo

A base-level content inventory will allow for an informational site, web presence, and the beginnings of search engine optimization. Explain to your client that the site will grow like a tree from a seedling. Growing a site gradually actually solves two problems. It keeps your content fresh and enhances SEO. A website that drops into place and never changes, becomes uninteresting to viewers and generally does not generate a positive page rank over time.

Images are also important to a website’s content inventory because they allow you to break up the text and communicate visually. If your client agrees to purchase images, you can buy watermarked stock photos from various sites, such as istockphoto.com. Set up an account for the client and build up a portfolio of images you think will work. Place those watermarked images into the design.

You can save the client some money if you have graphic skills of your own. Become more self-sufficient by taking the time to learn the basics of digital graphic design and add value to your toolbox. You can make the graphics you need to make the websites you create visually appealing.
Keep an eye on client behaviors when it comes to content. Many of them will be ignorant of copyright laws. If they have been given editorial control through a content management system, don’t let them crib content from other websites. (This happens. It shouldn’t, but it does.)


The Last Resort

If the client is still slow to produce their content, you have another option. Show the client an example of the design that uses content from a random article. You won’t launch with that material, but it will raise fewer questions than the random gibberish of Lorem Ipsum. It may even prod the client into creating their own text, inspired by what they’ve seen.