A basic guide to using WYSIWYG for content managed systems.

Definition

WYSIWYG: What You See Is What You Get

The purpose of a WYSIWYG editor is to let a content editor update web content without having to know complex code. Sounds pretty straight forward, right? – Well it is… and its isn’t.

At 360innovate we create content managed websites for many of our clients. Often incorporating the use of WYSIWYG Text editors that allow non-skilled users to edit and update website content.

It is very easy to get stuck into using a WYSIWYG editor and create content right away, however it is also easy to create bad content which may be detrimental to the users of your site.

A little bit of understanding of what is happening behind the scenes of a WYSIWYG editor can help to produce results that are easier to achieve and better for website users, search engines and you.

The intention of this post is to enhance a first time user’s understanding and to give a bit of best practice advice along the way.

Why is it important to know these things?

A basic understanding of the different user types that may visit and interact with your website can be helpful in creating content that will add value to your site. If your content is easy to read and engaging it can pay real dividends with you users response.

In addition if you structure your content in a meaningful and semantic manner it can help to improve your search engine rankings.

Hidden Code!

When using a WYSIWYG to create content, the WYSIWYG editor is working hard in the background to translate your intentions into HTML code which will eventually be added to your web page.

HTML uses a tag based system to give plain text meaning. When you write a few lines of text  in a WYSIWYG and hit return the editor will be creating the HTML code(markup) in the background to make your text appear as a paragraph. When you select a word within your paragraph and make it bold, the editor wraps this word with more markup to tell the word how to behave.

A paragraph will look this this in raw format:
<p>This a paragraph with tags at the beginning and the end which indicate opening and closing of the code.</p>

A list of other common tags:

Links

<a href="http:www.google.com">This is a link to google</a>

Bold Emphasis

<strong>Bold Words</strong>

Lists (unordered)

<ul>
<li>List item </li>
<li>List item </li>
<li>List item </li>
</ul>

Which will look like this:

---

• List item
• List item
• List item

---

Lists (ordered)

<ol>
<li>List item </li>
<li>List item </li>
<li>List item </li>
</ol>

Which will look like this:

---

1. List item
2. List item
3. List item

---

Headers

<h1>Important Header</h1>
<h2>Quite Important Sub-heading</h2>
<h3>Slightly Less Important heading</h3>

Example of these tags in use:

<h2>Welcome to my test page</h2>
<p>This the first paragraph in my test page. I will use the content of this paragraph to explain a little bit about HTML tags</p>
<h3>Sub-headings help to break up blocks of text</h3>
<p>This second paragraph contains <strong>bold text</strong> and a <a href="http://www.google.com">link to google</a> < /p>
<h4>A list of things:</h4>
<ul>
<li>This is a list item </li>
<li>This is also a list item plus a link to <a href="http://www.google.com">google</a></li>
<li>This is just a regular List item</li>
</ul>

Below is how that code looks to the user.

---

Welcome to my test page

This the first paragraph in my test page. I will use the content of this paragraph to explain a little bit about HTML tags

Sub-headings help to break up blocks of text

This second paragraph contains bold text and a link to google

A list of things:

• This is a list item
• This is also a list item plus a link to google
• This is just a regular List item

---

Creating Good content

There are a number of different WYSIWYG Editors that are used widely for content management systems and other application on the internet. Functionality can vary from editor to editor, some have a huge array of options for creating content, others have a stripped down set of tools. Here at 360 we certainly favour keeping things simple when it come to updating content for a content managed website.

We often use a WYSIWIG called Tiny MCE, this is a widely used tool and is highly configurable. For most applications we tend to strip away some of the more complicated functionality and strip it down to the bear essentials. The reason we reduce the capability of the editor is to make it easier for the user and also to reduce the any possibility of creating “Bad Code” – more on bad code later.

What is good content?

Good content should be meaningful and easy to to read (This post is the only exception to the rule!).

Meaningful content can be considered primarily as being contextually relevant and readable for the end user. It can also concern how you set up your content so that it can be understood by search engines.

