Please note : Every link on this page opens in a new window. If your "Pop-up killer" is too efficient it can also stop new windows. When this happens, please press "Ctrl" and click on the link you want.

Writing Webpages

If you write an article for a magazine or you write a book you will get a "proof" ("galley proof") from the printers before the final print. This proof you use for making corrections and to indicate to the printers how you want the text to look, i.e.: headings, cursive, etc.

When you make your correction notes you use special symbols the people in the printing shop understands, you mark up your text and the collection of symbols is called a "Mark Up Language".

When you write a webpage in such a way, that while somebody is reading the text he/she can follow a reference (link) to another article or webpage and read that before returning to your article, it's called a hypertext (Oxford Advanced Learner's Dictionary).

The "galley proof" you get when writing a web page, is the text on your computer screen. The corrections and display instructions you write yourself directly in the code page. For this you use a collection of symbols (standard commands) called Hyper Text Mark-up Language (HTML). Learn more about HTML in Don Pedro's Website Design Handbook.

Writing for the web is different from writing anything that is to be printed. Reading from the computer screen is by most people experienced as something unpleasant - especially long text with long text lines, which also require a lot of scrolling.

To get around this some designers substitute some text with graphics. Considering search engine spiders, this is not a good idea. The spiders cannot "see" any images; if you have an "alt" tag they will read that - but that's all they get out of it.

IF you still want to use images on your webpages, for instance as "decorations", all images taken together should tell about the same story as the text on that same webpage. If they do not, then they are most probably irrelevant, and such images can repel your visitors so they never come back again. If I would put up a lot of provocative pictures of young women dressed only in very small bikinis, I think most visitors would feel offended and turn away. Remember the next webpage is only "a click away"

In 2006 it was estimated over 75% of internet users were non-native English speakers. When people speak different languages they are by definition from different cultures. One and same picture or icon (image) can have completely different meaning in different cultures - may be even something offensive in some. A balanced and consistent use of graphics and text will increase your visitors confidence in your site, as long as the pictures complement your text.

When writing any text for a webpage you need to keep search engines in your mind all the time. For a spider to get enough material to analyse, you should try to make at least one A4 size print page text (400-600 words, in English) on every webpage.

With long text, most people will scan your text, only stopping when they notice some important words. To help your visitors to read your full page you can prepare a printer-friendly version of your web page.

What to Write About ?

A recipe, I read somewhere, for a good opening sentence for a novel: "... something simple but nourishing for the reader's imagination ...". This could very well work also for a webpage. Of course, it can be difficult to come up with something like that suddenly, but if you do - don't be afraid of using it.

Before when a writer sat down in front of his/her typewriter with a blank page rolled into position and the brain went completely blank it was called a "writer's block". Nowadays it's still called the same when somebody sits down in front of the computer with a blank word processing screen ready. It happens to me too every now and then.

Get away from your computer. Sure you know something about something. Imagine sitting down at the pub or in a bar and telling a friend about it. Except you don't need to go to the pub - you can sit down at your kitchen table and write down on a paper what you would tell your friend.

Or fill your pockets with paper and several ball pens (may be different colours) and take a stroll in the park or along the road, anywhere where you haven't been for some time. Let your brain "flow free", i.e. do not concentrate on anything specific, especially not on getting new ideas. May be you can imagine sitting in front of your friend.

When the ideas start coming sit down and start writing, whatever comes through your pen. Later you can sort it out.

These are the points I try my best to follow when writing webpages:
- Stay within relevant content on each webpage - one topic only per page
- Begin with a short summary
- Use subheadings (<h2>)
- Write short paragraphs and sentences
- Make only one point in each paragraph
- Use short lists and block quotes
- Use highlighting; underscore and bold text
- Use links in the text
- Check your spelling in different ways

Paragraphs

When you start getting more than one (A4 size) print-out page, you need to break up the text. It gets very monotonous for your visitor if running up and down without any breaks at all.

First, of course, you can break up your text into paragraphs. I use as maximum length of each paragraph one line (excluding code) when writing either in Notepad or a HTML editor (max. 5-6 text lines). That makes it easier when validating the code. Each validator gives comments as per code line number.

