Take the pain out of WYSIWYG
(originally posted at idealware.org/blog)
Many website content management systems use something called WYSIWYG (“What you see is what you get”) editors to make entering and formatting content easier for non technical administrators. While these embedded editors can save time and allow organizations to distribute the workload of maintaining the site, there tend to be some points of pain involved for people that expect them to work just like Microsoft Word, which they are built to resemble.
But under the hood they are very different and are creating HTML code for the web. And to make things even more confusing sometimes WYSIWYG editing screens are different than what you actually get when you save your page. Finding out how to get what you really want just takes practice with working your own system, so I have included some handy formatting to explore below.
While each set up may be unique, all WYSIWYG-using administrators can take advantage of a couple basic tips and by learning what the different buttons do on their system.
Do Not paste directly from Microsoft Word
This is the single biggest piece of advice for avoiding pain and misery when dealing with a WYSIWYG editor in any system. Even though some will have “Paste from Word” buttons its still way safer to write in the WYSIWYG itself or paste plain text and format with the options available. Headings, text color, paragraphs, bulleted lists and spacing can all become a real nightmare to troubleshoot once Word styling sneaks into the WYSIWYG and if you are fighting with the same formatting over and over its probably best to start fresh rather than try to fix the content.
Why? Microsoft programs use their own logic and styles and they use a LOT of them. Sometimes the behind the scenes code conflicts with the styles set up in your system, sometime they override them and in any case it gets unpredictable and you end up with lots of unnecessary code that slows down your page loading time.
There are a couple ways to get around this unpleasant fact of life.
- The tried and true: copy from Word, pasting to Notepad or other plain text only editor, copying from Notepad and pasting to the CMS.
- Save a plain text version: Save the document as plaint text in Word and select “Allow Character Substitution” to remove curly quotes and other symbols that may not be translated into HTML correctly when pasted. You will need to reopen this which is safer again with Notepad.
- Just write in the WYSIWYG: If you can it might actually end up saving you some time. You can always copy and paste it into a Word doc later.
Make a Practice page and a Style Guide to get the basics down.
One of the best time investments for web editors is getting to know their tools. Training with real content can be incredibly valuable since you will find out what your real world needs are likely to be.
In addition though, I like to have a practice page and/or style guide which is not public so that administrators can get familiar with the editor and know what things will look like so they can use them easily. Often this page contains regularly needed formatting pieces that can be copied and pasted into a new page as a template. I have a template I use regularly that includes most common HTML styles that you can copy and paste into a private page on your site to get started.
Here are a few things I encourage new website administrators to do to make their life easier in the long run. Play around and add the types of content you use the most. Watch out though since once you start finding out how to do new things this can be a lot of fun and get addictive.
Learn what the Heading and other styles look like and when to use each – You should try to use them consistently across your site. There should be some sort of systematic approach based on hierarchy for the best reader experience.
If your web developer has provided CSS styles to use (available from a drop down in the tool bar) use them. They were designed specifically to match your site’s design.
Learn how your editor handles line breaks and paragraphs – Different systems do different things and you need to know what to expect when you hit the return key. Does it place a double space (paragraph) or single line break ?
If the return key gives a double space or paragraph and you only want one return, try clicking shift return to just move down one line (creating a single line break in many systems).
You can also try placing the cursor on the second line of the space and hitting delete.
Play around with this until you are able to get consistent results and post the information somewhere for others that are new to the system. Develop a convention for spacing between items so its easy to know what to use.
Learn how to work with images – If your WYSIWYG editor has a button to place images, learn how to use it when you don’t need it right away. If you aren’t familiar with HTML it might take a little while to learn how to get the most out of it.
Ideally you should learn how to control placement and alignment (right or left), spacing with text and develop a plan for how to incorporate images into a page in a way that is compatible with your overall site design such as a standard image size.
Of course a basic understanding of how to save high quality web images in appropriate sizes and formats is a good idea too. There are various resources on the web for learning how to do this but I wanted to put out a couple of all to common mistakes that can make placing images in your WYSIWYG editor not work well.
- Make sure you have the right file type – the web can only display jpg, gif or png images and your editor may only accept the first two which are more common.
- Don’t upload a full size digital camera image and shrink it down in the WYSIWYG. Not only will this make your web page take forever to load and will look fuzzy if it works, but trying to add very large images often strains or breaks the system. For this reason most CMS systems usually have restrictions on size – both dimensions (width and height) and file size. Make a note of yours on your practice page if its not readily apparent. Resize your images to the correct final size with graphics software before adding to your page.
Learn how to work with links – Each system has a different way of doing this and it can be different for linking to other pages on the site or to some other web site. Use your practice page to try adding all of the types of links you might need and keep notes there for others if it is not intuitive or takes several steps.
Long story short, you will get the most out of the convenience of a WYSIWYG editor in any system if you take a couple of hours to learn its particular ins and outs. By creating your own workflow and cheat sheet you will avoid a ton of ongoing aggravation. Then, you can use the time and energy recovered to stress out about writing the content itself.