Developing the Right Look

Your Web site is a virtual version of your store or office. The way your workplace looks has a direct impact on how customers or clients feel about you. The same goes for your Web site.

Here are some things to consider when developing the right look for your Web site.

Tip

I could write an entire book about Web design, but I won't. Other authors have already done the job. My favorite ”a book I highly recommend to people designing their first Web site ”is The Non-Designer's Web Book , a Peachpit Press book by Robin Williams and John Tollett. Robin and John explain the elements of Web design in plain English. Their book is informative and fun to read. (And they got to do their pictures in color .) Learn more about the book at http://www.peachpit.com/books/catalog/68859.html.

First Impressions Count

Here's a scenario for you.

Say you need some legal advice and a friend has recommended a lawyer. When you arrive for your appointment, you discover that the lawyer's office is in a storefront on the bad side of town. In the reception area, the carpet is worn and dirty and paint is peeling off the walls. The receptionist's desk is missing a leg, so a whole corner of it is being propped up with fat law books that look like they were used for a cat's scratching post after they'd been in a flood. The receptionist , who is chewing a huge wad of gum, tells you to wait on one of the folding chairs set up against a wall. All the magazines on the TV table beside it have their covers torn off. What are you going to think about that lawyer?

Your Home page is like your store's entrance or your office's reception area. It's what people first see when they visit. Don't you think it's important to give visitors the right first impression ?

The Limitations of HTML

As you'll learn in Chapter 8, most Web pages are created with HTML, a markup language that, when interpreted by a Web browser, displays the page as the Web author intended. Or close to it. Or maybe nothing like it at all.

You see, HTML has limitations in the way it displays information. It's important to know and understand these limitations when designing your Web pages.

• HTML was never intended to handle page layout. As a result, it's very difficult, if not downright impossible , to create a Web page that exactly replicates a complex print document such as a brochure.

• A Web page can be any length. It can also be any width. Word wrap is normally determined by the width of the Web browser window. That means that changing the width of the browser window can change the appearance of a Web page in that window.

• Fonts appear larger in Windows browsers than in Mac OS browsers. As a result, a page created by a Web author on a Mac OS system seems to have large fonts when viewed on Windows. Likewise, a page created by a Web author on Windows can have very tiny fonts when viewed on Mac OS.

• The fonts that can appear on a Web page are determined by the fonts installed on the site visitor's computer. So if you set up a page using fonts that the visitor doesn't have, text will appear in the default font. And the visitor can override special fonts anyway, to display all text in the font he prefers.

