1.3 What You Need to Know About Editing Web-Based Content
This manual is designed to help you manage and edit the content of your website. In most cases this will involve editing text, adding and moving images around, and inserting links. Before you begin editing the individual pages on your site, it is a good idea to become familiar with how an online editor differs from the PC based applications you are accustomed to. Here are some important things to be aware of:
- A WYSIWYG (what you see is what you get) editor makes your content look much like a page in a word processing program (like MSWord or WordPerfect), but behind the scenes it behaves very differently.
- Anytime you use a WYSIWYG editor to enter information that will appear on the internet (web sites, online forums, etc.), your text and images are converted into HTML code (that you can't see in WYSIWYG mode). It is this invisible HTML code (or tags) that control how your text and images look and behave on screen.
- If too many formatting elements are added to a page, browsers like Internet Explorer, Mozilla FireFox, etc. can become confused and "misread" the HTML code...with some strange and frustrating results.
- A WYSIWYG editor (and the HTML code it creates) does not behave the way a program installed on your computer behaves, because online information must be readable and viewable by millions of people, using millions of different devices, running millions of different programs, all around the globe.
- This means there are limitations to what can be done with online WYSIWYG editing.
- If you know how to work within those limitations, you will edit your website more easily and with fewer headaches.
Here are a few best practices that will help you avoid creating "messy HTML" that may be misread, ruining the look of your website pages.
- Type your content into the text editing area whenever possible. If you have a lot of information that exists in another document or online and you copy and attempt to paste it directly, the editor will automatically open the "Paste as Plain Text" dialogue box where you can paste the information and then insert it into your page. This extra step in the copy/paste process prevents you from pasting outside content directly onto your page, which allows the editor to remove all formatting from the text, minimizing unnecessary HTML code that can corrupt your page.
- Think about how you want to format your page in advance so you only have to add formatting once. For example, each time you bold and unbold a word, more HTML tags are added to your document. If you plan ahead, you can avoid adding extra code.
- Use fewer fonts and font sizes. Again, the more elements you add, the more cluttered the code becomes. Note: sticking with no more than 2-3 fonts (or one font with 2-3 sizes) is good general design practice.
- Ideally, use the pre-selected formatting provided in the Paragraph drop down list in the editor to format headings and subheadings. These have been created using web-compatible fonts and have been chosen to maximize readability and to be consistent with the design of your site.
You will find detailed instructions for using the Bistro WYSIWYG editor in sections 3.9.1. Using the WYSIWYG editing toolbar in Standard Mode and 3.9.2. Using the WYSIWYG Editing Toolbar in Advanced Mode