Separate content and presentation

Separate content and presentation.

Separation of content and presentation is a design principle where visual and design aspects are kept separate from the material and structure. This means that the content should only contain semantic markup, like <p>, <h1>, <h2> etc.

There are multiple benefits of this approach. From a developer aspect, it will simplify any presentational change, from a slight design adjustment to a full-fledged redesign as all content is free of presentation and is good to go in any new template. It is also easier on the content writers as they don't have to worry about destroying any presentation mixed in with the content. This in turn will also help maintaining a presentational consistency.

Joomla!, or any CMS for that matter, is built with this design principle in mind. But while using Joomla! core and sticking to the design principle, you are left with very few options. To edge it, you can make single article pages and blog views. This can be a problem for a website with a need for complex layouts. It can also be hard to implement the design principle on a website that has content with advanced relationships, but we covered this topic in another blog post.

Typically, a layout in Joomla! consists of a menu item showing an article, surrounded by a couple of modules. Suddenly, if these modules are to contain any sort of content other than menus, or the likes of it, you have to store content in more than one place. How does that work together with separating content and presentation? Well, you can to some extent still keep them apart, but the line is getting blurred as there aren’t many options available in Joomla! core for displaying content in modules. The Custom HTML module is a great option, but it is hard not to include any presentational markup in it in order to make it look as desired.

As long as we work in Joomla! core, wouldn’t it be nice if we could state all content is stored as articles? Content would be easier to administrate and we would have all the functionality that comes with articles in Joomla!, such as permissions and versioning. For the content writers, it would be a more consistent experience, and as a developer, you’d get less support issues concerning broken design and miniscule textual changes in module titles.

But we would be stuck with one problem, how can we present these articles in modules? Luckily, we at Pixpro have already faced this question, and we came up with an answer! We created PixBuilder, an extension to Joomla! that simply displays articles in a module. (It also does a lot more, which you can read about in our documentation.) With the help of PixBuilder, you can build complex layouts and still stay true to the design principle of separating content and presentation.

Topics: Joomla!, Pixpro Labs