If you use a HTML editor you can sometimes get alignment instructions (code) at the beginning of each paragraph, i.e.: <p align="...."> with end tag </p> at the end of each and every paragraph. When you write the code by yourself ("by hand") you can make it more simple by using the "line break" - <br> - instead. See also "Web Authoring Standards" and Wikipedia: Guide to writing better articles.

If you, for instance, want the text aligned straight at both sides - like this page - you can use the "p" tag at the very start of your text together with line break tags.

Example:
<p align="justify">1^st paragraph<br>
<br>
2^nd paragraph<br>
<br>
3^rd paragraph</p>

If you use other kinds of alignments somewhere in the text, for instance <CENTER>, they will break your "p" alignment and you have to repeat it after each different alignment. If you want to make it really easy, you use <div align="justify"> in the very beginning and the end tag </div> at the very end. Then you can use whatever you want, even lists or "block quote" and the "justification" continues outside and inside of these different specifications within the same table column (except inside the "center" tag).

The <DIV> and <table> tags are structural tags, while the others are for display instructions only. Note that one "p" tag is shorter than a "div" tag, while one "div" tag is shorter than two or more "p" tags.

When writing for the web, be generous with paragraphs. Keep them shorter than in a "normal" printed text.

Emphasize

This is for pointing out (in your opinion) important words to your visitor and should be used sparingly. DO NOT underline everything! Everything isn't equally important. Try to make up a certain system for yourself and then follow it. If it's logical - even a little bit so - your visitor will get accustomed to it and for a fast reader your text is much easier to read when important words are emphasized.

Your visitors are looking at headings and sub-headings first before looking at any images according to an eye tracking report (2004), in English or Español.

Reading text on the computer screen is slower than reading, for instance, a newspaper or a book. Most people will start scanning the text, stopping to read only when they notice an "important" word. On the other hand, when reading a foreign language, most people read more carefully - word by word - and take everything more seriously. If you use some humour or "play with words", do indicate it's not seriously meant. Only about 8% of the world's population have English as their home (native) language.

Example:
- Certain matters or words are very important, and you can use <b>bold</b> text.
- Others are not so important, which may be calls for <u>underlined</u>.
- Something to use very sparingly, is <i>Italics = cursive</i>. A new recommendation is to use <em> instead of <i>. All browsers, however, recognize both codes and <i> plus </i> are shorter.

Of course you can combine two or even all three tags like: <i><b><u>but</u></b></i> that's a little bit heavy. If you use two tags or more together note that the end tags always come in the opposite order.

Instead of underlining you can use text links for emphasizing certain words or phrases. Be sure the link text covers the content where the link goes.

Pointing out What is Important

Many designers say you need CSS to "highlight" or otherwise point out what's most important in your text. Using the full complement of Style Sheets in the <HEAD> section is, however, not allowed on free and most low-cost servers.

So, how to do? You can do a lot with just simple HTML (which all browsers can read). Below are three examples on what you can do by "breaking" the rules. About 99% of browsers in use today (2007) displays this correctly.

Example 1: In my menu I have highlighted the words "Return to TOP"" For this I use a single CSS command. See for instance menu on this page: <span style="background-color:#ffff99">Return to TOP</span>
It causes no problem at all to use a single CSS command with the HTML code. Basically the idea is same as when you use a short JavaScript for something special. The "#" sign indicates to the browser to use the hexadecimal code for that colour, you can also use the name of the colour, as in Example 3.

Example 2: You can use a simple table (border="1") to create a three dimensional frame around anything you want. This one is defined as width="60%" and "centred".

Example 3: Or you can use a CSS tag (= command) to make a different frame, like the one around this example. The width of this frame is 90%, the code is little bit longer and looks like this
(written on one line):

<p style="width:90%;border-right:1px solid yellow;border-bottom:1px solid yellow;border-left:2px solid #EEEEEE;border-top:2px solid #EEEEEE;padding:5px;font:12pt times new roman;">Your Text</p>

Because both "frames" are centred (<CENTER></CENTER>) the text in Example 3 is also centred.  In Example 2 the text is "justified". You don't need to specify the "height". With different screen size the browser will adjust it according to where the </p> tag is.

