Design for your CMS
Posted in Design on: Wednesday, February 15, 2006 by 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:
- You instruct the users not to add top level sections or disable that feature.
- You avoid horizontal menu’s entirely and design your site in such a way to allow for expanding of vertical navigation.
- 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.
15 Comments
Comments are for the discussion of this post. If you have other questions / comments then post them to the forum or send me an email
Paul,
It was funny to hear the end of your last podcast where you stated not to ask you what the best CMS written in PHP would be. I had sent you an audio comment asking that very thing about 4 days prior.
I am very interested in what others have to say on this subject. Thank you for covering it.
Hi Brian,
yes I know. We are actually going to use your audio comment anyway because a number of listeners have been kind enough to write in with some recommendations so I feel I have something useful to contribute in way of a reply. It will be on monday’s episode.
Paul,
Just a couple of points from my experience with CMS products
1. The Microsoft SharePoint suite is evil – avoid at all costs! Customisation? Forget it! Flaky? Oh yes!
2. As for a recommendation for a PHP based CMS – Joomla (used to be Mambo I believe) gets my vote. I’ve found it flexible, intuitive and most importantly its easy to get up and running with minimal knowledge of PHP!
Looking forward to the CMS podcast (that’s possibly the geekiest thing I’ve ever written!)
Ah yes Sharepoint! I can bearly bring myself to type the word.
Many templates I see miss the mark in one vital area. Sure if you want to write a 800 word essay they will scale and look fine. However, if you do not have much copy on the page they tend to fall apart.
For example: content area boxes will scale to the main content but drop lower than a floated navigation.
You end up with a navigation that pops out into other portions of the site and it just looks plain sloppy.
I’ve created several CMS websites for different clients and had to figure out many of the issues you mention in your post.
I use a self-referencing database table to create the parent-child relationships for my pages. I then can easily create an xml file that has the nested parent-child relationships built in, using .NET’s DataAdapter on a DataSet. Then I apply a XSLT stylesheet to turn it into an unordered list, with the selected page tagged with an id for the CSS to style.
I lock down the top level pages and only allow sub-level pages to be created. I use XStandard for content input, and utilize the .NET Web Services, and HTML/CSS code generator abilities through their custom drop-downs.
The real trouble I had was getting into localization, and that was more of an ASP.NET issue. I added a tblCulture to the Database and each page is assigned a culture id. That way I can query for all the pages by culture id. I include the standard database columns such as sort order and active/inactive. Another gotcha is to make sure you allow for pages that are not in the navigation at all (floating pages). So the system knows what processing/template page to use, each page record has a template column. I also store each pages MetaTags in the database. Each page is allowed to have as many page data areas as is necessary for each template.
So far so good. All clients have been happy with the flexibility. To create an entirely different look for the site, we just need to code some new CSS files and create new images. Separating content from layout works great.
Hmm… not sure that I like the idea of pages not existing within the IA. This is something I generally strongly discourage. Of course unsuprisingly I would be first to agree with your comments about seperating content from style :)
We’ve had several clients that have requested pages not be within the IA. Reasons varied:
1. Landing pages for Media
2. Coupons
3. Example Pages
etc.
Paul/readers,
There’s quite an interesting paper ‘Content Management Problems and Open Source Solutions’ – which was published recently in January you might want to check out:
http://www.optaros.com/wp/wp_5_cms_report.shtml
It reviews 15 open source CMS solutions:
* Alfresco
* Bricolage
* Drupal
* eZ publish
* Lenya
* Mambo/Joomla
* MediaWiki
* Midgard
* OpenCMS
* phpBB
* Plone
* Roller
* Twiki
* TYPO3
* Zope CMF
Matt
Interesting article, but I guess I would say that having a vested interest in the subject matter.
How people tackle CMS development is probably one of the more varied areas of web development. For our part we’ve attempted to get around the problems mentioned by two rules:
Content Management Systems manage content, not design
Spliting structure from content
With those two rules in place most other problems melt away.
What about DotNetNuke (www.dotnetnuke.com)? Its open source using the .NET framework and has quite an active community surrounding it.
I have used it for a few years now and have found it to be quite extensible.
This is sooo true.
I often assume these kind of things and after a couple month I get clients calling me back telling me that the layout is broken because of a 50 words headline.
I can’t blame them for that, but some clients lack common sense. And don’t get me started on the aesthetic changes they made…
hi
i have a cms .
i used flash but there is a problem .
in internet explorer it displays a border.
can any help me out of the cms designing .
i use a software called Designing CMS
a cms can be customized to all our needs and can be made a search engine optimised very easy ,
here is a good example for that u can custom a wordpress form into a custom code and can bring good results
the site is here
Seo tips and tricks
Hi, I am a aged designer using dreamweaver. I am considering using a cms. Can someone suggest a good one that’s easy to use! Thanks.