FireStarter: Getting smart with Rich Text Editors in CMS

Getting smart with Rich Text Editors in CMS

Using Rich Text Editor in CMS

So you've got your new content management system (CMS) website installed, and ready to go with a "fancy" Rich Text Editor.

Isn't that editor cool with rows of buttons just like MS Word... You can apply whatever formats you want from fonts and text sizes to bullet points.

BEWARE

You might write great internal documents in MS Word, but I bet you don't prepare your company's brochure! Now the thing with a CMS is that it does empower you, the site owner, to take real control of your website. And that's really important from a marketing perspective (read why in our Article "Why all websites need a content management system").

But with power comes responsibility. You have now taken partial responsibility for the "look and feel" of how your business is presented to the world.

There are a number of long-standing principle of good design - and one of them is "consistency".

Consistency is your friend

What's so important about consistency?

Consistency is the friend of good design. Its part of every Design 101 course, as described by Swinburne Design School:

"Repetitive elements throughout a design can be used to enhance and clarify information. Repetition adds visual interest to your design, and helps to identify elements that belong together. It can be considered a way of adding consistency to your design. The consistent repetition of graphic elements works to create visual unity."

http://www.hed.swin.edu.au/design/tutorials/other/design/#four

Consistency is the friend not only of good design but also usability (ease of use).

As the top usability expert Jacob Nielson says in "Top 10 Mistakes of Web Design"

"Consistency is one of the most powerful usability principles: when things always behave the same, users don't have to worry about what will happen. Instead, they know what will happen based on earlier experience."

http://www.useit.com/alertbox/990530.html

Finally don't forget clear usable design sells.

And guess what, you've taken on a role as style-master champion of your site...

Your trusty stead; style sheets

Luckily for those of you with a competent web developer, you have a trusty stead to help you in your quest for consistency; the humble style sheet.

What is a style sheet?

A cascading style sheet (css) is a code document, that allows you web developer to set consistent text (and other styles) through out your website. In this document your web developer can set styles for paragraphs, heading, bullet points, image borders and padding.

The styles that can be set, have a powerful effect on the look and feel of your document. In some case subtle changes in the style sheet can have a dramatic affect on the professionalism of your website. Some examples.

Line height - A single setting of "line-height" can change the spacing between your text lines through-out your whole website, creating greater legibility, and an emotional feeling of "clarify" through the not so mysterious use of White Space.
Heading spacing - The padding on a heading style (eg. 10px before, and 5px after) ensure that the readers see the connection between the heading and the text that follows, and see the clear break (via White Space) from the preceding text.

You don't ever edit the style sheet your self. Instead you use the text-editor to set the elements that will be styled.

The nemesis - inline formatting

If style sheets are your trusty stead on the way to Consistency, then your nemesis is surely the inline styles in the editor. For the editor is a wild beast, it can be used for good and evil, in pursuit of good design and in the descent into YELLOW HIGHLIGHTED CENTERED & UNDERLINED BOLDED hell!

To effectively style the page elements, you have to keep the "code" on the page as neat as possible. There are buttons you should use and buttons you should not. (Temptation and redemption are part of any great quest.).

Why are inline style so bad. Well once you apply them; not only do they override the consistent styling in your style sheet, they also prevent consistent upgrades to your design. Say for example, you stray from the path and start setting font-size for text you want to emphasize using the editor; if at a latter date, you decide to increase the font-size through-out the site, then you can easily do it in the style sheet, and every piece of text in the site will change EXCEPT those that you have re-sized.

So, what to use in your Rich Text Editor

You should endeavour to edit text, only using text that can be updated in the style sheets.

The following styles can be easily applied in the editor

Heading 1 - 6 (six heading styles)
Paragraph
Bullet point
Numbered points
Links

And to a lesser extent:

Bold
Italics

which cannot easily be re-styled, but DO easily survive other changes to the text.

So, what NOT to use in your Rich Text Editor

We highly recommend against using:

Text colours - its better to use styles to change colours
Background colours - these should never be used, because they have no padding
Text sizes (the sizes in Rich Text Editors are set using an older standard, that does not directly correspond with styles used in style sheets)
Underline - never underline text unless it's a link. And if it's a link, the underline is added automatically if part of the style sheet. (If not, ask your web developer)
Text-alignment - centered text looks bad unless it was intended by the designer. Justified text can cause legibility problems. And if you want either, discuss with your we-developer adding these as a style.