If you want to use a table inside the CSS command you cannot use "p". If you replace "p" as well as "/p" with "DIV" and "/DIV" then it works.

NS 4.5 or older browsers cannot read the CSS command used in Example #3, they simply disregard the frame but display the rest.

In CSS you should specify font size in pixels. I have used "point" which gives "12pt" for "normal" size text.  "times new roman" font style you write as separate words - "underscore" instead of empty space is for the Windows/DOS system only. In the print ready version of this text I have used black for the frame in Example 3.

I do not recommend you specify font size or type.  I have done it in the CSS tag only to show how to do it.  If your visitor is near-sighted and you specify font size 10pt, do you think that visitor will ever come back to your site again?  It's better to make font:100% and leave font type out.  Then your visitor gets the kind of text he/she prefers. Additionally font size = 10 pt is usually by search engines regarded as not so important!

For any visitor it's most easy to read a font he/she is accustomed to. Most people can comfortably read text lines with 7-11 words (in English). The reason is a human eye focuses on an area that's about 10-12 English words wide ("normal" font = 12pt). If your text lines are longer the eyes have to move back and forth and the reader gets tired.

Whether you use "fixed" or "variable" font depends on your purpose. You can't use the same and only technique for every purpose. If you were a chef in a five star restaurant, sure you would produce different looking food cooked in a different way for the restaurant customers compared with what you prepare and how you serve the food at home for yourself (or your family), wouldn't you?

If you absolutely want to specify a different font, you can give your visitor the possibility to resize the font, bigger or smaller according to his/her preferences. Sorry, it doesn't work on free or low cost servers.

It is different if you are writing an advertisement for your company or website, then you are entitled and more or less even expected to use your own font and style.

The CSS code is generally longer than HTML but a single CSS tag or two doesn't affect the download time enough to be noticed.  If you do use full style sheets - check your text is still readable without style sheets downloaded. Or, still better, check your webpage text online with Lynx text-mode browser. Or download the latest Lynx browser version.

When you absolutely have to use CSS you can compress the code, thus getting faster download. See also Don Pedro's Cascading Style Sheets - Pro and Con.

Write for your Visitors

Each visitor arriving to your website can have different things on his/her mind. Somebody is searching for a specific piece of information while another one can be looking for something different but similar.

Consider that most visitors do not read your webpages in the same way they read a newspaper article for instance - they scan your webpages.

You have to point out to them where the important text is but you don't know what is important for each different visitor. To make it easier for your visitor keep each paragraph focused / centered around one word / concept.

If you mix two concepts in the same paragraph it's possible a visitor who's looking for one of these, really misses the one he wanted to find and goes to the next website.. For more advice on this problem go to Nielsen's Usability, 03/2009. He advocates to use specific language with concrete terms.

Lists

There are three kinds of lists:

When using dashes only, your "p" alignment doesn't break. Both "ordered" and "unordered" lists are suitable for long lists with long text items - several text lines for each item. Instead of "1" you can use letters, for instance (A or a), but then you make <ol type="A"> instead of <li Type="..">.

Both with "ordered" and "unordered" lists you can add a new list (more indented) between two <li> tags but remember the closing tags (</li></ul>).

If you use dashes and have several text lines per item it will be difficult to read. You do not know in advance what screen size your visitors will use so you cannot put in line breaks at correct places. The screen width can be anywhere between 640 and 1.600 pixels or even more, there are more than 40 different screen sizes.

Unordered lists are most suitable with three (3) items. The number "3" seems to be a real "magic number". Most humans can easily grasp three short items at the same time and keep them simultaneously in the mind. It seems to be a "built-in feature" in the human brain.

Block Quotes and Definitions

Block quote is usually indented at both sides. This is made as block quote with an ordered list, that's "justified".

1. You should use block quote very sparingly, may be not even on every page. It's for special purpose only.
   
   
2. Sometimes may be you need (or have the chance) to use a couple of definitions. Don't use these either unnecessarily. There is an example of definitions on Don Pedro's Search Engine Marketing.

The Code is really easy: <BLOCKQUOTE>Text</BLOCKQUOTE>. That's all you need.

You can use "blockquote" also with so called "pull quote". This is a repetition of content already written on the same page. May be something important you want the reader to memorize especially well. For instance:

