Transcript Creating and Shaping

CREATING AND SHAPING
Web Page Design
Chapter 2
Text Matters



Even though when thinking about building Web pages
people think of design first, the heart of every Web
page is content. After all, people build Web pages
because they have a message to share.
To be successful, your Web page must provide
information that captures viewers’ attention;
otherwise, they won’t stay but a couple of seconds
and probably won’t return in the future.
Even if you’re a good writer, online text varies in
many ways from printed text.
Text Matters (cont.)

In 2000, webreview.com conducted an informal poll
in which readers ranked their general impression of
the quality of writing found on the Internet. Of
those responding:




55% ranked the quality as fair.
22% ranked the quality as poor.
21% ranked the quality as good.
Only 1% ranked the quality as excellent.
Reader’s Approach

Reading a block of text online takes approximately
25% longer than reading the same text printed on
paper. Online users have responded to this
slowdown by scanning Web page text instead of
reading every word. Keep this in mind when
creating content for your Web page.
Scannability

When scanning a page, the reader is looking for
key words that grab their attention. Consider the
following example of an ineffective presentation of
information.
 www.creationguide.com/ants/bulletant-bad.html

Now look at a more effective presentation.
 www.creationguide.com/ants/bulletant-good.html
Textual Elements

Title Bar


Content


Make it concise, clear, and useful. Hint: skip leading articles
(the, a, an) in a Web page’s title bar text.
Should be clear, brief, easy to scan, informative, timely, and
grammatically correct.
Hyperlinks

Provide form and clarity to a group of Web pages by
linking your home page to areas that contain specific
related information. Should be clear, consistent, and
appropriately placed.
Textual Elements (cont.)

Logos, Graphical Text, WordArt
 Can
be used to add a professional look. Helps your
Web site appear interrelated so that users can clearly
see they are still in the realm of your Web site even as
they click from page to page. Also used for
consistency.

Forms and Menu Items
 Key
is clarity. Users must know what to select, how to
enter text in a form’s boxes, and which action they
should perform next.
Textual Elements (cont.)

Plain-Text Navigational Options


If using graphical hyperlinks, it is recommended that
navigation hyperlinks be displayed as plain text also.
Useful because some viewers turn off their browser’s
graphics capabilities to expedite Web page downloads.
Date or “Last Modified” Information

Can be a small line located near the bottom of your page,
or if updated info. is one of your page’s main selling points,
make it much more noticeable by placing it higher on your
page or nearer the “prime” upper left area.
Writing for the Web

Good Web writing shares some basic similarities
with well-written printed text. It should be clear,
grammatical, well-formulated, and written for a
specific audience. But there are some unique
considerations that don’t arise when writing for
other mediums, such as:
 Web
pages are nonlinear. Users don’t methodically
read through a Web page like they would a novel.
Instead, Web surfers scan a page, read a few lines of
text, click a link, check out a picture, etc.
Organizing Web Text

Inverted Pyramid Methodology
 Place
the most important information at the
beginning—displayed quickly and jump out at readers.
 Example:
 Can
www.iwon.com
be achieved by using headlines and hyperlinks
and streamlining your text.
Organizing Web Text (cont.)

Brainstorm
Jot down every concept you want to include in your Web
site or page.
 Write a keyword next to each topic.
 Review each keyword, and determine which need to be
headings and which should be hyperlinks. A heading calls
attention to a brief amount of information on an existing
page; in contrast, a hyperlink indicates you have enough
related text to create a separate Web page.


Reading online is more arduous than reading printed
text. Also, millions of Web pages are also vying for
the users’ time. So, keywords are extremely important.
Organizing Web Text (cont.)

The Shape of Body Text
 Formulate
your message in rough draft form. (Use
inverted pyramid style.)
 Keep in mind that readers will scan your page before
reading your paragraphs.
Organizing Web Text (cont.)

Keep these guidelines in mind as you write:
 Introduce
one idea per paragraph.
 Keep sentences short without dumbing down.
 Use simple sentence structures.
 Think about how you can highlight keywords later.
 Limit paragraphs to approximately 75 words or less.
 Use bulleted lists whenever possible.
Organizing Web Text (cont.)

Guidelines (cont.)
Use numbered lists only when presenting a series of steps.
 Insert headings and subheadings to break up text and
highlight key points.
 Keep headlines simple and direct; choose meaningful over
clever wording.
 Ensure that the hierarchy of headings is clear.
 Separate paragraphs within a section by using white space.
 Avoid having too many hyperlinks within paragraphs unless
they are extremely important to your content. (Keep in mind
that generally, hyperlinks should be used to aid navigation.)

Effective Writing
for an Online Audience

Now comes polishing and streamlining your text.
Strong sentences—pack as much meaning into each word or
clause as possible.
 Conciseness—look at each word to make sure the text
implements the following techniques:






Precise words—clear, easily understood words.
Strong verbs—use short, solid verbs.
Active voice—show who or what performs the action.
Clear antecedents—replace all unclear pronouns with specific text.
Spelling and grammar—always run your spelling checker…then print
it out and read it aloud. (ALMOST NO OTHER WEB SITE DESIGN
ERROR ERODES YOUR CREDIBILITY FASTER THAN MISSPELLINGS AND
INCORRECT GRAMMAR!!)
THE END