Something witty this way comes.

Content-Driven Design

The post I wrote about the designline concept stirred up some interesting conversations across the web. Among many of the sites linking to the designline post, a common remark was that I built the content of the site before building the design. Some saw this concept as novel, some knew in the back of their head it was important but had never before seen the benefit visually, and some saw it as a "case in point" of something they had been pushing other designers to do for some time.

In the wider field of graphic design, content-driven design is not a new concept. One of the primary purposes of graphic design is to effectively communicate your content. That this is now becoming a widely recognized concept in the field of web design simply shows that the field of web design is starting to finally mature.

The intent of Cascading Style Sheets (CSS) was to provide separation of content and design. In reality, it is often hard to have true separation of content and design, but this is often due to browser inefficiencies. On more complex sites you will find you do need to add superfluous bits of markup just to satisfy some design need.

Markup is supposed to be semantic, meaning the markup is supposed to define what a particular piece of content means, not how it looks. CSS is then intended to give your markup its look and feel. An example might be a piece of text enclosed in an <abbr> tag. The markup says the content of that tag is an abbreviation. The CSS might say the content of that tag should appear in italics with a dashed line underneath.

If you are truly using CSS the way it should be used, you will find it's almost impossible to create your design with first creating your content. You just don't have anything to work with! This is actually a good thing. It pushes you to focus first on the content—how it flows and how it is logically separated—all before you start focusing the design. But why is that important? Because the quality of your content is senior in importance to its presentation. (A million Flash gurus just hit Back. Sorry, but that's how it is.) Granted if you have an ugly site, your site will be dead in the water. But, if people are going to come back to your site, bookmark it, mention it to friends, or even listen to what you have to say, it's the content that will make that happen.

In talking to other designers, the missing piece of the puzzle seems to be that many web designers simply don't understand the full range of options available to them with regard to applying design to logically laid out content. The unordered list is an excellent example. The list of main sections on a site are best represented semantically as a list. This is usually represented in markup as so:


Semantically, this makes sense. It's a list of main sections on the site. But the sheer range of options of how that list can be designed is often unknown to designers not intimately familiar with the power of CSS. To give you just a taste of how many ways a simple list can be designed, check out Listamatic and Listamatic 2.

The list example above is really what the concept of "content-driven design" means. It's the concept that the design is really just how the raw content is being designed without altering the content. In other words, the content is the fundamental, the base, on which the design is created. You can strip away the design and the content is still standing strong.

Going back to the practicality of making actual web sites, I mentioned above that it is often hard to completely separate content from design. Sometimes an extra <div> tag or two is needed around some block of content just so your design will work correctly. This is understandable, as the separation of content and design is really an ideal, and ideals are often not met 100%. But this should not stop you from working toward that ideal and being creative in finding ways to achieve that ideal with the tools available to you.

Having a solid understanding of all aspects of CSS is invaluable to a web designer. You will soon find you are whipping out the markup in a matter of minutes, only to leave it alone for the next several hours while you play around with the CSS. You will find that making changes to your site becomes easier and easier because the logical layout of your content will not change nearly as much as your design. Many people seeing the designline animation noticed that after adding the content, all work on the markup stopped. From that point forward, it was all CSS work.

Content-driven design is becoming more and more important in today's web. It has been proved many times over that "content is king" (witness the enormous success of RSS), so it is no surprise that design is starting to be driven by content. It does take practice, it isn't always easy, and for commercial sites the payback can sometimes be hard to see on an account ledger, but you will be doing your visitors and yourself a favor.

And finally, going over all these points is not very useful without some tools to help you out. While these don't cover the entire spectrum of what you need to know, it should at least help get you off on the right foot.


One other benefit I've noticed is that I can read mboffin on my phone even though the phone doesn't "understand" stylesheets - it just displays the HTML and it's readable. I don't THINK it's showing a dedicated "mobile" version of the site, but it's so hard to get the thing to do ANYTHING that I can't really say for sure.

Wirehead - May 24, 2005 @ 4:23 PM - Permanent Link
The whole design vs. content really is a chicken and the egg type of proposition, but I'd argue that in internet media is even more aligned to content first, then design that your more traditional print media.

When making a web site, you may have to limit how much content appears per page on the site, but extra pages are free and don't have as many ramifications as in print media. In a smaller, stapled magazine (Sports Illustrated, Newsweek, Time, etc.), due to the laws of physics, your number of pages must be divisable by 4 (ideally 16). For perfect bound magazines (Vanity Fair, Elle, etc.) where the pages are glued not stapled, your overall number of pages determines the thickness of the spine and thus the design of it, etc.

Also, in a magazine your editorial will all be on a baseline grid, meaning all the copy not an ad will be the consistant distance between lines, (and same point size) throughout the magazine and starting from the same distance from the top.

Even in print media, however, content will come first. It's quite a job for the designer just to get things to fit. There's definately a lot of give and take. A designer may send back to the editor a request to change a headline, cut some copy out. There are firefights in some organizations over this.

Ironically, newspapers have come up with a unique way of getting over this problem. Newspaper articles are written three times: small, medium and full format and placed one after another. When the editor runs out of room, the rest of the article is chopped off. You'll notice this in repurposed content on news sites quite often.
bob - May 24, 2005 @ 4:42 PM - Permanent Link
Another good read Dylan. I must say that this type of division is very logical: seperating the look and feel from the content side. I have been learning Object Oriented Analysis and Design for the past 2 years and this type of thing is drilled in. If on slightly different subject matter of course.

It increases flexibility, eases maintenance, helps with understanding and makes the whole thing more robust. Nobody likes spaghetti code.

I have built up a great collection of CSS bookmarks now, thanks mostly to your 2 articles and in about 4 weeks, when I have more time, I will be experimenting with CSS and PHP.
OneNight - May 25, 2005 @ 12:38 AM - Permanent Link

Post a Reply

Before you may post, you need to either log in or sign up.