Content modelling with ExpressionEngine

I read with interest an article on A List Apart this week: Content Modelling: A Master Skill by Rachel Lovinger. The article highlights the importance of carefully designed content models: data containers for different types of website content.

When planning a website it is necessary to work out precisely the building blocks comprising each bit of content. So, for example, the constituent elements of a news entry will differ from those of a publication entry. Certain fields such as 'Title', 'Text' and 'Date' might be common to both, but a news entry may require unique fields such as 'Summary', a snippet of text that will appear on the news index page in place of the full 'Text' field, while a publication entry might require a 'Thumbnail image' field for a book cover, and a 'File' field for a PDF download.

It's always nice to hear the kind of thing one does day-in-day-out described as a 'master skill' (so I'm thereby entitled to compare myself with da Vinci by referencing one of his drawings above). As I'm sure A List Apart and Rachel Lovinger will be aware, web designers have been 'content modelling' for a long time. Taking time to define content types is essential before getting started on a design: you can't layout the page till you know precisely what editable regions will be required. I think the purpose of Rachel's article is to help define and document a well established practice for the benefit of content strategists learning their trade.

Content modelling and content management systems

If you're going to model content effectively you need a content management system that makes it as painless as possible to organise information into well defined data containers. I thought I'd take a moment to outline why I think ExpressionEngine by EllisLabs does this so well. It's the primary reason I use it as my standard content management solution for larger websites. The system was designed from the ground up with flexible content modelling in mind: it makes it very straightforward to define 'channels' of infomation built of any type of data that can be displayed on a website: single lines of text, body copy, images, multimedia files, PDFs and other downloadable files, dates, categories - and so on. I'll stress from the outset that I'm sure there are other systems that also handle content modelling well - it's just that I like the way ExpressionEngine does it.

So: I'll use the channels on my own - ExpressionEngine managed - site by way of example. The site's content is organised into the following channels:

Channels

Each of these channels has - to use ExpressionEngine parlance - a corresponding 'Channel Field Group', a set of fields that together comprise a particular content type:

Channel fields

Here, for example, are the fields that constitute the 'Portfolio' channel field group: these fields define the content for each entry in this site's Portfolio section:

Portfolio channel fields

When I planned this site I decided I wanted the following portfolio entry fields, highlighted in red, to appear on the Portfolio index page:

Editable regions on the portfolio listing page

And I wanted these fields to appear on each entry's dedicated page, for example:

Editable regions on a portfolio entry page

ExpressionEngine made it very easy to set up a portfolio entry form like this:

The portfolio entry form

Each field is designed to accept only data appropriate for that element of the content model. So, for example, the 'Title' field accepts a simple single line of text. Likewise for 'Published'. 'Index image' will only accept an appropriately sized image. 'Skills' accepts a single paragraph, and 'Description' as many paragraphs as are necessary to provide a full account of the project. 'Link' is another single line field. (I should point out that this entry form is somewhat more spartan than I'd design for a client site: the 'Description' field would feature a set of text formatting icons - I personally prefer a plain text field into which I can enter the HTML direct.)

The 'Screenshots' field is a special case, containing its own collection of fields, in this case five image fields that together constitute the slideshow that appears on each portfolio entry. These were created using the invaluable Matrix ExpressionEngine plug-in by Pixel & Tonic. Put simply, Matrix allows fields to be grouped into sets, and to be organised into subfields.

Matrix makes things very easy for content editors. Fields can be organised into logical groups, making the function of each element on the publish form transparent. I'll further illustrate this point with one more example. The address on the Lucent Contact page is generated from a Matrix field organised into several subfields, each subfield corresponding to an element of the hCard microformat specification. I want each line in the address to pick up the microformat classes necessary to meet the hCard spec:

Editable regions on the contact page address

I was able to create a Matrix field consisting of the appropriate subfields:

Address fields mapping to the vcard specification

I was then able to map each of the subfields to the template code using ExpressionEngine's tag language:

The tags specifying the template's editable regions

As you can see, nothing is left to chance here. The fields on an ExpressionEngine form - especially when augmented with Matrix - can be defined so tightly that there's no margin for error. This is particularly important when a non-technical content editor is responsible for the maintenance of a website. ExpressionEngine allows me to define exactly what the editor can and can't enter. Entry channels are strictly defined for each content type, ensuring a clean separation between structure and design: I define the design, the client supplies the content, and can only enter the content in the manner I've specified (in consultation with the client, it would be superfluous to add).

Finding out more

I've only tried to sketch ExpressionEngine's flexibility here. I haven't touched on other useful content modelling features such as its handling of relationships between channels. If you want to find out more I recommend this fine tutorial by Build a portfolio site with ExpressionEngine by Ryan Irelan, which builds a portfolio site using similar techniques to those I've introduced here. And this presentation by Rachel Andrews, Choosing the right content management system, explains why any content management system worth its salt should make it straightforward to model content. There's also, of course, EllisLab's own documentation for the Channel Module, the engine behind all this.

Categories: