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.
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.