Electronic Publishing

Traditionally, publishing has been on paper. Increasingly, however, publishing is being done electronically. Some new rules and guidelines are needed for this new publishing medium.

See also the page on VBOS Publishing Conventions

Also see Australia Post's guidelines for addressing envelopes

Conventions - what are they?

Conventions are the "normal" or standard way of doing things, like taking off your hat when you are inside. It's what people in a certain culture tend to do. It especially applies to publishing.

There are some different types of conventions...

Mandatory conventions - a format prescribed by law or rules, such as putting "Tax Invoice" and an ABN on an invoice; driving on the left hand side of the road in Australia. You get in trouble if you don't follow them.

Preferred conventions - not a law or rule, but STRONGLY urged, e.g. putting the postcode on an addressed envelope. I suppose putting dollar signs BEFORE Australian money figures would fit here too (e.g. not 100$). As would starting sentences with a capital letter. It's the conventions that most people consider to be normal, natural and expected. People will think you're ignorant if you don't follow them.

Optional conventions - where the user has a choice, but common opinion prefers a specific format e.g. no underlined text on a webpage unless the text is a link; using sans serif for headings and serif font for body text; using thumbnailed images on a web page; using a larger font size for headings. People may go "tsk tsk" if you don't follow them.

Legionnaires conventions - where you wear a funny hat, go to a hotel, contract a fatal disease and die.*

* This may not be totally serious.

What main sorts of electronic publishing are there?

• Desktop publishing (e.g. MS Publisher, Adobe Pagemaker)
• Web pages
• Slideshow presentations (e.g. MS Powerpoint)
• Online help files (what you see when you press F1)
• Email - visit emailreplies.com for a good lesson in the importance of correct email etiquette.

Whitespace

Too many students try to pack as much as possible onto a page. While the paper saved may make the environmentalists happy, you will make your readers unhappy. Unhappy readers are reluctant readers. Reluctant readers will stop reading. If they stop reading, no matter how brilliant your publication was, you have failed because you did not communicate with your audience. Rarely you will be blessed with an audience who are forced to read your publication. More often, you are hoping to entice voluntary readers to pay attention. If people find your page jam-packed with text with no visual breaks or attractiveness they will simply leave.

Look at high quality magazines. You may notice that some have half the page empty (or containing a simple graphic or heading). All the text is in a narrow column in the right half of the page. You might consider it a waste of paper but it is attractive, easy to read and stylish.

The text you are reading is deliberately fixed so it takes no more than 75% of the available window width. The generous white space on the left and right provide a bit of visual relief for the eyes. It also narrows the column to improve readability. See the discussion of Columns below.

Visual space between paragraphs helps the reader progress from idea to idea. It helps divide up the intellectual content of your publication (assuming there is some).

It gives the reader a moment to rest. Your readers will thank you. Well, maybe not. Often with good design you never notice when it's done well but you certainly get irritated when it's done badly.

Moral: Do not cram as much text as possible into a given space. Provide generous "text-free" zones.

Graphics

I can think of three main uses of graphics in publications:

1. Decorative
2. Iconic (symbolic)
3. Informative

Let's look at them.

1. Decorative graphics

They are put into documents simply because they look attractive. Of course what is attractive to you as the author is not necessarily attractive to every reader. Be careful with pictures. If in doubt, leave it out. Another issue is that you don't want the document to be bigger than it has to be for no good reason (see Document Size below).

Of course web pages and books often use decorative dividers to break up different topics. There are hundreds to choose from. It's best to use one type consistently - it looks less messy and it keeps the document smaller.

2. Iconic (symbolic) graphics

Look at any good textbook on, say, computers. You will often see small graphics that mean something.

Take a wild guess what these might mean if you saw them:

A universal sign of danger and hurt.

Perhaps "This paragraph will make you happy"

A common symbol for "A Tip" or "A Good Idea"

Perhaps, "Now you need to type something in"

Stop. Pay attention.

You will be sad if you do something.

