Module 5: Writing for the Web

Time Table: 4 hours

Topic Learning Outcomes:

a. plan web pages;
b. organize and design web pages;
c. write text for web pages; and
d. write text for special kinds of web pages

Deepen!

Getting Started on Web Pages

 YouTube, Instagram, Lazada, Facebook, and WikiHow are now household terms. The
expression to google, which might have been mistaken for kiddy babble ten years ago, shows how
quickly the search engine Google has infiltrated not only our homes, but also our lexicon. Over 1.6
billion people worldwide, or nearly 24 percent of the world’s population, use the Internet
(Miniwatts). Knowing how to write for these users will give you a critical advantage in the
workplace.

Although the terms the Web (for World Wide Web, a collection of online resources) and the Internet
are often used interchangeably, they are not synonymous. The Internet, a global system of
networks, is the infrastructure on which the World Wide Web as well as other protocols, including
e-mail and instant messaging, travel. Think of the Internet as the train track and the Web as one of
the trains running on the track.

Reading Web Pages

Because of the interactive nature of the Internet, with pages that respond to user input, users read
online material differently from the way they read printed text. Where people read books and
magazines in a linear fashion from one page to the next, web readers scan pages from the top
center, then down from left to right, looking for keywords. Instead of turning pages, readers follow
links, jumping from one page to another and one site to another, wherever their interests take
them. In this way, readers control the flow of information, and no two readers read a website the
same way.

On the FAFSA home page, users needing to apply for a PIN click “Students & Parents Apply for a
PIN.” If users already have a PIN, they move to the part of the site that meets their needs at the
moment—perhaps “Make Corrections to a Processed FAFSA.” The interaction is more like a
conversation as the web page communicates with different users in different ways.

Online readers want speed and convenience. Most people find that just ten seconds is too long to
wait for a page to load. If the site glitters with animation but does not give viewers the information
they seek, they are not likely to return. Furthermore, readers prefer not to scroll horizontally (to the
right) or vertically (down) to find information.

Because of their desire to navigate quickly, readers pick up clues from one page to help them
understand the next page. As a web writer, you must be familiar with these clues and adjust your
writing to this different way of reading and accessing data.

Planning Web Pages

To write text for the Web, you need to think through the basics of planning a document: What is
your purpose? Who is your audience? Your challenge is to achieve your purpose and meet the
needs of your audience.

What Is Your Purpose?

In Module 2, you learned to determine the purpose of your writing early in the process and to use
your purpose to guide you as you made decisions about your document. Here, too, determining
your purpose is important.
What do you want to happen as a result of this document? In other words, why does your website
or web page exist? What is the reason for your post or discussion?

The purpose of most technical writing is to inform or persuade. In web writing, the purpose might
expand to include other goals, such as offering a service, defining an image, soliciting opinions,
creating a community, or entertaining people. One site informs customers about cell phone plans,
provides a service by recording minutes used, and persuades customers to purchase a
smartphone. Your bank’s website projects an image of a responsible, conservative institution.
Facebook brings people together, and YouTube entertains as well as informs.

Effective sites make their purpose clear on the home page (the first page of a website)—often as a
slogan in the heading across the top of the page.

Who Are Your Readers?

Online readers come from all over the world, with English, Chinese, Spanish, and Japanese as the
four most popular languages. The audience may include many readers looking for news headlines
on MSN.com or a single stock broker looking for Exxon Mobil’s performance in the S&P 500.

Defining the audience for your web-based project will help you get started on your writing. Who is
your target audience? Describe this audience as specifically as you can. What are the
demographics, or defining characteristics, of your audience? In other words, where do they live;
how old are they; what is their income; are they male, female, married, or single?

After you have defined your target audience, consider how you can best appeal to your audience.
Ask yourself these questions:

◾ What information does my audience need, expect, and want?

◾ What will my audience do with this information?

Some members of your audience will have the latest technology; others will not. When planning
your site, consider monitor settings, Internet connection speeds, special requirements of hand-held
devices, and browsers used by your target audience. Plan for a variety of technology setups and
test your page in different browsers (for example, Internet Explorer and Mozilla, Firefox).