Pull quotes are often written in a different font but be careful when using a different font colour.

This is especially suitable in the middle of a text heavy webpage - like this one. It's very common to see quotes on webpages written in <I>italics</I>.

Take care the total effect of your emphasizing looks as inviting as possible. Usually it's better when only one "style break" is visible on the screen at any one time. If you use these effects too much, your page starts looking "scrambled". The computer screen is a very different medium compared with newspapers or books.

Style

You never know in advance from where in the world your visitors will come. Therefore you cannot know what cultures you are writing for either. What is OK in one, is sometimes offending in an other one. Usually plain facts are better than very strong opinions. Avoid peculiar slang and offensive language. Write from your "heart".

If you sit there with an empty paper in front of you and still after a couple of days haven't got more than one or two sentences down - there is help available! Go to Free SEO Advice and look for "copy writing" forum, there you can ask for help and tips. You have to register first before you get access to the Forum. May be somebody will even send you a text suggestion. When that happens, don't copy that text like it is. Use it for inspiration only.

If you get one or two paragraphs as a suggestion, split it up into sentences. Then you take a lot of "half-sheet" papers and write one sentence only on each paper. Now when you start looking at these sentences probably at least one will give some ideas. Start writing down whatever comes to your mind. Before long you have filled a lot of papers with text, then you can start editing and systematizing your text and suddenly you have a couple of web pages ready. Once you have got this far the rest is relatively easy.

I know it's a good rule not to repeat the same word too many times in the same paragraph. But what's a good synonym for "search engine"? If you start forcing synonyms into the text, it can start sounding "stultified" or artificial. I'm strongly for writing for my visitors and if that's not good enough for the search engines - so what?

