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.