Keep in mind that anyone anywhere in the world can read whatever you put on a web page. You
may think that you are selling hand tools to the residents of East Texas, but do not be surprised to
receive orders from China or Northern Ireland. Remember, the Internet is always open to anyone
with a computer and an Internet connection.
 Question to Ponder On.

Have a look on your smartphone or laptop or PC. Look at your most used or most visited website.
What draws you to visit or use this website? What kind of information do you get from that website?
Is the appearance of the website appealing? Is the website easy to navigate? Why or why not?

Deepen!

Organizing and Designing Web Pages

Now that you have a clear purpose and a good understanding of your target audience, it is time to
organize your material and design your page.

Organizing Web Pages

To begin organizing your website, use sticky notes or index cards to list everything you want to
include—no more than one item per note or card.

Group your items into similar categories, considering the importance of each idea to your users.
Place your notes on a white board or bulletin board so you can move them around until you have
an outline that works—with topics and subtopics. Common ways to organize information on a
website are by category, task, product, date/time, or department.

Once you have an outline, you can decide how to structure your website. A simple site may move
forward in a linear fashion from one page to the next, similar to a flowchart.

Other sites organize pages in a hierarchy, similar to an organizational chart. In the hierarchy,
information flows progressively from “top” to “bottom” from the home page to a second or third tier
in increasing levels of detail. Web design software such as Adobe, Dreamweaver, and Microsoft
Expression Web 3 provides tools for setting up the structure for a website.

However you organize your pages, you will need to plan for a system of hyperlinks. Hyperlinks,
also called links, are a word, phrase, or graphic used to link, or join, pages within a site or to an
external site, allowing viewers to move easily from page to page. Depending on the browser
settings, hyperlinks can be a different color, underlined, or graphical. They are activated by
scrolling over a word and/or clicking. The goal is to make information accessible in three or four
mouse clicks.

External links can enrich a subject with information from another site and reduce content on a
page. However, if you plan to use external links, you will want to inform your readers that they are
leaving your site and moving to another one. If you use an external link, make sure the link works.
It is frustrating for viewers to click on a dead link that does not take them to the page you intended.
There is no copyright infringement for providing links to other sites. However, it is illegal to provide
a link to a site representing any form of illegal activity.

Not every site makes use of external links, but every site should include a clear system of links to
take viewers to pages within the site. Without clear navigation, readers can get lost, wondering how
to get back to a page they found interesting. The table below explains some common ways to
provide internal links.
The figure above illustrates links—including navigation bars, drop-down menus, and search
features—on the home page of Georgia’s official state website.

Designing Web Pages

If users do not have a good experience the fi rst time they access a site, they may not return.
Consider usability—the ease with which an audience can access and use a site—as the top design
principle. In addition to ease of use, web pages should look attractive—uncluttered, symmetrical,
and inviting.

Use the principles discussed next when designing your website.

Header

Create a header, the banner spanning the top of a web page, to set the appropriate image and
tone for your site. A site advertising scented candles may use a photo of lit candles, pastel colors,
and a simple script font to create a relaxing scene. A site advertising sports cars, on the other
hand, might use bright colors, a photo of a red Corvette, and a bold font to evoke excitement.

Page Layout

To help readers scan for relevant information, organize information under relevant headings. If your
page is too long, divide the information into multiple shorter pages with corresponding links to
those pages. If you cannot break up the long pages, place the most important information—the
title, purpose, key navigational elements, and search features—near the top so readers see it
before scrolling vertically. Do not set up pages so visitors have to scroll horizontally.

Line Length

A shorter line length reduces eye movement needed to scan the text. The ideal line length is
approximately half the width of the screen, or between 50 and 70 characters (or 10 to 12 words)
per line.

Graphics

Graphics break up the text, attract the reader’s attention, and offer instant identification with the
purpose of the website. Use graphics to provide visual relief, to support your content and image,
and to make the site attractive.

A site focusing on the fun and challenge of a rock climbing club would not use a photo of a woman
on the side of a wall panicked at the prospect of rappelling back down.