• Different Web browsers support different HTML tags. For example, Explorer supports the MARQUEE tag; Netscape does not. Similarly, Netscape supports the BLINK tag; Explorer does not. (Frankly, I find both of these tags rather annoying ”and that's a better excuse for not using either one.)

• Older Web browsers do not support the most recent HTML tags. That means a Web page using HTML version 4.0 (the current version as I write this) won't look the same on an older browser (say, a Netscape or Explorer 2.0 browser) as it does on a current browser.

A smart Web author can overcome some of the limitations of HTML by intelligent coding. This, however, can cause other problems. For example, to fix the page width, all page information can be enclosed in a fixed-width borderless table. But this won't work for someone viewing the page with a very old browser. And if the width is fixed wider than the visitor's screen width, he'll have to scroll from side to side to see everything. ( No one likes doing that.)

I guess the point I'm trying to make here is that you can't approach Web site or page design thinking that you'll have complete control over appearance. You won't. Instead of forcing your Web authoring software to imitate the tools available in page layout software, use the tools available within HTML to build pages that attractively and effectively communicate your message.

That's all you can do ”and it's enough.

Markup Language

A system of tags or codes that, when inserted with text and read with special software, displays formatted text, images, and other elements.

Build a Company Image

Maybe your storefront or office isn't much different from that lawyer's reception area. Does that mean your Web site should be equally unimpressive? Of course not.

As I discussed back in Chapter 2, you can use your Web site as an image-building tool. Through the use of graphics, color, and writing style, you can make your Web site project the image you want to the people who visit.

Of course, a homegrown, amateurishly designed Web site can make your business look downright awful to visitors. Figure 7.1 shows an unnamed HVAC service company's Home page, which was created by the company's internal computer wiz. I touched up the screen shot to obscure the company name and contact info so the company wouldn't be embarrassed. Compare that to the Home page of The Chicago Safe Company (see Figure 2.5). I know that they're in different businesses, but which one would you be more likely to contact?

Figure 7.1. An amateurishly designed Web site can make your company look bad. And if you think this looks bad, imagine it online where the diamond shaped bullets and "Page" links blink. Yuck.

The sad thing (at least to me) is that more than half of the Web sites out there have a lot in common with this one. They were created by folks who don't know the first thing about design and the second thing about creating Web pages. Fortunately, these sites are seldom seen; this one has had only 52 hits in over a year and about 10 of those hits were from me showing people how ugly the site was.

Using Graphic & Multimedia Elements Wisely

In my humble opinion, more Web sites have been ruined by the improper use of graphics than any other folly. In some instances, it's the result of having the site built by an amateur who couldn't design his way out of a paper bag. In other instances, it's the result of a talented designer being in love with graphics he can access at T1 speeds. It irritates the heck out of me and is the main reason I don't spend more time surfing the 'Net.

Let me calm down and explain.

The Golden Rule

First, the golden rule of using images, graphics, and multimedia elements: the element must add something to the Web page without costing more than it's worth. Cost doesn't have anything to do with money. It has to do with how much time it takes for the element to appear in the visitor's Web browser window, how much extra effort the visitor must spend to view the element (by downloading and installing plug-ins, etc.), and how annoyed the visitor might be that he wasted his time and effort to finally see the element.

Every element you include on a Web page must be worth more than it costs.

When evaluating worth and cost, you must be objective. Yes, it would be really cool if your Home page used a background image that was a photograph of your storefront. But how useful is it? Would visitors be able to read the text sitting on top of it? How much time would it take for the image to appear? If you want to show how beautiful your storefront is, wouldn't it be better to use a smaller image, possibly on the page where you provide your address and driving directions?

Big is Bad

Ah, how I wish I could pound this concept into the head of Web designers all over the world. So many of them still don't get it.

Big images usually come with big file sizes. While it's possible to minimize file size by optimizing the image for Web use, there's only so much you can do. At the same time, a relatively small image that isn't optimized can also have an unnecessarily large file size .

At this point, you may be wondering what the big deal is. After all, your ISP may allow you 100 MBytes of hard disk space for your Web site. What's wrong with a few 100 Kbyte files?

There's nothing wrong with it as far as your ISP and Web server are concerned . It's the site visitor ”remember? The person you're trying to provide information to? ”who won't like it. You see, in order for an image to appear on a Web page, it must be downloaded from the Web server to the visitor's Web browser. The speed at which the image downloads is determined primarily by the speed of the visitor's connection to the Internet. Table 7.1 shows some typical image sizes and connection speeds with related download times.

Table 7.1. Download Times for Various Image Sizes at Various Connection Speeds

	File Sizes & Download Times
Connection Speeds	5 Kbytes	25 Kbytes	100 Kbytes
28.8 Kbps	<1 sec	8 secs	34 secs
33.6 Kbps	<1 sec	7 secs	29 secs
56.8 Kbps	<1 sec	4 secs	17 secs
ISDN (128 Kbps)	<1 sec	<1 sec	7 secs
T1	<1 sec	<1 sec	1 sec

Now, someone using a modem to dial into his ISP ”like most folks accessing the Internet from home ”is likely to be connected at 28.8, 33.6, or 56.8 Kbps. So that 100 Kbyte file will take 34, 29, or 17 seconds to appear. Is the visitor likely to want to wait that long to see a picture of your storefront?

Studies have shown that the average Web surfer will wait less than 10 seconds for something interesting to appear on a Web page. If you fill your pages with fat images that take a long time to download, it isn't likely that the visitor will stick around to see your page at all.

Multimedia Madness

Multimedia elements include animations, movies, and sounds. Like static images and graphic elements, they can make your site look more visually appealing and interesting. They can also provide information about your products, services, or company. But they can be very costly in terms of file size, download time, and convenience.

When multimedia effects are overdone or done incorrectly, they can make your site sluggish and unprofessional. If you surf the Web, I'm sure you've visited sites with pages that automatically load (or attempt to load) fancy animations or movies. Did you want to see that animation or movie? Maybe not. Yet it was forced on you when you went to the page. The Web designer assumed that you'd take the time to download and view it. (But you showed him . One look in the status bar to see how big the file was and you clicked the Back button and got out of there fast.)

Multimedia elements (beyond simple quick-loading animations) should never be forced on a site's visitors.

Tip

If you do include large multimedia elements on your site, make them accessible by links. Clearly indicate the size of the file that will be downloaded when the link is clicked, as well as whether any special software is required to view it.

My Take on Sounds

Sound is another multimedia element that's often used incorrectly.

Here's an example. A center for bulemia and anorexia hired a Web designer to build a site with information about its main facility. The Web designer included music on the site's Home page, so when the Home page appeared, music would automatically play. Sounds neat, huh?

Not to everyone. Consider the worried mother who is at work, using her office computer on the sly to explore treatment options for her sick daughter . What do you think will happen when the sound of music starts coming out of her cubicle ? Not only will her co-workers find out about a personal family problem, but she could be in danger of losing her job. Clearly, unexpected sounds should not be included on a Home page ”or any other page, for that matter.

What's the proper use of sound? I can think of a few things. Obviously, if sound is part of your business ”for example, if you're a musician or run a record company ”it could be included on the site. Sound bytes can also be used to provide information ”comments made by the company president at a recent press conference, for example. I'm sure you can think of other appropriate uses. But if you have to stretch your imagination to think of them for your business, they might not be appropriate after all.

Tip

If you do decide to use sounds on your Web site, make them accessible by links. Clearly indicate that a sound will result when the link is clicked.

The Importance of Consistency

Does your company have a letterhead? Envelopes? Business cards? Do they all pretty much have the same design, complete with your company's logo?

They should. The consistent design of these basic printed materials helps enforce your company's identity. The inclusion of a company logo adds branding, further enforcing identity.

Your Web site should be the same. Not only should its overall design be consistent with your existing printed materials ”including typefaces (when possible), colors, graphics, and logos ”but each page should have the same basic design.

Consistency in appearance from one page to the next can help tie your site together. Once you develop an overall design for your site's Home page, you should use the same general design on the remaining pages. Then there's no question what site the visitor is viewing when he clicks a link. Either he's on another page of your site or he's on a different site altogether.