Writing for the Web

Image of a person typing at a computer

You have one chance to make a first impression—on every page of your website. Be sure your content:

  • Supports your mission.
  • Helps your users find what they need.
  • Encourages web visitors to become congregational visitors.

Tips

People don't read webpages, they scan. Therefore:

  • Put the most important ideas first. Don't start with "happy talk," greetings, and introductions. Get to the point. Consider the F-pattern—people typically scan a page across the top and down the left.
  • Cover one idea per paragraph. Words that are bold, italicized, or linked will jump out when scanned, so use that to your advantage—but don't overdo it: bolding and linking large chunks of text reduces reading comprehension.
  • Use action words and omit fluff. Edit until every word counts.
  • Use bulleted and numbered lists. They are easier to scan than blocks of text.
  • Use headings to separate the page into topical sections. The reader can scan down to the section of interest.

Keep Focus and Avoid Distractions in Your Web Writing

magnifying glass looking at several small photos

Focus

When writing for the web, or preparing other written materials for your website, be concise. Write tersely. Cut your content by half and then by half again. Avoid stating the obvious. Forget the long introductions. Avoid breezy and verbose greetings.

Web usability expert Jakob Nielsen reports on a study that the measured usability of a typical website written in traditional "promotional style" scored:

  • 58% higher in measured usability when it was written concisely
  • 47% higher when the text was scannable, and
  • 27% higher when it was written in an objective style.

Nielsen states that "Combining these three changes into a single site that was concise, scannable, and objective at the same time resulted in 124% higher measured usability."

Distractions

Many kinds of web content distract or turn away visitors. These include:

  • Long, wordy, run-on paragraphs
  • "Welcome to…" and other lengthy introductions
  • Broken links
  • Poorly written content
  • Inconsistent navigation
  • Inconsistent user interface

Don't use 'insider' language. Keep web pages focused on your key user audiences and concentrate on meeting their needs. Segregate your public and internal content.

Don't over-emphasize. Modify text sparingly. Too much emphasis of various elements, through use of bold and italics, affects readability (and doesn't work the way you might hope to draw a reader's attention). Use a consistent style throughout.

Minimize page size. Avoid content that significantly increases page loading time, e.g., large graphics, many small graphics on one page, or multimedia elements.

Be obvious. Don't "make your visitors think." What and how to do something should be clear and obvious.

Avoid instructions. Delete extraneous instructions like, "To use this site…", "Fill in the form below…", "Click the link", "The links below will give you more information", and so forth. Make the user's task clear and obvious.

Use acronyms carefully. Spell out an acronym the first time you use it on any page. Do not use acronyms in headings. Don't assume knowledge on the part of your user.

Use blank space. Blank space is the reader's friend and helps achieve readability and usability. Chunk long paragraphs into shorter ideas.

Do not use underscores. Underlined text indicates a hyperlink.

Use "related content" judiciously. Where linking to "related content," the links should be directly relevant to the content of the page. Don't overload your links section—it diminishes the impact of your material and its presentation. Important information should always be included in the page content area; see Jakob Nielson's Banner Blindness for more on that.

Make Focused Pages for Search Engine Optimization

Person writing noted about Seach Engine Optimization

Separating your content into shorter pages will allow you to improve the accuracy of your page titles and the relevancy of your page among other search results.

For example, a page titled "Resources" with a subtitle such as "Books for Anti-Discrimination Work" will not rank as highly as a page titled, "Books for Anti-Discrimination Work" on searches for any of those words.

Shorter pages will also help you get important information "above the fold."

That said, it's also true that longer content tends to rank higher in Google’s search results (Search Engine Ranking)—aim for 1000+ words of "meaty, useful content" on a single topic.

Make Page Titles Accurate & Precise for Search Engine Optimization

dart in the center of a bullseye

Each page on your site should have exactly one title, and it should go in TITLE field.

The first 11 characters of each title ought to give a hint about the page content, so that when people scan past it among a lot of other titles (in a search results page, for example), it's immediately obvious what the page is about.

Front-loading important words will also help users: the top of their browser's screen displays the beginning of the title for each page they have open. If they decide to bookmark your page, a short & meaningful title will help them avoid unnecessary editing on your behalf.

Keep your titles as short as you can while keeping meaning: shorter titles are easier for people to scan, and longer titles will get cut off in search engine results anyway.

You can check a site's page titles and meta description tags (if present) in Google with the "site:" option. That's the word "site", a colon, and the domain, e.g. site:www.uua.org.

Make Web Links Meaningful

Graphic with question mark turning into a lightbulb

