Chapter 13

The Elements of Web Page Style

• Content Is King: Notes About Writing
  • Spelling, Grammar, and Other Strangers
  • More Tips for Righteous Writing
• The Overall Organization of Your Web Pages
  • The One-Track Web Page: Keep Pages To a Single Topic
  • Use Your Home Page To Tie Everything Together
  • Use a Consistent Layout
• Organization and Layout Hints for Individual Pages
  • Elements To Include in Each Page
  • Make Your Readers' Lives Easier
• Guidance For Using Graphics
• Link Lessons: Keeping Your Links in the Pink
• The Least You Need to Know

The least you can do is look respectable--Mom

Okay, that's it; the show's over. Our HTML box is now empty and all the shiny Web page baubles, bangles, and bric-a-brac have been brought out for your consideration. It's true: your HTML education is over, finito, sayonara, done like dinner. You know it all. Been there, done that.

Well, so now what? Ah, now it's time for a bit of HTML finishing school, because you may be able to dress up your Web pages, but can you take them anywhere? That is, you may have a Web page for people to read, but is it a readable Web page? Will Web wanderers take one look at your page, say "Yuck!", and click on the nearest link to get out of there, or will they stay awhile and check out what you have to say? Is your site a one-night surf, or will people add your page to their list of bookmarks?

My goal in this chapter is to show you there's a fine line between filler and killer, between "Trash it!" and "Smash hit!", and to show you how to end up on the positive side of that equation. To that end, I'll give you a few style suggestions that'll help you put your best Web page foot forward.

Content Is King: Notes About Writing

Most of the hubbub and hoopla surrounding the Web these days focuses on gorgeous graphics, fancy fonts, and other stylistic considerations. And we're just now starting to see new innovations that will make Web pages truly interactive (like being able to, say, play a game of Hangman right on the page; more about all this in Chapter 15).

But to the people who lust for flashy images and other eye candy, and to the pie-in-the-sky types who yearn for the Web's hands-on future, I have one thing to say: It's the content, stupid! For now and the foreseeable future, at least, this is the central fact of Web-page publishing, and it often gets obscured behind all the hype.

And, unless you're an artist or a musician or some other right-brain type, content means text. The vast majority of Web pages are written documents that rely on words and phrases for impact. So it makes sense, then, to put most of your page-production efforts into your writing. Sure, you'll spend lots of time fine-tuning your HTML codes to get things laid out just so, or tweaking your images, or scouring the Web for "hot links" to put on your page, but you should direct the majority of your publishing time towards polishing your prose.

That isn't to say, however, that you need to devote your pages to earth-shattering topics composed with a professional writer's savoir-faire. Many of the Web's self-styled "style gurus" complain that most pages are too trivial and amateurish. Humbug! These ivory tower, hipper-than-thou types are completely missing the point of publishing on the Web. They seem to think the Web is just a slightly different form of book and magazine publishing, where only a select few deserve to be in print. Nothing could be further from the truth! With the Web, anybody (that is, anybody with the patience to muddle through this HTML stuff) can get published and say what they want to the world.

In other words, the Web has opened up a whole new world of publishing opportunities, and we're in "anything goes" territory. So when I say, "Content is king," I mean you need to think carefully about what you want to say and make your page a unique experience. If you're putting up a page for a company, the page should reflect the company's philosophies, target audience, and central message. If you're putting up a personal home page, put the emphasis on the personal:

Write about topics that interest you.  Heck, if you are not interested in what you're writing about, I guarantee your readers won't be interested, either.

Write with passion.  If the topic you're scribbling about turns your crank, let everyone know. Shout from the rooftops that you love this stuff-you think it's the greatest thing since they started putting "Mute" buttons on TV remotes.

Write in your own voice.  The best home pages act as mirrors that show visitors at least an inkling of the authors' inner workings. And the sure-fire way to make your page a reflection of yourself is to write the way you talk. If you say "gotta" in conversation, go ahead and say "gotta" in your page. If you say "I'll do such-and-such" to your friends, don't say "I will do such-and-such" to your readers. Everybody-amateurs and professional scribes alike-has a unique writing voice; find yours and use it unabashedly.

Spelling, Grammar, and Other Strangers

Having said all that, however, I'm not proposing Web anarchy. It's not enough to just slap up some text willy-nilly, or foist your stream-of-consciousness brain dumps on unsuspecting (and probably uninterested) Web surfers. You need to shoot for certain minimum levels of quality if you hope to hold people's attention (and get them to come back for more).

For starters, you need to take to heart the old axiom that "The essence of writing is rewriting." Few of us ever say exactly what we want, the way we want, in a first draft. Before putting a page on the Web, reread it a few times (at least once out loud, if you don't feel too silly doing it) to see if things flow the way you want. Put yourself in your reader's shoes. Will all this rambling make sense to him or her? Is this an enjoyable read, or is it drudgery?

Above all, check and recheck your spelling (better yet, run the text through a spell checker, if you have one). A botched word or two won't ruin a page but, if nothing else, the gaffes will distract your reader's attention. And, in the worst case, if your page is riddled with spelling blunders, your site will remain an eternally unpopular Web wallflower.
 

Grammar ranks right up there with root canals and tax audits on most people's "Top Ten Most Unpleasant Things" list. And it's no wonder: all those dangling participles, passive voices, and split infinitives. One look at that stuff and the usual reaction is "Yeah, well, split this!" Happily, you don't need to be a gung-ho grammarian to put up a successful Web page. As long as your sentences make sense and your thoughts proceed in a semi-logical order, you'll be fine. Besides, most people's speech is reasonably grammatical, so if you model your writing after your speech patterns, you'll come pretty close.

I should note, however, that this write-the-way-you-talk school of composition does have a few drawbacks. For one thing, most people get annoyed having to slog through too many words written in a "street" style; for example, writing "cuz" instead of "because," "U" instead of "you," or "dudz" instead of "dudes." Once in a while is okay, but a page full of that stuff will rile even the gentlest soul. Also, avoid "train of thought" devices such as "um," "uh," or the three-dot ellipsis thing…

More Tips for Righteous Writing

Thanks to the Web's open, inclusive nature and its grass-roots appeal, there are, overall, few prescriptions you need to follow when writing your page. Besides the ideas we've talked about so far, here are a few other stylistic admonishments to bear in mind:

Keep exclamation marks to a minimum!  Although I told you earlier to write with passion, keep an eye out for extraneous exclamation marks! Yeah, you may be excited but, believe me, exclamation marks get old in a hurry! See?! They make you sound so darned perky! Stop!

DON'T SHOUT!  Many Web spinners add emphasis to their epistles by using UPPERCASE LETTERS. This isn't bad in itself, but please use uppercase sparingly. An entire page written in capital letters feels like you're shouting, WHICH IS OKAY FOR A USED-CAR SALESMAN ON LATE-NIGHT TV, but it is inappropriate in the more sedate world of web-page prose. Unless you think most of your readers will be using a non-graphical browser, use italics to emphasize important words or phrases.

Avoid excessive font formatting.  Speaking of italics, it's a good idea to go easy on those HTML tags that let you play around with the formatting of your text (as described in Chapter 5). Bold, italics, and typewriter text have their uses, but overusing them diminishes their impact and can make a page tough to read. And I said it before (back in Chapter 10, if you're keeping score), but I'll say it again: Don't use Netscape's <BLINK> tag under any circumstances.

Be good, be brief, begone.  These are the "three B's" of any successful presentation. Being good means writing in clear, understandable prose that isn't marred by sloppy spelling or flagrant grammar violations. Also, if you use facts or statistics, cite the appropriate references to placate the doubting Thomases who'll want to check things for themselves. Being brief means getting right to the point without indulging in a rambling preamble. Always assume your reader is impatiently surfing through a stack of sites and has no time or patience for verbosity. State your business and then practice the third "B": Begone!

The Overall Organization of Your Web Pages

Now turn your attention to some ideas for getting (and keeping) your Web page affairs in order. You need to bear in mind, at all times, that the World Wide Web is all about navigation. Heck, half the fun comes from just surfing page to page via hypertext links. Since you've probably been having so much fun with this HTML stuff that you've created multiple pages for yourself(!), you can give the same navigational thrill to your readers. All you need to do is organize your pages appropriately and give visitors some way of getting from one page to the next.

What do I mean by organizing your pages "appropriately"? Well, there are two things to look at:

• How you split up the topics you talk about
• How many total documents you have

The One-Track Web Page: Keep Pages To a Single Topic

If there's one cardinal rule in Web-site organization, it's this: one topic, one page. Cramming a number of disparate topics into a single page is not the way to go. For one thing, it's wasteful because a reader may be interested in only one of the topics, but they still have to load the entire page. It can also be confusing to read. If you have, say, some insights into metallurgy and some fascinating ideas about Chia Pets, tossing them together in a single page is just silly. Make each of your pages stand on its own by dedicating a separate page for each topic. In the long run, your readers will be eternally thankful.

There's an exception to this one page, one topic rule for the terminally verbose: if your topic is a particularly long one, you'll end up with a correspondingly long page. Why is that a problem? Well, lengthy Web pages have lots of disadvantages:

• Large files can take forever to load, especially for visitors accessing the Web from a slow link. (This becomes even worse if the page is full of images.) If loading the page takes too long, most people aren't likely to wait around for the cobwebs to start forming; they're more likely to abandon you and head somewhere else.
• Nobody likes scrolling through endless screens of text. Pages with more than three or four screenfuls of text are hard to navigate and tend to be confusing to the reader.

• If you have navigation links at the top and bottom of the page (which I'll talk about later on), they won't be visible most of the time if the page is long.

To avoid these pitfalls, consider dividing large topics into smaller subtopics and assigning each one a separate page. Make sure you include links in each page that make it easy for the reader to follow the topic sequentially (more on this later).

Use Your Home Page To Tie Everything Together

Most people will begin the tour of your pages at your home page. With this in mind, you should turn your home page into a sort of electronic launch pad that gives the surfer easy access to all your stuff. Generally, that means peppering your home page with links to all your topics. For example, check out the Yahoo home page shown below. Yahoo is a giant subject catalogue of Web locations, so the home page consists mostly of links that take you to the various subject areas (Arts, Business and Economy, and so on).

Try to set up your home page so it makes sense to newcomers. Yahoo is known as a subject catalogue of sites, so the subject-related links on their home page make immediate sense. Most people's home pages aren't quite so straightforward. In this case, you'll want to include a reasonable description of each link so visitors know what to expect. For example, my home page contains just a simple introduction and then a bunch of links. As you can see below, I've included a short description beside each link that lets the reader know where the link will transport them.

Yahoo's home page is mostly links to various subject areas.

You'll usually want to include descriptions beside your homepage links.

Use a Consistent Layout

Another thing to keep in mind when designing your pages is consistency. When folks are furiously clicking on links, they don't often know immediately where they've ended up. If you use a consistent look throughout your pages, then everyone will know that they're still on your home turf. Here are some ideas you can use to achieve a consistent look:

• If you have a logo or other image that identifies your site, plant a copy on each of your pages. Or, if you'd prefer to tailor your graphics to each page, at least put the image in the same place on each page.
• Preface your page titles with a consistent phrase. For example, "Jim Bob's Home Page: Why I Love Zima," or "Alphonse's CyberHome: The BeDazzler Page."
• Use the same background color or image on all your pages.
• If you use links to help people navigate among your pages, put the links in the same place on each page.
• Use consistent sizes for your headings. For example, if your home page uses an <H1> tag for the main heading and <H3> tags for subsequent headings, use these tags the same way on all your pages.

The Yahoo site provides a nice example of a consistent look and feel. For example, check out the next two figures. As you can see, the subject areas are completely different: the first figure shows Yahoo's HTML links and the second figure shows Yahoo's Karaoke links. (Karaoke-haters will note with relief that there are only three links here. This is, hopefully, a sign of Karaoke's imminent-and long overdue-demise.) However, the page layout is basically the same in both cases.

Yahoo's index of HTML links.

Yahoo's index of Karaoke links. Note the consistent layout between the two pages.

Organization and Layout Hints for Individual Pages

Once you get the forest of your Web pages in reasonable shape, it's time to start thinking about the trees, or the individual pages. The next few sections give you a few pointers for putting together perfect pages.

Elements To Include in Each Page

For each of your Web pages, the bulk of the content that appears will be determined by the overall subject of the page. If you're talking about Play-Doh, for example, most of your text and images will be Play-Doh related. But there are a few elements that you should include in all your pages, no matter what the subject matter:

A title  A Web site without page titles is like a cocktail party without "Hi! My Name Is…" tags.

A main heading  Nobody wants to scour a large chunk of a page to determine what it's all about. Instead, include a descriptive, large heading (<H1> or <H2>) at the top of the page to give your readers the instant feedback they need. In some cases, a short, introductory paragraph below the heading is also a good idea.

A "signature"  If you're going on the Web, there's no point in being shy. People appreciate knowing who created a page, so you should always "sign" your work. You don't need anything fancy: just your name and your e-mail address will do. Many people also include their company name, address, phone number, and fax number.

Copyright info  If the Web pages you create are for your company, the company owns the material that appears on the page. Similarly, the contents of personal home pages belong to the person who created them. In both cases, the contents of the page are protected by copyright law, and they can't be used by anyone else without permission. To reinforce this, include a copyright notice at the bottom of the page.

The current status of the page  If your page is a preliminary draft, contains unverified data, or is just generally not ready for prime time, let your readers know so they can take that into consideration.
 

A feedback mechanism  Always give your visitors some way to contact you so they can lavish you with compliments or report problems. The usual way to do this is to include a "mailto" link somewhere on the page (as described in Chapter 7 "Making the Jump to Hyperspace: Adding Links").

A link back to your home page  As I mentioned earlier, your home page should be the "launch pad" for your site, with links taking the reader to different areas. To make life easier for the surfers who visit, however, each page should include a link to take them back to the home page.

Most of these suggestions can appear in a separate section at the bottom of each page (this is often called a footer). To help differentiate this section from the rest of the page, use an <HR> (horizontal rule) tag and an <ADDRESS> tag. Depending on the browser, the <ADDRESS> tag formats text in italics and a smaller font. Here's an example footer (look for FOOTER.HTM on the disk) you can customize:

<HR>

<ADDRESS>

This page is Copyright & copy; 199?, your-name-here<BR>

company-name-here<BR>

company-address-here<BR>

Phone: (###) ###-####<BR>

Fax: (###) ###-####<BR>

E-mail: <A HREF="mailto:your-email-address-here">your-email-address-here</A>.

</ADDRESS>

<P>

Last revision: date-goes-here

<P>

Return to my <A HREF="home-page-URL-goes-here">home page.</A>

Make Your Readers' Lives Easier

When designing your Web pages, always assume your readers are in the middle of a busy surfing session, and therefore won't be in the mood to waste time. It's not that people have short attention spans. (Although I'd bet dollars to doughnuts that the percentage of Web surfers with some form of ADD-Attention Deficit Disorder-is higher than that of the general population.) It's just the old mantra of the perpetually busy: "Things to go, people to do."

So, how do you accommodate folks who are in "barely-enough-time-to-see-the-roses-much-less-stop-and-smell-the-darn-things" mode? Here are a few ideas:

• Organize your pages so people can find things quickly. This means breaking up your text into reasonably sized chunks and making judicious use of headers to identify each section.
• Put all your eye-catching good stuff at the top of the page where people won't be able to miss it.
• If you have a long document, place anchors at the beginning of each section and then include a "table of contents" at the top of the document that includes links to each section. (I explained this in more detail in Chapter 7.)
• Add new stuff regularly to avoid the "cobweb page" label. (A cobweb page is a page that hasn't been revised in some time.) You should also mark your new material with some sort of "New" graphic so regular visitors can easily find the recent additions.

Guidance For Using Graphics

As you saw back in Chapter 8 "A Picture Is Worth a Thousand Clicks: Working with Images," graphics are a great way to get people's attention. With images, however, there's a fine line between irresistible and irritating. To help you avoid the latter, this section presents a few ideas for using graphics responsibly.

For starters, don't become a "bandwidth hog" by including too many large images in your page. Remember that when someone accesses your Web page, all the page info-the text and graphics-is sent to that person's computer. The text isn't usually a problem (unless you're sending an entire novel, which I don't recommend), but graphic files are much slower. It's not unusual for a large image to take a minute or more to materialize if the surfer has a slow Internet connection. Clearly, your page better be real good if someone waits that long. Here are some ideas you can use to show mercy on visitors with slow connections:

• If your graphics are merely accessories, keep them small.
• Use the <IMAGE> tag's WIDTH and HEIGHT attributes (see Chapter 8).
• Avoid using graphics just to get spiffy fonts. Some authors use images only for the nice fonts available in their graphics software. This is silly and slow and should be avoided at all costs.

Always bear in mind that a certain percentage of your readership will be viewing your pages either from a text-only browser or from a graphical browser in which they've turned off image loading. (Depending on the content of your page, the number of graphics-challenged surfers could be anywhere from 10 to 30 percent of your visitors.) If you're using an image as a link, be sure to provide a text alternative (using the <IMG> tag's ALT attribute, as described in Chapter 8). For non-link graphics, you can use ALT to describe the picture or even to display a blank. If you must use lots of images, offer people a choice of a text-only version of the page.

Finally, be careful if you decide to use a background image on your page. The Internet has lots of sites that offer various "textures" for background images. (I'll tell you about some of these sites in the next chapter.) Many of these textures are "cool," to be sure, but they're too "busy" to display text properly. For example, check out the page shown in the following figure. Now that is the mother of all ugly backgrounds! (Lucky for you the figure doesn't show the background in color; the actual texture incorporates various shades of sickly green.) For maximum readability, your best bet is to combine solid, light backgrounds with dark text.

Some background textures just aren't worth it!

Link Lessons: Keeping Your Links in the Pink

To finish our look at Web page style, here are a few ideas to keep in mind when using links in your pages:

• In your link text, don't ask the reader to "click on" something, because some of them won't have mice or other "clickable" devices. The verbs of choice are "select" and "choose."
• Make your link text descriptive. Link text really stands out on a page because most browsers display it underlined and in a different color. This means the reader's eye will be drawn naturally toward the link text, so you need to make the text descriptive. That way, it's easy for the reader to know exactly what they're linking to. Always avoid the "here" syndrome, where your link text is just "here" or "click here." The snippet below shows you the right and wrong way to set up your link text. The following figure below shows how each one looks in a browser.

<H3>Wrong:</H3>

The Beet Poets page contains various odes celebrating our favorite edible root, 

and you can get to it by clicking <A HREF="beet-poets.html">here</A>.

<H3>Right:</H3>

The <A HREF="beet-poets.html">Beet Poets page</A> contains various odes 

celebrating our favorite edible root.

The reader's eye gravitates toward the link text, so make sure your text is descriptive.

• If you're presenting material sequentially in multiple pages, create "navigational links" to help the reader move forward and backward through the pages. For example, each page could have a "Previous" link that takes them to the previous page, a "Next" link that takes them to the next page, and a "Top" link that returns them to the first page.

• For maximum readability, don't include spaces or punctuation marks either immediately after the <A> tag or immediately before the </A> tag.
• If you're planning a link to a particular page, but you haven't created that page yet, leave the link text as plain text (i.e., don't surround it with the <A> and </A> tags). Links that point to a nonexistent page (they're often called vaporlinks) generate an error, which can be frustrating for surfers.
• Try to keep all your links (both the internal and external variety) up-to-date. This means trying out each link periodically to make sure it goes where you think it's supposed to go.
• If you move your page to a new site, leave behind a page that includes a link to the new location (this is called a Century 21 page).

The Least You Need to Know

This chapter presented you with a few prescriptions for good Web page style. Here's a quick summary of a few of the do's and don'ts we covered:

Do:

• Write about topics that interest you, write with passion, and write in your own voice.
• Be brief and to the point.
• Keep your Web pages to a single topic.
• Use your home page to tie all your pages together.
• On each page include a title, a main heading, a "signature," and your copyright information.
• Include a link back to your home page.
• Use headers to organize your pages so readers can find things quickly.
• Keep your images small and use the <IMG> tag's ALT attribute to provide a text alternative to the image.
• Use background images judiciously; make sure any text sitting on top of the background is readable.
• Keep your links up-to-date.

Don't:

• Forget to check your spelling and grammar.
• Use too many exclamation marks and DON'T SHOUT.
• Use too much boldfacing, italics, or underlining.
• Use a completely different layout or color scheme on each page.
• Forget to give your readers a feedback mechanism (such as a mailto link).
• Use large, slow-to-load graphics if you don't need them.
• Use "click" or "here" links. Make your link text descriptive.
• Let your pages stagnate. Keep them fresh and interesting by adding new material and weeding out deadwood.

 © 2002 -  2009 LBCInformation Corporation. All rights reserved Eng.Hanna Ata Lahoud.