Graphics take time to load, and too many graphics may discourage people from investigating a
site. To speed up the download time of graphics, use one of the following formats for compressing
fi les: GIF (Graphics Interchange Format), JPEG (Joint Photographic Experts Group), or PNG
(Portable Network Graphics). Use smaller logos as opposed to larger background logos.

If more detail is needed, enable users to click the picture to see the full size.

Multimedia

Many pages use animation (text or graphics that move), audio, and video to make a page more
interesting. Although the movement and audio may look and sound good, use them sparingly to
support your message. Too much movement may annoy the reader, and if the extra graphics result
in the page taking a long time to load, you may lose visitors.

Tables

Use tables to organize text and graphics. Tables give the page a uniform, clean, professional
appearance. Data can go inside cells, and one table can be nested inside another. Invisible tables
form the skeleton that holds the site together.

Borders

Use borders around the page to draw boundaries between sections or omit borders for a more
seamless look.

Fonts

Font sizes and styles affect screen legibility. Sans serif fonts are usually recommended for online
text because they look more distinct on a screen.

Avoid all capital letters and boldfaced blocks of text because these styles slow down the reader
and are the equivalent of YELLING.

As with printed text, you can emphasize important words or phrases with boldface or italics as long
as you do not go overboard. Be wary of using underlining. Most viewers associate it with links and
expect to be able to click to access another page.

Colors

Use colors to help create an inviting site. As you know, colors evoke a variety of emotional
responses. Color should reflect the site’s purpose and take into account the target audience’s
cultural associations with color. For example, red, often associated with the devil in the United
States, is the color of wealth and good luck in China. Consider, too, the color wheel and use colors
that complement one another—for example, yellow and purple, and blue and orange. You want to
keep colors to a minimum and use a neutral, white, or very dark background color with contrasting
colors for the text. Use accent colors to direct visitors to important content.

Consistency

You teach the user how to read your site by repeating certain patterns.
Repetition allows readers to anticipate the site’s structure. To achieve consistency, make sure your
pages look similar and use the same design features positioned in the same place on every page.
A company name and logo that appears in the top left corner of one page, for example, should
appear in the top left corner of every page. If the text is dark blue on a light blue background, do
not experiment, for example, by changing the scheme on another page to dark blue text on a white
background.

Accessibility

Whenever possible, follow Web Content Accessibility Guidelines (WCAG) 2.0.

These guidelines are part of the Web Accessibility Initiative (WAI). Its goal is to make web content
available to users with a wide range of disabilities, including visual and hearing impairments,
learning disabilities, cognitive and movement limitations, speech disabilities, and combinations of
disabilities.

The MyPyramid home page shown in the next figure after this text uses three vertical panels.

The middle panel uses a white background with black sans serif text of 1 through 11 words per
line. The left and right panels use blues and greens, colors that depict calmness and good health.
The pyramid logo represents the colors of the various food groups and reminds the reader of the
government-sponsored food pyramid. Each page in the site uses the same header across the top,
the same top and left navigation bars, the same search feature, and the same three-panel design.
The site’s statement about accessibility (not shown in the figure) can be found by clicking the link at
the bottom of the web page.
 Deepen!

Writing Text for the Web

In many ways, writing for the Web is similar to writing text for any other technical document. But
remember, a web page is viewed on a screen, not on an 8 ½" x 11” sheet of paper. The screen
influences all pages in important ways. Writing scannable text will help your readers find what they
need.

Strategies for All Pages

Use the strategies beginning on the next page to keep your pages organized and focused on your
audience.

Page Title

Give each page its own short, descriptive title—something visitors can read quickly in a browser
title bar or history list.

On the Federal Emergency Management (FEMA) website, for example, each page has a unique
title, such as “Plan Ahead,” “Disaster Information,” and “Apply for Assistance.” If you visit these
pages, they will be listed in the order in which they were viewed under “History” in the browser
window. FEMA and its logo appear in the upper left corner of each page, though, to tell readers
they are still on the FEMA website. If readers bookmark a page (or save to Favorites), the page
title is stored. Some search tools use page titles in their search results.

Audience

Know your target audience and write to that audience. Compare these two sentences from a job
hunting website for displaced workers:

