Justin Kistner

Content Driven Design

When I first offered web design services, I used to start the project by designing site mock-ups using placeholder photos and copy. Later I would plug in the “real” content. The problem I encountered over an over again was that the real content didn’t fit where the placeholder content used to be. I would design a horizontal nav bar with six, one-word links and the actual navigation would have twelve links and some were two or three words. Sites often took on a Frankenstein aesthetic.

The next thing I tried was reversing the development process so that I would design after I gathered the content, photos, etc., which made a huge improvement. However, once I started adding content updates post-launch, I realized all I did was delay when I would hit the wall with the design of the site.

That’s when I decided to find a better way to design for the web. I knew there had to be a way to make designs flexible so that every time new content was added it didn’t require reworking the site. That’s when I turned to face the technology and discovered I had been doing it all wrong.

I had been making designs according to the principles I learned for print. It turns out those principles don’t cover the needs of web design. Designing a web page is more than laying out content and picking colors. Web pages have to function. I wasn’t considering the design constraints and benefits of HTML and CSS in my designs. Understanding the design constraints for content on a web page allowed me to create designs that are attractive and flexible.

The primary constraint for designing web pages is the method used for rendering a page, which is the box model. Everything on a web page is rendered from left to right and top to bottom. The elements on the page are boxes, which contain content—either written or visual. Take for example this site, the boxes look like this:

The above boxes come from HTML block elements, such as headlines, paragraphs, and unordered lists. The best thing I ever did for my web design ability was to learn HTML and CSS. Once I understood how to work within the limits of those languages, I also knew exactly how to push them for unique and flexible designs. That’s also when I learned that design starts by gathering all of content and then making a design from it.

I also had to learn why content was the foundation for web pages and therefore why the box model drove the design constraints. It was hard as a designer to learn that writers were actually the leaders and that my job was to make them look good. Perhaps this next section can help some of your strong headed designers out there come to peace with content creators.

In web design, content is king

I’ve been asked on more than one occasion why written text is the foundation for web page design. The reason for it is partly historical. Originally, the web was not invented for public use. It was intended to share information, text information, within the military and academia. But, it’s more than just a precedence that hasn’t changed. Written content is not only the most versatile language format, but it is also the only format where the receiver is in control of consumption. In a simple scan of a web page, people can determine what information they would like to take in—compared to dragging it out of a salesmen or waiting for it from a one-way, linear format such as radio or TV. Our brains are capable of taking in a great deal more written information than the linear format of spoken language, which alone makes it the logical language format for the web but that’s only the beginning to the reasons why text rules the web.

Like humans, computers can read written content, which opens all sorts of bonus possibilities. People with disabilities can do everything from increasing the text size to having the computer read it aloud. Search engines rely exclusively on written content and text links to understand for which search terms to serve your sites. Language translation software opens once unreadable documents to people all over the world. We are just beginning to see what amazing things computers can do with cataloguing, interpreting and organizing our written documents.

Final Tips

Here are a few things that helped me understand content driven design and get the most out of the approach:

Web design is the art of arranging content on a page that is both functional and compelling. The compelling part is where style comes in. And, in order to get started, you need the function to be well defined (that means content already created or at least clearly envisioned).
Some of the best aesthetic principles to learn from come from the days of movable type. Movable type also had the design constraint of a box model, only then it was “real” boxes.
You want to see a killer example of how to organize content into a design being mindful of the box model and connections between pieces of content? Check out the 37Signals piece on An Introduction to Design Patterns.

Ok, so I just have three tips for you right now, but that means you have a chance to be a superstar and share your tips in the comments below.