Design for your CMS

Paul Boag

With next weeks podcast being on content management systems I have been thinking a lot about how they work. In particular, I have been mulling over the unique challenges they create when it comes to the front-end design.

One of the biggest areas of business for us at Headscape is the creation of design templates for content management systems. A lot of organisations have in house developers who purchase or build their own CMS but don’t have the skills to do the design work involved in the front end of the site. As a result, they come to us looking for help.

Over the years, I must have worked with dozens of different content management systems, all with their own unique constraints. I really have seen every quirk imaginable, from systems that only allow colours chosen from the web safe palette, to a CMS that insisted on a strict three-column layout for all sites.

However, probably the most universal problem with any CMS is that it gives the website administrator limitless control. "Isn’t that half the point of a CMS?" I hear you cry. Well yes, it is, but that doesn’t mean it can’t prove annoying if you’re trying to design the interface. Let me explain what I mean:

Limitless sections

Many content management systems give website owners complete control over the structure of their site including the top-level sections. This means they can continue to add sections until inevitably they break the design. This is especially true of horizontal navigation because you obviously want to avoid horizontal scrolling. To be honest your options are limited:

  1. You instruct the users not to add top level sections or disable that feature.
  2. You avoid horizontal menu’s entirely and design your site in such a way to allow for expanding of vertical navigation.
  3. You create a horizontal navigation that wraps nicely when there are too many sections.

None of these options are particularly elegant, nevertheless this is something you need to consider carefully in the design stage.

Deep navigational structure

Of course, the problems don’t stop there. If a user has control over the structure of the site, it is also possible for them to create sections, within sections. With this kind of limitless flexibility, you cannot presume in your design that you only need to display one or two levels of navigation. In theory, your navigation has to be limitless.

This problem can be solved in a couple of different ways. One option is to show only the siblings, parent and children of any particular page. This works very well particularly when used in conjunction with breadcrumbs, however it does have some drawbacks.

Another approach is to use a breadcrumbs style of navigation. This is something I have covered before in my entry entitled "Dealing with complex navigation" so I won’t go into anymore details here.

Varying column heights

Of course as well as expandable navigation, there is also potentially endless content! With few clients following Steve Krug’s rule of taking your content and halving it, pages can get incredibly long. However, on other occasions it is common to find the navigation being longer than the body copy. With content and navigation being so flexible it is important that your design can comfortable expand or contract to fit what is there. The golden rule here is to test endlessly with different content and different navigation to see if your design breaks.

Ever-expanding names

With users having control over naming pages, another problem arises. As web designers, we have learnt that short snappy names for sections are much easier to read and digest. As a result, we tend to design on the assumption page names will be relatively short. However, you cannot guarantee this if the client has control over the site structure. Make sure you check that page names wrap nicely whether they appear at the top of the page or in your main navigation. Always design for the worst-case scenario and remember if your site is multi-lingual that some languages can have words considerably longer than their English equivalents.

Interchangeable boxes

Not only can the user control the site structure and page content but in many content management systems, they also have some control over the layout. This is often particularly true on the homepage where they can often reorder content "modules". This means any design that you propose has to be flexible enough to allow these "modules" to be moved around. The trick is to do this without the design becoming too blocky. I have found that using curved corners, overlaid imagery and removing borders can help to blur the lines between these "modules", creating a less boxy feel.

The evils of the WYSIWYG

Probably the biggest area of concern is the dreaded WYSIWYG editor. With this, a client can ignore all your lovely design rules and do whatever the hell they like with your page. This is probably the biggest danger area in content management design.

My recommendation is to try and persuade the client to swap out their CMS default editor with something like Xstandard. With this WYSIWYG the client enters content semantically rather than worrying about the design. In other words they tell the WYSIWYG that something is a heading and the CSS file defines its look, rather than the user defining the font, styling and colour themselves. Failing that it is important that the designer provide a very clear style guide covering exactly what is acceptable and what is not.

What’s your experience?

These are just a few of the challenges that I have discovered over the years but I would be interested to hear what your experiences have been? Which content management systems have you used and what problems have you encountered. What advise would you give to somebody designing for a content management system for the first time? Post your comments here.