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

Should the project include it, we’ll work with clients to finalize their content strategy from top to bottom and work with them to finalize copy, imagery, and other assets. The part that comes with some internal divide in my office, however, is that pesky population part. Who does it, and when?

We should do it, we provide a service

One side of the office argues that we should provide content entry as part of the development process. While final content shouldn’t hold up development in any way, this camp feels that once content has been finalized, it should be provided from the client in its native form and it’s our job as the service provider to enter it all. I see the positive, customer service aspect of that solution, but I also see a ton of red flags.

First and foremost, have you ever received photo gallery content (read: photos) in a Word doc? Yeah, I have too. Last week in fact. Although it’s labeled as final, much of the content is still missing and much of what’s there isn’t organized in such a way that makes much sense to the developer or production manager that actually has to input everything.

By far, though, the worst offense that I can see is that it’s delaying a completely necessary part of the project. The part where you hand over the keys to your client and they actually use the content management system you spent 3 months setting up for them.

We provide extensive documentation in conjunction with a site staging environment, and the tools in place exist for the client to use. Why would we delay that and take it upon ourselves to use the tools for them? We would do it because content entry is not fun, it’s very tedious. We’d also do it to make sure it’s done on time and in such a way where we can take advantage of the little tips and tricks we’ve come up with can be fully taken advantage of. But is it for naught?

While the initial content population might be top to bottom perfection if done in house, at some point you’re going to have to relinquish control to the client and they’re going to do everything in their power to make that text centered, bold, capitalized, and “a red that pops” once a new promotion begins. I guess what I’m saying is, why wait until the site is live to try and sway your client in the right direction as opposed to when it’s on the staging server, hidden from public view? If the client is populating all of the content, you can monitor how they are using the CMS and educate accordingly.

The client should do it, it’s their site

The other camp at the office feels that it’s the job of the client to populate their own content on their website once it’s to a stage where the CMS will facilitate the additions. This camp feels that in addition to the documentation we provide, the client needs working knowledge of the website, because chances are they didn’t read the documentation anyway, and won’t until an emergency edit needs to be made at a later date.

While we do work with clients on a consistent basis to finalize content, the only one to have it truly and absolutely organized is the client, and often times it’s very difficult to have a client transfer the assets in such a way where it makes as much sense on our end. Why cloud the waters? Why not just let the client enter the content in the exact way it’s organized in their head?

Many times when we’re entering content we’ll see that the wrong assets are incomplete or categorized improperly, which causes a certain amount of additional back and forth with the client to number one make it clear which page we’re talking about and number two explain what was wrong and what the client needs to do to make it right. This is often a very circular, frustrating process that we’d rather avoid altogether. If the client is entering their own content, it’s a moot point because they plainly see the exact problem at hand.

The major argument against the client entering their own content is customer service. Is content entry putting your client to work? I try to put myself in the shoes of the client, having just gone through this extensive process of working with a company to build my dream website. I might not be the most computer savvy person, but I went with this company because they showed me that managing my website isn’t as scary and impossible as I was once told. I want to get my hands dirty, I don’t want to be scared of making updates to the site in the future, once I’m on my own.

What’s my take?

I know I can’t help my bias of actually building these websites and thinking about how much a client willshould love working with the content management system the way I’m setting it up. I try to be objective with this situation, as I do with all client situations. I feel that it helps me do my job that much better, but I see both sides with this argument.

I do have a formulated an opinion on the subject, though. I’d prefer to hold off in saying it outright in an effort to hopefully spark some conversation in the comment thread, but at some point soon I’ll plead my case in line with one of the camps above.

Advertise here with BSA

Advertise here with BSA

By far, the biggest hurdle for me is to make sure that WordPress is set up in such a way that it’s as easy as possible for clients to edit their content. That’s the whole point after all, right? Publicly facing, WordPress has a stigma of being a blog engine. I say stigma because being known as a blog engine does nothing to attribute to WordPress’ extensibility and rapid transformation into a full blown CMS. Besides the obvious solution of installing a CMS-facilitating plugin such as Pods, WordPress has plenty of functionality baked right in to bring your sites to the next level.

get_extended() and its unique place in WordPress

On a recent client project, I stumbled upon a feature of WordPress that seems to go unnoticed by many WordPress fans. WordPress has a built in “more” feature that allows content editors to flag a point within the copy of a Page or Post to bisect it. This flag is used by many templates, and comes into play when pulling excerpts of posts when the official excerpt field is left blank.

Since there’s an excerpt field built into every Page and Post, I’ll often suggest to clients that they should instead take a bit of a different approach to take advantage of these built in features. Excerpts are a great way to write very specific copy to be used only as an excerpt throughout the site, instead of adjusting the actual on-page copy to serve a dual purpose. While that handles the excerpt areas, it in part leaves the <!--more--> in an awkward place — how does that come in to play if the client is actively using the excerpt text area?

