Ryan Cramer


Design for CMS-Powered Web Sites

The architecture of dynamic content

Designing for content management is uniquely challenging and satisfying alike. Unlike print design that goes to the publisher once, a CMS powered design may be published every single time it is viewed.

The designer often has no knowledge of what specific copy is being published in his/her design. This creates unique challenges and responsibilities for the designer who must learn to think like an architect.

Context and scope

In this article we look at some of these challenges and offer tangible solutions on how to design for content management. We won’t focus on any specific CMS products. Instead, we’ll focus on big picture best practices. In addition, we’ll emphasize design for sites that are output in standards compliant XHTML/HTML5 markup and styled with CSS.

What differentiates design for CMS-powered websites?

Compared to designing for static content (print or web), designing for CMS-output is an entirely different discipline. It requires a big-picture systems-thinking approach that might best be described as architecture.

Planning like an architect

When an architect designs a skyscraper, they have to consider how the space will evolve and grow with the occupants’ needs over time. They intentionally minimize the interior impact of load bearing walls on the floor plan, so as to keep it flexible for current and future needs. They design the structure and foundation to handle the adversity of nature, weather and time.

Adapting to the future

When designing for static media (like print), you need not consider the future, only the present. How something looks when it goes to press is how it will be. But when designing for CMS-output, you must put on your architect hat and think of your design as a system. You can’t plan around specific copy or images flowing in the design, nor can you assume that the navigation won’t grow. Designs output by a CMS are judged not just on aesthetic merits, but how they adapt to this dynamic content environment.

Recognizing the editor

Content output in static media is most often input by a designer. This designer understands the details that ensure the resulting output is presented in a consistent and quality manner. But content output by a CMS is very often input by a non-designer that doesn’t necessarily know or care about the details that maintain the consistency of the design. Such individuals may attempt to introduce their own sense of style into the look of the content … most often when they come across a need with no clear solution. When a client resorts to <font> and <br> tags (for example) there is a problem. This is one of the inherent challenges with CMS-powered design.

What is good CMS design?

  • Accommodates the needs of content and navigation regardless of length.
  • Considers not just the present, but future needs and growth.
  • Exemplifies page-to-page consistency in element placement, type, colors, and imagery.
  • Defines a set of standards that are broad enough to accommodate current and future content needs, but strict enough to maintain strong site-wide consistency. Navigation that makes it clear where you are, where you came from, what’s related, and how to go elsewhere.
  • Retains its identity and consistency regardless of what text it contains or how it’s scaled.
  • Understands and uses the limitations of XHTML/HTML5 as an asset.
  • Developed in an accessible, web standards-friendly way that properly defines and uses markup.

What is bad CMS design?

  • Layouts designed as if they were for print.
  • Layouts that make assumptions about the maximum and minimum length of copy.
  • Headlines, navigation or copy requiring [non-dynamic] images or flash.
  • Layouts with ambiguous navigation.
  • Design that fails to accommodate the stylistic needs of future content, forcing the client to come up with his/her own (often inappropriate) solutions.
  • Layouts that don’t consider the effects of text-wrapping.
  • Designs that are poorly developed (this can make or break it, no matter how good the actual design is).
  • Designs output by a CMS that gives the client too much stylistic control.

Planning for CMS-driven dynamic content

Plan your foundation with an understanding of the loads that will bear down upon it. Like an architect may design one floor that is repeated over many stories in a skyscraper, your design will consist of one or more templates repeated over many pages. Your design system must be defined as fully and clearly as possible. Ambiguity breeds mediocrity, so plan on specificity and consistency.

Know the CMS product you are designing for

If you aren’t already familiar with the CMS product that will be publishing your design, then you should do so. Many CMS products have their own underlying systems that you need to design for. In some cases, the CMS may be a major factor in dictating how you should design. In other cases, it may have no bearing at all. Have a detailed conversation with the developer about the limitations you need to be aware of and the highlights you can take advantage of.

If you don’t have the benefit of communication with the developer, look at other sites powered by the same product. Are they all following a similar format (i.e. 3 column)? How much diversity is there in presentation? If there is a strong similarity from site-to-site, then you may be dealing with a CMS product that will dictate the design to you … and you may be designing individual pieces of an existing layout (skinning) in some cases. If this is the case, some of the decisions covered in this article may have already been made for you.

So as not to focus in on any specific CMS product, this article veers more towards assuming that the CMS product is not a factor which need affect your design. But I want to reiterate that this is a factor you should not overlook, so know your CMS before you make any assumptions.

Plan with wireframes

When designing wireframes for design output by a CMS, you should take them a step further and differentiate dynamic from non-dynamic content. If a particular block of content will be CMS-editable, and thus dynamic, then that will affect how it is designed. Label dynamic blocks in a manner that makes that clear. Very often, the height of dynamic blocks may be variable, so they can be labeled with a dashed outline or cut-through (as examples).

Know the content, but keep some distance

It goes without saying that you should know the content you’ll be designing for. This is just as applicable as it would be in any other design situation. But you should not let this content make you apathetic about your role as a designer. Always keep in the back of your mind that designing for CMS-output is about designing for change. Your success comes from accommodating not just the current needs, but future needs as well. Plan on designing for both.

—Ryan Cramer

Continue to next parts …