Separation: The Web Designer’s Dilemma

by Michael Cohen

80 Reader Comments

Back to the Article
  1. (not same m.cohen as the author!)

    Hi,
    I found the article and discussion very interesting.

    I’m reading this as a reversal of the purist/pragmatist dilemna where once the ideal was to write hand written code has become the search for the perfect engine to do it for you.

    Either way round the purist seems to end up trying force round pegs into square holes In this case the templating purist is making bigger more expensive engines that end up more complex than writing the code by hand because fundamentally the 3 things can’t be decoupled. As an example adjust a presentational element to change the colour of text to be white on white – doesn’t that couple presentation with content (while actually not affecting structure)? 

    My take on templating engines is they are great when when there is little money and they empower small orgs to have sites they wouldn’t otherwise afford but taken too far and they become a burden, an obsfuscator, a garden path leading away from the nirvana of writing the code (and all else that entails) yourself.

    Okay coming back to separation debate, well i’ve delved into css without training or time and my experience is that I’ve made an increasingly cumbersome style sheet lacking good naming conventions for classes and probably far too many classes but which does allow minor miracles to take place on my site.

    So – I don’t think complete separation is possible or even makes any sense whereas understanding the issues and best practice on how to write css is highly desireable?

    mikey

    Copy & paste the code below to embed this comment.
  2. >>Dante:
    The average user will no absolutely nothing about HTML and will never, ever look at the source code, never mind yell at you for using b instead of strong.

    They are not going to yell at you for using strong instead of b either ;)

    >> for a site for the average user (ESPN or a history website), you shouldn’t worry about using phrase elements or ‘semantic’ markup.

    Semantic markup is largely for the benefit of machines, not humans. If you don’t beleive in semantic markup, drop your <title> tag, drop your tags, drop your <hx> tags and style everything with <font>. Lets see how well Google ranks your site afterwards.

    Copy & paste the code below to embed this comment.
  3. >>
    Semantic markup is largely for the benefit of machines, not humans. If you don’t beleive in semantic markup, drop your <title> tag, drop your tags, drop your <hx> tags and style everything with <font>. Lets see how well Google ranks your site afterwards.<<

    What I meant was nitpicking about the little things (strong and b, em and I). I know the <title> tag is important, and I am NOT and advocate of tag-soup. I do use P tags (though some pages on my site are from when I was just learning HTML, and I haven’t updated them yet) and headers.

    I myself I use the em tag, but I style it so that it appears bold, italic, and underlined (which means strong emphasis). When I want just italics, I use the I tag. In my view this is very semantically correct, and the em tag should be styled with bold, underline, and italicized as default.

    As for search engines, I don’t really believe that strong will result in better ranking than b. And even if it does, it’ll only be a drop in the ocean.

    Maybe you could cheat search engines by styling all tags as a h1. Sounds a like a cool experiement to try…

    As I said before, seperating content and structure is like seperating your car and its engine: they both form one as a whole.

    Copy & paste the code below to embed this comment.
  4. I have found Absolut Engine that has WYSIWYG editor and produces valid XHTML 1.0 Strict web standards compliant code:
    http://www.absolutengine.com

    clean urls are also supported. good.

    Copy & paste the code below to embed this comment.
  5. This article is not preaching anything new and is merely recanting the widely used concept of separation of content and stylization.

    I really don’t think this article deserved to be published on ALA.  We should focus more on practical, or cutting edge concepts of separation.

    Copy & paste the code below to embed this comment.
  6. It is useful to consider structure as the glue that connects presentation and content. In precisely the same way as you use labels (class and id attributes) to connect the structure to the presentation you can use labels to connect the structure to the content.
    This is a standard technique when multilingual applications are written. There is no reason why a similar scheme should not be applicable to web pages.

    Okay, I accept that it isn’t that simple. You could certainly seperate out block structures without too much sweat but where does a set of em tags fit into the scheme. Are they presentation, content, or structure?

    Copy & paste the code below to embed this comment.
  7. It’s nice to see that one of the core values of Media Paradigm is stated as “Integrity, honesty and responsibility – as individuals and as a company”

    Based on the fact that they have stolen and ruined a design it seems somewhat amusing.

    I can however assure you that just because they say they are the “UK’s most established Web Development firm” does not make it so. The UK (and Europe, although I’m not sure why Marcia made the extension in this case) has a wealth of fine designers who don’t have to resort to such blatant plagiarism to ply their trade.

    This issue does highlight the fact that design, I feel, is becoming increasingly easy to steal but due to the nature of the Internet’s internasionalness (is that a word I wonder) very difficult to stop.

    Copy & paste the code below to embed this comment.
  8. Well, what about XSL? I mean you can truly separate content from presentation if your content is, for instance, XML. Then you use XSL for structure and finally CSS for presentation.

    Copy & paste the code below to embed this comment.
  9. “I myself I use the em tag, but I style it so that it appears bold, italic, and underlined (which means strong emphasis). When I want just italics, I use the I tag. In my view this is very semantically correct, and the em tag should be styled with bold, underline, and italicized as default.”

    No, that’s wrong. The <em> tag is for emphasis, but the <strong> tag is for stronger emphasis. So that’s what you should use. (You even say “strong” emphasis in your text above!)

    Copy & paste the code below to embed this comment.
  10. First of all, I think it’s obvious that structure and content are tightly interwoven; there isn’t any need to separate these.
    Second, I don’t consider adding classes and ids to structural elements as necessarily introducing presentation to the structure/content, but merely as appending the often insufficient set of (X)HTML elements.

    Although this practice often springs from the need to create “handles” for presentation, if chosen properly they shouldn’t have a presentational character.

    Consider a markup language which did offer all the different elements needed to mark up each and every bit of content with the appropriate meaning: each element could be specifically targeted for styling without any “pollution”.

    Copy & paste the code below to embed this comment.
  11. First of all, the most interesting part of the article (I see no “real” problem with the main issue) and as I see it the beginning of very interesting discussion/article is the last paragraph “Real-world separation tools”.

    It describes “the perfect separation system” from a web developers point of view; which to me is just one of many perspectives needed. In other words we are merely touching the production phase of a much larger and more complex process. There are many more factors to involve when dealing with web content management; i.e. the client may have one or more existing systems that we need to retrieve content and/or structure from.

    Separation must have a purpose. It also seems that the author has missed the point of separation; the main reason this “separation system” should be allowed to exist is to be able to present the parts as a whole. So why not call it a “wholer system”? Since that should be the purpose of separation.

    One of the main issues when investing in (deciding to use) a web content management system is also to “get rid of” the webmaster. It is about creating a new collaborative environment where the ones involved, depending on his/her role, can do what they do best; designing, developing, writing, administrating etc, without having to rely on someone else to be able to perform the task needed. A web content management system opens up opportunities (as well as restricts if wished upon) and streamlines work process. It is a long term investment (decision) that should come from company strategy and not from “developer needs and wishes”.

    From what I have seen following the links to various tools suggested in this discussion none of them are web content management systems, mostly because they only focus on one role/task in a larger process.

    They are also tools that offers one thing, but also restricts many other things. Say they allow me to only write valid css/xhtml, then they restrict me from writing “hacked” html for i.e. IE6. That is something I would never agree upon. It might seems stupid, but sometimes a clients needs (i.e. in an intranet solution where the company only uses IE6) makes me tweek the limits (of cause being aware of the hacks I am doing).

    I would rely on a tool that demands nothing but offers everything. That way it is up to me as a designing human being to make the right choices for my clients… depending on the situation and conditions.

    I could write miles but I am afraid I have already bothered you with poor English and maybe, to you, poor thougths…

    To try and answer the question in the article: A webmaster is not able to build a competent web content management system (if so is the case: he/she is not a webmaster or the system is not a web content management system)

    Sorry for the poor english. (I am one of those people from Europe)

    Copy & paste the code below to embed this comment.
  12. “I challenge anyone to show me a system that allows them to build a standards compliant site faster than I can with Octane8.”

    Octigon.com doesn’t validate as correct html. 

    Ok, http://www.plone.org.

    Copy & paste the code below to embed this comment.
  13. plone.org doesn’t validate either

    Copy & paste the code below to embed this comment.
  14. IDs were presented here as being presentation.  I am in the camp that wants to use them as structure: ID=sitenav ID=pagenav etc.

    Hn, P, etc., are not just needed for search engines, but also for modern screen readers.  In the current version of Jaws, for instance, the end-user can tell Jaws to skip to the next or previous Hn tag.

    Copy & paste the code below to embed this comment.
  15. I agree with Charles. When introducing others to structural markup, I have described it as function-oriented rather than appearance-oriented. The tags (with or without ids or classes) desribe the role that the enclosed content fills. That’s the purpose for the structure: to label headers as headers and paragraphs as paragraphs. The data without such structure has very little value to machine or human. With structure (and stylesheet) it works with both.

    Copy & paste the code below to embed this comment.
  16. http://validator.w3.org/check?verbose=1&uri=http://plone.org/

    yes, it does.

    Copy & paste the code below to embed this comment.
  17. The problem with most of the replies is the assumed concept of the ideal system; eg. everybody uses a standards complaint system, you can do everything you need in standards.

    This is not how the world is unfortunatly. My CMS (http://www.infireal.com/solutions/mxr) handles this problem by a flexible template solution so you can define targets(web/print/IE only web/RSS with auto detect or url) on a per sub/template basis.

    eg. for standards web target
    you have a template with subtemplates for the article, news

    for IE only(intranet) target
    reuses the article, news subtemplates but with a header that uses different CSS & JS

    for XML target
    XML template with no presentation links –

    This to me is a very clean approach.

    The system is also non HTML coder friendly:
    In the ControlPanel I use HTMLarea3(restricted to B,I,Lists) that produces relatively clean HTML and then postprocessed to be semantic meaninfull.
    Remember to capture as much seperate data as possible eg. having a date in the DB instead of markup(throught HTMLarea3): <div id=“publishdate”>nowdate</div>
    For the designer you can edit the raw html or include uploaded files. To each his own I say.

    ps. the demo on my site is very old and does not use the above.

    Copy & paste the code below to embed this comment.
  18. “As I said before, seperating content and structure is like seperating your car and its engine: they both form one as a whole.”

    “First of all, I think it’s obvious that structure and content are tightly interwoven; there isn’t any need to separate these.”

    I think that both these statements are wrong, and just a tad ignorant of the possibilities available with content and structure separation.

    I have wrote a bit about this here:
    http://www.wubbleyew.com/blog/showblog.asp?blogID=229

    Copy & paste the code below to embed this comment.
  19. Isn’t Theodor Nelson’s Xanadu-Project all about separating content from structure?

    http://www.xanadu.com.au/ted/XUsurvey/xuDation.html

    It seems Mr. Nelson has put quite some thought into this idea.

    Copy & paste the code below to embed this comment.
  20. “Hn, P, etc., are not just needed for search engines, but also for modern screen readers. In the current version of Jaws, for instance, the end-user can tell Jaws to skip to the next or previous Hn tag.”

    Opera 7 can cycle through headers on a page using S and W.

    Copy & paste the code below to embed this comment.
  21. You cannot separate structure from content without making the structure ilogical. That’s why I don’t do it.

    Copy & paste the code below to embed this comment.
  22. We have bigger things to worry about than seperating content and structure. It’s like worrying that you’re going to miss your favorite TV show (for me, The Simpsons) whilst your house is burning down.

    Example: I have been researching the possibility of 100% accessible Image tab Rollovers that use Javascript to replace the images and CSS for the rollovers. This method is built to so that
    it’s accessible to any UA – even screen readers (but only one browser, the best browser ever, gets it right: Opera 7). Sites using FIR are either inaccessible or riddled with hacks: it’s been solved by using Javascript, but no one seems to care: we’re all too busy worrying about ‘Should I use em or strong?’

    </rant>

    Copy & paste the code below to embed this comment.
  23. Harry: “…XML to describe the content, XSL to transform structure to XHTML on the client side, and CSS for presentation.
    Of course, the limitation (for now) is client support if that’s important to you. Well, that, and search bots don’t seem to understand XML, so if being found by search engines is important to you…” (http://www.alistapart.com/discuss/separationdilemma/2/#c8125)

    The solution is server-side scripts and stuff to fall back on, which I havn’t tried YET.

    Copy & paste the code below to embed this comment.
  24. There are several structures please stop fighting over the wrong ones!
    There IS structure in content that is part of the content, then there’s structure that’s part of the current page, plus structure of the whole site (repeated on all pages).

    You start by building a structure and adding content (yes the content includes a bit more structure). Now you use the structure (which may include some class or id attributes or not) as the hooks to style-up with CSS. If the structure is consistent throughout your pages, the style will be consistent throughout your site (a very good thing). And you can use the structure as a framework to add new pages/conent with the confidence that the presentation is already taken care of.

    The structure is the link between the separated content and presentation, wheter or not content can be separated from structure or not, is irrelevant. Hook onto the structure in order to provide presentation hints and behavioural facilities, but ensure the structure and content-with-some-of-its-own-structure is perfect before adding presentation.

    Also the greatest reason behind the separation (not sure if this has actually been mentioned yet!) is that it means you don’t have to rely on un-reliable presentation to convey the semantics/structure/content/meaning.

    Copy & paste the code below to embed this comment.
  25. First of all, I’d like to point out something that’s not directly related to the issues at hand.

    The website of the company I work for is horrid. As pointed out to us via a form submission, there’s no doctype declaration. Nor, I will point out myself, is it a site to be proud of in any way, shape, or form. It uses tables up the wazoo, needless BR tags, etc etc – in short, quite embarrassing for a standards-minded developer like myself.

    It’s a simple case of the shoemaker going barefoot. He’s so busy with projects for customers and clients that he has no time to make himself shoes. I’ve got at least 3 big projects on my plate (big is relative, since I’m the only web dude around these parts), and a number of people in the waiting line to ask for sites. In the words of the (in)famous Prince Humperdink, “…I’m simply swamped!”

    Ok, enough of that embarrassment. :p


    Dante: “What I meant was nitpicking about the little things (strong and b, em and I).”

    Yes, for most users, it is nitpicking. But tell that to the blind man who uses a screen reader to surf websites. The B tag is purely presentational, and says nothing about the meaning of the content it encloses. It is merely “Display this text in bold.”

    STRONG, on the other hand, is (usually) formatted by default in bold, because that is the commonly accepted way of placing a strong emphasis on content. But when you look at (listen to?) screen readers, they know to place a stronger emphasis on text designated with the STRONG tag, because it designates meaning, not appearance. Semantics (via structure), not presentation.


    Rob G.: “This article is not preaching anything new and is merely recanting the widely used concept of separation of content and stylization.”

    Partially correct. ;) As stated in one of my previous comments, I wrote this 5 months ago, but it was only able to be published now.

    However, at the time of writing, I had not seen anything besides “separate content and presentation”. I did not see any mention of there being 3 players, not 2. And I, needless to say, did not see every single article ever written, so forgive me if I missed something. :)


    Steveg: “You could certainly seperate out block structures without too much sweat but where does a set of em tags fit into the scheme. Are they presentation, content, or structure?”

    EM tags are semantic in nature, and are structural markup. They have default presentational styling assigned to them by the browser, and they set apart content contained in them as emphasized.


    Ronald van der Wijden: “Consider a markup language which did offer all the different elements needed to mark up each and every bit of content with the appropriate meaning: each element could be specifically targeted for styling without any “pollution”.”

    Quite correct. This is, according to my limited understanding, what XML/XSLT/XHowManyXAcronymsCanWeHave is for. ;)


    Kristian: “Separation must have a purpose. It also seems that the author has missed the point of separation; the main reason this “separation system” should be allowed to exist is to be able to present the parts as a whole. So why not call it a “wholer system”? Since that should be the purpose of separation….

    …Sorry for the poor english.”

    First things last, your English is considerably better than many (most?? :-/) native English speakers.

    Secondly, the purpose of separation is not to present the parts as a whole. That is comparing apples and oranges. “Separation” has no purpose, it IS a purpose. With separation, we allow content changes without affecting site structure or presentation, and presentation changes without affecting content.

    Yes, it’s pointless unless put together for the end user. But separation does not have a purpose, it is the purpose. :)


    Charles Belov: “IDs were presented here as being presentation. I am in the camp that wants to use them as structure: ID=sitenav ID=pagenav etc.”

    That is the proper use of ID and CLASS properties – structural markup and CLASSification. They are handles to allow styling just as much as Hn tags are. The only exception is that the ID/CLASS is user-definable, therefore it does not have a default styling set by the browser.


    Mathias Munk Hansen: “You cannot separate structure from content without making the structure ilogical. That’s why I don’t do it.”

    Not to the end user, no. But if you store your articles in a database, you certainly don’t want to store the site navigation DIV along with it. That’s a kind of structure, too. I assume you’re talking about STRONG tag structure and the like, however. ;) In that, you are correct – it should be, at every stage, part of the content itself. Which was one of my points in the article. :)


    Dante: “Example: I have been researching the possibility of 100% accessible Image tab Rollovers that use Javascript to replace the images and CSS for the rollovers.”

    I find this slightly amusing, but correct me if I’m wrong here. You’re using Javascript to ensure the accessibility of your site? Looking beyond the typical computer platforms, do you know how many devices that access the web do not support Javascript, or any kind of scripting, for that matter?


    XML and Various Related Flavors: Those of you who have brought this up are probably making a very good point. Unfortunately (see the Shoemaker analogy above), I haven’t had the time to teach myself this branch of coding. Yet.

    Copy & paste the code below to embed this comment.
  26. Michel Cohen: “This is, according to my limited understanding, what XML/XSLT/XHowManyXAcronymsCanWeHave is for. ;)

    That is exactly what I was referring to, but I thought not to throw in the “X-acronyms” to avoid clouding the discussion any further… ;)

    I feel this whole “separating content from structure” is rather artificial.
    Sure, with server side techniques you can separate text blocks from the basic page structure and drop them in as the page is requested, but what’s the point?

    Structure is not about techniques like that; I mean, a bunch of characters become a word once they’re grouped together in a certain structure, words form a sentence once they’re stringed in a certain order, seperated by spaces and/or interpunction. If you take the sentence structure out of the sentence, all you’re left with is words, context-less words.

    “Separation” in this context means to me: disentangling one from the other so both can be maintained and altered without – immediately – influencing eachother.

    If you try to disentangle the strands of wool that make up a sweater, all you and up with is a bunch of wool; once the structure of the sweater is gone, so is the sweater.

    Again, separating presentation from structure/content and behaviour makes good sense to me since they can live separately without harm; separating content from structure does not since that would destroy the meaning of the content and thereby the content itself.

    Copy & paste the code below to embed this comment.
  27. quote:

    Again, separating presentation from structure/content and behaviour makes good sense to me since they can live separately without harm; separating content from structure does not since that would destroy the meaning of the content and thereby the content itself.

    /quote

    I couldn’t agree more. I just finished writing about this on my own site. Essentially, I think content and structure can be separated on an administrative level with a good CMS, but they can not exist without one another at the final page rendering. The behavior and presentation layers, however, are completely optional to functionality.

    For those interested (with neat illustrations!): http://www.graphicpush.com/archives/000070.shtml

    Copy & paste the code below to embed this comment.
  28. quote:

    Again, separating presentation from structure/content and behaviour makes good sense to me since they can live separately without harm; separating content from structure does not since that would destroy the meaning of the content and thereby the content itself.

    /quote

    I couldn’t agree more. I just finished writing about this on my own site. Essentially, I think content and structure can be separated on an administrative level with a good CMS, but they can not exist without one another at the final page rendering. The behavior and presentation layers, however, are completely optional to functionality.

    For those interested (with neat illustrations!): http://www.graphicpush.com/archives/000070.shtml

    Copy & paste the code below to embed this comment.
  29. To add to Pats point octane8 has over 100 errors! I suggest people try http://urbanmainframe.com and the others that DarkBlue (1st post) has singled out as they all validate! Don’t bother boasting about something you can’t deliver its a waste of all of our time.

    Copy & paste the code below to embed this comment.
  30. >You’re using Javascript to ensure the accessibility of your site?

    What’s wrong with that? For image replacement it seems to make perfect sense, at least with javascript you can check to see if it’s supported before changing the presentation.

    Copy & paste the code below to embed this comment.
  31. <snip>A content may consist of many small parts which have their own structures, presentation and ontent. And this fact really deserves our attention.</snip>

    Great point, and a solution is to use a CMS that stores content “chunks”, not pages and one that allows you to define content structure for different types of content.

    liveSTORYBOARD CMS (http://www.livestoryboard.com) does this. It uses schemas to define content types (i.e. generic article, job description, image slide show, etc.) and enables content authors to define and pick the appropriate type for their needs. Content pieces are then assigned to pages, so you can have one or more content piece on a page and they can be of different types.

    A few other benefits:
    XML/XSLT/CSS (ideal for separating content and presentation)
    – valid pregenerated output (XHTML, HTML, JSP, etc)
    – real time wysiwyg editor validation
    – “nice” urls such as www.sitename.com/dirname/pagename.html as opposed to the more common with content management systems www.sitename.com/123?x=a&blah; and more :)

    As one of the developers, I suppose this may be a bit of a shameless plug, but for those interested, here is an example screenshot of some work in progress: http://www.girlsinc-online.org/demo/ExploreAndSucceed/Introduction.html. As a really simple example, this page shows a sample interview screenshot of what’s behind login for this portal project.

    The page contains an “intro” XML content piece, first pregenerated with XSLT, then furhter styled with CSS and “question/answer set” type content piece. We use XML schemas for the content types, so a common point of refernce for the semantics and content structure is used throughout a site. Authors edit the xml through a wysiwyg (http://www.livestoryboard.com/Products/Screen_shots.html), so the complexity is hidden from the non-techy CMS user.

    Further on the subject, storing your content and templates in XML (XSL is XML) allows you to continuously evolve them over time programatically rather than hand coding. So, as your needs and knowledge evolve, you don’t have to start from scratch.

    Copy & paste the code below to embed this comment.
  32. Looks like the “.” after “http://www.girlsinc-online.org/demo/ExploreAndSucceed/Introduction.html” was made part of the href, therefore breaking the link.

    Copy & paste the code below to embed this comment.
  33. So if one main purpose of separating content from presentation from structure is to allow easier redesigns site across entire sites, I’m curious how often it really happens like that.

    I’ve worked on projects where the previous designers worked hard to maintain this philosophy, but in the end, I still had to make drastic changes to the structure in order to achieve the desired presentation.

    My experience is that clean markup focused on separation of content, structure, and presentation might make a redesign easier, but in the end, one often ends up having to change up more than they ever expected.

    For instance, if a two column site is moving to a three column format, the structure of the two column format will not allow for the new three column structure (99% of the time).

    In the end, I believe this philosophy is good, but sees most of the benefit in site-wide changes to presentation rather than changes to structure.

    Copy & paste the code below to embed this comment.
  34. Pat, Aaron,
    I did not make any statements about octigon.com and its ability to validate. I’m talking about our next generation web development tool, octane8 version 5.0 Our public website is going to be ported to xhtml strict in a few weeks under our new version of Octane8. The site is currently using version 4 of our software.

    As I said, if anyone wants to take an objective test drive of Octane8 version 5 – which will ship in June, drop me an email.

    Copy & paste the code below to embed this comment.
  35. I see we have a Javascript hater on our hands.

    MC: “I find this slightly amusing, but correct me if I’m wrong here. You’re using Javascript to ensure the accessibility of your site? Looking beyond the typical computer platforms, do you know how many devices that access the web do not support Javascript, or any kind of scripting, for that matter?”

    I find it extremely amusing your article mentioned nothing about seperating behaviour and structure; instead you threw a cigarrete at a hay stack and started this meaningless “content/structure seperation” argument that has, literally, gone “up the wazoo” (note I don’t trust anyone who says the ‘W word’).

    I DO know how many devices have no javascript, excluding spam bots and search engine spiders: 2%, if not less.

    My javascript solution DOES seem crazy, I know that. But you’ll see there’s a method to my madness once I finish the article about it (and get the technique to work in a certain browser which I will not name).

    Please correct me if I am wrong.

    Copy & paste the code below to embed this comment.
  36. I must admit that I too was disappointed in this article. It appeared to be written by someone who has never heard of Content Management Systems or understands what they do and now that the “lights have come on” is recommending that each designer build their own CMS.

    Designers are free to do so, but IMHO would be wasting time reinventing the wheel. There are a great many Content Management Systems out there from simple to complex (see http://www.cmsmatrix.org ).

    In a CMS “Content” is defined as <b>“the part you will allow someone else to modify/update.”<b> If you are maintaining and updating the site yourself, it might be considered “the part of the page that will be different from page to page”. It is not limited to a discussion of certain html tags. It is an area on that page that the user can modify within certain parameters. Some CMSs like the most excellent Open Source Typo3 ( http://www.typo3.org ) provide a Rich Text editor where the user can choose basic word processor-type controls for justification, bold, italic, etc. However, they can only format the portion(s) of the page for which they have been given privileges.

    A site can be made up of multiple templates, and a large site can have multiple “content editors”, but (as the author correctly states) a redesign of the site is easily accomplished by changing the templates (and/or the CSS pages referenced by the templates).

    One wishing to “get their feet wet” with a simple example of a CMS could do worse than to look at phpWCMS ( http://www.phpwcms.de ). After you have learned some of the concepts, and are ready for a serious tool, I recommend looking at Typo3 which has been reviewed as the equal of CMS products costing tens of thousands of dollars.

    Copy & paste the code below to embed this comment.
  37. For sites that rely on dynamic content, the separation of content from structure and presentation is a necessity.  Tools like PHP allow the content to be managed separately from the presentation and structure.

    The further separation of presentation from structure has its own benefits.  CSS allows the presentation to be managed separately from the structure and content.
     
    Zope’s Page Templates provide a better alternative to tag-based dynamic content generation tools like PHP.  In page templates, instead of adding tags that get replaced by the server, you add parameters to structural html tags that can tell the server to replace the contents of the tag, the tag and its contents, or even other parameters (e.g., class or href).  By using parameters to control the dynamic generation of content, the template, with generic content, may be viewed directly in a browser and may be edited with tools like Dreamweaver without messing anything up.  This makes it much easier to write and test CSS for dynamic pages.

    Page templates don’t do anything to automate the development of CSS, but they make it much easier for those of us who manage content separately (by choice or necessity) to accommodate separate presentation, and they allow the use of other tools that do help with managing presentation.

    http://www.zope.org/

    Copy & paste the code below to embed this comment.
  38. I was about to comment on this, but then I just noticed that there are already seven pages of comments for this.

    There is definitely not that much to say about it…

    Copy & paste the code below to embed this comment.
  39. Your forgot to mention not only seperating behaviour and structure, but behaviour and presentation: http://www.digital-web.com/articles/separating_behavior_and_presentation/

    Copy & paste the code below to embed this comment.
  40. I understand the idea of separating content (including its inherent structure) and presentation. It’s the whole “pure” XML thing that throws me off. Why would anyone want to have there data in an XML document? Why wouldn’t you just use an RDBMS like MySQL? I only have a couple years web experience and don’t know a whole lot about XML, so these questions are not just rhetorical. Give me some answers, if you like.

    For a small site it would be easy enough to code the XHTML by hand, no need for a database or XML conversion. And you would afford the opportunity to create an interesting visual presentation rather than just spewing out systematic information. (I am currently doing my personal site with php and MySQL as a learning experience and proof of ability. I know a dynamic site is really uncalled for.)

    For a large site on the other hand, systematic information spewing is a necessity. A relational database allows content to be retrieved, entered and updated efficiently. I don’t see how information in an XML document could be retrieved with the same efficiency (I learned SQL in a day or two, it is extremely simple). With XML wouldn’t you need to “read” the entire document every time you wanted to retrieve data? Or would you write multiple XML docs, one for each page of the site? Why not just write XHTML and avoid the whole XSL transformation step?

    Data (in database) -> server side script transforms to -> XHTML -> CSS for presentation

    —or—

    Data (in XML) -> XSL transforms to -> XHTML -> CSS for presentation

    Looks like the same number of steps.

    Or is the idea:

    Data(in database) -> server side script transforms to -> XML -> XSL transforms to -> XHTML -> CSS for presentation

    Why the extra steps?

    I must be missing something.

    Copy & paste the code below to embed this comment.
  41. XML -> XSLT -> [XHTML, CSS, JavaScript]

    XHTML, CSS, and Javascript form a unified whole.

    Copy & paste the code below to embed this comment.
  42. Some responses where quite repetitive of what others actually said already, perhaps reading the article would have been appropriate for those of you.

    Otherwise this article was a great introduction (even if it was 5 months old) and for those who didn’t seem to realise soon enough should have given it some thought, as Michael has said already that he never did have the answers to this dilemma and I personally don’t think anyone ever will for a while to come.

    There were a few points I came across that I do have remarks to but I don’t have any intentions of making this post add to the ever-growing amount of responses already here, nonetheless I accept that there are methods that ‘attempt’ to do what this article is trying to explain. Although I do believe that content was never meant to be without structure. Its simply there to stay that way. :D

    Copy & paste the code below to embed this comment.
  43. Separation is a must. Separation of private and work stuff, but even in website’s is it more than usefull!

    Copy & paste the code below to embed this comment.
  44. The lumping together of structure and content kind of struck a bad chord for me, which is why I chose to create my site using PHP.  If you look behind the scenes, you will find that all of the page text comes from include files.  In here, the creation of an entire entry is simplified down to a string array for settings and then the actual text.  I can’t really explain it properly, and I’ll probably find a better way to do it eventually (perhaps even database driven as you pointed out in your article), but I understand what the dilemma is here.

    Copy & paste the code below to embed this comment.
  45. This reminds me a little of the separation model I often advocate for database development projects.  The real irony of this article seems to be that it is supposed to be about content and structure, but it seems lacking in both areas.

    Copy & paste the code below to embed this comment.
  46. “Many content management systems provide varying levels of this kind of template support. However, full-featured template systems that make CSS Zen Garden-like usage of stylesheets — especially ones that come with a comprehensive content management system — are few and far between.”

    Whilst not as powerful as matrix systems cms, I am surprised that no one has mentioned Dean Allen’s texpattern (though someone did mention

    Its free, uses php, produces valid xhtml and uses CSSp.

    Copy & paste the code below to embed this comment.
  47. Very useful article

    Copy & paste the code below to embed this comment.
  48. If you though that was confusing, you should see when I put out an article on my site, zachblog.com

    It about the seperation of behavior and CSS, from…everything else. If CSS is supposed to be used for styling only, and not for behavior, what about behavioral style, ala the :hover phesudo element. It styles a behavior, usually used in javascript(onmouseover). So I think thats where it gets REAL sticky…I’m sure someone else has wrote about this, but I’m going to post out my views anyways(NayNay-NayNay-NayNay)

    :P

    Copy & paste the code below to embed this comment.
  49. Changed it to TypeSpace(.org)

    Wonder how hes going to do that

    Copy & paste the code below to embed this comment.
  50. Thanks for the article… Im new to CSS, XML and stuff, i found the article really helpfulll.. Very well written. :-)

    Copy & paste the code below to embed this comment.