 |  |  |  |  |  |  |  |
|
|
 | |
What you see is not necessarily what your visitors get. That´s why you need to test your site to make sure
your visitors are seeing what you want. by Summary: Say you've just created a Pulitzer Prize-winning Web site (or at least something your CEO or mom would be proud of). It
looks magnificent on your 20-inch monitor, with your latest version of Internet Explorer and all the plug-ins, your 1024 x 768 resolution and gazillions of colors, and it loads just fine through your T1 connection at work. But what about everybody else—the normal people (and by this, of course, I don't mean to imply that you are in any way, shape or form anything less than normal) who are going to visit your site? You know, the ones stuck with a 14.4 modem,
14-inch monitor set to 640 x 480 resolution at 256 colors, and a copy of Netscape 2.0? If you aren't thinking about them, you're not thinking about the majority of people who will visit your site. They don't have the latest computers, modems, or browsers. And those who do will view your page on different computers, with different monitors and different connection speeds. And you need to know how your site is going to look to them.
How do you do this? Here are some tips on how you can test your Web pages' compatibility with different computers, configurations, and Web browsers. Dimension, Dimension, Dimension In terms of Web real estate, it's dimension, not location, that you have to worry about. Because of resizable toolbars, scroll bars, and borders, each browser (and each version of each browser) has its own viewable area. Your safest bet is to design for the worst-case scenario, which means designing for the browser with the smallest available space. You've probably run into a few Web sites that didn't quite
"fit" on your screen, and you have to scroll from left to right. To avoid this, a Web page should be designed to fit on a monitor set to 640 x 480 resolution, which is the smallest setting on the majority of computers. Especially when you're working with large graphics and tables, a good, safe size is no wider than 600 pixels across (the available area is actually a teeny bit more than 600 pixels across, but 600 is easier to remember, right?). Unless you have a picture that should be
viewed without scrolling, don't worry about vertical spacing. And no, people don't mind scrolling down the page—just make sure your information is worth it. To give you an idea how much real screen space you get with Netscape and Internet Explorer, below are screen shots of the Netscape at 640 x 480 with all toolbars on: Available screen area, approximately 635 x 300 Internet Explorer at 640 x 480 with all toolbars on: Available screen area, approximately 635 x 315 Did you know… about Did you know… that it's possible to resize your browser to make it even smaller than 640 x 480, to any size you want? On the upper right corner of your browser window, there are three buttons:
Normally, Netscape won't allow a normal, non-background image to be flush against its upper left corner—it "nudges" that image 10 pixels to the right and 10 pixels down. Internet Explorer does the same thing, except it's nudged 8 pixels to the right and 8 pixels down. There is a way you can get rid of the nudge in Explorer 3 and newer: Just add
(NetObjects Fusion eliminates this margin in both browsers, automatically. This ensures that both browsers display exactly the same thing, something few site building systems can do). Check out the examples below, they'll show you what I mean. Netscape's offset, 10 pixels to the right and 10 pixels down:
Internet Explorer's offset, 8 pixels to the right and 8 pixels down: Internet Explorer with the TOPMARGIN=0 LEFTMARGIN=0 tag. Notice there's no offset: Roses are Red, Violets are… Turquoise? You also may have visited pages where the colors were spotty or inaccurate, the pictures looking as if they were created in a Bizarro universe—the American flag has orange stripes, with gray stars on top of a periwinkle background. What we're talking about here is "color depth" or, more
simply put, the number of available colors that your machine's video card is able to show. If you have the latest, greatest video card installed and have it configured to show 24-bit (16 million colors), you'll get realistic, accurate colors compared to someone who has an older video card that can only go up to 8-bit (256 colors). And 256 may seem like a lot of colors to choose from. But when it comes to "designy" logos that use really specific colors
and require pixel-perfect line quality, that measly 256-color palette sometimes just doesn't cut it, and you get spotting, or what's called "dithering." This is when the video card does its best to use the limited number of colors it's given and find a happy medium between the desired colors and the limitations of the video card. For a great deal more info, check out Lisa Lopuck's article on Did you know… that there are 216 colors that look exactly the same on Netscape and Internet Explorer, regardless of whether you're on a Mac or a PC? They're called "The Browser-Safe Color Palette." If you really want to be compatible with everyone, you should read Yes, the Mac crowd comprises only 10% of computer users, but if you're gonna play nice, you should also consider Mac folks. In terms of viewing a Web page, their setup isn't much different than for PC users, except for a slight color shift. (If you really want an in-depth tutorial, go to Robert Berger's explanation). Below is a quick visual comparison of the difference in colors between a PC and a Mac.
On the left is part of a Web page on a Mac; on the right is the same thing on a PC. Notice the difference? If you don't have your own Mac to test this color shift, why not find yourself an on-line buddy that will help you periodically check your colors on her Mac? While you're at it, why not consider those who are on other platforms, such as
Sun Microsystems, and ask for their opinions as well? Speed bumps on the superhighway Most people make a big mistake with their Web site—they only view it from their own hard disk. Then the pages and pictures appear in no time. When you use your Web software's "Preview" feature you see your site, in your
browser, in no time. While this is all well and good for you, don't get too comfortable because everyone else in the world is going to see your site through their modem, their slow modem, so your site is not going to appear on their screen nearly as fast as it does on your own. Despite all the newfangled cable modem lines, T1 and T3 connections, the vast majority of your audience is still on good ol' modems, most of them at 28.8k speed. So that's the speed
you should use when calculating how long it will take a normal visitor to see your page. With a 28.8k connection, your computer can receive, at most, 2K per second. The old "your mileage may vary" adage comes into play here because most of the time the Web is so busy it
isn't running at optimal speed. So to figure out how long a page will take for someone else to see, add up all the file sizes (use the Windows Explorer or the Finder to show the filenames and sizes), and divide the total number by two. This sounds easier than it is, of course, because you may have a lot of files that make up a single Web page. There's the .HTML file, plus all the separate graphics files. The easier way: How fast is fast enough?
It depends on how impatient your visitors are and how important it is for them to read your page. At its slowest, you want your page to load in 30 seconds or less (which means all totaled, your page's files should be no more than 60K). More than that and people get bored and are likely just to link to another site. Less is more: Even if you think your page is fast, you should carefully reconsider every item on the page. Is that animated mailbox at the bottom of your page
really worth the extra wait? And since the Internet is usually slower during business hours and faster during vampire hours, make sure to check your pages during different times of the day and week. Because there are many who surf with their graphics turned
off (maybe they're only interested in finding textual information or have had their share of animated mailboxes), maybe it's a good idea to test your pages with the graphics turned off. While you're at it, you may want to check for these as well: ALT text description—this should be included with each graphic you put on the page since it tells your nongraphical visitors what that image is all about. (NetObjects automatically adds the graphic's filename as ALT text, but it's
even better if you take a second to enter something more descriptive yourself). HEIGHT and WIDTH tags—make sure you've included them with every IMG tag, because they'll help your pages load more quickly. (Not to rub it in, but NetObjects Fusion does this automatically.) Did you know… when there's not enough room in Netscape and Internet Explorer, sometimes the ALT text descriptions don't show up in place of the images? But if you hover your
cursor over that area, a little pop-up box will tell you what it's all about. Look below, see what I mean: Here's an example where there's not enough room for the ALT description.
But if you hover your cursor over that area you'll get a pop-up box with the description! Did you know... about With a Little Help from My Friends Finally, (whew, we're almost finished!) it's always a good idea
to find out how the rest of the world sees what you're doing. Unless you have every computer and operating system ever made at your disposal, you should consider asking for advice through newsgroups such as Some stuff to ask:
Two questions that cannot be measured quantitatively but are of infinite importance are:"How do you like my site?" and "What does it do for you?" They're simple questions, and you'll be surprised at how many different answers you'll get. Be thorough and polite when you're asking, and thankful when you've been helped. And make sure you return the favor when someone asks for your opinion about their site. It's a good way to keep the spirit of the Web alive. Off-line Previews: Away, Away From the Superhighway… You know how it's always better to test drive a car on a quiet road somewhere, so you can make your mistakes in peaceful anonymity, without having to worry about being told you're "number one" with the wrong finger? Consider your computer as that quiet road, where you can simulate your Web pages
off-line, not connected to the Internet, away from the hectic, traffic-filled Web. It's a much more efficient way of testing your pages, and your little sister will be able to use the phone at the same time. All good and righteous HTML programs will let you preview your pages off-line—it's like the eleventh commandment or something. And it's all done with a push of a button or a simple keystroke. For example, in NetObjects Fusion, when you're finished
creating your masterpiece and want to see what it looks like on a browser, all you have to do is push the Preview button on the upper right of your screen (or the keystroke Alt-P if you're mouse-challenged). And when you're good and ready to transfer your site to the Internet, just push the Publish button, and your files will be
transferred to your Web server. Whoosh!
About the Author
Illustration at top of page: from Ingo Fast´s Technology at |
|  |
|
| ||||||||||||||||||||||||||||||||||||
| |
 |
Testing 
If you click the middle one, your window will shrink a bit and will become resizable. And
by grabbing a side or a corner of your newly shrunk window, you'll be able to resize it into any shape you wish, even narrower than 600 pixels. This will really put a twist on the overall page design (which is a scary thing for us Web designers, so…uh…don't do it too much, OK?)
Press that Fusion eye to Preview! This will open
Netscape or Internet Explorer, you get to choose which one you want. I'd say the single biggest advantage of previewing offline is SPEED. Since you're not hampered by the Internet, you can literally fly with your design changes. And once you get the hang of that Alt-P keystroke, I promise you'll be tweaking and massaging your page structure 'til it's perfect.
