With Great (CMS) Power Comes Great Responsibility

Sep 26 2011 by Katie Methe, Jason Mark | 27 Comments

With Great (CMS) Power Comes Great Responsibility

One of the biggest advantages of using a content management system (CMS) is that it allows developers to empower site owners with unprecedented control of their website.

Giving website owners the ability to create, edit and manage their web property has many benefits. However, having too many features and site-management capabilities can burden the client and can wreak havoc on a website.

Read on for the five most common mistakes web developers make in an effort to empower their clients.

Mistake #1: WYSIWYG Editor Overload

What You See Is What You Get (WYSIYWG) editors (or rich-text editors) are great features to install in content management systems because they allow content creators the ability to create, edit and manage web pages without the need to know HTML.

WYSIYWG editors are so useful to end-users that you’d find most open source content management systems with it enabled by default. For example, WordPress has the Visual Editor and it’s the default content-editing view.

But is it really a good idea to let your client center text and turn it purple? Probably not. Ever been to a site with blue underlined text that wasn’t clickable? How about a company website that have hyperlinks in bolded, black text? These probably happened because they had out-of-the-box, un-customized WYSIWYG editors, which usually comes with everything but the kitchen sink.

In fact, the first thing most of our clients ask about is if they can limit how much their editors can use formatting.

Consider customizing WYSIWYG editors to only have the following:

Text Formatting

  • Heading 1
  • Heading 2
  • Heading 3
  • Heading 4 (if needed)
  • Blockquote
  • Ordered and unordered lists
  • Italics
  • Bold
  • One or two special CSS classes for emphasizing or de-emphasizing text

Web Content Elements

  • Links
  • File upload/attach
  • Images
  • Tables (with instructions to use properly on tabular data only)

Get Rid of

Below, see an example of a rich-text editor with too many options and features. It burdens the user interface and, when used improperly, can make web pages look like a Myspace page.

By configuring the CMS’s rich-text editor, content creators can have a less intimidating time composing content.

Of course, this is just a general guideline. Some project might need more and some might need less. A good practice would be to determine what’s needed and what’s not for each project instead of shortcutting the process and simply just providing the client with everything.

Mistake #2: Clients Editing CSS or HTML

A reasonably astute person with a desire to learn can edit HTML and CSS. But that’s true about anything. Just as car manufacturers don’t expect us to understand the inner workings of a car to be able to operate it, we shouldn’t expect our clients to know CSS and HTML to be able to run their website.

Like many design agencies, we tried to train our clients and their staff with HTML and CSS so that they could be fully empowered to make changes to their site. But every time, typically within a year or so, the client was so sick of it and had wasted so much time and money doing something they hated that they had us take back control of their websites.

When deploying content management systems, consider limiting access to the style sheets only to experienced professionals.

Mistake #3: Confusing "Empowered" with "Expert"

There was a recent Harvard Business Review report that talked about a number of studies that have shown that in order to be an expert at something, you need to have 10,000 hours of experience at it. It applies to chess, and music and business. It could also apply to web design and web development.

While you might have been in this industry for 5 or 10 years, your clients might only have a few hours experience as an operator of a site.

Don’t just turn over a CMS and hope that your client has enough experience to be an expert at usability and web design. Make sure you’re available for when they’re stuck.

Mistake #4: Giving Them More Than They Ask For

We’ve had a couple of clients come to us and tell us that their last web developer created a site that doesn’t do what they need it to do.

When we looked closer, we discovered that it did, in fact, do everything they needed it to do. And a lot more.

By going in, modifying the interface and removing and renaming things, we were able to create a much easier UI to use.

We know too many developers who create too many features for a project. Of course, when they put the product in front of real users, it becomes quickly obvious that it’s not user-friendly.

Mistake #5: Thinking That the Default CMS Settings Is Good

Today’s content management systems are so robust that you can pick any of the top five systems and 99% of your clients will have more features than they need.

What clients need is the ability to get their job done, and as web developers, it’s our responsibility to facilitate that. We need to make educated, experienced decisions so that our clients don’t have to. We need to help clients focus on what makes them awesome (as a person and as a company) and give them tools to leverage that.

Conclusion

As developers, we need to step up to the plate and make sure that our clients have tools that not only empower them in being able to manage the content on their site, but also empowers them to make the best use of their time.

Giving clients more choices and abilities to mess around with their website isn’t the same thing as empowering them. We might really just be hampering them and slowing them down with too many options, features and doodads.

Related Content

About the Authors

Katie Methe is one of the sharpest Drupal Chicks on the East Coast. Her experience with Drupal ranges from small websites to complex and advanced databases. Catch up with Katie on Twitter @katiemethe or join the Gravity Switch mailing list to stay up to date!