You can find synonyms or closely related words by putting "~" ("tilde") in front of a word in any of the bigger search engines. Since end of March 2007 Google adds related phrases at the top of the results page when you search for definitions. Example: you type in the search bar: "definition:work" (without " marks). It's easier and faster than the "~".

Some searchers do put in a question for the search engine when searching for something. Please note, the search engine won't answer the question. It will look for a page where that question is present. Some computer "philosopher" ("guru"?) some time ago stated: "Artificial intelligence beats normal stupidity any time of the day!" Sometimes you can write a sub-heading in the form of a question.

If yours is a very specific subject with some terms used only in your sector, use these, either with an explanation in parenthesis or a link to an explanation or definition. The search engines are "hungry" for those search terms / keywords not found at all or on only very few web pages.

Once you have published your webpage, you can check whether the focus on that page is on the visitor or on yourself / your company or product. WeWe calculator is a small and handy tool that tells you where the focus is, you get a percentage score - either customer or your self focused.

Do not use images or pictures to replace text, except for maps, charts, diagrams etc., which are self-explanatory. If you use pictures or images within the text then they should complement the text. See also Don Pedro's "Alt" and "title" tags.

What is good for one site is may be not so good for an other one. It depends very much what sector you are in - most of all it depends on what's your reason for having the site on the Net. Some sites prosper with a lot of incoming links while others depend on the quality of whatever they offer on the site. If your page doesn't have all the words used by the searcher it won't show up at the top of the first search result page. Regardless of how many incoming links you have.

Long or Short Text ?

There are always some words that fit in naturally with your content. The longer the text the more words you can fit in on the same page without disrupting your visitors attention too much. But then there is a very old rule that states most people are not able to concentrate longer that it takes to read one A4 size print-out page. With a long page you run up against this barrier as well as you can get problems with the download time of your page.

About half of internet searchers use one or two keywords in their search, while the other half are using three or more words. See SEO Researchlab's report ( SEO = Search engine optimization ), see also What are Good Keywords ?. With a long text you get more of those people that use several words in their search. These are probably people who know very well exactly what they are looking for. So you get a more clearly targeted group of visitors, which in my opinion is good.

The 50% "two", 50% "three +" search terms is a general average over all sectors. I think somebody who's searching for something in a technical sector tends to use three or more search terms; i.e. more specific search. This would mean, if your web page subject or content ( topic ) is a technical one, you would probably be better off with the search engines by using a long text - two or more print out pages per web page. Of course, you would then use specific technical terms, but keep the text still readable also for the "average visitor".

Some statistical commentators have drawn the conclusion that internet surfers are slow learners because the percentage using two or more search terms is rising only very slowly. I dare disagree with these "experts". They forget that number of surfers is increasing all the time and new users are balancing off those who already has learnt to search efficiently.

If you are writing in-depth content then include the data and relevant information completely, don't be afraid of making a too long webpage. That is if the content is the point. It doesn't, however, mean you can be long-winded and use unnecessary words. Be as brief as you reasonably can without loosing information that is important for the professional reader.

Short and scannable content is suitable for advertising pages selling items for impulsive buyers. Long comprehensive pages are better if you sell or offer highly targeted solutions to problems that are complicated for your visitor. If you don't want to tire out your visitors, you can use a page mix of short overviews that then refer further to longer and more complete information for your visitors.

Eye track studies indicate the surfers come to each site with a certain "amount" of time to spend. First they scan what can be seen in the first page view - "above the fold". If nothing interesting most go on to the next website and only about 20% do scroll further down.

I agree with the limited time available but only as far as first time visitors are concerned. That means, when you write a long text be prepared mostly returning visitors only will scroll down to the bottom of the text. May be reading small chunks of text here and there. But that requires you serve something interesting "above the fold", something some visitors will remember and will make them to come back.

One such interesting thing could be, for instance, a page menu - like what you can see at the top of this page. Most visitors will at least have a glance at that - What is this page about ?

Content and Strategy

In the end it's a question of balance - a balance (harmony?) [an extra synonym !] between requirements of the search engines and what your visitors want. Or really what you think your visitors want. Here we come to the real question on which you have to base your strategy. That is the strategy not only for your content, but for everything you do with your site.

To formulate your strategy you have to do some "soul-searching". Usually there are two reasons to everything somebody does. The real reason and one that "sounds good". You need to find out that real reason you have for running your website. Once you have figured out that, then you go all out on all fronts, so everything you do with or for your website is a step closer to achieving that real goal of yours. Do not care about anything else. Listen to what others say, but follow your heart! Once you have formulated your strategy the quantity and kind of content should follow out of that.

I would like to suggest you create a small niche for your website to fill - "it's better to be a big fish in a small pond than a small fish in a big pond".  That you can do in the following way:

1. Most people searching for something on the Net are searching for a solution to a problem. So you identify a problem that's common to a certain group of people, may be in your own profession.
   
   
2. Present a step-by-step do-it-yourself solution to the problem. That's the subject for your website.

Try to present the kind of information you think will interest the reader. Write your content in such a way that your visitors are assured you know what you are writing about. Don't be afraid of using links to other people's pages when those pages provide some special details connected with your subject.

Good content is not the stuff you write for the search engines. It's something your visitors will "salivate over" because at last they found exactly what they were looking for.

Online readers tend to use menus and navigation bars to locate interesting content. In an eye-tracking study of American readers about 50% were scanning the text. One can assume these readers were accustomed to read text online. Lists increased comprehension of the text.

Online navigation bars and story lists got primary attention. Photos of real people doing things in real time (life) got most attention.

Once you have written a good text, send a slightly different version to Idea Marketers, they accept and publish guest articles. At the end (or in the text) you can make a clear link to your own site, where there are, of course, more details on that subject.

What about images ?
Any graphics - including photos - should be proportionate to the rest of the content. Very big pictures don't carry much information about the subject of the webpage but they reduce the space available for text and increase download time. Don't assume people will scroll all the way down to the end of your page, if fact you shouldn't assume anything at all about your visitors.

Any images you use should complement the text, they should increase the understanding of what you are trying to tell or explain. Often small pictures in the text are much more efficient than single huge photos. Small images also download much faster. See also Don Pedro's "Alt" and Title Tags and How to Change my Pictures and Photos.

Do Your Readers Understand You ?

When writing an article for a magazine or a newspaper it's relatively easy to know who the readers are. When you know who your readers are you should also know at what level to write your text. Are they high school graduates or university students / graduates ?

When writing a text for a webpage the matters are not so easy anymore. You never know in advance who the readers will be and where in the world they will come from. After running a website for a couple of years you will have some data on this. For instance, are they more likely to be native or non-native English readers / speakers ? If a majority is non-native English speakers you should strive to avoid very long words seldom used and very long and complicated sentences.

There is a small program (4.9 MB) you can download; Flesch Reading Ease. Because it's a program, you can take the results as indications only. You get it as a zip-file, which you can save anywhere in your computer. On double-click this opens and when you give a second double-click on "application" you get a small window like this:



What you, in fact, see above is as it looks after the analysis. "Choose" is same as browse. Search for the document you want to check and double-click on the document file. The program handles .doc, .txt, .rtf, and .pdf documents. Start analysis by clicking on "Process". Depending on your document size, it can take up to one minute. The result shown is of How to Write a Marine Job Application.

You get both Grade Level and Reading Ease Level. When you click on "More Info" you get also average syllables per word and average words per sentence.

Flesch-Kincaid Grade Level converts the reading ease score to a US grade-school level. Any text needs to be over 200 words to get a reasonable result. Remember to take this as an indication only.

The Flesch Reading Ease gives a number from 0-100. A higher score ( number ) indicates easier reading. A average document has a score between 6-70.

Document tested Reading Ease Grade Level Aver. Syllables Aver. Words Advice for Seamen 56.24   9.57    1.58   16.75   How to Write Job Application 59.49   9.12    1.54   16.74   This Page (before testing) 53.66   11.68    1.53   23.76   "A bomb drifting ..." 51.82   13.92    1.45   31.76

The first two pages are maritime "special" topics. This page seems to be slightly more difficult to read but the difference is too small to be taken very seriously. The test was made after adding this subsection - the addition made the page a fraction "easier" to read. The first three webpages are all written by myself. The last page - "A bomb drifting ..." is an article I tested because it told about a UK Navy report about a missing bomb drifting in the sea. Another "maritime topic" but written for the general public. It was published in the "Manchester Guardian" (2008).

Of course, one cannot and should not take those results as "the final truth". Use common sense before cutting down on your sentence length or making some other drastic changes to your webpage. I would suggest you test some newspaper articles in the same topic as your webpage and then compare the results against each other. The main thing is to regardless of sentence length keep your text flowing smoothly.

Search Engine Optimization

Search engine optimization is in my opinion a deceptive term. It focuses your attention too much on the search engines. I would like to introduce and employ an other term - visitor optimization. As far as I know, here introduced by myself. The meaning is close to that of "usability" (research reports), which is a technical term that can be measured to some extent. Visitor optimization means you maximize your visitor's satisfaction, while search engine optimization (SEO) means you maximize your search engine ranking.

Once you have uploaded your webpage you can get a free search engine spider simulation. From the result you can easily see why the search engine has to make a text analysis, i.e. a word and/or phrase count. Otherwise it's impossible to make neither head or tail out of the text mass. Basically the word count is in fact a counting of keywords and key phrases, and that's why you need to include those important words several times in your text.

And why do you think I suddenly start talking of search engines. The answer is very simple: That's how people will find your pages! So the easiest way to optimize your pages is to do it straight away when writing the text.

When you write your text I think it's a good idea to try to get at least one word that describes the subsection in the subheading. Then for that subsection you use that word and some of it's synonyms as much as you can without disturbing your reader's interest. That's basically what search engine optimization is about, and you can take care of it while writing the text.

There is a kind of "thumb rule" for the number of times you can use each keyword or a key phrase in a text. I would say 1-2% of total number of words in your text or key phrases 4-5 times only. Don't overdo it.

When writing an article it's said one should start with a bold interest grabbing statement that captivates the reader.  When writing for the Web the first "reader" you have to "grab" is the search engine spider. You need a good interest rousing summary on the search engine's result page.

Consider your visitors are reading your text, while the search engines are reading your code, so you should try to find a balance between these two. See also Don Pedro's Webpage Optimization.

In 2006 the major search engines brought into use Latent Semantic Indexing in one or other form. The most important effect for webpage text writers is an increasing weight being moved from keywords to key phrases. People are more and more using longer search phrases and the search engines start using key phrases to identify topics and even to index webpages.