Original: The JDW site has been set up to help displaced workers find jobs in their immediate
geographical areas whether their expertise is in construction, sales, or engineering.

Revision: If you have lost your job, we can help—no matter what your area of expertise or where
you live.

The original example talks about the website. The revised example talks directly to the reader.

Also avoid jargon unless you know your reader will understand it.

Inverted Pyramid
State important points before you provide any detailed supporting information. At the website of the
Salt Plains National Wildlife Refuge, the home page begins with what the Salt Plains Wildlife
Refuge is and why it exists. Then readers learn about the size of the salt flat, two related habitats,
and upcoming events—all in order of importance. The inverted pyramid allows viewers to see the
most important content before they scroll down the page.

Facts, Not Hype

To keep your web page as informative as possible, state the facts and avoid the hype of an
overdone sales appeal. People want information they can use.

Original: Are you sitting at home wondering when you’ll meet Prince Charming? Skin Rejuvenation
promises to restore skin scarred from acne or sun damage. Order your jar today and see how your
life changes.

Revision: Skin Rejuvenation moisturizer is easily absorbed, thereby reducing winter chafing by
15%.

Original Phrases

Avoid the web cliché—the “Click here” or “Check out this site.” A link can be easily made a
seamless part of a sentence, as the following examples show:

Original: Click here to learn how variations in temperature affect the success of gel coat
application.

Revision: Variations in temperature affect the success of gel coat application.

Standard English

Use standard English and follow rules of correct punctuation and usage.

Nothing ruins the credibility of a web page more than errors.

Scannable Text

Except when the site posts an article or a resume, say as much as you can in as few words as
possible. Your goal is to create scannable text to enable readers to locate important words and
phrases—or keywords—quickly and effortlessly. To reduce words and make your text scannable,
follow the suggestions discussed next.

Short Paragraphs

Use short paragraphs that stand out and can be quickly scanned and absorbed, usually six to eight
lines. A single, well-worded sentence can stand alone as a paragraph. See the visual relief in the
thumbnail sketch in the figure below where one longer paragraph is separated into three.
Short Sentences

While sentences can vary in length, aim for an average of 20 to 25 words per sentence. The
revised sentence below is much clearer and easier to read when it is written as two shorter
sentences.

Original: Set in the rustic Craghill Mountains near the small town of Wilcox,

Tennessee, Spring Village, conveniently located close to a transportation center, medical center,
and cultural alcove, is a caring community for seniors.

Revision: Set in the rustic Craghill Mountains near the small town of Wilcox, Tennessee, Spring
Village is a caring community for seniors. It is conveniently located close to a transportation center,
medical center, and cultural alcove.

Headings

Use short but informative headings to help readers identify topics and decide at a glance what they
want to read. Headings also provide transitions to the next topic, alerting the reader to shift from
one idea to another. For example, to help readers locate information in its web page, the
Community Orchestra provides three headings: Upcoming Performances, How to Join, and
Director’s Notes.

Paragraphs to Lists

Use bulleted lists to break up paragraphs, reduce the amount of text, and emphasize important
content. The following list of e-mail “don’ts” is easier to scan than the paragraph with the same
information.

Original: Respect your e-mail recipient’s privacy and time by not sending chain e-mails. They are
hoaxes and waste your reader’s time. It is presumptuous to send attachments or other people’s e-
mail addresses unless you have permission to do so. Sending multiple postings to people who are
not interested wastes time and takes up storage space. Finally, do not “Reply to All” unless it is
necessary.

Revision: DON’T

◾ Send chain e-mails.

◾ Send attachments or other people’s e-mail addresses unless you have permission to do so.

◾ Send multiple postings to people who are not interested.

◾ “Reply to All” unless it is necessary.

Keywords

To help search engines and your audience find your website, in approximately the first 50 words of
your text, use keywords, important words that indicate subject areas. To find useful information,
readers scan text looking for keywords and phrases. Keywords for a mythology website include
Joseph Campbell, The Hero with a Thousand Faces, myths, hero, Departure, Initiation, Return,
Call to Adventure, and Healing and Reconciliation. Which of the following versions does a better
job of including more keywords in the first 50 words?

