Authoring Webpages/How to write for the web

Introduction

In the previous chapter, you have learned how to actually create a webpage.

To reiterate, you should have learned

that webpages consist of text with markup tags;
that the markup is part of a language called HyperText Mark-up Language (HTML);
that HTML must be valid, for various reasons;
that you can use a text editor to write HTML; and
how to apply some basic HTML elements to a text, such as paragraphs (p), links/anchors (a), important and less important headings (h1, h2), images (img), etc.

In other words, you have learned some of the mechanics of creating a webpage, and if you have followed the exercises, you actually gained some experience in writing webpages.

Now, you will begin to learn how to apply that knowledge in a meaningful way.

As we observed before, there is no right or wrong way to make a webpage. The page may consist of valid or invalid HTML, but whether a page is successful depends solely on the goals you have set yourself and whether they were met. However, we have also noted that there is no way of knowing whether the goals were met for all visitors.

Generally, your goal will be to tell the world a story.

If you manufacture lawnmowers, your goal with a webpage may be:

to entice people to buy your lawnmowers
to teach customers about how to use their lawnmower
to educate people about the dangers involved with lawnmowers
to show stock-holders in your company how business is going
to make it easy for the press to write about your lawnmowers
to impart your love for making lawnmowers onto others
to offer a community of lawnmower minded people the chance to interact with each other
to show suppliers how to reach your factory
to warn customers of shoddy look-a-like products
to accuse competitors
to respond to accusations of competitors
...

This list is endless. Who knows why somebody makes a webpage? There could be a million reasons.

But once you have committed yourself to telling your story, it would help if you could get your story across.

General writing skills are beyond the scope of this textbook. There are other Wikibooks (under development at the time of writing) that teach you exactly this. See for instance How to write an essay.

Reading problems on the web

Although few hard facts are known about this, it is generally assumed that reading from a screen is harder than from paper. For instance, it takes about 30% more time to read a text off a screen than off paper. Although little is known about the reason for this, it could be because most screens are static, while readers who use paper generally can move the paper around. Another theory holds that because the resolution of text on paper is much higher than that on screen (300dpi vs. 100dpi), it is 'easier for the eye' to read text off paper.

Most visitors browse websites using a browser that displays the contents of a webpage on a screen. The standard typography of web browsers seems to accommodate for a harder reading experience: paragraphs are separated by empty lines.

Regardless of how difficult it appears to be to read off a screen, web surfers have shown a marked preference for lay-outs that make it easier to scan a text for important points. Some of the qualities of these lay-outs are:

list-type information in lists
clearly marked hyperlinks
no horizontal (sideways) scrolling
all the important information above the 'fold'
inverted pyramid structuring of text

Often, visitors will print out text that they want to read with attention, while they skim over text that does not warrant such close scrutiny.

Information scent

Whatever they are searching for, most web surfers follow a similar strategy in hopping from page to page. They will 'scan' (skim through) a webpage, looking for interesting information. They will seek out elements that seem most promising to deliver that information, such as headings, emphasized text, and hyperlinks. If within the first few seconds a webpage does not seem to promise interesting information, the visitor will hop on the most promising hyperlink out of there. If there are no promising hyperlinks, visitors may even use the Back function of their browsers to return to a previous page.

The trail of promising elements is similar to the trail a bloodhound follows when hunting prey. It is therefore said that elements on a webpage emit an 'information scent'. The stronger that scent, the more likely the user is to follow it.

However, if a certain type of element has been producing false trails often, users will start turning away from such elements. For instance, although animated content is much more attention grabbing than static content, visitors turn away from animations more and more. This may be because web surfers have started to equate animations with advertisements; and advertisements rarely contain the sort of information the visitor was looking for.

By knowing how to make a webpage more accessible to those who use graphical browsers, and by knowing how to apply the right amount of 'scent' to certain elements on a page, the webpage author arms himself with the right tools to reach his audience optimally.

In the following, we will take a look at a couple of such tools.

Links vs. Text

The term Hypertext consists of two parts: 'hyper' and 'text'. Hyper is originally a Greek word meaning 'over', 'beyond'. Hypertext is something that takes text to a new level; but it still remains text. Hypertext has all the properties text has, and then some.

Although the title of this section makes it seem so, the extra properties of text, i.e. the (hyper)links, are not at war with the original text. At least not all the time.

When the theories of the web experts are correct, a web user surfs from page to page, following a trail of information scent. Whether that user is looking for a specific piece of information and trying all likely avenues that may lead to that piece; whether a user is looking for specific information, but gets side-tracked by other information; or whether a user is not looking for information at all, but just for some fun; all seem to be using the same strategy of following a trail of promising leads.

The longer a visitor stays on a page that does not hold his interest, the more the likelihood increases that the visitor starts looking for a way to escape. Although the promised information or fun may lie in the plain text that is presented on a webpage, all the escape routes are embedded in hyperlinks. Chances are, therefore, that any text that does not immediately captivate a visitor's attention, is unlikely to be read later on, unless much of the preceding text has already made abundantly clear to the visitor that this is where he wants to stay.

Let me repeat again that it is not the author's task to entertain the reader. But an author who does not want to entertain readers, will find himself without an audience. Similarly, an author who sets out to maximize the sense of reward someone gets from reading his work, will reach the maximum audience for that type of work.

???more to follow

The fold

The fold is a term that could in some sense be used for all media, but is pretty useless when speaking of streamed media such as speech. It is a term used for visual browsers, meaning the bottom edge of the first displayed part of a webpage.

For instance, if a webpage consists of fifty lines of text, but only the first twenty are displayed, the fold is beneath the twentieth and above the twenty-first line.

That may seem to be an arbitrary position to give its own name, but it is not, because webpage visitors will generally look at what's above the fold, not at what's beyond.

Unfortunately, it is not a very useful metric, as each visitor has his web browser set up in different ways, and so for each visitor the position of the fold may differ.

However, it teaches us that things that need to be viewed by as many visitors as possible, need to be as high up on a page as possible.

The inverted pyramid

So far we have discussed the difficulty with which a visitor reads a webpage off a screen, and with which haste he does so. Forget to grab the right person's attention, and he will disappear to the greener grass on other webpages. The web is quite vicious like that: all your competitors are your direct neighbour.

In the section about the fold we discussed how it is important to maximize your readership by putting important information at the top.

The method of writing a text with the most important sentence first, the second most important sentence second, the third most important sentence third, etcetera, is called the Inverted Pyramid.

Traditional essay writing holds that a piece is structured as follows: introduction, expansion, conclusion. For most of us, it is pretty common practice to sit on important facts for awhile, and only reveal them as the piece progresses. As readers, we have become accustomed to text being structured like this, and are willing to show a certain amount of forgiveness when an author does not come to the point right away. On the web, we click away without even blinking our eyes when we encounter a text that does not immediately tell us what we want to know.

Pitfalls

So far, we have been stressing what happens when a visitor does not find the information he is looking for. But what happens when the visitor does find what he is looking for: does web text still need to be as oddly contorted as described before in order to appeal to the visitor?

One would hope not. How would Alice in Wonderland read if we had put the most important facts first? If we had put links to more interesting literature in the text? If we had forgone all artistic ambition just to satisfy some weary surfer, who wasn't going to read our text anyway?

The usability extremists would say, yes, there are no artistic values--just a new world, with new rules.

Unfortunately for them, people do read on the web. They are moved by what they encounter. They have ways to circumvent the difficulties of the web medium. For instance, people who find an interesting text on the web often print it out, so that they can read it from an easier medium.

I would also argue, without any facts to back me up, that the nature of a text plays a role. Informative and persuasive texts may be constructed according to the guidelines given before, whereas entertaining texts may be constructed in the old-fashioned, pre-web way.

If you are trying to sell me something, for instance, there's really no need to fluff up your text with "marketese". More likely than not, I will hit the Back button of my browser faster than you can say 'percentage'.

If you are trying to inform me of something, I might be more lenient. The trade we are making (you get my attention, I get your insights) is much more immediate, and therefore worth more to me.

But even the authors of entertaining webpages can learn something here. The most important thing: you write for an audience. The medium plays a role in that. A hard rock band must use loud speakers. It's what the audience expects. (And of course, the hard rock band that knows this can play on this, and show their soft side in an 'unplugged' session--but such things are better only tried by those who understand their medium.)

Even if the entertaining text is going to be printed out, even if the user is going to sit in front of his screen and persevere through your entire, brilliant play, some of the methods outlined before make sense.

Should you not use the inverted pyramid, you should at least use headings for headings, don't fiddle with font sizes (yes, this is unfortunately possible), let paragraphs stay separated by blank lines, etcetera. It is not rare to find that some author of science fiction stories has found out a way to display their story the same as on paper--forgetting in the mean time that he is not publishing on paper, and losing part of his audience.

Most of the promotional value of an entertaining text is in the text itself. Entertainment is highly valued: if what you wrote is good, others will link to it, including search engines.

Usability and Accessibility

The World Wide Web Consortium has produced a set of Web Content Accessibility Guidelines that provide guidance on some areas of writing web pages. The guidelines are quite daunting at first. Don't try to understand them all in a single reading. Some guidelines are easy to follow whilst others can require significant effort.

Watchfire's WebXACT is a popular free online tool for checking pages for accessibility. Although it can only check some of the guidelines and occasionally fails pages that do meet the guidelines it is a good starting point for learning the guidelines.

Checkpoint 10.4, "Until user agents handle empty controls correctly, include default, place-holding characters in edit boxes and text areas.", is now considered unnecessary and has been removed from the draft of the next version of the guidelines. See the UK's Royal National Institute for the Blind's article Place-holding text in form elements for more information.

Checkpoint 4.2, "Specify the expansion of each abbreviation or acronym in a document where it first occurs." It is now considered good practice to markup all occurrences of an abbreviation instead of just the first occurrence. HTML 4.01 and XHTML1.0/1.1 have two elements for marking-up abbreviations. The abbr element is used to markup any abbreviation. The acronym element can be used to markup acronyms. Since acronyms are a special type of abbreviation they can also be marked-up with abbr. Abbreviations that are not acronyms should not be marked-up with acronym.

Questions and Exercises

Exercise 3-1

Behold the following text: "It is always the dead that are praised, or so claim those who are unsuccessful while alive. Perhaps this is so, partly because some people only revere that which has passed. However, works that have withstood the test of time, have withstood its scrutiny. Long-dead authors that are still remembered, are remembered because of the quality of their work. And no work can be stiled that of a genius, until other works have come along against which it can be compared." (Free after Samuel Johnson's "Preface to Shakespeare".)

Rewrite this paragraph using the inverted pyramid.

Answers

For answers, see Answers to Questions and Exercises.

Previous: Creating a simple page - Up: Table of Contents - Next: Adapting a webpage for visual browsers