It might not be that I like TinyMCE itself the best, but WordPress’ very customized implementation is quite well done which speaks really well for TinyMCE. While there are a number of things I don’t like about the default implementation, there are plugins like TinyMCE Advanced that help me make it my own and in doing so help out my clients. Personally, I don’t use it to add functionality, but the opposite, I remove a whole bunch. Personally I prefer it when a client is partially ‘locked into’ the established design guidelines of a comp and can’t at their will have the option to center, giganticize, and make red all of the text that needs to pop so those buttons are removed completely from the toolbar.

In a perfect world everyone would learn basic HTML and be able to edit a simple naked textarea if they wanted to manage the content of a website. In a parallel perfect world, Markdown would be even more prevalent and acceptable to the Average Joe when it comes to editing Web content. The world, however, is anything but perfect, so we’ve got WYSIWYG.

Advanced content management for clients

Formatting text and inserting pictures is one thing, but recently I’ve been working on a number of client sites that required an even higher level of control. Nothing too extravagant, but nothing “easy” to provide given standard WYSIWYG conventions.

The goal was to provide the client with a simple graphic that would link to an additional page of the site. No big deal, and totally possible with a default WYSIWYG editor. Just insert an image, when it’s included select it and apply a link to a page. Not an amazing achievement but not totally apparent to someone editing their first website.

The first problem is uploading an image, it’s sometimes a bit difficult for extremely new content managers. The next level of difficulty is adding the link to the image itself. Usually, this process is as expected: first click the image to ‘select’ it, and then choose the toolbar button to add a link. The content editor would then need to go out to the live version of their website, copy the link from the URL bar, and paste it into the link entry bit of the editor. I’m not sure about your clients, but mine have often become frustrated at that level of interaction required to getting something to link somewhere.

As I went through the scenario in my head I thought that there must be a better way. There is: shortcodes.

Shortcodes are my key to success

Shortcodes were born in WordPress 2.5 and can be thought of basically as text-triggered macros that your clients can use when editing content in the TinyMCE editor of WordPress. The beauty of the Shortcodes API is that it’s an API; you can create your own shortcodes and do with them anything you’d like.

Out of the box, WordPress uses shortcodes for things like multi-image galleries. Plugins use shortcodes all the time to provide the exact functionality they were designed to provide. There’s no reason your themes can’t have that level of flexibility as well.

As per the API spec, implementing your own shortcodes is really straightforward and easy:

// [bartag foo="foo-value"]
function bartag_func($atts) {
  extract(shortcode_atts(array(
    'foo' => 'something',
    'bar' => 'something else',
  ), $atts));

  return "foo = {$foo}";
}
add_shortcode('bartag', 'bartag_func');

Using that snippet alone will open lots of doors with shortcodes for use in your designs and therefore your themes.

As the client project that inspired this solution continued on, I used shortcodes in a number of other places to include a client-positionable widget including the (formatted by me) team members name, their job title, and conditionally a link to a video interview with them using data stored in a Pod. It was a simple parameter-less shortcode along the lines of [flag_team_member_data] and would automatically include the appropriate information. The information was styled exactly as per the designed comp, it was floated right and there was just the right amount of padding surrounding the element.

Why I like shortcodes as a solution

For me, shortcodes provide an ideal balance between client satisfaction and my satisfaction. I’m happy if the client is able to move a variable piece of content like that from place to place and get what they expect to see the first time they try to move it. I’m much less comfortable should they want to change the design on a level of aesthetics and can do that with a simple click of a WYSIWYG toolbar.

This is all instead of including the HTML in the editor’s HTML view and hoping your client doesn’t decide one day to replace all of the content in the editor by selecting all and hitting delete. It’s also instead of having to explain that “on this page there’s a bit more going on under the hood so be careful editing” or something along those lines.

I also like that what we’ve discussed is just the start as far as possibilities with shortcodes are concerned.

You could go so far as to build your own shortcode integration framework that provides additional TinyMCE toolbar buttons for your clients to interact with. Shortcodes could be used in variable ways to interact with other data from the website, especially Pods. That’s a real benefit to shortcodes themselves, they can easily be a simple reference to an image, or they can return extremely detailed and well-formatted bits of custom data exactly how you want.

