graphicpush

Thoughts on branding, design, writing and life by Kevin Potts. Established 2003.

Separation: Thoughts and Illustration

Recently, the whole issue of separation has been getting a lot of attention in development circles. While I do not pretend to be a l33t CSS HaX0r, I do understand the intrinsic advantages of separating the layers of a web page, and fully back the smarter people who are spearheading the movement.

Recently, the whole issue of separation has been getting a lot of attention in development circles. While I do not pretend to be a l33t CSS HaX0r, I do understand the intrinsic advantages of separating the layers of a web page, and fully back the smarter people who are spearheading the movement.

The way I see it, a web page breaks down into four layers: Structure + Content + Behavior + Presentation = da site. The only necessary elements are the first two; Behavior and Presentation are bonus layers that add non-critical functionality and cosmetic styling. Without them, a web page is still 100% accessible and usable—it may look like Netscape 3, but it works just as well as a fully tricked out page in Firefox.

The recent article on A List Apart struggles to make the case of separating content from structure. Since one can not exist without the other, this fundamentally can not be achieved on the same level as CSS and JavaScript, since those layers are tightly controlled in isolated environments (.CSS and .JS files, respectively) and are optional to the final page.

That being said, content and structure can be separated on an administrative level. This is where we get into the holy grail of the Perfect CMS. The structure is retained in HTML templates. The content is managed by a database. When a browser renders the page, the CMS magically mixes the two elements, and a web page is born. But the separation is only an illusion because they have to be rendered together to be useful. The beauty of CSS and JS is that they are always external files, conveniently linked to the structure but utterly stateless on their own.

Because I am an artist first and web developer second, I attempted to create a graphic representation of separation. While I am no Tufte, I think the illustrations crudely get the point across—the content is omnipresent, and everything lives within the HTML Structure.

Content
The Content Layer

Of course the heart of every webpage is the actual content. This could be plain text, images, contents of an online store, complex tabular data or even Flash. Whatever. This could be manually typed in or controlled via a CMS.

Structure
The Structure Layer: HTML

The HTML sets the structure of the document and holds all the layers together. It not only dictates Meta information, but describes where text sits inside tables, or where <div>’s divide up sections. It is the framework for the content, while providing programming hooks for the next two layers—Behavior and Presentation. Fundamentally, the content and the HTML are the only required elements of a webpage; if the following layers did not exist, the website would be just as usable. Beyond this point, everything is just icing on the cake.

Behavior
The Behavior Layer: JavaScript

The Behavior layer is a relatively new concept, but follows the same guidelines as the Presentation layer—the HTML should be stripped of all internal JavaScript tags, and these script nodes should be collected into an external .JS file. There are really no disadvantages to this method beyond rethinking how we build websites (again). This topic has been covered more thoroughly elsewhere.

Presentation
The Presentation Layer: CSS

This one, of course, has been beaten to death. Separating style from structure has been the battle cry of the standards movement, and the rate of education and acceptance has induced a sea change in web development practice. The diagram shows the CSS living inside the established HTML structure. It uses the HTML as a framework of hooks and tags to alter how we view the content without changing the content or the structure.

Final
Finally: What the User Sees

This is what the web audience sees. The structure of the HTML remains but the actual HTML is hidden; the content remains visible, but the presentation is altered through CSS. Thus we can have the same content and structure remain the same through infinite stylistic changes.