Jason Mark is an educator, business owner, and author. His Massachusetts-based firm, Gravity Switch, continues to be the leader in web, iPhone and iPad development in New England, and Jason keeps their carbon footprint down by bicycling to work year round. Follow him on Twitter @jasonnmark.

27 Comments

Phil Jones

September 26th, 2011

Decent article – couldn’t agree more that there are to many options on many WYSIWYG editors.

I’m a big believer in the KISS principle. Most of the features an advanced admin area offers are unused by none technical users.

Christian

September 26th, 2011

Thanks for this article.

Just an add on concerning

My WP users are basic users and asked me to have the same look in the edit pad than in the blog (public) part.

I found the solution here : http://www.deluxeblogtips.com/2010/05/editor-style-wordpress-30.html

The users have basics styles , but as they find the styles they required to write their articles, following the site colors and look, there is no temptation to use others.

TheAL

September 26th, 2011

Excellent article. WYSIWYG Editor woes are a big one. I have to gently remind clients every now and then that consistency with headers and paragraphs makes reading easier, and easier reading means happier visitors. Nothing is more unsettling than all the headers being different sizes and colors.

Michael

September 26th, 2011

Katie and Jason, thanks for the article, as it puts into focus what I’ve been thinking all along.

As mainly a designer, and only a ‘tinkerer’ with code that is under-the-hood, how might one limit the offerings in a CMS editor, to wit, as you said— go about “consider customizing WYSIWYG editors to only have the following…”

Plug-in? Tutorial someplace? :)

paul

September 26th, 2011

totally agree with you. If using WordPress, there are different ways to hide UI elements and controls from the user. The easiest would be to use a plugin called Adminimize.
That won’t take care of the WYSIWYG controls though. I found this post http://www.kevinleary.net/customizing-tinymce-wysiwyg-editor-wordpress/

Jason

September 26th, 2011

We always do this with our CMS installs and our clients are incredibly appreciative of the control they have and the simplicity in using the tools. That sea of icons in the default setting is completely overwhelming to almost everyone.

Joshua Lewis

September 26th, 2011

Balancing the power of a CMS with good usability is one of the problems that I’ve been mulling over for a while. I think one of the things that trips up a lot of designers/developers is they don’t approach the CMS back-end of the site as its own design problem with its separate goals and audience that often warrant as much attention as the front-end.

My personal solution has been to avoid overbuilt software like WordPress and Drupal that have to be striped down for use and instead start with CMS’s like Silverstripe and SymphonyCMS that I built up. Both types of software are, theoretically, equally powerful but I find starting with a cleaner slate results in a more focused and friendly interface for my clients.

Heath Howard

September 27th, 2011

Love the Spiderman reference.

Balancing flexibility and power with simplicity and ease of use is a difficult tightrope to walk.

I think one key is for the initial release to be as simple as possible and slowly add to it with enhancements. Rarely does anything start complex and work well, but 90% of the time, starting simple and working your way up, works every time ;-)

Saeed Neamati

September 27th, 2011

Great article. I specially agree with the item number 2 (Clients editing CSS and HTML). This has brought me almost hundreds of nightmares about cleansing up the mess my clients had created.

mikaweb

September 27th, 2011

I strongly agree with number 4. It can only brings some mess.

Rachel Andrew

September 27th, 2011

Good article and nice to see other people are thinking along similar lines. I wrote a piece about WYSIWYG editors recently there are also some interesting comments on the piece, I think there are problems to be solved here: http://www.rachelandrew.co.uk/archives/2011/07/27/your-wysiwyg-editor-sucks/

Maverick

September 27th, 2011

Really good tips from Usability and UX point of view.

In order to satisfy the client by giving them more functionalities we are infact doing them bad.

Thanks for this lovely tip.

Mimo

September 27th, 2011

Hey, loved this article. Made me smile because of how true it is. Great notes.

Katie Methe

September 27th, 2011

@Christian and @Paul – thanks for the links! We do use wordpress with some of our sites. I actually feel they do the best job with text editor control/integration.

@theAL – couldn’t agree more. it’s unsettling for users as well as the designer who is ripping their hair out because the site no longer looks the way they intended it to! :)

@michael – what CMS are you using (if any)? I work with Drupal primarily and there are lots of modules that will help with text editor UI. I think that is true for most CMS platforms. If you have a specific one in mind, let me know and I can help out. :)

@jason – it’s also tempting, and we like to not even put the options in the brain. let’s be realistic. humans can be greedy and want to use ALL the buttons! :)

