Tips for Successful Content Management :: Part 1

Hello, marketers! Welcome to the first segment of our content management series featuring tips for the marketing coordinator or manager flying solo without a front end-development team.

In it, you’ll learn how to better manage your content’s technical side and deliver a polished end product to your audience and add new pages to a website in a way that blends nicely with older content.

 

Let’s say you’ve just had a new website built and you go to update the content. There are new pages to make and new images to upload. The existing content works well with the design but as you create the new pages, something doesn’t quite fit. You carefully created layouts for some new pages in the CMS. One of them looks great on desktop but it doesn’t work on mobile. Another one has weird styles that you weren’t expecting. 

Where do you go from here?

The nonresponsive layout and the unexpected styles are symptoms of the same underlying issue: treating the rich text editor as a layout editor. In traditional desktop publishing, you create the layout and the content at the same time using the same tools. This is a convenience afforded to you by the fact that for-print documents are much simpler than web pages in many ways. 

 

The layouts for print documents are a predictable size, eliminating the need to be responsive. If you create a layout in a rich text editor, the browser will try to adjust the content as it runs out of horizontal space, but just exactly how depends on which rich text formatting you use. However, none of these formatting options were intended to be used to make actual layouts, so they’re going to apply their own behaviors regardless of what you’re trying to accomplish.

 

If you use a table to make a grid layout, the site is going to apply a tabular style to it, which is appropriate for the kind of content that’s intended to be used with it (figure 1). This is likely to be visually noisy for creating grids of images (figure 2). Unlike a custom grid programmed by developers, it can’t adjust the number of columns across different viewport. Additionally, screen readers and search engines will mistake this grid for an actual table. In every way, except for how it’s being used, it is a table.

 

Figure 1. A table element, with tabular styles being used correctly to convey tabular data.

 

Figure 2. Tabular styles appearing by accident on a table being used to create a grid of images.

 

Another way to create a grid in a rich text editor is to simply place the images next to each other inline. As you can see in figure 3, the horizontal spaces between the images are space characters. This implementation is better, although not perfect. It’s more responsive because each image will flow over the right margin to create a new line. While it doesn’t apply visually perfect styles, they’re at least more minimal than styles intended for tabular data.

 

 

Figure 3. A grid of images made in a rich text editor without a table.

 

Figure 4. This technique doesn’t lend itself to aligning text with the images, however.

Technologies intended for real-time, responsive layout design exist, at least for some content management systems. While we’ve used them on some projects, they tend to be all-in-one solutions in the form of themes and plugins which dictate other aspects of design and development. This makes them inefficient or impossible to integrate with other technologies or customize in other ways.

 

Ultimately, the best layouts for hitting all of your website’s goals can’t be created in real-time using desktop-publishing-style technologies. We have the most control, both over the specifics of the design and the functionality of the site, when we embrace the constraint of managing rich text as rich text and building the layouts ourselves using code.

Creating a workable custom layout for new content doesn’t have to be expensive. If you have a modular site, you may be able to deploy an already-created layout. If not, you may be able to repurpose one that exists in your site’s front-end and connect it differently to your CMS application. If neither of these options are feasible, you can build a new, simple layout for targeted content needs.

 

Whichever option is right for you, we promise you we’ve done it before! We frequently build and repurpose layouts that will knock your socks off.