Shallow Thoughts

because deep thoughts smack of effort

Content + CMS + Layout

Posted in Uncategorized by Bridget on January 6th, 2010

Those of us who follow the likes of Jeffrey Zeldman, Andy Clarke, Dan Cederholm, Ethan Marcotte, and a host of other notable web professionals have heard the battle cry that design should support the content, not the other way around. I’m not going to reiterate all the reasons why this is a good practice. You can get their thoughts on the matter via their blogs, books and presentations at conferences. I encourage you to do so because I agree with them. Content should be honed first, so that an appropriate design can deliver it in a pleasing manner to the intended audience.

The question I am posing today is how to best put this philosophy into practice when a CMS and other restrictions come into play. Lets face it, not every site can have each article “art directed” a la Jason Santa Maria‘s site. Not every company has the resources available to do such a thing. So, in the harsh, cruel world where low budgets, unenlightened project managers, unrelenting time lines, and understaffed companies govern the website’s resulting look and feel, what do we do to ensure that content is delivered in the best possible light?

I have a specific scenario I’d like to examine, in hopes of hearing some ideas on supporting content while using a CMS in the conditions mentioned above.

The Scenario

A project I worked on recently involved placing content into a CMS page layout that used a feature called a “springboard.” A springboard is nothing more than an image sitting atop a title which sits atop a brief description grouped into an arrangement. The CMS template displayed these springboards in groups of 4, laid out horizontally, like so:

Springboard Layout

Springboard Solution

Content on a page that uses this springboard layout is generally a categorical listing of some type, where a user then clicks the image or the title (or in HTML5 the whole chunk) and goes to the more detailed content for that category on another page.

Considering that the design for this category layout came before the content was completed, Lorem Ipsum was used much like what is illustrated in the photo — neat little bundles that looked orderly enough. When the real content came into play, some of the titles wrapped to 2 lines. Others didn’t. The brief descriptions had differing word counts. Needless to say, things were less orderly. Once the content team saw the disruption in the visual flow, they worked to reduce word counts and get things back into closer alignment. That’s fine. I have a different question relating to this springboard layout example.

The Problem, As I See It

Remember how I said this solution was designed before the content was completed? Well, as a result, some of these categorical pages don’t fit the pre-fabricated 4 springboards (or multiples thereof) layout. Some pages only use 2 springboards. Some use 3. Some use 5 or 6 or 7. If you can’t imagine how that impacts the overall page, here’s a visual representation:

Only 2 Springboards

Only 2 Springboards

Only 3 Springboards

Only 3 Springboards

5 Springboards Used

5 Springboards Used

6 Springboards Used

6 Springboards Used

7 Springboards Used

7 Springboards Used

The Questions I’d Like Addressed

Is this kind of page display, with its uneven look and clearly empty space something to be expected and accepted because a CMS is involved and templates are often laid out before content exists? Or in another scenario the content may have existed to fit in such a layout properly, but when the content changed, the layout couldn’t adapt…say, if one or more of the categories were deleted from the page that used to be in multiples of 4.

As people who agree with the “design should support the content” methodology, should we promote designing various layouts — even for just one content type (like a category page) — for when the content changes or doesn’t fit the initial mold of the concept? Or, is that taking things too far?

4 Responses to 'Content + CMS + Layout'

Subscribe to comments with RSS or TrackBack to 'Content + CMS + Layout'.

  1. Brad C said,

    on January 6th, 2010 at 8:47 am

    I’m one of those weirdos that thinks a site looks good when content isn’t perfectly symmetrical. I’ll often design comps showing what the site would look like with content holes. I’ve also been told to fill them on more than one occasion in the comp. I’ve used it as a selling point, that the design is flexible and won’t break as you add more.

  2. Nate Klaiber said,

    on January 7th, 2010 at 10:04 pm

    Great post Bridget. I have been bitten by this exact scenario. In my initial mockups everything looks neat and lined up – but I didn’t design around the content first, so I found where things fell short. This was while working on my review site. The ‘featured’ section below the latest review. Once I had titles, names, or publishers with longer names – all of a sudden things didn’t line up so nice (I still need to fix it!).

    Love the though process here.

  3. Josh Walsh said,

    on January 30th, 2010 at 9:29 pm

    I’m not sure why so many clients come to designers to “build a frame” which is capable of “holding their content.”

    Ironically, these are usually these are the same people who will openly admit that the content is more important than the design, and not use the design as it was intended.

    In fact, the client is more right. The content is more important. The design is there to help emphasize the importance of the content.

    That’s why I think it’s so important to have all the copyrighting for the site done prior to the design actually starting. Even thought the content will change during the process, the motivations and direction of the content will be set.

  4. Kally M. said,

    on April 3rd, 2010 at 4:30 pm

    “Unenlightened project managers,” you say…? 😉

Leave a Reply