Path // www.yourhtmlsource.com → Promotion → WRITING FOR THE WEB
Writing for the Web
Good content written for the Internet is vastly different to content written for offline use. When writing for your website, you should always be conscious of this fact, and tailor your style accordingly.
This page was last updated on 2012-08-21
Reading on the Web
Before I begin telling you the guidelines for writing, it is helpful if you have an overview of how people generally read on the web. The most important thing to remember is that few people ever read everything on a page. They scan any new page for the information they want, skipping past whole blocks of text. This means your text needs to be designed with highlighting and structure, so people can find what they want quickly and then begin to read more of your page. Writing for scannability means:
- Using a graded structural system of headings — start with a
<h1>for the title of each page and allow the main points and their subpoints to flow off this. The words the headings consist of should be simple and to-the-point.
- Using the
<em>tags or colour to highlight key words. These then stand out and are easy to catch in a page full of words. Other logical tags lend context to your content. Links should always stand out due to their colour and underline.
- Employing lists, either ordered or unordered. These stand apart from regular text and can be scanned quickly as the starts and ends of points are illustrated in a simple way. Don’t overload your lists — 6 or 7 items should be your maximum, for optimum readability.
- Use simple tables and graphical charts to lay out information.
- Keep paragraphs short and stick to one main point at a time. Start the paragraph with the most important point, then expand on this for the rest of the paragraph. If the initial line doesn’t interest the reader, they could skip the rest. Cut large paragraphs into smaller parts.
- Use CSS to achieve greater control over your typography and utilise things like line-height, borders and margins to increase the readability of your text.
Due to the comparatively low resolution of most computer monitors, reading from a screen is around 25% slower than reading from a printed page. It is also less comfortable and worse for your eyes. This is the main reason for keeping pages short — most readers simply read less anyway. If possible content should always be kept short and sweet.
You must also take into account font size. If your text is too small, people won’t want to read it simply because it’ll cause too much strain on them. Keep normal body text at around the equivalent of 10 or 12 point, for most readers. Checking what resolution most of your visitors use should help you making this decision too. And if you’re using stylesheets to denote font-size, try not to use absolute units like pixels, because this stops Internet Explorer users from being able to adjust the size of the text on their screens.
Use internal links to allow readers to quickly jump to the sections of a page they deem useful to them. If you are linking to an external site and plan on using the
target="_blank" attribute to open the page in a new window, make this clear to the user. Don’t suddenly open new windows all over their desktop. I do this by adding a » character in front of all outgoing links. Also try to avoid web clichés — the most annoying being ’click here’. Make your link text descriptive, not compulsive.
If you are using stylesheets to make links with no underline, limit this to navigational links. Any hyperlinks you add into your main content should retain their underlines to make their purpose clear. Try to keep a system similar to the default link colours (blue and purple), so users feel in control of your site.
How is your content going to be used? Will it be read online or offline? Will it be printed out? If you think people will be reading offline, make sure that links stand out so that they can click on any they might want to read later and store them for when they’re reading the whole thing.
If your page will be printed out, you can include fewer links since they won’t be used. Try to keep all the information on the topic on one webpage, so users only have to press print once. If you feel that many of your readers will be printing out your content it may be worth incorporating a print stylesheet into your pages. Serif fonts tend to look better on a page than sans-serif. Also, make sure that the majority of your text is black on a white background. People simply won’t print your page if it’ll clear out a whole printer of ink.
Every one of your pages should make proper use of the
<title> tag. These titles are important as they are what users see in search engine listings, their favorites list and history, and are also often what other webmasters will use as the link-text to your site. The first word in your title is the most important, as it the most visible. In a taskbar full of windows, your page will need to be picked out by that word. Also when readers are scanning over search listings the shorter and more to-the-point your title is the quicker they can read it and decide whether it meets their needs. A vague or meandering title will make them look elsewhere (and in a page of search results, that’s very easy).
If you have a large site, take the time to give each page their own title. It’s very easy to just stick the same title on every page but you’re making it harder to use your pages, plus they’ll perform much worse in the search engines.
The main headlines on a page must be clear and short. From looking at your headline a reader should be able to tell what the rest of the page is going to offer them. A good test of your headline’s effectiveness is to look at it along with a list of other pages. For example, in my full index, you need to be able to find the page that holds the information you want from just the headline (or title). In this way, the titles of the pages are displayed out of context — they are just a list of names with nothing to back them up. Therefore, they must get their point across immediately, otherwise they’ll never get clicked.
The summarisation of a page in three or four words can be tricky, but if it is difficult you may need to think about whether your page addresses too many points. If your page is badly focused, you should split it up into a few, more targeted pages, which will then be much easier to title.
When adding a headline to a page, avoid puns, or anything that will require further reading to fully understand — a lot of people won’t get it and so won’t read the page. Keep it simple and focused. Also understand that you’re probably writing for an international audience, so try to keep wording simple so you don’t confuse people who don’t primarily speak English.
Conclusions first, details later
If you are familiar with the way newspapers present their content, you will know that the conclusion of an article comes first, and then the supporting details are added in stages. By the end of a report you are reading non-essential background information. This style of front-loading — called the inverted-pyramid, as the top has the main points — allows readers to start reading and get the gist of the entire story after a few sentences. If they are sufficiently interested, they will continue on to the finer details, while others will be free to move to another article once they have the main points read. Writing for different interest levels gives your writing much flexibility.
- Give answers before explanations
- Give summaries before details
- Give conclusions before discussions
This style of writing applies to the web in an even bigger way, as people spend far less time reading an article online. People sit down with their newspapers and read the stories carefully; online readers run through stories impatiently, often without scrolling down to even the secondary level of information.
Good use of the medium will offer your writing great depth if you utilise it correctly. On the Internet you have the vast resource of an entire web of information that you can link to. This should help in keeping your content relatively short. Keep the background information on separate pages and link to them throughout your main pages. Link related material together, to allow an interested reader to gather lots of information while not slowing down casual browsers with piles of additional text they won’t use. If something has been covered elsewhere, don’t start explaining it again.
Building up your reader’s trust in your opinions and advice are of the utmost importance if you want people to return to your site. Your writing will be the only way your readers will know you, and so you must avoid coming off as someone who is always trying to sell them something, or trick them. Thus, you should avoid the style of writing known as “marketese” — using superlatives, exaggeration and blatantly false claims like ’best on the Internet’ will drive visitors away, and is suicide on an e-business site.
Avoid the abused exclamation mark too — that’s a sure sign you’re trying to inflate the truth and make a sale, and it makes you look rather childish too.
Promotional text is also much slower to read, as people start questioning the validity of a site’s claims. This slows down the processing of the information they’re reading, and detracts from the overall user experience.
You can improve your credibility by writing good content, adding by-lines, biographies, and pictures of yourself, and offering outbound links. Keeping an overall air of quality throughout your site’s design and graphics will help too; as will keeping a close eye on your spelling and grammar.
Allowing your personality to permeate your writing will often endear you to your readers. Linking to other people’s sites shows readers that you researched your topic and that you’re confident enough in your own site’s quality. It also makes your page a more valuable resource.
Keep Learning // Link Requests → Go! Go!
Other Promotion Articles // <meta> Tags · Promotion 101 · 10 ways to Promote · Search Engines · Writing for the Web · Link Requests · Favorites Icon · Domain Registration · Promotion on Facebook
What’s Related // Basic Formatting · Font and Colour · The <font> Tag · Special Characters · Internal Links · Lists · CSS and Text · CSS and Links · CSS and Media Types · Non-underlined Links