Designing for Content Management Systems Part 2

This is the second half of a two-part series about designing for content management systems. The first half, which focuses on Flexibility and Manageability, can be read here.

Part 2: Reusability and Compartmentability


Callouts, columns, and other content elements should be conceived, designed, and built with maximum reusability in mind. Keep your page layouts and content structures flexible enough so that entire blocks of content can literally be lifted out of one layout and inserted into another. You can accomplish this by keeping your widths consistent between content elements and page layouts, or by coding your content blocks to expand or collapse to fill up any container in which they may eventually find themselves.

Also, when designing and coding the typical three column subpage layout, keep in mind that the third column is generally only used for supporting or ancillary content, which may not always exist. So in order to keep the template as flexible as possible, make sure that a third column can be easily removed as a single element from your code while still maintaining the integrity of your original design.

For instance, the “faux” column technique (a popular way of coding a third-column background color or pattern as a repeating graphic that extends to the bottom of the layout regardless of content length) requires that you code the background image outside of the third column container (usually as part of a larger parent container). This can make it difficult to hide or show that column without programmatically stripping out that repeating background image when no third column content is present, which is a less-than-ideal solution that requires a lot of unnecessary development and some rather complicated code.

Finally, make sure you aren't cascading DIVs in a way where you will lose formatting if you want to reuse or share certain content blocks between templates that may not have the same DIV structures. Or if your structure or process won’t allow for that kind for foresight, then try to anticipate those kinds of conflicts, and add the additional class names and selectors to the appropriate styles in your CSS, even if you don’t currently need them.


Always keep related content within its own insular compartment. Certain types of page-level content will always be associated together, such as a page title and its accompanying body content. If you keep these related elements (such as <h1> tags for page titles and the related <p> tags for the content) inside of a the same parent container DIV, then you can retain the ability to build flexible templates with reusable content elements.

The problem with the following example (other than the fact that you should never label your containers as “left,” “center,” or “right,” if you expect them to be truly flexible) is that the <h1> page title tag is coded outside of its associated page content DIV, which resides in a child container within the “center column.” On top of this, dividing page-level elements (such as the page title and its associated content) with a global section-level element (like a subnavigation menu) also makes it more difficult to develop as a reusable content element:


On the other hand, keeping the page-level elements undivided and within the same parent container like in the example below can make your entire layout and your individual content elements infinitely more reusable and templatable:


Ahhh, much better! So keep this in mind as you are designing your pages, and avoid any layout decisions that might require segmenting your related page-level content.
The Bottom Line

Don't let your perceived limitations of the CMS stunt your creativity, but do keep in mind anything that could possibly make your life, the life of your developers, the life of your content editors, and the life of your end users easier in the long run. It’s a lot to consider with every design and coding decision you make, but then you wouldn’t be the expert you are if you didn’t.

designing for content management system, website design templates, website design layout


Add a Comment