Original: Joseph Campbell compared myths of the hero from all over the world. He found
similarities in the myths and identified 12 stages of the hero’s journey. Below are Campbell’s
stages with a short explanation. The explanations and stages are typical of the journey but may not
be found in all [50 words] myths. The stories and their plots are similar, but the characters and
circumstances differ. Campbell’s work is compelling. For more information, see his landmark book,
[75 words] The Hero with a Thousand Faces.

Revision: In his book The Hero with a Thousand Faces, Joseph Campbell identifies 12 stages in
myths of the hero’s journey. The journey takes place in three parts: hero’s Departure, Initiation into
the journey, and Return to improve society. From the Call to Adventure through Healing and
Reconciliation, the hero receives [50 words] Supernatural Aid, passes into the Darkness of the
Realm of Night. . . .

In the original version, Campbell’s book is not even mentioned until after 75 words into the
passage. The second passage is more concise, relaying significant information in every sentence.

All of these suggestions have one goal—to make information useful and accessible.

Deepen!

Special Web Pages

The Web offers a new medium for established ways of communicating. The type of writing is not
altogether new, but when the audience and medium change, good writers adapt. The result? New
avenues of writing for existing genres. Five of these adaptations are outlined next: home page,
blog, FAQ, wiki, and discussion forum.

Home Page
Think of your website as a theme park. Your park may have many areas— rides, a petting zoo,
edutainment, restaurants, and more—or a single nature trail. The home page of your website is like
the entrance to the park.

Because you want many visitors, you design an inviting entrance, one that reflects the theme and
offers basic information to help people navigate the site. Like a home page, there may be several
ways to get from one area to the next inside the park. Use the following tips when writing text for a
home page:

◾ Get your reader’s attention and announce your purpose. Use a catchy phrase and meaningful
slogan. For example, a website devoted to transferring photos and videos to DVDs might replace
its title and slogan with something more appealing, as follows:

Original: title “Photo Transfer”; slogan “We turn photos into DVDs.”

Revision: title “Keepsake Photos”; slogan “Keeping your memories safe.”

◾ Write a short introduction and conclusion. The introduction explains the purpose of your
website. The conclusion brings the page to a close. Consider the introduction and conclusion on
the Keepsake Photos site.

Introduction: “We transfer photos, 8mm fi lm, and video into quality DVDs.”

Conclusion: “We’d like to help you preserve your special memories.” (after explaining about the
company, its guarantee, and its contact information)

◾ Consider links to short online articles. You may want to include Frequently Asked Questions
(FAQs) and Tips on your website. On the Keepsake Photos site, the FAQ might answer questions
about how to mail the photos or videos and Tips might tell readers how to safeguard their photos
and videos.

◾ Include essential information. A home page should include the following information:

• Contact information telling readers how to contact the owner of the site—e-mail, phone number,
and/or street address

• A logo or graphic that helps “brand” the site, creating product and company recognition at a
glance

• An About section describing the organization and providing some of its history

• A system of navigation to help readers find their way around the site

• A date (usually at the bottom) showing the last time the site was updated

• Any disclaimers or privacy/security statements—what kind of information may be collected by the

site and what monitoring systems may be in use to track information
The figure below shows the home page of Hold Fast Custom Builders, a small construction
business. The page has the characteristics of an effective home page: a logo, a slogan, and
essential information.

Blogs

Similar to a journal or diary, a blog (short for weblog) is a website with periodic commentary or
news posted in reverse chronological order. A blogger is usually an individual with special
knowledge or passion about a topic.
Because viewers can respond, a blog is not only a source of information, but also an online
community. In addition, a blog may include links and graphics.

There are as many blogs as there are content areas. A doctor posts her administrative struggles, a
news reporter posts commentaries about the day’s events, and a businessperson posts progress
on the development of a new product. The writing style used on a blog is informal. As with any web
material, blogs should be read with a critical eye. Some blog “conversations” provide current,
credible, and insightful news. Others merely vent and ramble.

Many sites host blogs, including Livejournal.com, blogger.com, and Techcrunch.com, along with
major search engines such as MSN and Yahoo!

To post a credible blog,