Temptation, and necessity

You may be tempted to use the other styles. Check yourself!

On the other hand, you may RIGHTLY think that you need more "text tools" to edit your text. If you feel you are missing the right tools to add emphasis to your words, or that some styles don't feel right - then ask your developer to add additional styles.

Some common areas where you may feel your designer hasn't thought your needs thought are:

Links - If you feel the text links are not clear enough, this may be a real usability problem for your clients. Ask your web developer to add underline, or bold or change the colour of the links.

Call-outs - Need to add real emphasis to text, in the same way as a brochure callout? Ask your web-developer to add or change one of the heading styles, to give it the look and feel of a callout instead of a heading. Style sheets are very flexible; a Callout style could be styled with background colours, padding, even background images.

Cleaning up the mess

CMS Rich Text Editors all have their flaws. If you want your website to be consistent (and you do) then you need to ensure that you keep your html code clean.

I am going to talk a little about code here, but bear with me, because this is not rocket science, and may help you reduce the frustration you may feel when editing text from time to time.

Introduction to html

You don't need to know a lot about html to format text.

Html is a series of tags that are added to text, that tell the style sheet how that text should be styled. If you select some text in the Rich Text Editor and then apply a heading 1, style, then behind the scenes, the heading 1 tags are added to that text

Eg. <h1>Your heading</h1>

The rules for simple text editing are easy.

Each element (your text) has to have an opening tag
eg. <p> and a closing tag </p>. The closing tag has a slash to close.
If you put one element inside another, that is, before you close the tag, then the styles of that element (called the parent) are still applied.
eg. <p>your text <b>bold text</b> continue </p> would display bold text inside the paragraph, but keep the other paragraph styles, such as font size, and colour.
The most basic styles for text editing are:
<p>paragraph</p>
<h1>heading 1</h1>
<h2>heading 2</h2>
<h3>heading 3</h3>
<h4>heading 4</h4>
<h5>heading 5</h5>
<h6>heading 6</h6>
Like everything in life, there are exceptions. Some are objects themselves, so they don't have to surround text. In standards format these have a self-closing tag eg. line break <br /> (see how the slash is after the name), but in older text-editors these may not have the self-closing tag eg. <br>. The main object tags you will use in the editor are:
<br /> - line break
<img src="abc.jpg" /> - image reference
Lists (both ordered and unordered) consist of two kind of elements - the list start and end tags <ul>unordered list</ul> or <ol>ordered list</ol> and the list items inside <li>list item</li>
eg, <ul>
<li>list item 1</li>
<li>list item 2</li>
</ul>
In the style sheet the web developer sets all the attributes of the elements
eg. heading 2: white, 14 pixels in Arial font with spacing 10 pixels before and 3 pixels after.
If you use the editor to format text it will insert additional tags, and as discussed above will override the style sheet. If you applied the colour tag to a heading:
eg. <font color="black" size="2"><h2>white heading</h2></font>
then the heading will get a size 2 black heading, even if the heading 2 size is white, and 14pixels. And later, if you want grey heading 2 through-out the site; you're in trouble.

A lesson in html is a lesson in itself, so no more on this :)

The next few sections talk about how to keep the html nice and clean so it doesn't interfere with your style sheet.

Bastard code from Microsoft

Never ever, copy and paste code directly from Microsoft Word into a Rich Text Editor.

Word code is full of inline styles. Without exception it will ruin the format of your styles, and may even break the site layout as well, until removed.

There are three good ways to get text into the Rich Text Editor.

Rich Text Editor - Firstly, the safest method, is to copy the text from Word, into a plain text editor, such as Note Pad. Then copy and paste the text again into the Rich Text Editor. The text will come across, as one big unformatted chunk of text.
You can then use the Rich Text Editor to format the text. Hit Enter to create a new paragraph etc
Dreamweaver - There are very few tools that cleanup Word documents well. But if you have access to Dreamweaver, use it. You can paste Word code into Dreamweaver in layout view. Then cleanup anything that may not look clean. Then paste into Rich Text Editor - you will get your text with paragraphs and heading styles already in place.
Cleanup MS Word - Some text editors have a Cleanup MS Code button built into the Editor. Copy the text from MS Word, then click on Paste from Word, to paste the text into the document.

