Once you have written the content for your web site—you want to design your page so your points are easier to comprehend.
Writing for the web is really not that much different than writing for print. But you have to remember that since it can be more difficult to read on-screen, you have to take special care to make it easier on your readers.
Content and Style
Provide useful information. Most people use the web to find information that they can actually use. Unless your site is for entertainment purposes, make sure that your readers will find your information useful. This means useful for them instead of just useful for you.
The more specific, the more useful. General overview information is fine, and can be extremely helpful. But when people want to act on the information you provide don’t just give them a hint, give them all the information they require in order to act, right then and there.
Make sure people know what your site (and each page) will do for them. Yes, this seems obvious, but you can visit thousands of pages and have to search for their purpose. If someone can’t figure it out, immediately, chances are they’ll go someplace else. It’s best to do this at the top of the page, so people can see what they’ll get from you without scrolling. People will scroll, but only if they think there’s something of interest to them on your page.
Make it personal. There’s a “personal” aspect to web-based content that doesn’t apply to printed material. People see this content on the same screen they see their own work, so they tend to feel that content is even more personal and directed just at them.
Write conversationally. To make it more personal, your tone and writing style should be more casual, more conversational. Not only is this friendlier, but it’s also easier to read.
Formatting
Always start with the headline—everyone reads them. Condense your most important point down to a one- or two-line headline.
Give the reader the point of it: Distill longer documents down to their most important facts by creating an “executive summary.” Sites do this with a summary at the start of each article. This summary has links to the main subheads in an article. This way people can see the article at a glance, or easily jump to any important point.
Use plenty of subheads. People skim headings looking for specific topics—so use subheads liberally. If you started by creating an outline, your outline headings will automatically become subheads.
Format headings as separate lines—or as a lead-in sentence to a paragraph.
Bold text stands out. It’s best to use it sparingly, such as for lead-in headings at the start of a paragraph. Bold words scattered inside the text can be confusing.
Use italics for emphasis. Italics help your reader hear the same emphasis you intended. Italics can help make your text sound more conversational. For example, when you read the previous sentence, the word “sound” was emphasised because it was in italics. That can make a big difference in the meaning of what you write. While they can be overused, in general they help ensure that people read things the way you intended (or the way you intended 🙂
Here are the same words, but the italics give them different meanings:
I said I liked it.
I said I liked it.
I said I liked it.
Bulleted lists
People read bulleted text so condense important points to bulleted lists.
Repeat your most important quotes using pull quotes which are often in a different typeface.
The “Inverted Pyramid” method
Journalists are taught to put the most important elements of the story at the beginning. There are two reasons for this—one is that readers may not read the whole story, so you want them to get the most important information first—just in case they stop reading.
The other practical reason is that stories often need to be cut to fit into a given space, and they’re cut from the bottom where the least important items are. There’s plenty of room on the Web, so unlike printed matter, you probably won’t have to cut what you write. But even so, it’s a good idea to put the most important information first. Some Web pundits claim that shorter is better when it comes to writing for the Web. I don’t necessarily agree with that; we feel more content, depth, and detail is better. But if you do agree with “short is better,” then putting your most important information first makes it easier to cut your text.
By Importance: You’re going to do the same thing—put the most important items first—then work down to the details. You can do this visually by dragging the items up or down the list (grab them by the minus or plus sign).
By Topic: Once you have them in order of importance, it’s time to start thinking sideways. No, that doesn’t mean you’re allowed to be crabby at this point. It means that you’re going to organize by topic, you’re going to find the main point of a topic and take the other elements and put them under it. You do this by dragging them up or down the list to the right topic, then dragging them to the right so they’re “under” the heading above.
When you’re finished, you should have a few Heading 1’s (your major topics), and each one of them should have several Heading 2’s (sub topics), and each of those may have several Heading 3’s. Don’t feel compelled to fill out all six levels; three is usually enough.
Colours and Text
There are three main issues here: The colours of text, hyperlinks, and the backgrounds on which they’re read. Almost all popular sites use black text, standard blue hyperlinks and white backgrounds.
Black text on a white background gives high contrast and is the easiest to read at length — that’s why it’s so popular. Any variation reduces contrast and legibility, but if the variation is minor then the loss of legibility will be minor too. No big deal.
Light text on a dark background can also give good legibility, but the general consensus is that it’s harder to read at length, so is more suited to short text.
If you use coloured text on a coloured background, you need to take care over contrast and legibility. colour pairs that are technically defined as complementary (meaning they’re at opposite sides of a circular spectrum or colour wheel) such as red and green or gold and blue, give more contrast than colours closer together on the spectrum, such as red and orange. If you’re tempted by a bold combination, be sure to check your pages on a screen that suffers from reflected glare. Combinations that seem fine on a well-positioned screen can merge into obscurity on one that’s badly positioned — and that’s the situation many your visitors may be stuck with.
When it comes to hyperlink colours, there’s another issue that needs taking into account — user expectations. In the early days of the Web, everybody was a new user and nobody had much in the way of expectations. Red text on a black background with yellow hyperlinks was fun. But those days are behind us. There are now millions of experienced Web users they are not too fussed about the text hyperlink colour but do expect hyperlinks to be underlinked or at least any text which is underlined should definately be a hyperlink.
At this level the science runs out and we come down to opinion. Just how important is that possibility of confusion?
If you have a navigation area full of underlined yellow words on a black background, surely everybody will recognize they’re links? Probably so, but it’s interesting to note that most of the popular sites stick with the standard blue.
Choosing standard blue can influence your entire colour scheme. You’ll notice that relatively few sites on the Web make extensive use of green. That’s because it doesn’t mix well with hyperlink blue. colour schemes in red, blue and yellow are more popular because they’re easy to use with hyperlink blue.