@Joshua Lewis – i couldn’t agree more. we actually have a custom admin theme we use for the back end of some of our sites for that reason. the back end is just as important to site editors as the front end. In terms of avoiding overbuilt CMS’ I agree to a certain extent. If you are building a very basic site, it’s probably more time to strip down the full featured CMS’ than it is to build it in a simpler solution (have you looked at CushyCMS at all?). But when building a site that will need to be expanded and very robust with features I think using a full featured expandable CMS will actually help you in the end. You may have additional setup time in the beginning, but your CMS will be highly expandable with a lot less work and a lot more community support.

Manuel Vicedo

September 27th, 2011

I think point #4 is not necessarily accurate.

It’s true that clients that have to use the Admin interface may get overwhelmed by additional features, but that’s not to say you shouldn’t plan ahead a little bit and account for what they may possibly need in the near future.

In my opinion, it’s all in the execution. How you design the interface is pretty much what defines how fast they will be able to understand it, which in essence is turning to the best practices in UX design and usability.

Sennbrink

September 27th, 2011

_OMG_ funny post! =) ;)

Jon Pearce

September 28th, 2011

I have experienced this from both sides of the coin. I often set up blogs and sites for private clients, but my role in the marketing team for a big organisation means that our own websites are ‘locked down’ by in-house IT teams.

They seem to wield this like control freaks and do not release the basic functions that are required, probably once bitten by a content editor that used 5 font colours in one word thinking it looked ‘pretty’!

A good understanding of your clients abilities and knowledge helps a great deal when setting up a CMS, but you don’t want to allow them to ruin all of your hard work!

Michael

September 28th, 2011

@Katie: Of late, predominately WordPress. Thanks for your reply!

@Paul: Your links were just what the Dr. ordered, and my quest to slim down the pieces is near completion. Thanks!

George Hamill

September 28th, 2011

I am looking to hear from you

Chief Alchemist

September 28th, 2011

One of the key benefits to using a CMS is that it separates content from display. That is, a redesign is much closer to a re-skin, so to speak.

Aside from clients having a tendency to being heavy handed with the WYSIWYG (in a MySpace sorta way? hehe) is that the content and styling is less separated.

While I am a big fan of WordPress, one of the reasons I value ExpressionEngine so much is there is no WYSIWYG in EE. Sure it can be limiting at times but more often than not, less is more.

Katie Methe

September 30th, 2011

@Chief Alchemist – there isn’t a WYSIWYG built in, but there is a module (wygwam – http://pixelandtonic.com/wygwam) that implements one. Drupal doesn’t come with a WYSIWYG out of the box either, but a lot of clients want one.

Audrius Jankauskas

October 3rd, 2011

Don’t forget that text is not the only piece of content that can be added on today’s websites. Think of all other media. Soon you’ll realize that WYSIWYG will never fit. You don’t need any of WYSIWYG functions when you want to embed video or work with your image gallery. That’s why you should seek for a CMS with drag and drop capabilities, in-place content editing and automagical solutions for any type of content.

Mangirdas

October 3rd, 2011

That’s why I’ve build ImpressPages Drag & Drop CMS

Chris

October 3rd, 2011

One of the best WYSIWYG editors I ever found in fact wasn’t a traditional one, it was a WYSIWYM (What you see if what you MEAN). http://files.wymeditor.org/wymeditor/trunk/src/examples/01-basic.html

I found it provided a very clear structure which still had elements of a WYSIWYG which satisfied the client.

I definitely agree though that limiting the amount of editing that can happen is a must.

Majalah

October 4th, 2011

I use wordpress for all my blogs and I’m happy with their WYSIWYG Editor. Simple and it can be expanded.

Himanshu

October 16th, 2011

Nice article. Concise dose of valuable in-sights.

BTW, our design focused WebBuilder “DesignOnCloud” (http://hashedin.com) follows most of these patterns :)

Charlie Holder

October 17th, 2011

I would totally agree that WYSIWYG editors are a big pain-point for a lot of people, both administrative and end-user. In our CMS we provide the option for offering a WYSIWYG editor as well as other custom form fields that end-users can interact with.

We think it’s a good option for those administrators that want to create a structured form that offers simple fields for end-users to fill out while they get to retain all of the style control. When the end-user fills out the fields that data is stored as XML on the back-end and experienced users decided how those fields are handled with a simple block of XSLT or Velocity code.

This kind of approach not only helps eliminate the need for end-users to know HTML/CSS, it also help provide an clear structure for what kind of information the user should be supplying for the page.

Our CMS is a bit more robust than others, but you’ll see a lot of the same concepts on a much larger scale. Take for example creating a new page, you may have separate fields for the page title and page content as well as custom metadata fields that would need to be programmed for. Our structured page fields work much the same way by allowing admins to create a new form field when any design/style control is needed.

Check out Cascade Server from Hannon Hill.

Leave a Comment

Subscribe to the comments on this article.