The second and third method depend a lot upon how your original MS Word document was styles. These tools will NOT be effective, if you try to paste text from document formatted with tables, manual text indents etc. So start by cleaning up your Word document first.

Bastard break tags

One of the hardest things to manage in a Rich Text Editor is break tags. These little beasts are the enemy of style sheets.

Often we find pages that look subtly inconsistent, because somehow, instead of a new paragraph eg. <p>new paragraph</p>, the user has added two break tags <br /><br />. This give the illusion of a new paragraph but:

the spacing between paragraphs will be different from other places on the page
if you try to change the <p> to another heading eg <h3> then both pseudo-paragraphs will change! I have had administrators use <br /> tags thru the whole page, then try to change the heading style of the first line, and suddenly the whole page changes to <h1> - bright red, font size 22px!'

Break tags can be accidentally inserted in a number of ways:

Most often when the text is pasted in from another application
If you use Shift+Enter a <br /> tag is inserted
Some Rich Text Editors are a little quirky depending on the browser and OS.

Here's how to remove accidental break tags. Put your cursor at the beginning of the next line, then hit backspace, until the text joins with the previous pseudo-paragraph. Don't worry if it picks up the style of the text above, such as a heading style. Finally hit Enter, to insert a proper paragraph break. And if its in the style of the text above, just re-style.

Or if there are lots of <br /> tags, and you feel comfortable with html, go into "code view" in your CMS, copy the whole page of html. Paste into a text editor, and do a Find & Replace to delete all <br /> tags. Then paste the code back again!

Tags inside tags

One issue we come across is where users get trapped inside tags, so for example, the whole page is formatted as a bullet point list, with the other styles inside the list.

In html its looks like this:

<ul>
<li><h>heading 1</h1></li>
<li><p>paragraph</p></li>
</ul>

So that the heading is styled, but is still in a bullet point.

Cleaning this mess up is not easy! Try selecting all the list items, and then click on List icon to un-list the text. If that doesn't help use the Backspace to join the text together, into one chunk, then re-apply the styles carefully.

You can avoid getting in this mess, by ensuring that once a list is finished, you hit Enter to go to next line, then select that line, and and click on List icon to un-list the text.

Clean-up tools

Many Rich Text Editors now allow you to Cleanup your html.

These tools work in different ways, and remove different things.

For example one recent test of a popular Rich Text Editor did the following:

o Removed all font tags
o Removed all all inline formats such as bold, underline
o Retained text-alignment
o Retained <br /> tags

So you need to test how these work in your CMS.

Advanced styles

What are classes?

I've already talked about how the style sheet can be used to apply styles to the main html elements such as heading styles.

A designer with good CMS skills, can extend the range of styles, by applying different heading styles depending on which area of the page is being editied. For example h2 in the center column, can look completely different from h2 in the left column.

In addition, more advanced Rich Text Editors allow you to add unlimited styles to text, using classes.

In html classes are like names for styles. So your web developer could set up a class "highlightText" which would apply a blue coloured bold text to the selection.

Applying classes

In html - to apply this style we would have to add the class to an element eg.

Of course you don't want to have to edit the html, so the Rich Text Editor allows you do add these classes via the editor.

There are several ways this might work:

Drop list - Some editors have a drop list of classes that the web designer has made available to you. To apply you select the text and apply, or in some cases you can select an html-element to apply.
Popup - When you add some html elements you can add a class. For example when you add an image you usually get options to set the dimensions, and alignment. In some Rich Text Editor, you also get an option to set the class.

Unique features of classes

In good hand classes can give your website some very special touches, while still maintaining consistency. Some ways that I use classes to give choices to clients:

Image styles - Set border colours, padding and margins around images. This stops the text abutting up to the images, a poorly designed CMS websites.
Highlight text - Instead of using inline styles to highlight particular words, within a sentence, we create a set of consistent emphasis styles, that the you can use.
Call outs - More options for callouts with background images, padding and more "design".

Moving on

If you are not getting enough out of your Rich Text Editor, STOP before you make changes in each page, and ask "Is this something that I should be doing consistently in the site?" and if it is then talk to your web developer first.

And if you are just starting on the CMS adventure, make sure you have a web developer who understands how to give you the tools to effectively maintain the design of your website.

Write a comment

Required fields are marked with *.

Firestarter