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

Just a quick tip today – the solution to a bit of a ‘gotcha’!

While writing the jCaps plugin, we came up against an issue where .ogv videos were refusing to load, but bizarrely, only in Firefox. In its place was a grey box where the video should be, with a question mark in the middle.

After a little bit of head-scratching, we found the solution – Apache wasn’t sending the right MIME type with the video, resulting in a Firefox fail. The solution is to put the following AddType directive in your .htaccess or httpd.conf file (mod_mime is required):

AddType video/ogg .ogv

Make sure that you restart Apache if you put it in httpd.conf.

On another note, jCaps is nearing another release – hopefully this week. It will take into account some of Bruce Lawson’s wishlist, and includes a big refactoring of many elements of the plugin, including the API. It should be leaner, meaner, and easier to use! In the meantime, you can fork or download the project at Github.

So you have just taken ownership of your spankingly new online presence – be it a blog or a content managed website you’ve had developed.

You’ve read the manual, had the training and put on your best typing hat (ok, so that’s just me then! ) and you are ready to show the world your dazzling linguistic ability.

That’s all very good but its often all too easy to undo all of this good work with poor use of supporting imagery and bad formatting, making your posts or pages difficult to read, and ultimately affecting your user’s experience and perception of your online presence.

By taking a few simple steps to ensure the visual side your posts are properly cared for you can really help to improve the overall user experience.

Content Managment Systems

Here at 360innovate we offer content managed websites. These allow our customers to take full control of their websites allowing them add, edit and delete pages and giving the administrators full control of the website content.

This has huge benefits for the customer as they are able to quickly and easily update content without having to contact their web developer.

The responsibility of power

“With great power comes great responsibility.” –Peter Parker in Spider-man (2002).

When taking control of your web content it is down to you to make sure that the content reaches your user in a readable and well presented format. Well thought out web content combines of a number of factors including:

• Typography
• Layout
• Imagery

If you have had a website developed on you behalf or are using a blog template you might not have direct control over certain features, but you can still make an impact with carefully managed content.
Below I hope to outline a few hints and tips on how to edit and organize images.

Enough waffle!……How do I go about editing my images?

Photoshop of course! …. You don’t have Photoshop? Just us designer types, huh? So we need to find something that will do just as good a job but for free.
Luckily for anyone with a half decent broadband connection, help is at hand. There are several free to use image editing applications that are extremely robust and will handle many of the basic tasks required to get your images online.

Below is a list of the online editors I’ve had a chance check out though there are many others available.

Pixlr
Sumo Paint
Aviary Pheonix
Splashup
Adobe Photoshop – (requires sign up to Adobe.com – this is free, but takes about 5 mins)

For the purposes of this article I will be using Pixlr though any of the applications above will be able to handle the tasks in the tutorial, although maybe not in exactly the same way.
I have also set up a dummy WordPress blog to go along with this tutorial and while I’m aware that WordPress is a fantastic tool with some great easy to use image control options I’d like to maintain focus on our image editors, so the blog just shows our images edited down and placed in context.
My dummy blog can be found at http://sufferingsuccatash.wordpress.com

You can click most the screenshots below to view an enlarged version.

First up – Image Resizing/Cropping

Taking beautiful digital photography to go along with your article content is becoming a lot easier these days, due to the proliferation of high quality digital cameras. When it comes to the web though all of your extra megapixels suddenly become a bit redundant as you will usually end up needing to resize your photograph to fit within the bounds of your website or blog.
Even if you have some sort of popup image gallery that requires a larger popup image you will still probably need to resize this as well.
There are benefits to resizing your images.

• Smaller images load a lot quicker than larger images.
• You can precisely control the layout of your web content.
• Careful cropping and position can have stunning results.

So lets get started (finally!)

The first step I would recommend would be a little preparation with a pen at the ready to note down the width in pixels of your intended content area. This is where using Firefox as your web browser comes in very handy – there are a number of Firefox add-ons that will let you measure elements on the web page precisely. I’ll be using the ruler from web developer’s toolbar, though measurelt will do just as good a job.

Measure your content area width by activating your ruler of choice and dragging from the top left of your content area to somewhere on the right that looks about right – a few pixels either way should not make too much of a difference and round numbers are easier to work with (always round down rather up – images that are too wide may inadvertently ruin the layout of your site).

My blog has a content width of 455px. So from here we can work out precisely the sizing we need to create a number different layout styles for your images and content.

Go to http://www.pixlr.com/editor/ and launch the application.

The Pixlr interface is very similar to Photoshop in look and feel and features a menu bar along the top, a tool bar on the left as well as a Navigation and Layers palette on the right. Pixlr also features a really handy history tool usually located the bottom right. This allows you to cycle through every change you made to the document – just like Photoshop – to undo any errors. First up we want to open our image. Pixlr has a launch menu that allows you locate the image you need to edit. Alternatively you can click file and open to find your image.
I have chosen a fairly large stock photograph of some mountains.

Creating a wide banner image

