Tips For Quitting Your CMS Rich Text Editor
There is a supreme frustration that has affected both myself and countless web content managers for years: the tools you use to edit and format your content suck. They suck really hard. I’m talking about those clunky rich text editors that have toolbars that kind of look like Word, but behave so erratically you’d swear they had a personal vendetta against you.
I’ve worked with writers, editors and content people who are, at times, close to tears trying to understand why it has to be so difficult to achieve such simple tasks as formatting multi-line captions, putting images in a sidebar or displaying data in a table. These sorts of problems aren’t just the result of bad software either, they’re endemic to the most popular systems like Wordpress and even high-end CMS systems that costs tens of thousands of dollars.
The web is the most amazing publishing tool ever, right? Why is it so hard to get things to look right?
Here’s the single best explanation I can give the non-technical audience that’s fighting their CMS editor: tools for managing content on the internet are woefully inept in the face of modern design. When I say ‘woefully inept’, I mean it just like that, but I am also indicating that nobody, to date, has invented a magic-bullet solution to these problems, and that if you’re thinking how hard could it be?, let me just stop you right there and say, really freaking hard. The tools that do exist have had uncountable man-hours poured into them and have overcome some pretty beastly obstacles, so while we may curse their name, we should still give them credit for trying really hard.
So if nobody will come along and provide a straight-up fix for the problem of easily formatting content for display on your site, what do we do? How do we reduce the pain of site layout while simultaneously building a better website?
It starts in the design phase
Most of the headache inducing trials with content layout come from attempting to do design inside a rich text editor. I’ll get into the technical details in a different post, but the critical piece of knowledge here is that the entire web works under the premise that content is format-less. A paragraph is only just a paragraph, a list is only a list, and an image is only an image. As a writer or editor, you should never get too concerned about where or how stuff appears on the page. That has (presumably) already been decided by your designer and implemented by your developer. If you do need new layout conventions, don’t try to create them in an editor. You’ll only end up frustrating yourself, your designer, and your developer. And it will look ugly.
There’s nothing more frustrating for a web designer than to spend weeks and months in requirements meetings and doing mock-up iterations, only to have a client suddenly throw out all design conventions by trying to force a new layout their CMS editor.
The solution to this, of course, is to design for all the potential layout conventions on your site before launch, and (possibly more importantly) figure out how those conventions affect each other. No developer is going to be able to hand you a tool that offers you ultimate flexibility, and nor should they ever try. There will always be constraints, so you must trust your designer to work expertly within them.
A Design System takes the surprise out of layout
If you are just starting to embark down the path of working with someone to build a content-heavy site, what you’re looking to do is have them create a design system. It should go without saying that a design system is precisely what you’re paying a designer to make in the first place, but it should come as no surprise that both clients and designers will get hung up trying to find the right logo size or color gradient and lose sight of the bigger picture (that your website needs to function without causing you or your users mental anguish).
A proper design system serves two purposes. First, it defines a blueprint for site style (a design manual if you will). It defines what headings, sub-headings and paragraphs look like, as well as site-wide conventions for images, columns, sidebars, etc, etc. It ensures that the aesthetic vision of your website doesn’t have to be compromised as you add new features, areas and pages. And second, it takes the surprise out of layout. How text and images will be displayed on the site under all conditions you’ve specified suddenly makes your layout a known quantity. If you never have to wonder exactly how something will look, it will reduce the change that you’re going drive yourself crazy trying to ‘fix’ it in the editor.
When you understand the behavior of the layout, it allows you to craft content with confidence.
Use markdown for proper markup
The purpose of all these rich text editors is to allow non-technical people to write HTML documents without actually knowing HTML. They work had to resemble interfaces we’re familiar with, primarily MS Word, with a formatting toolbar for the most common layout conventions. The primary fallacy of these tools is that they attempt to auto-generate HTML that’s tied to specific formatting rules, when in fact, HTML itself isn’t supposed to carry any formatting rules at all.
Enter Markdown, a small, easy to use formatting language that lets you write strict semantic HTML without ever having to open or close a bracket. It allows not-technical people to specify headers, lists, links and images in semantic, format-less HTML without the struggle of actual markup. Here’s a sample.
## Level 2 Heading This is a paragraph, with a [link](http://google.com). - List Item 1 - List Item 2 - List Item 3
Most major CMS systems support Markdown through a plugin. Ask your designer / developer about installing one. It may take a little time to learn, but it will save you time in the long run (this blog post was written in Markdown).
More custom fields and content types
Another major step to be taken in jettisoning the rich text editor is to develop smarter templates that use specific data fields to add more logic and intelligence to your site. If you have an A-spot on your homepage with an image and a caption on your site, you should only need specifying an image url (or upload) and caption text in custom input fields, and let the template take care of the rest.
Chances are, you already have a few custom fields in your CMS, possibly for sidebar widgets or header / footer sections. However, it is likely that you continue to rely entirely on rich text to write your primary content, using the all-encompassing Post type. It might be time to re-think this.
Consider features in a magazine layout. These sections may have their own distinctive layout and style, but they’re consistent from week to week, remaining the same until they’re redesigned. Why should it be any different for your content? If you’re posting an image gallery once a week, you should have a specific post-type for gallery posts. Doing interviews? Build a post type for it. Product review? Separate post type. You get the idea. Buy using specific posts types, you can include custom fields for your A-spot, B-spot, pull quote, sidebar, etc.
The idea of custom fields and post types isn’t exactly a new concept (heck, it’s how Expression Engine works by default), but with the immense popularity of Wordpress (which only supports custom fields through plugins or custom development) and the ubiquity of rich text editors, it’s easy to pass this kind of functionality by. Using custom fields and post types means that you can treat different types of content differently. Makes more sense that trying shove everything into a single layout format, right?
It should be easier
Your content is the lifeblood of your website. As a web editor it is time you got better tools to help put it on the page properly, without having to run in through the meat grinder of a rich text editor. You should be able to focus on creating better content and media, not adjusting margins or text flow.
If you’re considering a new website or a redesign, have a serious talk with your designer about the tools you’ll have for crafting content before jumping headfirst into the design.
Stay tuned for a future post, where I’ll get into some of the technical details behind rich text editors, and why they’re an inappropriate tool for creating content.