posted on 2:34 AM, July 26, 2007
When entering new content into your web site, certain practices are best followed to ensure you end up with professional-looking and maintainable results.
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:
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:
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:
best practices (5)
content management (12)
data handling (7)
graphic design (21)
html formatting (7)
plug-in modules (28)
visual tutorial (29)
web protocols (9)