I am going to resize our image to the full width of the content area. From the top menu bar in pixlr click image and from the dropdown choose image size… a popup should appear – type in 500 in the width box ensuring the “constrain proportions box is ticked”. This will stop the picture getting squashed or distorted when we resize.

The height box should automatically adjust to right proportions. Hit “ok” to commit the changes.

Now we have an image that is set to the correct width, we will need to use the crop tool select a narrow area.
From the left hand tool palette select the crop tool (three options down from the left).

Click and drag across the image then release the mouse button and you should see a crop selection box appear.

At the corners of this box there are handles that allow you to alter the selection into a position you are happy with. I have made sure that my selection is the full width of the image and that it is sitting over portion of the image that I want to work with. Once you are happy with your selection press return to commit the changes and your cropped image should appear.

If you are not happy with your selection you can use the history palette (on the right hand side) to go a step back and try again.

In this case I am reasonably happy with the selection but I think it is has just a little bit too much height so I will use another technique to crop some more height off the image.
The information in the navigator palette on the right hand side will give details your crop box height and width while you are using it, which allows you to be pretty accurate with your cropping. However I have a specific height in mind and I can specify this using the image menu and selecting canvas size…

A dialogue box appears which allows you specify the height and width of the canvas (the working area of the document). At the moment the height is 108px and id like to crop this down to 100px. So we type 100 in the height box and leave the width at 500px.

Simple right? But wait, there’s more….
Below the height and width boxes there is a section labelled anchor. This tool uses 9 boxes, arranged in a 3×3 grid, to specify where in the document any cropping will occur. For instance click on the top left box and cropping will occur at the bottom and right hand side of you document.

I’m going to select the bottom center box, which will crop from the top and (had I specified a width other than 500px) from both the left and right hand sides – preserving the bottom portion of the image. Click ok on the dialogue box to commit the changes.

So there we have some very basic cropping techniques. With these image editors it will often be the case that there is more than one way to achieve a particular outcome and it comes down to practise and personal preference as to which will work best for any individual.

Saving a document

We now need to save our document and make it ready for the web.
Click File then Save… to bring up the save dialogue box. You will be asked to choose a file format either .jpg .png .bmp or .pxd. Below is a very brief explanation of the formats available. Click the links to find out more.

• JPG – the commonest format for web based imagery and the one we will be using. Uses a lossy (some of the original image information is lost) compression format to reduce the size of images. More information about jpg here.
• PNG – Best image quality and ability to use transparency make this format versatile allowing very creative results to be produced. Not so good for general photography as file sizes tend to be larger. More information about png here.
• BMP -Lossless images and some transparency support – however, file sizes tend to be way too large for web applications and I would advise against using them. More information about bmp here.
• PXD – This is Pixlr’s very own file format allowing you to save layered files for future editing. Great stuff – give this a try when you have time.

As I said, we will be saving in JPG format so making sure that JPG is selected from the dropdown list, we can take a look at giving the file a unique name (be sure not to overwrite the original file).
Next we want to take a look at the quality slider, which is set at a default of 80.

This slider lets you set a number between 1 – 100 and determines size of the file, which will be generated. The lower the number you choose the smaller the file size, but there is a trade off to be made here as the smaller file sizes also result in a poorer quality final image. The reason for this is your choice of number sets the level of compression or shrinkage (to use the scientific term ). When a file is compressed using the JPG format some of the data is removed in order to shrink the file size.

I would usually try to set a level of 80 – 90, which will give a relatively clear result and decent file size. Every image will have a different optimum compression and it may be worth trying to save in a few different compression levels to see the difference for your self. Once you have set your compression level hit ok to activate your own computers save dialogue and save the file as you would any other. Your file is now ready for upload to your site.

So why am I banging on and on about file sizes?

Image files tend to form quite a large part of page loading time for a web page and the smaller we can get our files the quicker the page will load. If you have lots of images on your page it takes longer to load (think – one of those viral emails we get every so often which contain a hundred images of ‘animals that look like their owners’ or ‘preposterously overloaded vehicles’).

You can repeat the steps used here to create web ready images of differing sizes to compliment your text content. I my dummy blog i have used some other photos and cropped them in various ways to show what can be achieved.

The importance of consistency

I really cannot stress this enough – CONSISTENCY IS THE WAY FORWARD!!!! Maintaining a consistent look and feel to your site is really important for ensuring a professional appearance and enjoyable user experience.

With our imagery we can keep it consistent by choosing specific heights and widths for imagery and sticking resolutely to those sizes.

We can also achieve consistency by through well thought out combinations of typography and imagery.

Its all too easy to go wild with experimentation when given control of a website. The basic styles that have been created for your site should give plenty of scope for adding you content. The temptation is often there to start adding bright colours and using a number of different font styles/sizes/weights to try and draw attention. This can often lead to some really unprofessional looking pages.

The tutorial above only covers the very basics of image manipulation and you may have noticed in the dummy blog that there were a couple of images which had some simple but very effective effects applied. In my next post i will introduce the concept of layers and show how powerful effects can be achieved with relative ease.

If you have managed to read this far without keeling over from exhaustion – I thank you for your patience and resilience.