|
Tips For WebAuthors
by Graham Pockett
Creating A WebPage
There are many good (and completely free for personal use!) HTML editors available for both Windows 9x/Me/XP and Windows 3.1. They come in basically two types:- WYSIWYG (What You See Is What You Get) which tends to hide the raw HTML coding and is used like a normal word processor, and
- HTML source-code editors which require you to work with HTML tags.
If you do choose a source-code editor, spend a few minutes and look at how different authors have created webpages. In Netscape you can press Ctrl-U to view the raw HTML coding of a page. Microsoft Internet Explorer users go to View/Source. Try a simple page first without too many tables. This page only uses tables to keep the text to the center of the page and there are a couple of small areas where tables are used but generally there is minimal use of tables. Tables can be confusing because you can nest tables one inside another and it isn’t always easy to determine from just looking at the code which code relates to what table.
When creating a webpage I keep saving it and then checking it with my browser. Initially I have to use the “File Open” command to load them, and then use the Refresh/Reload facility to view the latest version. I even bookmark pages on my hard drive which get amended often.
Tips
Here are some dos and don’ts which I consider important so your webpages will not just be viewed by your visitors, but actually read!Page Download Size
Pages which take a long time to load are rarely viewed. There are many ways of reducing the size of graphics so that the final size in kilobytes (kB) is small enough to load quickly. Individual images should be no larger than 20kB (most should be well under 5kB) and a total of all the graphics, and the document itself, should be no more than about 50kB. If you have a number of pages as part of a site then you can re-use the same graphics on different pages (which also gives the pages the same look and feel) and they will load in much less time because they are being pulled from your viewer’s computer’s cache and not from the host server.
Wherever possible, use HTML tables to create hyperlink boxes. Text can be created by the browser much faster than an image with text imbedded into it can be downloaded. For example, look at the two boxes near the bottom of this page. The “Do You Know What Annoys Me..” link uses a HTML bordered-table with a blue background and yellow text with a small (868 byte) graphic, and the “Could This Key...” box also uses a HTML bordered-table with a tiny (1.42kB) animated graphic (a white background for the table – like the blue background on the other example – can be inserted if the link is used on a non-white background). Text in both cases is browser-displayed and is not an image, so would only ‘cost’ a couple of download bytes. A ‘normal’ graphic of the size of these boxes would probably be over 8kB each. Compare the saving – 2.27kB in total compared to about 16kB for two GIF images!
Have a look at the stats for this particular page:
| HTML document: | 22kB | |
| Graphics – 14 images: | 22kB | |
| TOTAL: | 44kB |
Forget what everyone says, size does count!
Making A Page Readable
The first tip is use a spell checker on your page. Believe me, there is no credibility in a page which is full of spelling mistakes! Whatever your message, make sure it is spelt correctly. I always have a dictionary next to me and do not hesitate to pull it out to check a word or two. If I was creating the document in a word processor I would not only use its spell checker (assuming it has one), but I would also carefully read through the document afterwards to pick up all those little grammatical errors which the spell checker could not pick up (their and there etc).
Secondly, make sure that you have not used anything larger than normal text size for the body text of the document (called size ‘3’). Nothing looks worse than a page – usually all centered – in heading 2 (H2) size! The larger sizes (larger than bodytext size 3) are for headings only. I have used H1 for the main heading size, H2 for the second heading size, and bodytext size 3, in bold, for the sub-headings.
Please, do not use CAPITALS to emphasize words! It is VERY hard to read pages full of CAPITALS and that is NOT what you want to do. Instead, use bold or italics to create an occasional emphasis. Like using CAPITALS, avoid text – nothing is harder to read! Color is a great way to add occasional emphasis and there are many colors from which to choose. However, watch your background, light colors on a light background or dark colors on a dark background are almost impossible to read as you can see from this green example.
Do not overuse emphasis! One emphasized word or short (two or three-word) phrase every two or three paragraphs should be your maximum, or it ceases to be effective.
Having sorted out the size of the text, next let’s look at how it displays. If you have a page of solid text you will virtually guarantee no-one will bother to read it. A page must have ‘air’ in it (often called ‘white space’). You do this by breaking up the page into paragraphs so that the page looks airy and easily readable. An old journalist’s trick is to keep the depth of a paragraph smaller than its width, in effect making it ‘under square’. Most of my paragraphs are about half as high as they are wide unless I want to really emphasize a sentence, then I make it into a one sentence paragraph. Not what your English teacher taught you? Sorry about that, this is the real world we’re talking about!
Have you noticed something about the quotes used on this page. If you are using a popular browser (Netscape or IE) you will have noticed that instead of having straight quotes like ' and " it has curly quotes like ‘ and “. Likewise, instead of using either a single hyphen like this - or a double hyphen like this -- as a dash, my dashes are like this – much wider. These I insert into my pages by using the Alt key and the numeric keypad.
Open up a blank document, change the font to Times New Roman, and hold down the Alt key while typing in 0145 on the numeric keypad (it doesn’t work on the number keys at the top of the keyboard). You should have got ‘. A closing single quote like ’ is 0146. Opening and closing double quotes “ and ”are 0147 and 0148. An n-dash (a dash the width of the letter ‘n’) is 0150, a cent ¢ is 0162, a Copyright sign © is 0169, a Registered sign ® is 0174 and a Trademark sign ™ is 0153. For US keyboards without a currency pound sign, a pound sterling £ is 0163 (I have these codes printed out and stuck to my computer for easy reference).
While these can be inserted into HTML documents as they are, it is better to use the HTML form. To do that you place an & sign and a hash sign # before these numbers and follow them with a semi-colon ; so that for a single opening quote you use & # 0145 ; without the space between them (if I did this it would just print the actual symbol and not the code). Arachnophilia, the freeware editor I use, converts all the ASCII codes into their HTML equivalents through the Convert Extended to HTML Chars menu which makes it easier to create pages with these codes.
If pages are too long they are unlikely to be read. The optimum size of a page is about 600 words. Many more than that and you will lose your reader’s interest, less and there won’t be much substance in your page. Visitors are looking for substance delivered in a packet which can be readily digested. About 600 words seems to fill that need (and, yes, this page is 2,600 words long!).
If English is not your first language then find someone who does (but not me!) to proof read your page and make suggestions for improving the grammar, etc. The lingua franca of the Internet is US English (not UK English!) and webauthors, looking to reach the widest audience, should remember this.
At the same time, please be careful in the way you display dates. What is 1/12/04? Is it 1st December 2004 or January 12th, 2004? Both are equally correct in different parts of the world. Better to use the full date (ie December 1st, 2004) so that no-one is confused. If you are stating that something is worth a certain number of dollars, what type of dollars are they? US dollars, Australian dollars, New Zealand dollars, Hong Kong dollars, Singapore dollars, what? Be specific.
Likewise, please look carefully at the information on your pages. If you state that you are from Richmond without specifying a state and country, no-one would know where you are. The planet is covered with cities called Richmond (Australia alone has three!). Be specific. Tell them clearly what state and country you come from. You might also remember that telephone numbers are not normally international. To call Melbourne, Australia, from where I live I dial 03 followed by the local number. If I was outside of Australia I would have to dial the local International section of the exchange, followed by 61 3 and then the local number. This is usually written as +61 3 etc, the plus sign indicating it is an International number. Yet again, think of your visitors! Not everyone knows where MO or Qld is, and WA can equally mean Washington, USA or Western Australia.
Width of Screens
Remember that people use different monitor resolutions – both color density and size. While 800 x 600 pixels using 64k colors is very much the accepted norm, many people are still using 640 x 480 screens with 256 colors. Cater for them!
I have limited my text so that it is only 600 pixels wide by using a table which is centered. I do this so that I can control exactly how my page looks at all resolutions from 640 width to 1024. This gives me the control over how a page looks in the most popular browsers.
I dislike sites which tell their visitors that they must have 800 x 600 screen resolution activated to view the site, just as I dislike sites which use browser-specific commands (ActiveX, etc). As a webauthor it is my job to offer my pages to the maximum number of people possible using the simplest technology I can get away with (so more can visit). It is not my job to limit site access to, say, only Internet Explorer users. However, you may wish to have a section of the site which has been enhanced by using, say, ActiveX, but provide an alternative version of those pages for people who are using Netscape or other non-Microsoft browsers.
Alternative Pages
If you really must have pages larger than 50kB in total (to utilize those fabulous graphics you took so long to create) then provide an alternative graphic-free or graphic-reduced page for people who have slow connections (everybody!!!) or who don’t have all day to waste while your 300kB image loads (yes, I have seen quite a few pages with graphics of this size!). Think of your visitor!
This equally applies to use of Java and even, to a lesser degree, JavaScript. Java is exceptionally slow to load and, for that reason alone, I don’t use it on any of my pages (though some of my advertisers might). Again, if it is essential that you have these on your site then provide an alternative for people who don’t want them or whose browsers can’t handle them. I repeat, think of your visitor!
Summary
|
Go to Anointed Christian Links |
|
|
Go to Completely Free Software |
Do You Know What Really Annoys Me About God?
|
Matthew 10:8 NIV
Could this key save your life?
|
