The Personal Disquiet of

Mark Boulton

Modularised stuff - where to draw the line?

– June 2nd, 2005 –

I’ve got a several large projects ahead of me at the moment and it’s at that stage where you are mentally planning out how to go about certain things with the end result in mind.

There’s a fair bit of talk about modularisation at the moment, not only for content, but for the HTML and CSS, and this is the way I’m currently going for the projects. This is partly based on past experience, but also I believe it’s the right thing to do, especially on large projects.

This is how I’m going about it…

Getting your head round the content

So, without going into too much detail, the projects involve multiple content types from uploaded images to forums, but it’s mostly different types of text content - lists, tables, captions, not too many large blocks of copy (which is good I suppose).

The first thing is to audit the content and break it into common chunks, groups of data type which can then be addressed as if they were one entity.

Secondly, decide how granular you go with the content. Is it down to field? or just to the ‘paragraph of text’ level.

Thirdly, once you’ve got your chunks of content, or content objects, spec and wireframe them as detailed as you can.

The build

I’ve begun by defining an html framework in which these objects will fit. This is basically a client-side solution in which I define different layout types, based on columns, and the content objects then sit within these columns.

I like the idea of seperating the framework from the content, simply because it also allows me to focus on objects individually knowing that the overall ‘layout’ configurations are taken care of.

This is how it splits down do far:

  1. Framework
  2. Content objects (defined in content audit)
  3. CSS
  4. Javascript (for control of UI elements)

The CSS

Number 3 is the one where things could get tricky. How far do you go with CSS modularisation? Do you have different stylesheets for colours, structural layout etc. Or do you just have one, which is flagged (as in Doug’s interesting article).

The problem I’ve got is all these content objects, each with it’s own bit of CSS, could make modularising CSS extremely difficult to maintain - you could end up with over 30 stylesheets being imported. Not very practical.

Your thoughts?

How would you go about something like this? Would you modularise to that level or would you just bung everything in one CSS and use flags to navigate?

Filed in: design, information-architecture.

Further reading