1. CREATING AND SHAPING Web Page Design Chapter 2

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.

3. 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.

4. 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.

5. 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 www.creationguide.com/ants/bulletant-bad.html  Now look at a more effective presentation.  www.creationguide.com/ants/bulletant-good.html www.creationguide.com/ants/bulletant-good.html

6. Textual Elements  Title Bar  Make it concise, clear, and useful. Hint: skip leading articles (the, a, an) in a Web page’s title bar text.  Content  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.

7. 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.

8. 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.

9. 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.

10. Organizing Web Text  Inverted Pyramid Methodology  Place the most important information at the beginning—displayed quickly and jump out at readers. Example: www.iwon.comwww.iwon.com  Can be achieved by using headlines and hyperlinks and streamlining your text.

11. 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.

12. 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.

13. 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.

14. 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.)

15. 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!!)

16. THE END