Web links catch the eye (or ear) and tell a user a lot about the nature of your content; be sure to maximize their potential and avoid user confusion by following these tips.

For more, go to Tips for writing great links and learn about dirty magnets.

Avoid using language that reminds people they're on a website. (Example: "Click here"...) When reading a book, the author does not tell you to turn the page; the same principle applies to the Web.

To avoid text referring to the medium:

  • Indicate the nature of the link in your phrasing. Help the user predict what they will see when they click on the link.
  • Only add links to pages when content is complete.

“Learn More” Links: You Can Do Better

Summary: The phrase ‘Learn More’ is increasingly used as a crutch for link labels. But the text has poor information scent and is bad for accessibility. With a little effort, transform this filler copy into descriptive labels that help users confidently predict what the next page will be.

Article by by Katie Sherwin

Do not use the same link text over and over. People will scan the links on your page. Give them meaningful information instead of a repetitive list of unhelpful phrases like, "Read more... Read more.... Read more" or "Click here.... Click here... Click here."

Use English for link text. Do not use plain URLs as link text; instead, use human-friendly text. The complete URL (http://www.etc...) is "machine-language" and is often not informative about the content behind the link.

Use the title of the page being linked to as the text for the link. The reader deserves immediate reassurance that the link and the page delivered are actually related. The title of the page is also usually informative about what the reader is likely to see when they get to that page, helping them make an informed decision about whether it's worth their time to click the link.

Put links at the end of phrases. When you put the link at the beginning of the sentence, the reader has to complete the phrase or sentence to figure out if the link is worth investigating, and then backtrack visually to find the link.

Keep links relevant. Links on a single page should be related to one another to avoid distractions from your content. If necessary, you can direct visitors to additional information by using links in a "related content" area.

Do not open new browser windows. Leave the choice about opening a new browser window in the hands of the user (right-clicking on any link gives the option of opening the link in a new window). Opening new windows hurts accessibility and usability.

Samples

Linking to Non-Standard Web Content (PDF, Video, etc.)

It is generally preferred that web pages be offered in HTML format, since those are the most accessible and cross-platform compatible. PDF files can also be accessible, although since they require additional software to view and aren't very friendly for screen-reading, careful consideration should be given to the type and number of documents offered in this format. Learn more about accessible PDFs.

Links should indicate that a non-standard web page will be opened (since a person can browse a page by looking only at the links on that page, this information should be included in the link itself): Sample Link (Word) (PDF). If your document is long and might take a while to download, you should indicate a page count, for instance: (PowerPoint, 7 pages).

Links to sites with audio or video must also be identified; users should not be surprised by sound or motion that starts unexpectedly.

Format Identification Key

For accessibility reasons, the Unitarian Universalist Association (UUA) requires that all documents on UUA.org must be delivered in HTML or accessible PDF format. This means that any Word, Excel, etc. documents must include a PDF or HTML alternative.

Organizing the Content of Your Website

Image of filing organizers

Well-organized website content improves usability and search engine optimization, which reduces user frustration and fosters feelings of goodwill among your site's visitors.

Scannable Content

When measuring a website's usability, these "markup" factors are highly influential and have meaning:

  • Headings
  • Bold text
  • Bulleted lists
  • Captions
  • Topic sentences

It’s not about how things look; it’s about how you’re conveying information to all users (including those using alternative browsing methods—on mobile platforms or for accessibility—or those who are using search engines or quickly scanning a page).

Page Titles and Headers

Each page title (which appears in the code, and at the top of the page within

tags) should make sense even if the reader sees it entirely out of context, as in a web search result.

Titles and headings should accurately describe the content of the text to follow. They should not be mysterious or overly wordy. Do not include links within headers.

Page content should be organized with the use of headings in HTML header tags (

,

, etc.). This will ensure that all browsers (including those for the visually impaired) will correctly interpret the content of the page, and will also properly order information for search engine optimization.

Proper use of section headers will help your website have a consistent look and feel, and will aid your users in quickly and easily parsing the content of each page.

Introduce Your Topic

If your content is specific to a particular audience, identify that group as quickly as possible to attract the audience you want and let others continue their search elsewhere.

Do not assume that your reader has arrived at your page through any particular path. Be sure the purpose of the page is clear, and provide links, if necessary, to more (or less) advanced materials.

Group Related Information

When similar content is scattered throughout your site instead of together on the same page or group of pages, users may have trouble finding all the details they need, or knowing whether they've exhausted your resources on the topic.

Keeping like with like also helps prevent the duplication of materials, and eases the task of maintaining current information.

Characteristics of Well-Organized Content

  • Content is organized logically, based on the users' needs, not the organization's.
  • Content that is most-often used and most important is kept or linked near the top of the hierarchy tree.
  • Users are not forced to scroll to discern the content's organization.
  • Bulleted lists are used for non-procedural lists; ordered or numbered lists for procedural tasks. Lists let folks know at a glance that you’re listing several things. People hearing the page will even get helpful information like “list of 9 items.” The indented text and additional white space also helps people quickly scan the page.
  • Intra-page links (anchors) are not used as they diminish the impact of information. Usability and search engine optimization are both improved with several shorter pages rather than a single long page.
  • Organization-centric information (about us) is separated from task-oriented information (how to).
  • "Contact Us" information is maintained in a single central location for the organization and is linked from relevant places.

Section Headings on Web Pages

person creating an org chart using a sharpie

Headers, lists, bold text, and other formatting conveys meaning and content structure in addition to changing the style of text on our web pages.

We should do everything in our power to make sure that our attention to appearance does not interfere with people’s ability to understand that meaning and structure.

Headings (the title is the page's first heading, or h1, followed by h2, h3, etc.) are one of the most important tools we have for helping people find, read, and understand the information on a page.

Impact of Headers

Headers impact:

  • Accessibility. Screen readers let people skip through a page’s content header-by-header. Unexpected and out-of-place markup interrupts that flow.
  • Usability. The consistent size and style of headers across our site lets people quickly scan a page’s content and understand its structure and meaning.
  • SEO (search engine optimization). Headers help search engines understand the information on our pages, and accurately deliver them to people performing web searches.

Use Meaningful Headers on Your Web Pages

Use brief, meaningful headers to allow your reader to scan a page quickly for the information they need. The use of "scanning" is one of the major ways web readers differ from print readers.

Use Meaningful Headings on Your Web Pages

Guidelines for Good Headings

Heading Formats Are for Headings Only

Check that headings are actually titles for structural sections of the page and are not being used to format other content.

For any text that is formatted as a heading just to make it larger, reset its formatting to normal.

Descend in Strict Order

Page titles are always Heading 1 format, so your first header choice is always Heading 2.

Subsequent headings occur in strictly descending order. If a compelling argument can be made that the skipping of header levels more accurately conveys a correct understanding of the overall structure of the document, then an exception may be considered. No exception shall be made for aesthetic reasons.

​Top-level headings (the main sections of your page) are therefore Heading 2s. Subsections of your page are Heading 3s. Sub-subsections, etc., are Heading 4s, Heading 5s, and Heading 6s.

Use Headings to Introduce Sections

All text introducing a section should use a heading format.

Hints that it ought to be a header: you've made it bold, or used capitalization or punctuation as you would in a title.

Use Title Punctuation

Headings are not part of a sentence, so they should not include a colon (:) at the end. Some headings (like for FAQs) may be punctuated and capitalized as questions, but scannability is best when headings are brief and meaningful, so sentence-length headers should be avoided when possible.

Do Not Link Headings

Headings should not be links. Rework your content to put the link in the text that follows the header.

Do Not Bold Headings

Our headings look as they do because of the styles that we've applied across the whole site. Whether you like them or not, their consistency helps people navigate and use our site more quickly and easily.

Example Headings

Create your headers as if you were preparing an outline. They should make sense even without content on the page. Here's an example showing the HTML tags that occur behind the scenes.

<H1>PAGE TITLE: General Assembly</H1> [pages may only have one H1]

  • <H2>General Assembly Boston 2015</H2>

    • <H3>Registration</H3>

      • <H4>Adult Registration</H4>

      • <H4>Youth Registration</H4>

        • <H5>Scholarships</H5>
          • <H6>Scholarship Restrictions</H6>
    • <H3>Transportation</H3>

  • <H2>Past General Assemblies<H2>

Other Ways to Make Content Stand Out

To call attention to a particular piece of content without misusing header markup, consider these options:

  • Add an image or textual "aside” to the content area.
  • Bold or linked text (in small amounts), italicized text, and bulleted lists all effectively call out information.
  • Make a new page for the important information, so that everything critical can be placed “above the fold.”

Writing for the Web

Do you write content for a Unitarian Universalist (UU) website? Would you like to make your pages clearer, more helpful, and more engaging?

Based on usability research, Rev. Susanne Intriligator developed these videos to help you craft pages that respond to the needs and wants of today's web users.


Part 1: Writing for the Web Is Fundamentally Different

More On Writing for the Web


Part 2: Developing User Personas

More on User Personas


Part 3: Structure, Voice, Verbs and Images

More on Structure, Voice, Verbs and Images