That’s where get_extended() comes into play. Checking out the Codex page on the function, we can see in the description that the function “gets extended entry info”. But what does that mean? Checking things out in a bit more detail, we can see that this function returns an array of post content. The first array value consists of the copy before the <!--more--> flag, and the second value holds everything after. This really opens up some doors by allowing your design to include different styles on each section of page content. For example:

<?php $pagecopy = get_extended( $post->post_content ); ?>
<div class="intro">
	<?=wpautop( $pagecopy['main'] )?>
</div>
<!-- /intro -->
<div class="entrycopy">
	<?=wpautop( $pagecopy['extended'] )?>
</div>
<!-- /entrycopy -->

Using that snippet allows us to wrap each part of the post copy in different elements, facilitating alternate styles for an ‘intro’ copy block. This came in really handy on a recent project that relied heavily on SEO, and taking this approach allowed for fine grained control over what copy appears where on the website when used in conjunction with the official excerpt text area for each page or post.

Why not just use…

The entire point of taking an approach such as this is for the benefit of the client. Sure, we could use a plugin (or even out of the box custom fields) to replicate this functionality, but we’re all designers & developers. Taking a passive angle here allows the client to understand why things are happening the way they are without having to understand how WordPress and PHP works.

On top of that, it gives the designer another level of control over the front end by including the_excerpt() or <?=wpautop($pagecopy['main'])?> at various places throughout the website.

One of the great things about WordPress is it’s ability to adapt to your needs in just about every circumstance. With that, though, comes numerous solutions to the same ‘problem’ — this is one of those cases. Please take it for what it is, but I hope it helps you on at least one of your future projects!

Advertise here with BSA

Again with content management?

I’ve come to the realization that clients and content management systems do not mix. As an example, in a recent RFP (a subject unto itself), the outlined requirements of the provided CMS included the ability to adjust kerning, line-height, typeface, and color of all content on the page.

Going beyond the fact that this request was put together by someone who has absolutely no idea about modern Web design, I’m beginning to see more fluff along these lines. Are we really at such a level where average potential clients are making the leap to such things as kerning and line-height?

The client issue

What it comes down to, I suppose, is the level of client you’re working with. There are clients who just want what they have seen as possible. If there is a feature available and you don’t offer it, your skill is inferior. We’re well aware of scope creep and bloat, but clients do not often respect either.

I’m not knocking the client perspective in the least. I, in fact, truly enjoy doing client work. I feel accomplished when a client is both impressed and pleased with their project once things have been pushed live. It’s a great feeling, knowing you have helped make their project a reality. My company makes a consistent effort, however, to debunk many of the preconceived notions that follow clients through our door. It’s often a strenuous process, but everyone is better off for it.

I’m consistently in a battle with trying to better the overall experience for a client, while keeping a close eye on the direct effect any change will have on the design. I’ve written before on the general abuse of content management systems by clients. I’ve even brought up the trouble with WYSIWYG in CMSs. While both pieces shine a harsh light on client interaction with your designs, I’d like to start focusing on any positives that can come from using a WYSIWYG editor.

Overall effectiveness?

I understand that every CMS under the sun employs a WYSIWYG editor for most copy-areas, but it’s not working. I cannot in good faith discredit all the time and effort that has gone into the leading editors, and I don’t see them going anywhere soon. The trouble, however, is that they’re too easy to break. I can’t count the number of times I’ve had to manually edit a WYSIWYG block because the editor lost track of a strong tag somewhere along the line. Clients will call, furious that the entire page is bold, questioning the value of our entire CMS based on the fact that he pasted directly from Word.

It’s not his fault he used Word, however. Commonality shows that Word is a standard method of formatting text in the business world. To say that he is “not allowed” to use Word because it breaks his website goes back to the age-old issue of Internet Explorer “breaking” the Internet. Designers know it to be true, but to everyone else, the project itself is the failure, not the utility.

The trouble here is the divide between how I view the Web, and how clients view the Web. Not just taking into consideration the quality and semantic value of markup, but the design itself. A client doesn’t realize that a stylesheet has been carefully prepared for his benefit, that center justifying, bolding, and typing in all caps isn’t going to achieve the effect he’s looking for.

Stuck in a rut

I truly wish I had a flawless solution for this issue I can’t seem to leave behind, but I don’t. At the very least, I will make a continuous effort to provide the most streamlined, stripped down WYSIWYG copy editor I possibly can.

One thing I’d like to specifically raise as an issue is that of including imagery in WYSIWYG editors. I haven’t thought too much into it, but I think preventing the addition of images directly in a WYSIWYG field will solve quite a bit of my issue. That is not to say that the inclusion of images will be removed completely, simply delegated to the CMS itself as opposed to the editor. While impressive, the handling of images directly within a WYSIWYG editor has never worked out in my favor. I can’t count the number of times a client has requested that someone “look into the image on the About page, it looks funny.”

While I don’t see the omission of images in WYSIWYG as a plausible solution, it’s something I’d like to work at over the coming months. I’m not sure how, but it will be a goal of mine.

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