Shortcodes are an API done really well. They’re super easy to implement and you can take them extremely far when it comes to customization. Content widgets are just one aspect of shortcodes, but I hope at some point they help you to accomplish something in a new way and in doing so giving your clients an additional, acceptable amount of freedom.

Advertise here with BSA

Content management is a welcome addition to the modern Web, but nothing comes without fault, and there is definitely a dark side to content management systems. Moving beyond the troublesome aspects of bloated markup within the CMS itself or poor interface choices, a major problem with content management systems, is that you’re allowed to edit content.

Revisiting a recurring issue

Long time readers know that I’ve written on this subject before, but over the past few months, some new and interesting issues have cropped up alongside those discussed in my previous article.

The challenge discussed in my previous article covered mostly the issue of markup quality of content. More often than not, a CMS will provide editors with a WYSIWYG interface, allowing users the ability to format content in much the same way as using a word processor. WYSIWYG editors of higher quality will take certain measures to ensure the resulting markup is at least valid, but that does nothing to ensure that the integrity of, for instance type, is retained.

The article continued to discuss alternatives to WYSIWYG by way of plain text markup languages such as Markdown and Textile. Both systems are incredibly useful, but I haven’t had the best luck explaining the purpose to clients. More often than not the reaction is something similar to “I don’t get it, can I use Word to copy and paste?”

It’s about aesthetics

The content on a website represents a number of things. Website content represents value. Poor content (and poor content organization) directly relate to a blatant lack of usefulness (and therefore value). There is also an aesthetic value to websites. There are good looking websites and bad looking websites. There are some in the middle, but the point to take home is that web design does in fact hold an aesthetic value. Most of the time, content management systems destroy that value by placing too much power in the hands of its users.

My company uses a CMS built from the ground up in house, which completely and wholly caters to 95%+ of our clients ‘out of the box.’ It’s very rare we have to do much in the way of custom programming on top of our existing CMS to make the system work for a client project. That said, our CMS allows clients quite a bit of control over their website, nearly to a fault.

Clients are thrilled to hear that not only is the formatting of content under their control, but much of the site imagery as well. While that aspect of the CMS works out great for sales, it makes the design team cringe a bit after a site has been pushed live. The various imagery scattered around the site in support of the content has now been replaced with pictures that ‘pop!’ and obtrusive calls to action which do nothing but take a toll on design integrity.

You get what you asked for

After reflecting on it for a bit, I realized something; that’s exactly what we told them to do. A major aspect of each project is client excitement knowing that they’ll be able to control the content of their website. At the end of the day, a client has paid us to provide that ability along with a shiny new website. Once the site has been launched, and the ‘keys’ have been handed over, do we have the right to say something? It’s a natural desire, after all.

There are a few ways to look at it. Considering the possibility of contacting the client to start a discussion surrounding the content they’ve managed invites some social ramifications that should be considered. While you as a designer may be viewed as an expert by your client, it’s very possible that offense may be taken to your observation. How to handle it?

My company bills by the hour, something to keep in mind throughout this brief analysis. In our case, a first option would be discussing the issue at hand, outlining our concerns, and offering feedback. Ideally, our concerns would be taken into considerations and a revision could be made. There remains an issue, however. We’ve provided a content management system to a client, they’ve used it to edit their content, and we’re now suggesting a further revision be made. Is that billable time? It’s a gray area, in my opinion. While the client may greatly appreciate the additional time you’re offering, they may not want (or feel the need) to pay for it. After all, it looks good from their viewpoint. Alternatively, the work could be taken care of pro bono, simply for the sake of using the site in your portfolio.

A third option, although the least desirable, would be pulling back your CMS. Simply removing the level of content management to a certain degree would help to circumvent issues outlined here, but it results in a much more limited system you’re trying to sell.

It’s a touchy area, but it comes down to partnering and client relationships. Both you and your clients are working toward a common goal. You’ll be able to accurately assess whether it’s appropriate to approach clients on aesthetic issues which have arisen. More often than not, if handled properly, you will be able to find common ground with your client partner and provide the best possible solution for the good of the project.

I can’t be alone here. For those of you doing client work, how do you handle issues like this?

Advertise here with BSA