Bulletproof content management systems

One of the most frustrating things as a web designer or developer is website deterioration.

Let me paint you a picture:

On launch, the site looked great. Everything worked as it should. However a few months down the line you take a look at the website you put so much love and care into, and it looks awful. The site has become chaotic and messy. Look and feel is now inconsistent and wrong components are being used for the wrong purposes.

The fault does not lie in the hands of the content manager. They were simply using the tool you provided in the best way they know how. Does this sound familiar?

The fault does not lie in the hands of the content manager. They were simply using the tool you provided in the best way they know how. You, the designer has failed them. A content management system should be usable by anyone from inexperienced interns, to marketing managers.

To understand how to create a bulletproof CMS, lets look at the main culprits of website deterioration:

Imbedded text in banner imagery

Because the web designers have no control over these images, it doesn’t take long before call to actions within these campaigns become inconsistent, and mobile sizes are overlooked. For a user to use the site efficiently, call to action’s must follow the same formula.

UK Vauxhall site vs Holden siteLeft: Holden Australia’s uses of imbedded call-to-actions in banner imagery. Right: Vauxhall UK’s use of live text Call-to-actions

To solve this, we make sure that the call to actions are always live text. Their in house designers still get free reign over the image to portray their current campaign branding, but the sites user experience is retained.

Improper use of links

In most cases you have multiple styles for call to actions: One primary, a secondary and maybe a tertiary.

I always limit primary actions to one per page and they are usually reserved for starting or completing a task. Secondary actions are for referencing related content or tasks. And tertiary actions are inline body copy links.

Primary secondary and tertiary call to actions.An example of primary secondary and tertiary call to actions.

Problems occur when content managers over-use primary cta’s. I’ve seen pages with 20 or so primary actions scattered across the page. All this does, is weaken their strength and confuse the user.

To prevent this, limitations should be in place to ensure their proper usage requirements are met.

Too many pages

Personally, I tend to limit page depths to no more than three levels. Homepage, SEO landing/nav pages, and content pages. Clients however often add further levels to these content pages if the CMS allows it. This is a huge problem when it comes to keeping content organised.

ChaosPages within pages within pages = choas

But by dis-allowing users from creating any more than two or three levels to the CMS menu, clients are then put in a position where they have to think very carefully about how they structure their content. This preserves site architecture, and prevents users from getting lost or having to click too many times before they find what they are after.

Wrong components for the wrong task

If you do not specify component usage or supply an adequate range for different purposes, the manager will use components in-correctly. And remember, think ahead for possible future requirements down the line.

ComponantsBoilerplate of components created for Ubacity, a local government templating platform

This is where the CMS can be flexible. Rather than allowing clients to use components however they wish, ensure they have a clearly labeled toolkit of components catering to every possible content requirement.

Page builder blocks over rich textfields when adding or editing content

Often, CMS developers over use the rich text editor. The thinking being that the client may like the control it gives with text styles and image placement. This is great for articles. But for everything else, 'page builder' drag and drop blocks with entry fields are better. For example, I have seen contact pages with a list of address’ that were added via the rich text editor, meaning that each address was inputted in a different style, or format causing inconsistencies. If these were components added with fixed text fields they would always be consistently styled.

All of these suggestions do require a little more work, but approaching a CMS in this way means you can be confident that your product will continue to be managed correctly for years to come. The client will also be very happy with such an easy to use CMS, and will most likely return for a smoother faster design re-fresh in the future.

Posted by

Todd Padwick