Wolf’s Little Store

June 7, 2008

Maintaining a consistent user interface

This article is part of the Fork design rationale series. All articles about Fork CMS published on Wolf’s Little Store can be found here.

In our CMS, we use TinyMCE as the rich text editor. You can view a demo of TinyMCE at the official Moxiecode website. TinyMCE is an open source package that transforms textareas into WYSIWYG editors that have the features you’d expect to manipulate text.

A rich text editor is an important feature in any CMS, as one can’t require clients to know HTML. That said, advanced users can always copy and paste their prepared HTML into TinyMCE. The stylesheet of the website is linked with Tiny so you have a proper preview of what you are doing. I’ll go into this later.

Now, one problem with TinyMCE is that it doesn’t exactly fit the user interface of Fork CMS. The default look is rather bland and sort of fits into anything; the biggest problem are the modal windows, which don’t fit Fork’s design at all. Try adding a link or an image in the demo to see what I mean.

Luckily, everything is skinnable, so that’s what I did this morning: transform the regular looking TinyMCE into a better looking one that integrates with the visual style of our CMS. It’s not perfect yet, but it’s a step in the right direction in maintaining a consistent user interface.

Here’s some screenshots. Note that these screenshots were taken on a user account where the interface language was set to Dutch, so the wording might look a bit odd if you don’t know Dutch.

TinyMCE

Modal window

Leave a Reply

Write in English, stay on-topic and polite.