an abstract image of a grid adhering to waves with various spotlights of teal and purple

Designing for Content Management Systems Part 1

Dan Miller
Dan Miller

Part 1: Flexibility and Manageability

Today's robust content management systems can handle the implementation of even the most complicated website designs with very few restrictions, but that doesn't mean designers should feel free to go hog-wild, designing and coding with utter abandon.

In addition to the typical things a modern web designer must consider with each project (such as usability, information architecture, functionality, user experience, and basic aesthetic principles), we also need to focus on optimizing our designs and code for the following interrelated considerations when designing for implementation into a CMS system:


You can mock up a site with the ideal amount of “lorem ipsum” and preach about proper content strategy until you’re blue in the face, but once the templates are out of your designerly hands and into the hands of the content editors, all bets are off. So always consider how your layout and code will adapt to too much or too little content. Will the layout collapse or expand properly regardless of how much content is entered, or if recommended images aren’t embedded? Will your perfectly aligned callouts still look decent when varying amounts of content are entered into each one of them? How will the page look when the unavoidable worst-case content scenario actually happens?

Also, avoid designing a page with horizontal roadblocks. A roadblock is basically a content element whose awkward placement inhibits the competing content elements from expanding optimally; oftentimes creating an embarrassing, unintentional blank space that disrupts the flow of your content and makes your fine-tuned design look like an unsolved Rubik’s Cube.


One advantage of implementing a content management system is that you put power into the hands of the people who couldn’t typically update a website if their lives depended on it. So try not to make their lives too difficult by requiring rounded corners, drop-shadows, or other embellishments on every single embedded graphic.

But if you feel your design really needs all the extra pizazz that a rounded corner or a drop-shadow can provide, then come up with a coded solution to accomplish these tasks instead of forcing the content editors to manually round every corner in Photoshop. But also consider the drawbacks of the various Javascripts and CSS tricks that can create these kinds of effects: they can add-up quickly and seriously bloat your code, causing painfully long downloads, a myriad of browser incompatibility issues, and scope-busting back-end coding hassles. Is it really worth it? It may be, but give every solution its due diligence.

Also, it’s difficult to content-manage background images that are being pulled in through a CSS stylesheet. So save your developers some rework and inline-code any background images that may need to be updated by a content editor, or avoid using background images altogether.

Finally, make sure you also avoid forcing a user to create their own styles by anticipating their content needs and supplying them with every conceivable header, subheader, alternate text, tabular content, highlight text, and bulleted list style that you can imagine them ever possibly needing. Trust me, you don’t want to see the styles they will invent in your absence.

Stay tuned for Designing for Content Management Systems Part 2 which will focus on Reusability and Compartmentability, to be published soon!


Let's Get Started

We'd love to hear from you. We probably have a lot in common. I mean, you like chatting about data-binding, UX patterns, and javascript functions, right?


Cookies help us improve your website experience. By using our website, you agree to our use of cookies and our privacy policy.