Editing Best Practices
DO NOT USE the font face, font size, and font color selectors!
It can be tempting for some editors to make heavy use of the font size, font face, and font color selectors, but this is strongly discouraged for the following reasons:
- Your graphic design template specifies the fonts, sizes, and colors that are optimal for your web site. If you override these settings, you risk making your pages look sloppy or irregular.
- Not everyone is using your computer! Most of your viewers
will have a different operating system,
browser version, screen, fonts, or viewing preferences than you
do.Â
Because of this diversity in viewers, you cannot control exactly how
the content appears for everyone. Don't fight it—this is how the
Web
is supposed to work,
and why it is such a flexible medium. Instead, use a neutral,
flexible style, and let the stylesheets choose the best presentation
details for the individual viewer.
- Different
viewing programs (eg. browsers, mobiles, readers for the visually
impaired, etc.) have very different requirements on how content should
be presented. If you force your styles into one single
presentation, you may damage your presentation in other modes (for
example, by making it difficult for people with visual impairment from
seeing your content in a style that is legible to them). Best
practice is to always use a neutral style so that different viewers
have maximum flexibility in how to restyle in a way that is appropriate
for that mode.
- The font attributes that you see in the HTML editor are not necessarily what you will see when the content is inserted back into the template. Again, that is because your templates define your font attributes, which may contradict the ones you have specified. It will take an HTML/CSS expert to predict which of the contradictory settings will take precedence.
- Think of your job as a newspaper editor. As an editor, your task is to focus on editorial content, not presentation. Presentation is the job of your graphic designers. They may have given a lot of thought to the issues noted above, and you risk undoing their hard work if you override their presentation instructions.
If you aren't supposed to set font attributes, then why does ExSite give you the font attribute selectors in the first place?!? The answer is simple: in some special cases you may need to override the default styles. Examples of special cases might include:
- quotations
- poetry or verse
- code or technical data
- etc.
In these cases you usually have an excerpt of special text that is different in character from the surrounding text. It will help to make this text distinct from the rest of the text on the page. Your pages will look best if you restrict your use of the font attributes to special cases such as these.
Beware of Pasting Content into the Editor!
Although you can freely paste things into the HTML editor, this practice can result in problems.
Text pasted from advanced text processing programs (such as Word and other word processing applications) will have lots of style data pasted along with the readable text. That is because Word doesn't know whether you want to paste just the basic content, or the full document (including style information), so it opts to do the latter. The problem is, the style information that it pastes will likely conflict with your template and stylesheet (see previous best practice), and the content will look out of place, or just "different" than the rest of your site.
If you do need to paste directly from a word processing program, you can try to "clean up" the pasted text afterwards. Use the clean-up tool, which looks like this:
This will try to remove unnecessary style data from the content. It's not perfect, however, so some manual editing may still be required. However, a knowledge of HTML and some plain-text editing of the formatting codes may be necessary in some difficult cases.
For problematic pieces of text, one trick that comes in handy is to paste the text into a plain-text editor (eg. Windows Notepad) first. Then copy the text from there and paste it into the ExSite editor. This will import your text with absolutely zero formatting, so you will have to mark up your headings and so on. In some cases, this is easier than trying to remove style formatting that has been inserted by word processors.
Another problem is that images pasted from other sources are not really being pasted into your site. You are only pasting a link to the image, and there is no guarantee that other people can reach this link (for example, if the link points to something on your PC) or that the image will remain at that location (ie., the image may move or be deleted without your knowledge).
WYSIWYG mode is not really WYSIWYG!
WYSIWYG mode is more accurately described as "rich-text" mode. It displays your formatting in a user-friendly way to make it easy to work with. For example headings appear as headings, tables are lined up into rows and columns, and so on.
However, it does not necessarily show you what your content will look like when it is inserted back into your website template. Your template may define special font attributes, colors, spacing, etc. that will alter how the content is presented. So remember that what you see in the editor is a rough draft of the presentation; the final presentation will be shown to you when the content is inserted back into the template.
This confuses some people--why can't ExSite just show you the content with the proper styles? The answer is because ExSite intentionally separates content and design. This is what allows you to quickly change your template, or quickly move content around to pages or sites with completely different templates. So when you edit the content, the design rules are not included because they are kept elsewhere.
Do not fuss too much with table and text alignments!
HTML is not a precise layout language. It describes where things should go only in a general sense. That is because your readers will use a wide range of viewers and browsers, which may include brand-new computers with large high-res screens, old computers with small, low-res screens, cell phones and mobiles with tiny screens, and special readers for the disabled that may not include screens at all! These different viewing platforms will have vastly different graphic, color, and font capabilities.
In general there is no way to force HTML to be laid out in an exact way on all of these. This is an intentional feature of the web, so there is no point in fighting it. Spend enough time to get your layout approximately correct, but do not worry too much about it. At a certain point you will find that you are fine-tuning how the content will lay out on your screen only but that things will lay out differently on some other person's screen, simply because they have a different window or screen size, a different operating system version, or some other detail that you have no control over. At this point, you are wasting your time trying to control the details.
If you absolutely need the text to appear in an exact way, then the usual work-around is to replace the text with an image of the text. This method comes with its own problems -- it is slower, and images are hard for search engines and blind readers to view. This level of "editing" may require the intervention of a graphic designer to ensure that the images are consistent with your site's look and feel, and that the image file type and size is appropriate for the web.
Remember the K.I.S.S. principle!
K.I.S.S. is short for "Keep it simple, silly". The simpler your content is, the easier it is to maintain. Here are some examples of not-so-simple HTML "tricks" that can come back to haunt you later:
- using tables to lay out your content in multiple cells or columns.
- using DIVs and SPANs to highlight certain blocks of text. The visual appearance of these elements depends on the stylesheet, and they may not appear distinct at all in the HTML editor. This can make it difficult to tell if your cursor is inside the given element or not. (However, ExSite does try to mark boundaries with a faint line to help you out.)
- using CSS classes to distinguish certain elements from each other. As with the previous point, these only become distinct when displayed under specific stylesheets. In other cases, the elements are not distinct at all, which can make them difficult to edit.
- messing with fonts, sizes, and font styling to give the appearance of a heading, when you could just define the text as a heading.