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.
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.
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.
| Remember, It's the "World" Wide Web |
Although you should always squash all spelling bugs before a page goes public, try to maintain a charitable attitude about other people's howlers. Although the lion's share of pages are written in English, not all the authors have English as their native tongue, so you'll see some pages with spelling that's, uh, creative. If they have an e-mail link on the page, send them a gentle note pointing out their slips of the keyboard and offering up the appropriate corrections. |
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…
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!
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:
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:
| Web Channel Surfers |
Some studies show that many Web ramblers don't like to scroll at all! They want to see one screenful and then move on. This is extreme behavior, to be sure, and probably not all that common (for now, anyway). My guess is that many folks make a snap judgment about a page based on their initial impression. If they don't like what they see, they catch the nearest wave and keep surfin'. |
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).
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.
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:
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 Karaoke links. Note the consistent layout between the two 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.
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.
| Under Construction? Yeah, We Know! |
Many Webmeisters include some kind of "Under Construction" icon on pages that aren't finished (you'll find a few examples of the species on this book's disk). This is fine, but don't overdo it. The nature of the Web is that most pages are in a state of flux and are constantly being tweaked. (This is, in fact, a sign of a good Web site.) Scattering cute construction icons every-where will reduce their impact and annoy many of your readers. |
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>
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:
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:
| Understanding the Bandwidth Thing |
Bandwidth is a measure of how much stuff can be crammed through a transmission medium such as a phone line or network cable. Or, to put it another way, bandwidth measures how much information can be sent between any two Internet sites. Since bandwidth is a finite commodity, many Net veterans are constantly cautioning profligate users against wasting bandwidth. Bandwidth is measured in bits per second (bps). Here, a bit is the fundamental unit of computer information where, for example, it takes eight bits to describe a single character. So a transmission medium with a bandwidth of, say, 8 bps would send data at the pathetically slow rate of one character per second. Bandwidth is more normally measured in kilobits per second (Kbps-thousands of bits per second). So, for example, a 14.4 Kbps modem can handle 14,400 bits per second. In the high end, bandwidth is measured in megabits per second (Mbps-millions of bits per second). |
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!
To finish our look at Web page style, here are a few ideas to keep in mind when using links in your pages:
<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.
| The Difference Between "Previous" and "Back" |
You may be wondering why the heck you'd want to bother with "Previous" and "Next" buttons when most browsers have similar buttons built in (usually called "Back" and "Forward"). Well, they're not really the same thing. For example, suppose you surf to a site and end up on a page that's in the middle of a series of pages. If you select the browser's Back button, you'll find yourself tossed back to the site you just bailed out of. If you select the page's Previous button, however, you'll head to the previous page in the series. |
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: