Commonsense Tips for a Good-Looking Web Site
As with any artistic endeavor, you don't became a crack Web designer overnight, even if you have the most expensive software, a powerful Mac, and a huge collection of clip art from which to choose. Even if you can handle print designs with aplomb, you'll find that designing for the World Wide Web entails tradeoffs and some new design considerations, simply because this medium lacks the precision of the print world.
The Basics
Here are some basics to consider when you begin your Web authoring journey:
See how others do it.
There is no secret as to how your favorite Web site is designed. You can easily view the source code whenever you want. Just bring up the site in your favorite Web browser and then use its source feature to display the information. With Internet Explorer, for example (and with AOL's bundled Web browser), just 
-click the page and choose the View Source option from the contextual pop-up menu. For Netscape users, the command is called Page Source in the View menu. Either way, with a little background in HTML you can easily learn the secrets of the top Web designers. You can then adapt some of those tags to your own site and see how they work.
 | Although examining source code is a great way to learn your craft, just remember not to attempt to copy and publish copyrighted content, such as the text or pictures at a site, because that would definitely run you afoul of the author's intellectual-property rights. |
Make it simple.
So many wonderful HTML tags and great special effects are available that it's tempting to try each one on your site. Don't! All those extra commands, pictures, and animations can slow the site to a crawl. Remember that not everyone has a cable modem or DSL; the vast majority of users still make Internet connections via analog modems, and not all of these are the latest 56Kbps designs (which, in fact, seldom approach the maximum connection speed). It's common for folks to just pass by a site that takes forever to generate its content. If your site is devoted to a top-grossing movie, perhaps your visitors will be willing to endure the wait. Otherwise, they'll go elsewhere. The best thing to do is test the page with a Web browser at every step of the way and see what content takes longest to appear. Scale down graphics as much as possible; your graphics software's optimizing tools can make them smaller. Use animation only when you really need it. Your visitors will thank you for your efforts by staying around to check out your site.
Keep pages short.
Believe it or not, some Mac users aren't comfortable with scroll bars or paging down. If a single page gets too long, visitors may never read a great part of the content simply because they don't bother to move down the page. Although it's true that you might need a certain length to cover the necessary content (and many Web sites, including the popular CNN.com, are lengthy), try to use links rather than length wherever possible. I've seen pages 20 screens deep and more. Whew!
Don't depend on pictures for navigation.
One of the most popular Web sites—Apple's (www.apple.com)—uses picture after picture to link you from its home page to the rest of the site (the site even requires the latest version of QuickTime for its animation). The rest of us, though, should provide clear text labels as well and not make users depend on pictures to get around. Some folks with older browsers or slow Internet connections may actually turn off graphics (in the browser's preferences) to speed up display. Try looking at your site without pictures and see if you can still get around easily.
Make text short and easy to read.
You may have an awful lot to say, but saying it online is not the same as saying it in print. For one thing, it's just harder to read on a computer display, even if your site visitors have the latest model with ultrasharp text. You'll want to avoid smaller font sizes and unusual typefaces (which may not even translate to someone else's browser). Keep the paragraphs short and sweet. If you feel compelled to publish your Great American Novel online, divide it into smaller sections or chapters. Keep each section easy to read and digest. You may even want to test it out with a friend (an objective one) to see if he or she reports any problems reading the material.
 | Check your spelling. Make sure your word-processed or page-layout documents don't have typos, and use your Web tool's spelling checker (if it has one) for the same purpose. Nothing reflects more poorly on your content than a raft of spelling mistakes. If you work with a tool that lacks a spelling checker, try Casady & Greene's Spell Catcher ($29.95; www.casadyg.com), which puts an interactive spelling checker, dictionary, and thesaurus in every program you use. Check out the Web site for a limited-time demo. |
Test, test, and test again.
Even the simplest Web site may have a very different look as you move from browser to browser, from version to version, and from one computing platform to another. You'll want to test your site in as many environments as possible to make sure visitors can easily read and see your content. If you have friends who own a PC (or, heaven forbid, you own one yourself), make sure your site looks right on those machines, too. Even if your target audience is all Macintosh, many of your potential visitors may need to view the site on another computing platform from time to time. Whenever a new browser version (or even a totally new product) comes out, be first in line to get a copy so you can see how it affects your site's appearance.
 | It's not just the text that may look different on another computing platform. Even the gamma (the midtones) may differ, which means the picture that's perfect on the Mac is too dark under Windows. If you can't test your site with a Windows PC, try the freeware GammaToggleFKEY ($5 from www.acts.org/roland/thanks/), a useful tool that will invoke a PC's gamma setting so you can see how things change. |
 | After making changes to your site, save the document before opening it in a browser. Otherwise you'll only see the older version of the file. |
 | One handy tool in the arsenal of a Web designer who doesn't have a Wintel computer around is a Windows emulator—Connectix's Virtual PC ($99 to $249, depending on the Windows OS; www.connectix.com). (Alas, the other well-known emulator, FWB's SoftWindows, has been discontinued.) Although an emulator is nowhere near as fast as the real thing, you aren't playing 3D games with it. You just want to view your site under Windows to make sure it looks right. One Virtual PC version includes Linux, so you can view your content under Unix as well. |
Practice your craft.
Having the latest and greatest Web authoring tools, the most powerful multiprocessor Mac, or even that gorgeous Apple Cinema Display won't guarantee that you will become a great Web designer. It takes study, practice, and still more practice to hone your skills. The basic chores of learning your Web application and HTML aren't hard (though the latter can be a tedious pursuit). The rest just takes time and patience. Seek advice from professionals if you know some. Many of the best Web designers are happy to give a little advice to help a newcomer along—it makes the Web a better place, after all.
Make navigation easy.
If your site consists of just one page, the question of moving from one item to another is not all that difficult, as long as you don't make your page too wide or too long. But if you have a lot of content to deliver, divide it into additional pages. It's important to make it easy for your site visitors to move from one place to another and then back again. Otherwise they'll follow link after link through several pages and then get totally lost. Put a clearly labeled link back to the introductory or home page on each page of your site.
A Web site is like a puzzle that you want to make easy to solve. Wherever a guest goes, he or she should be able to get back to the starting point without any difficulty. If moving to different areas of your site requires a number of steps, try to create a direct path instead, from beginning to end. Each page should have links for all related pages (don't forget that home page). Put the links in visible places, with large, clear, cleanly organized buttons. If you use a title for your link, label clearly what it points to. For a large site, consider adding a search engine (this isn't as hard as it seems) or creating a site map—basically, an index listing all the links at your site, organized by topic or alphabetically.
Use a target to simplify navigation.
Even if your site has all the right ease-of-use features, sometimes folks still get lost in an endless sea of links. Once a browser window displays a new page, it's not always apparent how to get back. This is particularly true if you point to content on another site. A way to avoid this confusion is to set up as part of your link a <TARGET> tag, which opens that page in a totally separate browser, making it easy for your visitors to get back to you. Here's the simple command: <A target=window href= "targetname"</A>. The rule of thumb is to set up external links—those that lie outside your site—to open in a separate window.
 | You can easily use one of the interactive palettes in Web authoring tools such as GoLive to set your target page. In Dreamweaver, it's available direct from the Properties palette. |
Getting the Right Color
Mac and Windows computers don't see the world the same way. For simplicity's sake, and to support older displays, Web designers use the old 8-bit (256-color) browser-safe standard, which goes right back to the days of the earliest color Macs. The problem is that the 256 colors a Mac displays are not quite the same as those you see on a PC. This doesn't mean red becomes blue on that other platform; in fact, both do support 216 of the same colors, which form the core of the browser-safe palette. It is from these colors that Web designers make their selections.
Fortunately, you don't have to figure out which of those 216 colors you can use. Just about all graphics programs and WYSIWYG Web tools support the Web-safe color palette. A simple selection from a pop-up menu should get you a listing of the correct hues.
Is Your GIF Transparent?
Well, not normally. Even if your image fills just a portion of the document, its background is generally set to white. That's perfectly fine, if the background on your Web page is white. But if you've set your background to gray or some other color, the white area can be downright disturbing. Is there a way to keep this problem from messing up your site? There is.
Some HTML tools can handle the transparency chores for you and some can't. You use a magic wand tool to select an area you want to change. If your HTML program offers this ability, you just select the wand, click the area you wish to make transparent, and delete the background. Poof!
 | Adobe Photoshop has an Export Transparent Image wizard that steps you through the process of selection and saving the document in the proper form, so you don't have to figure it out yourself. It's available from the program's Help menu. |
Stick to a Simple Background
The default background on an HTML page is drab gray. White is easiest on the eyes, but you might want to try something different—perhaps even a small illustration—to provide a decorative background or wallpaper effect.
Here's a command for creating a background (I used it once to provide a starry backdrop on my science-fiction page, www.rockoids.com):
<body bgcolor="black" background="starbg.gif" text="white">
In the above command, the image file, starbg.gif, is a little picture showing stars against a black background. As with wallpaper or a tiles, it repeats over and over again to cover the length and breadth of the Web page.
 | Although these backgrounds make it easy to create some spectacular effects at your Web site, make sure the source file is small enough to display quickly (it only needs to load once regardless of how often it repeats). You could use a single large file to create a background, at the expense of making the page take a lot longer to load. |
Linking and Anchoring
As you add content to your Web site, you'll want to include links to other pages or even to other sites. You handle this via an HTML link, which a site visitor can click to access more content. The neat thing about the way HTML works is that you're not limited to a specific physical location for your link. It can point to an item on your site or to a site on the other side of the world. To your visitors, it's just one click away. This is one of the nice things about the World Wide Web's global community.
About that anchor—you don't toss it into the sea, but the principle is the same. When you specify an anchor, it creates an instant jump point that allows a visitor to access that particular area without having to scroll through an entire page to see it.
Here's a typical anchor link: www.macnightowl.com/index.htm#bullish. This URL points directly to a portion of the opening or index page of my Web site that contains the anchor “bullish.”
 | Internet Explorer 5 handles anchors in a somewhat flaky—and frustrating—fashion. If the anchor point occurs near the top of the page, it will take you right to the top and not to the anchor (most of the time, anyway). Occasionally this also happens when the anchor is located later in the page. Under Netscape versions prior to 6.0, if the anchor appears in a part of your page that's placed within a table, the page will open at the bottom (a refresh is required to move it to the proper position). Argh! |
Exploring Grids and Tables
As in a word-processing document, in a Web page you use a table to organize your content in easily digestible portions, and even to place text and picture elements side by side. The table also lets you set your page to a fixed width, so you can make sure the material appears in the intended size (allowing for the variables in display size and resolution settings, of course).
Fortunately, WYSIWYG Web tools actually let you build tables almost as easily as you can with a word processor. First you access the table feature, and then you specify the rows and columns and perhaps the table's overall dimensions. After that, it's generally a matter of inserting the various text and picture elements within each cell, making a little adjustment here and there, and presto—you have a table!
 | Some HTML programs, such as GoLive and Dreamweaver, can even import the tabbed text directly from a spreadsheet program, such as Microsoft's Excel, and format it into a table for you. |
Making GIFs Move
One really neat thing about GIFs is that you can animate them. You see an image, and then it undergoes a change—perhaps it turns into a small animated movie. A title may switch or an image may change, morphing into a different style. You set up an animated GIF similarly to a movie. You create a separate image for each stage of the action and then combine them all into a fluid (or reasonably so) animation. That may seem terribly complicated, but several handy programs make the process quite easy.
Don't overdo it. As with any artistic pursuit, the impact of an animated GIF is a product of your imagination and skills. But the best advice is to keep it simple. Every extra effect you add simply increases file size, and this can determine whether someone remains at your site or departs in annoyance at how long it's taking to load.
 | If your potential audience include lots of AOL or CompuServe 2000 members, you face an additional limitation. The built-in Web browser for their software, based on Internet Explorer, sets an option called use compressed images by default (it's present in the Windows version, too). When a member uses that option (and most folks do not normally fiddle with their preference settings), image quality is apt to nosedive, and Web-based animations may disappear altogether. |
You can set an animated GIF to repeat or loop so it displays the same pattern over and over again. This can get annoying, particularly for folks who visit your site frequently. You may want to limit the number of repeats or just leave a long delay for the initial frame so the repeating pattern isn't too obvious.
Also limit the number of frames in your animation, because each frame increases file size. The larger the file, the more time it takes the browser to download the artwork. I've seen some wonderful animations that made me lose patience while I waited for them to load. The world's greatest animation won't help if your audience has left by the time it displays. Although such special effects may work when you have a large, dedicated audience—as with a site devoted to, say, a music star—for the rest of us, less is more.
 | You can use a frame that contains a blurred version of the artwork to substitute for several frames, simulating motion without taking up too much disk space. The blurring effect will give the animated GIF an added feeling of rapid motion. |
Some Frame Advice
A frame splits your Web page into two or more sections, sometimes with separate scrolling areas. On some sites it looks just terrific, since it lets you navigate through the content more easily. But it can also cause problems. For one thing, if you click a Web link in a frame, it usually opens up within that frame, even if it's on another site—yet you still see the other frame at the original site. Talk about confusing!
 | If you want to use this feature, do so with caution. Overuse of frames can easily confound rather than help your site visitors. |
A Web site that contains frames consists of one page that defines the layout, called the frameset, plus a separate file for each HTML page to which the site links. The most convenient way to set up a frameset is to put some simple navigational buttons for your content on the left or at the top or bottom of the site, and suppress scrolling for this frame. Keep the scroll bars on the main portion of the page, and make that area as large as possible, since that's what your visitors want to see. Consider, too, that not all Mac users have big screens. A user who has an iMac or a Mac with an even smaller display will have an awfully hard time viewing your page without generous use of scroll bars, even if it's all in one frame.
You can put multiple frames on your site, but this just makes it more difficult for site visitors to see the content. Set up your site with a link to a frameless version for those who have older browsers that cannot view frames. Although it would be nice if everyone had the latest and greatest hardware and software, millions of users out there (Mac OS, Windows, and Unix) have older computers that can't support current browser versions or just aren't inclined to deal with the hassles and possible conflicts of an update. For these members of your potential audience, frames are unviewable.
My personal viewpoint may not sit well with those who want their Web sites to offer all the latest bells and whistles, but I believe in the “keep it simple” concept. Make the Web site simple and convenient for the largest number of visitors; if necessary, give them the option to view the content in different ways. That lets you take advantage of features such as frames and animation for those who can view that content, and streamline the site for others.
Getting There by Percentages
When you create a Web site, normally the page flows into your browser and fills the available space, without regard to the width of the document window, the browser you use, or even the settings of your Mac's display. You can specify exact sizes, using a grid or table to set fixed limits on the width of the page. But that's a double-edged sword. If a visitor to your site has an ultrasmall display, the width of the page may extend beyond the edges, forcing your guest to scroll to the right or left to see it all—a downright annoying phenomenon if he or she just wants to read some text or see the cute little button you stuck at the left corner for ease of navigation.
On the other hand, if you make your page too narrow, it ends up with a whole lot of white space on each side when viewed on a large display.
One way around this, other than to set no specifications at all (which you can't do with a table), is to use percentages instead. If you want a block of text to fill all of the available space in a browser window, you'd enter 100 percent in the source code.
Here's an example from my own Mac Night Owl Web site (at least before I switched to percentages for some pages):
<table cool width="600" height="5154" border="0" cellpadding="0" cellspacing="0" gridx="16" gridy="16">
As you can see, I specify a width of 600 pixels, sufficient to accommodate even a small display—iMac users will have no trouble whatever seeing my content at its full size.
Keep in mind that the width of a pixel isn't set in stone. In the old days of the Mac, with a screen resolution of 72 dpi, 600 pixels added up to about 8.33 inches. But on a Windows computer, at a setting of 96 dpi, 600 pixels would fill 6.25 inches. For most Mac users, the actual width would fall somewhere between these extremes (which means you can't predict the actual size).
However, those with larger displays may find the white border annoying, so I could just as well specify that command this way:
<table cool width="100%" height="5154" border="0" cellpadding="0" cellspacing="0" gridx="16" gridy="16">
If I wanted to guarantee a fixed amount of white space around the page, I'd make it 90 percent.
Some WYSIWYG Web tools, such as GoLive, let you specify table widths by percentage so you can see the result without having to move back and forth between the authoring tool and a browser window.
As with any new approach to designing your Web site, you'll want to experiment with both the fixed width and percentage approaches to see which works best for you.