There are techniques and best practices that can be used that will ensure your content can be digested easily by your users and also help to search engines index your page so that it can be found by people searching for your topics.

Headings should be descriptive but concise – summing up the content to follow.

Paragraphs should be created in bite sizes chunks, that users can choose to dip in and out of.

Meaningful sub-headings throughout content will allow for easy scanning of pages.

For lists of items where the order is unimportant use the Unordered list (bulleted) button.

Unordered List Example – Things on my desk:

• Phone
• Newspaper
• Laptop
• Screwdriver (no sure why!)

For lists where the order is important you should use the Ordered list (numbered) button

Ordered List Example – Make tea:

1. Fill kettle with water
2. Set to boil
3. Fetch mug
4. Place teabag in mug
5. Pour boiled water into mug
6. Stir teabag then remove
7. Add milk and sugar (optional)

If a section of content is overworked with a WYSIWYG editor  the results can be

Bad Content – What not to do:

Many WYSIWYG systems allow for the addition of extra added features for decorating text. The ability to chage fonts and add different colours to text is common. It may be tempting to try and spruce up your content by playing the various effects available through the WYSIWYG.

DONT DO IT!!!!

IT WILL LOOK TERRIBLE!!!!

Why the dramatic statements?  Well thats years of eperience talking – I have seen the same mistakes repeated on many occasions by many different people. So what are these mistake and how can you avoid them?

“Jazzing” content up with different fonts.

Changing the font to make a bit of text stand out from the rest may seen like a decent idea but if your website has been built well it should already have a least a little bit if typographic styling which should more than suffice for 99.9% of the time.

Having more than one font for the body text of you web page will result in a mish-mash of styles that will rarely make the text any more readable or look any better. In addition the code generated by the WYSIWYG is likeley to mean nothing from a semantic point of view so any emphasis will be missed by search engines and people using screen readers.

Change the font size

This one catches a lot of people out – they start to play with font resizing options and before they know it a whle page of content is set to several different sizes and it is sometimes hard to tell whether a block of text has been resized or not. The truth is that a well designed website should make enough provision for the styling of text without the need for resizing. No content editor should have to use font resizing to format their site content – the default typography styles should suffice for all your content.

This is important to remember because changing the font size will create inconsistencies in how you are presenting your content to the end user, an unprofessional look and feel can affect a user’s perception of your business or organisationas a whole.

Adding a splash of colour.

Again it may be easy and tempting brighten up your page with a splash of colour. In reality you should not have to bother  – a good website design with pre-planned and well though out typography should provide all the typographic tools to deliver your content without the need for ‘crazy’ and ‘fun’ additional colours.

Adding colour to convey meaning is also bad practice as no semantic meaning is implied when you re-colour a font.

If you want your content to mean something to all users and search engines place your “Summer Sale Now On!” text in a heading and follow it with some descriptive content.

Why have all these tools and not put them to use?

WYSIWYG text editors are designed to plugged in or bolted on to other applications – they are designed to cater for a broad spectrum of users and often this means non-technical users can end up working with systems that are unnecessarily complicated. Often additional features are available that users will never need for their day-to-day content management purposes.

Conclusions

Make your content easy to read. Keep it simple. Dont go crazy with the typography options on the content editor. Maintain consistency across your content.

Googles webmaster  guidelines:

“Create a useful, information-rich site, and write pages that clearly and accurately describe your content.”

Provided you have a web design you are happy with you should not have to get involved in the visual appearance of your website – it should look after it’s self – leaving you to look after the cration of valuable and meaningful content.

Further reading

As mentioned at the top this post this article is intended as a very basic guide to getting started with WYSIWYG. If you are a content editor who should or would like to find out a bit more about the stuff I have talked about here  please click on some te links below.

Tips for good web content

Jacob Nielsen article Write for the web

More on Jacob Nielsen

List of WYSIWYG editors

Another list of WYSIWYG editors