Ummm... yes. Well. What does it mean?

The consistent use of meaningful icons draws the reader's attention to key types of information. It draws attention to important sections. It helps people who are skim-reading to locate, for example, the tips you have provided.

You must be consistent. Plan your icons before you start and keep using them to mean the same thing. If you start on page 1 with this

meaning "Stop" but find a better icon two days later and start using this

simply because you got bored with the original icon, all you will do will be to confuse your reader.

IMPORTANT TIP: Do not try to show off! Yes, you may have 10,000 icons but you don't have to use them all so people think you're marvellous. The same applies later to fonts.

I also said the icons have to be meaningful. The red headed girl above is a meaningless icon. What exactly does it mean? "Red headed readers beware"? "Girls pay attention"? Or does it just mean "I found this picture and I think she's cute"? If you are not sure if your icons do make clear sense, it may be wise to explain them at the start of the publication.

3. Informative graphics

These are pictures that actually convey information. For example, 10,000 words describing the Mona Lisa would not be as useful as a picture of it. You could describe a pretzel until the cows not only come home but learn to play Scrabble as well. A picture of a pretzel would be far more informative and would mean far less work for you.

Fonts - typeface - size - style

First, let me clear up a long-running area of argument and confusion. In the world of print publishing the word "font" has a very precise meaning (e.g. a combination of a certain typeface (e.g. Arial), size (e.g. 12 point) and style (e.g. bold/italic).

In popular computer publishing, however, the word "font" has come to mean what publishers call "typeface". Here, I'll use "font" in the popular computer sense.

There is a commonly accepted guideline in publishing: use no more than three fonts (typefaces) on any page. Any more than that makes it start looking like a ransom letter. Believe me, it looks messy and ugly. It does not often look "cool" or "creative". Neither do people say, "God he's amazing because of all the fonts he has." They're more likely to say, "Can't he make a decision about fonts and stick to it?"

Again: less is more.

You may use one font for headings, another for paragraph text. Occasionally you may need another for another purpose. But be sure you do use them for a purpose. Don't change fonts randomly just because you're getting bored.

Serif versus sans serif.

A serif is the little line that marks the end of the letters on some fonts. Below you can see some letters in Times New Roman.

Fonts that do not have serifs are called sans serif fonts. ('Sans' is French for "without"). Arial is a sans serif font. Note: "Arial" is not pronounced "aerial" as in a radio aerial. It's "ARRial". Bet you wanted to know that.)

Many people believe serif fonts are more readable because the serifs make each letter look more distinctive. These people believe serif fonts should be used for body text (i.e. the bulk of the text on your page). They say sans serif fonts should be used in moderation for headings or other short pieces of distinctive text.

The paragraph above is in Arial. Here's the same paragraph in Times New Roman as a contrast. You decide which is better. Often the way a font looks will decide on the reader's "Default font" setting in their browser.

Many people believe serif fonts are more readable because the serifs make each letter look more distinctive. These people believe serif fonts should be used for body text (i.e. the bulk of the text on your page). They say sans serif fonts should be used in moderation for headings or other short pieces of distinctive text.

Other people disagree with them. One thing is sure though: here is a word in a sans serif font: what is it?

Yep. It's the word "ILL". Without serifs, the capital letter I, the small L and the number 1 can look identical.

Here's the same thing in TNR (Times New Roman):

You make up your own mind which you'll use for body text.

Font size

Common sense should tell you that if you type in a really small font it can get quite hard to read.

(In case you couldn't read that it said "Common sense should tell you that if you type in a really small font it can get quite hard to read."). If your font size is too large it can also be hard. You need the Goldilocks font size (just right). It's much easier to judge font size when a document is printed, but web pages can be tricky beasts. The size of text on your screen may be hugely different to the size of the same text on someone else's screen. e.g. if you fill a 1024 x 768 resolution screen like this

What is resolution? Check this page

the poor user of a 640 x 480 screen would only see the top left corner of your masterpiece.

What looks the right font size on the high-res screen looks way too big on the low-res screen. It's not an easy problem to deal with as a webpage designer. Just be aware it exists.

Font Style

Again, consistency and self-control are the most important issues. If you use italics to emphasise important text, don't change to using bold for emphasis for no logical reason.

Oh - and on web pages you should not use underline because everyone will think it's a hyperlink and try to click it.

One handy style you may find a use for is strikethrough. It is especially used in legal documents to show text that has been deleted. It can be quite neat for highlighting text deletions and lining budgie cages.

One last thing: never use the BLINK tag in web pages. Really really nasty!

Web page fonts

Be aware that fonts you use on your web page may not be on the computer used by your reader. If they don't have the same font you use, they will see a substituted font and your artistic work will be wasted. Assume everyone has the basic Windows True Type fonts, but if you want to use

an odd font like Chicken Scratch

you may have to create the text as a graphic.

Do the words "an odd font like Chicken Scratch" above look odd to you? If not, you don't have the Chicken Scratch font on your system and you are missing out on my artistic vision - which looks like this:

You can see it now because I used a paint program to create the text as a GIF file. This is commonly used in headings so the reader can see the true magnificent beauty of the author's dream regardless of the fonts installed on the system.

If you liked the Chicken Scratch font you can download it by clicking here. (Zipped, 56K)

Colour

One of the big benefits of electronic publishing is the ease and cheapness of using colour. Colour printing is very expensive, but richly coloured electronic publishing is free.

That can be unfortunate, the way some people use it.

Colours, like fonts, should be carefully thought out and used with restraint. Use them for a reason.

They can be informative

Certain colour combinations either are hard to read (the contrast between them is poor) or the combination just looks plain ugly (with a capital "UG"). What you think is cool may make make others vomit. Be careful. Be conservative. Don't use too many colours on one page.

Tip: black on yellow gives the greatest contrast of all (which is why road signs use it). Next best is black on white.

Sorry about this: another side-issue inspired by the previous side-issue:

Local conventions and international audiences.

When you are writing for a general audience, it's easy to forget that some of the audience may be in different cultures and countries. It is easy to slip into local conventions and forget that you may be bewildering other people. Simple things like date formats can cause massive confusion. In Australia, the fourth of March would be written 4/3/01. To an American, it would be read as the third of April. To a Japanese it could be the first of March, 2004. Play it safe and say "4 March 2001". Reference to local icons (or is that "ikons"?) such as Phar Lap or "He foolishly overtook the car using the left lane" can cause considerable head-scratching amongst foreign readers. Explain things that may not be understood. Phar Lap is a famous race horse. In Australia, overtaking on the left is dangerous. John Howard (Australian prime minister)...

That sort of thing. Remind me to update this page after the next election!

Just be aware that what you consider normal could be interpreted differently by most of your potential audience. Cultural sensitivity is important. Consider that references to gods, politics and sex may cause anger or distress (if not violent relataliation!) from strangers. Even the names you choose for some countries can cause upset in some ethnic groups. International publishers such as you need to be multicultural diplomats. Be careful out there!

Columns

Have you ever wondered why all newspapers, newsletters and magazines are printed in columns? Simply because it's easier to read narrow lines than wide lines. Imagine if a newspaper printed text right across the page. As you were reading, the slightest jump of the eye would make you lose what line you were on and you'd end up running your finger along the line so you wouldn't lose your place.

Use columns. On web pages, create a narrow table and put your text in that. Remember: the text might not look too wide on a 14" monitor but on a 19" monitor it goes for miles!

Indexing

Any document over a page or so really needs some way of telling the reader where to find things. An index is good for large documents. A table of contents serves well for shorter documents. At a minimum, you should use bold headings that catch the eye of a reader who is searching for a topic. Try using styles, available in Word, HTML editors etc. You specify a style for a heading (e.g. Heading 1, Heading 2, Body) and the software does the formatting for you. This had 3main benefits:

• It guarantees consistency of headings
• If you later re-define a style all the headings automatically change appropriately
• In Word you can generate a table of contents using styles to determine what are section headings: you don't have to search the document and copy and paste headings into a table of contents. It even knows what are main headings, subheadings etc because of the styles used. Bliss!

Navigation

This applies particularly to web pages. Any site of more than one page needs some way to get from page to page easily. Lost visitors will soon get sick of it and leave.

Each site (or subsection of a site) needs a starting page (index page). It is best to call it index.htm (or index.html). All subpages should have links back to the index page.

Related pages should have links to each other, e.g.

Page 1 ... Page 2 ... Page 3 ... Page 4 (these are dummy links)

It is best not to have a link to the current page - it tends to confuse people. For example, if the user is reading page 3 on the dummy links above, the links may look like this:

Page 1 ... Page 2 ... Page 3 ... Page 4 (these are dummy links)

It is easy to create a line with all the links active, copy it and paste it to every related page. Then, on each page, disable the link to that page (and maybe make it bold to show the reader where they are.)

Make sure your links work. They must be tested thoroughly. Especially when creating pages when offline. Often you link to a local file on your hard disk and when the page is uploaded the link still points to drive C. Check carefully for such broken links. (Tip: using a text editor to search a HTML page for "file://" reveals such errors.)

Do not use absolute web addresses unless they are outside your site. Always use relative URLS. Absolute URLs give the complete web address such as http://www.mckinnonsc.vic.edu.au/learnareas/infotech/notes/elecpub.htm.

Relative URLs describe a file's location relative to the current document. Examples:

"linked.htm" means the file "linked.htm" is in the same folder as the current document.
"fred/linked.htm" means there is a subfolder called fred and the file is in there.
"../linked.htm" means it is in the parent directory of the current folder.
"../fun/linked.htm" means it is one directory level up in a folder called "fun"
"/linked.htm" means it is in the root directory of the site.
"/fred/linked.htm" means in the root of the site there is a folder called fred and the file's in there.

Do not use myterious buttons with links attached - even if the image is a "rollover" and changes when the mouse passes over it. Links should be obvious and easy to interpret. Links like the one below are a complete pain.

They may look nice, but there's no way to tell what they do without pointing to them. If your readers want a mystery tour, they'd take a bus. Do not use unlabelled mystery buttons. People will give up and go away.

BTW ("By the Way") - the images above are from the useful website webpagesthatsuck.com. Go to badnavigation.html to see him discuss the "Mystery Meat Navigation" problem mentioned above.

Frames

Frames, when used well, help users navigate a site. Typically, a site uses 2 frames: a smaller "navigation" frame containing links to major parts of the site; and a "main frame" that actually displays the pages. Because the navigation frame never moves or gets lost, the user can always choose where they want to go.

Think very hard before using more than 2 frames. I have yet to see any case for using more than 3: such sites become nightmarish to maintain and nauseating to look at.

Creating a site with frames requires higher webpage skills than normal sites. You will probably want a more powerful tool to help you create them (e.g. Dreamweaver). Creating frames by writing HTML by hand is a masochistic hobby.

Language

This has many interpretations:

What language?

What language should you be writing in? Web pages, especially, are international. Many big sites offer multi-language translations of their content. That may be beyond your means, but at least consider than many visitors may not speak English as even a second language. Don't use big words where little ones will do. Keep it simple - respect your readers.

Tip: if you desperately need to translate a foreign page, visit babelfish.altavista.com

Good language?

As always when you have a general audience, be aware that not everyone may feel the same way you do about words. Some words and phrases may cause deep hurt or offence to some people.

Easy language?

Even native speakers of English sometimes have trouble reading their own language. If you really want them to read your pages, make it as easy to read as you can. Write simply. Keep it short. Keep it clear. Don't obfuscate with circumlocution and always abjure esoteric verbiage.

Document size

Modern documents are getting bigger and bigger, especially those with graphics in them. This is not such an issue when the file is to be accessed from a local hard disk, or it is to be printed. It is definitely an issue when the file must be transmitted over the internet. Pages must load quickly: people will rarely wait for more than 10 seconds for something to appear. Wholesale use of graphics can make pages incredibly slow to load: and people simply will not wait if they don't have to read it.

Tips and warnings

• If you must use animated GIFs, use them very sparingly and for a good reason. They are very big (and if the truth be told, many of them are pretty ugly or distracting)

• A web page plus its associated support files (pictures etc) should not exceed about 100K. If it's too big, consider breaking the page into subpages.
• When using photos, put a thumbnail (small version of the photo) linked to the full-size picture. That way the user can decide if he/she wants to see (and download) the thing or not. Give the reader an idea of how big the file is. The thumbnail below is 5K. The full picture is 155K. Put your mouse over the thumbnail to see how alt text can be used informatively. Note how I have made sure it has a 1 pixel border so readers know the picture is hyperlinked. If using odd file formats such as MP3, Quicktime, Flash, it is worth noting that so the use can avoid clicking on links requiring plugins they don't have.

• Why use Alt text?
  • blind users can have the text read aloud by a voice synthesizer
  • the browser doesn't support images (e.g. some text-only computer terminals)
  • the user has turned off image loading on purpose in order to browse on low-bandwidth (e.g. mobile phone, dialup modem user)
  • the Googlebot uses the alt text to identify the contents of images for Google images

Poor web design can lead to serious problems as shown above. Click the thumbnail to see the full image (155K)

• But! Don't make the mistake of inserting a picture and resizing it onscreen in the webpage editor so it looks smaller. Remember that reducing the display size of a picture in a web page editor does not reduce its file size. It's still a big picture: it just looks smaller on the screen. To truly reduce a picture's size, you have to resize it and resave it using a paint program (e.g. Paintshop Pro, Microsoft Image Composer, Photoshop).
• Don't use autoloading sound effects or music, especially on serious pages. Imagine poor people in offices who are having a quick browse and suddenly their speakers blare your music forth. Apart from that, many webpages use sickening music and it all takes time to download.
• Plain old HTML is far smaller Microsoft's "Save as HTML" feature in its products whic creates webpages that are bloated and use many MS-specific tags.

When files are just too big - especially Powerpoint Presentations

1. Use PKZIP or Win RAR to compress them (does not work well on some files containing JPG, MP3 etc because they're already compressed.)

2. Use a file splitting utility to break a big file into disk-sized chunks and reassemble them on the destination computer.

3. Remove unnecessary pictures (especially Wordart, which can create massive files) and sound or music. A small MP3 can be inflated to a massive size when inserted into a slideshow.

3b.  Instead of inserting pictures directly into Word, link to the pictures instead.  Go to Insert > Picture > From File and select th

4. Carefully examine sites created by programs like Publisher. Repeated graphics such as bullets are often saved multiple times where only one is required. Publisher also often converts text to a graphic which is far bigger than the text would have been. In short never create a web page with Publisher. The results are truly horrendous, hideous and horrible. Publisher web pages are easy to produce but they are nearly impossible to modify and maintain. They are also criminally inefficient in terms of file size and complexity.

5. Use a graphics optimisation utility to reduce a graphic to its minimal size. By reducing a GIF from 256 colours to 236, for example, can reduce its size markedly. If a JPG is not crucial, bump up its compression level until noticeable degradation is apparent. Most JPGs can easily cope with 10% or 20% compression. Most paint programs let you optimise images by reducing size whilst keeping quality.

See a demonstration of image compression and choice of picture formats.

6. Never save photos as GIF*. JPG will be about 10 times smaller and the quality will (usually) be better. Similarly, line art (e.g. logos) are better saved as GIF. PNG is a royalty-free alternative to GIF and is well worth trying. All browsers support PNG graphics.

7. Use a USB Flash RAM drive - with large capacities it's like carrying about a thousand floppy disks on your keyring.

*"Never"? Well, one time in a thousand this may be wrong but most of the time the rule holds true.