Posted by: Xalthorn | January 30, 2008

Separating Content, Structure, and Presentation

One thing that I am going to do with the Mondestia site is to ensure that (as far as is practical) the content of the site is separated from the structure and presentation.

A session searching the internet for such topics will yield a huge amount of documents talking about this, most of which cover the topic in a really vague manner which only serves to reinforce that the approach is the right way to do things, but don’t give any details about how to actually do it.

Very frustrating.

To add to the frustration, there seems to be a difference of opinion as to what the terms Content, Structure, and Presentation refer to. So I figured I’d take these words and come up with my own definitions and way to approach the problem.


Content is actual information that will be displayed in some way. The content is also identified as to what sort or type of content it is, whether that be a heading, an image, a body of text, and so on.

Without a definition of what sort of content it is, the information is meaningless. You simply cannot expect a system to ‘guess’ what type of content is being looked at.

This is why the content definitions need to be worked out right at the start of the project. Without any expectations of what sort of content will be presented, the code that structures and presents the content will be doomed before it starts.


Structure is rightfully moved away from the content and is where the interface is starting to be, well, structured.

It is this part which determines how and in what order the content is output. To achieve this, a template system will be used which has templates of pre-formatted HTML with specific locations for the content to be inserted.

It is important though, not to confuse structure and layout.  This part of the process takes the content and wraps it up in appropriate DIVs that the stylesheet will then stylise and position in the presentation stage.


Once the web page has been built with the content and the templates, the actual look and feel of it needs to be added onto it. This will be done with stylesheets.

As far as is practical, the stylesheets should have complete control of where and how the parts of the page are to be displayed.  I appreciate that the templates go some way to control this as they do the initial ‘wrapping up’ of the content, but the stylesheet should have the final word.


It really does take a little thinking to move to this system of web design.  We’re so used to simply churning out the HTML, it’s hard to stop putting this in the content.

One of the difficulties is when you’re not quite sure what you will want to output or even, how you will want to change it in the future.

A classic example is image galleries.  You may decide initially that you want to display a grid of 12 thumbnails in three rows of four images.  So, you write your PHP to pull the images out of the database 12 at a time, with a page selector to let the user move through the library.  You follow this with a template that has spaces for 12 image variables, and finally the stylesheet makes it all pretty.

If we decided that we wanted to output fewer images, we’d have to go back to the PHP code and change that, then change the template, and finally change the stylesheet.  So much for a dynamic website.

What we should have done was have a variable in a database table that determined how many images should be displayed which would allow the PHP code to adapt itself to suit.  The next issue is the template which is still expecting 12 image variables, which the PHP script is meant to be providing.

The link between the PHP script and the templates it uses is strong.  The PHP scripts need to know what the templates are called and what they are expecting to receive.  This is why the content types and groups need to be defined well in advance, as well as understanding what may change in the future.



  1. I’d strongly advise if you are going to use php for this kind of site structure, try going with a framework or cms that handles the site and you just add your part for the game parts.

    What you describe is what any student learns taking media computer science classes. The thing is, separating content from logic is no big deal nowadays and you don’t have to invent the wheel twice do you? 🙂
    Maybe look into which is an awesome framework for rapid application development in php.

  2. I appreciate what you’re saying about taking an existing framework and bolting on the bits I need for my games.

    However, as I’m self taught, I actually enjoy working out the approach and algorithms I need to complete a project so the site is a way for me to expand my understanding of how things work as well as getting something useful ‘out there’.

    It also allows me to place a much more personal stamp on my own work and make sure that all the features I need are in there and working as I want them to.

    Although I’m sort of reinventing the wheel, I prefer to think I’m looking at the features of the assorted wheels out there and making my own modified version.

    It also goes some way to addressing the issue of shoe horning content into a design. If I was to take an existing framework, I would be forced to create my own code following the rules of that framework.

    Of course, I may well live to regret this development approach 😉

  3. Well, I am also rather self taught. I just looked at various Frameworks and chose the one wich style I want to aim for. In php this is Symfony (though I don’t like the templates, for templates I prefer VLib) and for Javascript/Python this would be AmiNation (which includes AJS).

    In the end no one can tell you to use something. It’s all a matter of personal taste and balance between workload and result.

    As for AJS, it is nice and slick and has all the basics covered. But to have proper animation and form validation I had to extend it heavily.
    But using this framework easily saved me a month or two of work…

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s


%d bloggers like this: