Separation: The Web Designer’s Dilemma

by Michael Cohen

80 Reader Comments

Back to the Article
  1. <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.
  2. 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.
  3. 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.
  4. 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.
  5. 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.
  6. 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.
  7. 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.
  8. 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.
  9. 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.
  10. 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.
  11. XML -> XSLT -> [XHTML, CSS, JavaScript]

    XHTML, CSS, and Javascript form a unified whole.

    Copy & paste the code below to embed this comment.
  12. 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.
  13. 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.
  14. 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.
  15. 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.
  16. “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.
  17. Very useful article

    Copy & paste the code below to embed this comment.
  18. 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.
  19. Changed it to TypeSpace(.org)

    Wonder how hes going to do that

    Copy & paste the code below to embed this comment.
  20. 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.