◾ Write blogs on topics you know about or about which you are passionate.

◾ Post regularly so that you build up a following, but do not overwhelm readers with too many
posts.

◾ Create a short name that is easy to remember.

◾ Communicate with people on other blogs.

◾ Post meaningful, accurate blogs.

◾ Make your blog site attractive and interesting.

◾ Let your personality come through.

◾ Use RSS (Really Simple Syndication), standardized web feed formats to send the content of
your blog directly to your readers. By using RSS, your readers will not have to visit your website to
get updates.

FAQ

FAQ, pronounced fak or f-a-q, is an acronym for Frequently Asked Question (and Frequently
Answered Question). A FAQ is what its name implies— questions asked often enough to warrant
publishing so that other people can benefit from the answers. The assumption is that if a sufficient
number of people have asked these questions, the questions must be common enough that others
will have the questions too. FAQs are found all over the Internet.

There is even an archive of FAQs at www.faqs.org/faqs.

You may want to use a FAQ for a website. Or you can post a FAQ on Yahoo!Answers, a site that
hosts a variety of FAQs maintained periodically by authorities in various fields. If you routinely
respond to customer service calls, written FAQs can help you answer questions about your
product.
To compile a FAQ,

◾ Determine the most frequently asked questions. What do your readers ask? What do your
customers ask? What do they want to know?

◾ Ask the question the way your readers will ask the question. Use the readers’ terms—the
readers’ vocabulary.

◾ Set up a consistent format to set questions apart from the answers— perhaps boldfacing
questions and providing adequate white space between questions and answers.

◾ Keep the answers relatively short. One or two sentences is preferable, but no more than a
couple of paragraphs. Embed links to other pages on your site or to external sites for more detailed
information.

◾ Update your FAQ periodically to keep the information current.

◾ Organize questions in order of importance or in chronological order for your reader.

◾ Proofread for clarity and correctness to keep your FAQ professional.

◾ On a website, place the FAQ where your readers can easily find it—in links on the side, at the
bottom, near Help items, or close to information about which readers may be curious.

Wikis

A wiki uses special software that allows a number of users to collaboratively author web pages,
usually according to a set of guidelines. Some wikis, such as Wikipedia and BookShelved, provide
open access to anyone. Other wikis are closed, and only people granted access can contribute.
Medpedia, for example, is a medical wiki that allows only professionals to edit content. A wiki can
foster creative collaboration for a process, such as programming code. Writers use wikis, too, to
post articles and allow other writers to edit them.

If you are interested in participating in a wiki,

◾ Read several articles so you know how the text is written and edited.

◾ Become familiar with the process for editing articles in the wiki.

◾ Keep your tone polite and civil—even when you disagree.

◾ Keep the tone neutral and the information factual.

◾ Work toward consensus as you edit.

◾ Include references for information from other sources.

Discussion Forums

Operating like an electronic bulletin board, a discussion forum is a place where users can discuss
items of interest or get specific questions answered.

On the Apple website, for example, a discussion forum attempts to answer questions about Apple
products and applications. A person who is having difficulty downloading iTunes might post a
question and receive responses through this forum. Online discussion forums exist for nearly every
topic imaginable—the stock market, art, architecture, business, family, science, and more. The
major news networks post online discussion forums. In addition, forums can be found on Google
Groups and are an integral part of online classes. Look for a discussion forum that meets your
needs.

To interact with a discussion forum,

◾ Read other posts to see how people generally respond.

◾ Provide as much information as possible when posting a concern.

◾ Provide accurate information when responding to a concern.

◾ Think critically about others’ responses. Not every response is credible.

◾ Be concise.

Whatever kind of text you write for the Web, keep in mind two guiding principles—the needs of
your readers and the limited space on the screen. To keep readers engaged, design attractive sites
that support your message and deliver valuable information. To help readers find the information
they need, write text that can be scanned quickly. The tips below are sound advice for any
technical document, but they are imperative for the web writer. Strive for a successful technical
style by using:

◾ Concise wording.

◾ Short paragraphs.

◾ An inverted pyramid (main idea first).

◾ Meaningful headings and titles.

◾ Bulleted lists.

◾ Standard English.