Writing for the Web is just like any other kind of writing, right? Actually, writing for the Web is completely different than writing for print. People don’t read text on the Web like they read text on a printed page. Instead of reading text from left to right, beginning to end, they scan it. All of the text on your site needs to be quickly scannable and easily digestible by the user. If not, users won’t waste their time on your site, and they’ll go somewhere else. In this chapter, you’ll learn a bevy of tips and tricks for writing scannable text from scratch and making existing text easy to scan.
Frank: Woah, hold on there, buddy. Actually, it does. See, text on screen reads slower than text on a printed page. People read about 15% slower on the Web than they do from a print document.
Jim: You’re kidding. All the time? Wow. That’s quite a bit slower.
Frank: And that’s not all. Move your eyes really close to your computer monitor. What do you see?
Jim: Ack, that’s nasty. The text gets blurry and fuzzy on my screen.
Frank: Exactly. You read slower on screen because computer display devices have a far lower resolution than print does.
Joe: Oh, I get it. I read slower because my eyes are trying to make up for the blurry text?
Frank: Exactly. And you’ll probably experience eye strain faster than you would if you were reading from a print document. So people read text on screen differently than they do other kinds of text to avoid eye strain and headaches.
Jim: But they don’t know you’re doing that? Reading slower?
Joe: Did you realize you were doing it?
Jim: Huh. No, I guess not. But how does this help me write text for my websites?
Frank: Users scan your text, looking for keywords, sentences, and paragraphs that are meaningful to them. So if you write text that’s specifically designed to be scannable, your users will read your faster and understand and retain your message better.
Joe: That sounds like the holy grail of copywriting. Are you sure you’ve got this right, Frank?
Frank: Yup. Scannable text gives users a better experience on your site—which means they’ll stay longer and come back more often. And that’s the whole goal of user-centered design: giving your users what they want and keeping them coming back for more.
A local alternative newspaper was so impressed with the successful launch of the RPM record store site that they’ve decided to hire you to create an online version of their print newspaper.
Although the paper’s always had well-written articles, they’ve been struggling lately to keep their readers. The Editor-in-Chief also wants to cover more than just news on the paper’s website. He thinks adding hip articles on computing and gaming pop culture (geek chic) will appeal to readers. The biggest challenge for this project isn’t layout—it’s writing text for the Web. This new site’s the last chance to save their paper, so they really need your help...
Before you get started, the paper’s sent over some specs. This will help you refine the look and feel of the site you’re building for them.
|
None of these specs look like that big of a deal. However, there’s one major issue not in these specs: the Hipster is mostly text—lots and lots of text. So we’ve got to build a text-heavy site that still feels usable and hip.
DAILY HIPSTER NEWS + EVENTS
Website copy
In 1973, Gary Gygax, a game designer from Lake Geneva, Wisconsin, and Don Kaye founded Tactical Studies Rules in order to publish the rules for Cavaliers and Roundheads, a miniature war game based in the English Civil War. While Cavaliers and Roundheads was the initial focus of Tactical Studies Rules, Gygax and Kaye also wished to publish the rules for Dungeons & Dragons, a fantasy miniature role playing game developed by Gygax whose rules were based on Chainmail, a medieval miniature game developed by Gygax and Jeff Perren in 1971. As Cavaliers and Roundheads began generating revenue for Tactical Studies Rules, the partnership was expanded to include Dave Arneson and Brian Blume. While Dave Arneson was brought into the partnership as a game designer, and left shortly thereafter, Brian Blume entered as a funder. Blume believed that Cavaliers and Roundheads was not generating enough revenue, and encouraged Gygax and Kaye to focus their efforts on releasing Dungeons & Dragons.
There is considerable debate as to the contributions that Dave Arneson made to the initial development of Dungeons & Dragons. While Arneson has labeled himself “The Father of Role-playing,” and has said that he was responsible for writing
A low percentage of people scroll beyond the information that’s initially visible in their browser window. Even if your users are willing to scroll, most of them decide whether they want to read the page based on what they see in the browser window when the page loads.
To account for this, you should structure your text like an inverted pyramid. Start with a short conclusion so that users can quickly get the gist of the page, and add detail afterward. This way, users can stop reading at any time and still be confident that they’ve already read the important pieces of information.
One of the easiest things you can do to make text more web-friendly is remove unnecessary content. If your text’s clear and concise, your users will spend less time reading and will be happier.
So what’s the best way to write less but still keep the relevant content in your article? It’s a matter of careful editing. Get to the point quickly with short words and phrases and concise two to three sentence paragraphs.
Reduce adverbs (words that change other words and often end in -ly, like “a really big moose”) and replace passive phrases with active phrases (“the brain was hydrated by eight glasses of water a day” vs. “hydrate your brain with eight glasses of water daily”). You’d be surprised how many words don’t have to be included in copy for it to make sense.
When you’re done, re-read your copy. If you can’t work out what it says, what hope do your users have of understanding it?
The inverted pyramid and editing are useful tools, but so is re-reading. Once you’re done editing, take another pass through and see if you can shave off just a little bit more.
Jim: How would that work? Doesn’t a list just add a bunch of different-sized chunks of text for user’s eyes to scan?
Frank: Lists break up large blocks of text into smaller chunks that are easier for the user to read. And they give the user’s eyes something to lock onto when they scan the page. Let me show you how it works. I’ll write out some text then show you how it can be broken down into a list.
Lists do a great job of breaking up text and making the content on your page more scannable. Lists can break up paragraphs that seem to have lots of list-type items in them, and lists can even break larger paragraphs into smaller chunks, essentially building a list of paragraphs. Lists can be used in the main content body, sidebars, navigation, forms, and pretty much everywhere else on your page.
Jim: That’s not bad, actually. Looks like the first paragraph of an article about lists, using the inverted pyramid to get all the important points up top.
Frank: Ha ha. Yes, well, you know, I’ve been paying attention. So anyway, like you say, this text isn’t bad. But it could be much quicker to scan and read—
Jim: —in a list?
Frank: You betcha. Just like this:
Use a list when:
You need to make your text scannable
Paragraphs or sentences have “listable” elements
Large blocks of text can be broken into 1 or 2 sentence chunks
Jim: Neat. Those bullets summarize three sentences of your text into just three bullet points. But what about the rest of the text?
Frank: [writing]
Lists can be used in different ways all over your site. Try them in:
Your main content
Sidebars
Navigation and Headers
Go ahead and edit the rest of your text to add lists where appropriate. When you’re done, alter your XHTML so that it uses lists, too. You can use unordered and ordered lists to give you bulleted or numbered list items:
So you’ve used lists to break down some paragraphs and sentences into bullets, but what else can you do to help users scan your content? Headings are a great way to make blocks of text more scannable.
Headings reduce large blocks of text into more manageable chunks, and they announce exactly what that chunk of text is about—which lets your users decide whether they want to invest their time in reading that bit of text.
Keep practicing. The more web copy you write and edit, the better you’ll be at slimming text down and making it scannable.
Using a different font for your site can dramatically change the feel and emotion of the design. On top of that, different fonts can make your text more readable and make life easier for your users. There are two distinct categories of fonts for the Web: serif and sans-serif.
A mix of serif and sans-serif fonts can add a nice touch to pages and help separate content from headings. It also allows you to render serif fonts at a larger size and keep the body content in a sans-serif that can be safely displayed in a smaller size.
Serif fonts look like Times New Roman and are defined by the small projections—or “serifs”—that extend off the main stroke of the character.
Sans-serif means “without (sans) serif” and is composed of font families like Helvetica and Arial. Sans-serif fonts are easier to read on screen because the relatively low resolution of computer monitors makes serif fonts look blurry, especially at smaller sizes.
This doesn’t mean you can’t use serif fonts on the Web; they just need to be used properly and rendered large enough so that they can be easily read by your users.
We could, but be careful. Do you mean text size or heading level?
HTML comes out of the box with six different header levels: <h1>
through <h6>
. With no stylesheet (just the naked markup), most browsers will render <h1>
in the largest text and <h6>
in the smallest.
Remember, HTML’s a markup language and isn’t intended to convey style information. The different heading levels are used to signify importance in your content. A level one heading <h1>
is the most important heading, <h2>
is the next-most important, and so on.
When you’re marking up your sites, remember to make main headings <h1>
or <h2>
and make other sub-headings a lower heading level. This will ensure that the site is semantically correct and search engines are interpreting your content correctly. (Remember, the bots can’t actually see your design.)
You’ve got Chapter 7 under your belt, and you now know the ins and outs of writing good web content. You should be able to write organized, scannable web text. But there’s still more... keep reading!