Let’s take a look at some best practices for using words on the web and how you can create the most impactful copy on your website which will result in longer and more successful visits.
1. Understand that people read differently on the screen
Reading on a screen is different than reading printed material. Our eyes interact differently to an illuminated screen, but there is also a practical difference. One study states that 79% of readers tend to skim the text on a web page rather than reading every individual word.
Online readers seek out information or performing a task. Because of this, you should keep blocks of text much smaller and more readable at a quick glance. Present your information in easily digestible chunks that can be skimmed quickly and effectively.
In terms of writing, try to avoid using too many exclamations and parenthetical additions. Lean towards short sentences that present a single idea. Overall, remember that brevity is your friend. Avoid adding extra adjectives or unnecessary words. In fact, the same study mentioned above describes how online readers are less likely to believe anything that sounds too sensational. They prefer simple factual statements over marketing speak.
A good way to learn these writing techniques is to analyze successful content and use it as a template for your own copy.
2. Make a great first impression
The web is an amazing and diverse resource with dozens of pages providing answers to even the most mundane questions. Web users are quick to leave if they don’t immediately find what they are looking for. With this in mind, it is important to make a great first impression and hook your reader using the first headline, sentence, and paragraph on each page before they "bounce" away from your site.
Some experts suggest writing your first sentence at the end of the writing process, but I normally advocate for writing the introductory paragraph as the first step after making your outline. You can use the sentence as a chance to hook the reader and sum up all the things that you plan on discussing within that page or post. This blog post from the New York Times has some excellent input on making an unforgettable first paragraph and has lots of examples to analyze.
3. Modify your paragraph length
I remember learning about the construction of a paragraph when I was in grade school. We were told that each paragraph should contain three to five sentences, begin with a topic sentence, include supporting sentences, and end with a conclusion.
With the change in reading behavior on the web, these traditional paragraphs are too much. They appear as large clumps on the screen and it is easy to get lost trying to quickly read through them. With this in mind, every paragraph on your website should hover within the one to three sentence range. There is nothing wrong with having a single sentence describing a particular point stand alone.
4. Break up the text
To make your text more scannable, it is important to separate the blocks of text. Using shorter paragraphs will make a difference, but there are several additional tricks to help you-–try mixing up these options for maximum effect.
White space: The empty area between paragraphs, images, and other elements on a web page is called white space or negative space. UX Myths, a website about optimizing the
user experience for the web, has an excellent breakdown on the many benefits of white
space. These include: making text more readable, increasing comprehension, and creating a sense of balance and harmony on the page.
Headings: In addition to being a huge help for your
search engine optimization, html headings, are very useful for visually separating content on a page. Use an H1
heading at the top of each page. This is an excellent way to remind your readers what page they are on within your web site.
- Bulleted or numbered lists: When it comes to making text more scannable, lists are a fantastic tool. Use lists to create an array of supporting points or examples to back up a stated claim. Traditionally, lists are slightly indented and have either a bullet point, number, or small image offset to the left of the text to help draw the eye of the reader.
- Horizontal lines: HTML has a tag dedicated purely to the purpose of breaking up blocks of text on a page. The horizontal line, or horizontal rule (HR), can be used between any two sections on a website. These lines can be styled and given more or less space above and below them to further fulfill their goals. Try combining horizontal lines with your headings to provide more definitive separation between sections.
5. Contain your line length
Reading on the web is now done on screens of every imaginable size, from giant Apple Cinema Displays to smart phones that fit in the palm of your hand. This means that the width of each line of text will often be rendered at vastly different dimensions.
There has been a lot of research to determine the optimal line width for readability.The correct width, depending on font face and size, is 40–60 characters per line:
Any more than this and the reader may have to start moving their eyes—or even their head—in order to follow the text, which can increase eye-strain and makes the text harder to take in.
If you have a wide layout for your website, try placing your text into multiple columns or putting an image to the side of the text to force the words into a more narrow space. Don’t forget to provide ample white space between the different side-by-side elements to allow for maximum readability.
6. Use fonts correctly
In addition to writing properly for the web and laying out your text in a skimmable format, the fonts used on your website also have a huge impact on your readers. Consider these points when selecting the size, color, and font face of your text.
Select a readable font There is a reason that the bulk of sites on the web use only a few fonts: Arial, Times New Roman, Georgia, Verdana, and Tahoma. These are supported on
every computer out there and are all very readable. Never use an overly stylized font, like a script or a handwritten one, for anything other than headings.
- Bold and italic Bolding and italicizing important words or phrases is a great way to single out important information within a block of text. Be careful not to overdo it though. One bolded phrase will make the words pop off the screen but too many in a single paragraph will just turn into noise.
- Make sure hyperlinks jump off the screen Years of internet usage has trained web visitors to identify links as underlined colored text. Never underline any text that is not a hyperlink. If you choose to remove the underlining from your hyperlink style, make sure the color you select is substantially different than your standard one or you may confuse your readers.
Words are the backbone of the world wide web. They are the primary tool for conveying your message to your target audience and should be given the correct amount of attention to make sure they do their job well.
By following the suggestions outlined in this post you will create an excellent online reading experience for your visitors. Don’t miss this opportunity to make a good impression.
Have other tips for working with words on the web? Let us know in the comments.
Multi-talento at Jimdo
Brent Gummow has been building websites for small businesses, non-profits, artists, and educators for the past 17 years in both Ohio and California.
He currently serves as the Multi-talento in Jimdo's San Francisco office, solving problems, educating users, and helping to grow awareness about Jimdo, the easiest website builder on the web.