Imagination is a wonderful thing, and it's alive on each of the following sites. First, I'll visit with Science Friday Kids' Connection, which uses RealAudio to enhance the online experience. I'll look at ways Web designers can access this technology,
and where to get more information to do so. Next up is Freezone, an online kids' community complete with a variety of interactive components. Freezone is built on a commercial service model. I'll examine that model and show you how you might consider using
it for certain sites that might call for this type of treatment.
Crayola teaches us a lot of interesting information about crayons, as well as other bits of information that keep the audience interested. What should a Web site teach? I'll offer up some ideas here, and a worksheet to help define what you might offer
for your clients. Seussville is a pleasant journey into simplicity and clarity, and I'll ask you to question whether simple approaches to Web sites can help your sites reach the right audience.
Kid'n Around is a 'zine that uses background color, and I'll show you how to be sure that your background colors are pulled from a safe palette. You can visit Appendix C to see an example of the safe palette as well. Young Brian
Giacoppo has created a great site about geography, called World Surfari. This site allows for a lesson in margins and blockquoting.
Just because it's called the Yuckiest Site on the Internet doesn't mean it really is. But it does have all kinds of fun things like worms and bugs, as well as a perfect example of the Low SRC/High SRC image trick. International Kids' Space presents a
fine opportunity to design help pages that are effective and complete. Mello Smello is an attractive site, except for the horizontal scroll bar that appears if you're visiting with a 640x480 monitor—and most people are. I'll show you how to design
sites so as to avoid that scroll bar, and give Mello Smello the fix for their site in the process! Finally, I'll look at the role of the copy editor in Web site design, and show you a mistake that could have been avoided on MCA/Universal's Home Video Kids'
Playroom.
Figure 10.1. Splash page from Science Friday Kids' Connection.
When organizations come together to pool resources, exciting opportunities can occur. This is the case with Science Friday Kids' Connection. Sponsors from National Public Radio and KidsNet, and grants from the Corporation for Public Broadcasting, the
ever Internet-supportive National Science Foundation, the National Education Association, and the American Federation of Teachers have created excitement with the Science Friday Kids' Connection.
This Web site is dedicated to promoting science and education using Internet technologies. The site is simply designed with attractive graphics, an easy-to-read layout, fully interactive forums for discussion of topics, and well-organized links to
supportive information. Science Friday Kids' Connection (also referred to as "SciFri Kids") is not geared for the youngest set. Although it offers a variety of activities, the site generally seems most directed at kids in junior high and later.
SciFri Kids features intelligent material supported by a range of scientists available for questions through the Science Friday mentor program.
National Public Radio ( http://www.npr.org/) has always been a progressive player, and when the opportunity to be involved in the Internet came along, National Public Radio, or NPR, was there. Apparently stimulated
rather than threatened by the growing availability of audio technologies on the Web, NPR embraced RealAudio and has been making its programs available via this technology every hour on the hour for well over a year. SciFri Kids is an extension of this
service. It is a particularly impressive program seeking to use this medium as a means of making information available on-demand 24 hours a day.
To understand the way RealAudio works, it's important to get a little background on the way the Internet handles data transmission. The idea behind the Internet is to send information, but how this information is sent is not consistent due to the
limitations of the Net's current, underlying technology.
If the Internet were capable of sending information all at the same rate of speed, with a time relationship that was predictable, this would be ideal, and many of the challenges Web designers face today would be moot. This ideal time rate, referred to
as "synchronous" (occurring at the same time) may be something that will eventually be consistently available. Until such a time, however, computer scientists and engineers have to be creative to manage data with some kind of reliability.
Pacing—attempting to send information that starts and stops at a predetermined interval—is one way engineers have attempted to bridge the Internet time-gap. Isochronous transmission is a way of delivering time-dependent data such as audio or
video. This type of transmission uses specific time starts and stops to send information over a given protocol.
Progressive Networks, the company that pioneered RealAudio technology, studied this problem in detail and came up with a solution that capitalizes on the way that isochronous transmission works. By developing a loss correction system to smooth out
bumps, and delivering paced, or "streamed" information, the end result is a technology that brings us an acceptable grade of audio at significant speeds.
In the case of Web developers who want to have rapid delivery of acceptable quality audio available for their clients, RealAudio is the current streaming solution. It is possible to send RealAudio files over 14.4 as well as 28.8 pipes without too much
loss in quality or speed factors, and, as the Web becomes a complete multimedia environment, audio delivery is going to be more and more desired by potential clients. So, Web developers not already familiar with this technology need to find out if it is
something that will be necessary for their clientele.
RealAudio technology demands three major parts in order to work:
Figure 10.2. RealAudio player in action.
RealAudio technology is somewhat involved, as already demonstrated. If you are interested in offering this exciting product, a great deal of information is available on the RealAudio Web site at
http://www.realaudio.com/. The information there is easy and accessible for nontechnical designers to gain a relatively painless education in the technology. There are also areas where more complex information is available.
Each Friday, National Public Radio broadcasts the Science Friday radio show. By Monday, that show has been encoded into RealAudio format and made available to listeners around the world. All shows are saved in the archive, where the RealAudio files, a
written synopsis, and other, related information on the topic are available.
SciFri Kids has done something quite intelligent by using the RealAudio files as a jumping off place for interactive learning via the Web. Although it's not necessary to listen to the RealAudio files to get the gist of what is being discussed, they most
certainly serve as a pivotal part of the site's value. There are interactive forums available for kids, parents, teachers, and any interested party to become involved with the themes set forth in a given program. A debate area takes a specific topic and
brings it to the forefront for discussion.
The power of RealAudio and SciFri Kids is that it is using what is known as convergent technologies in order to teach. It's a progressive model—taking what is essentially radio, mixing it with the interactive potentials of the Web, offering it up
to kids, teachers, and any interested parties, and planting the seed of ideas from which, well, anything can grow!
Figure 10.3. Freezone's home page.
Freezone is an online community for kids. Quality graphics, shrewd layout, excellent navigation, and tons of interactivity are all strengths about this site,, and strengths about sizzling Web sites in general. But what is especially impressive about
Freezone is how it has created an Internet-based community much like a commercial-based, comprehensive online service. The advantage is that it has no fees like commercial services, so kids the world-over can get involved at low or no cost.
Commercial services are excellent choices for families wanting to have controlled environments and content. I refer to these as "gated communities."
When I think of a gated community, I think of an exclusive, well-maintained area that promotes a positive and safe environment. Some people crave the security these communities offer, while others hunger for the hustle-and-bustle of urban sprawl.
It boils down to personal needs and tastes. Online gated communities provide some of the best information, services, and special interest groups available. These communities include the larger commercial services such as America Online, CompuServe, the
Microsoft Network, and Prodigy. The advantage to these is that information is typically well-organized, services easily accessed, and public areas moderated by hosts. For individuals wanting fast, easy, and secure options online, one of these services is a
ready choice. For parents who desire stricter control of what their children are doing online, these services are currently the best choice.
The World Wide Web is a vibrant place of great potential, resources, and vast access to international cultures. It is a bit more difficult to navigate, particularly for those new to computing. Finding where to go for your own needs could take time. The
advantages to the freer ranges of the Web lie in its typically less expensive, broader spectrum of unique information. Also, the Web sees daily growth in information exchange, services, and technology, making it very competitive in terms of scope and
future gains.
Freezone has found clever ways to bridge the gap between both. Areas that require moderation, such as chat, get it, as shown in Figure 10.4. The underlying concept goes back to the commercial environment—as well as another type of online
service—usually free and run by hobbyists rather than large corporations. This type of service is known as the Bulletin Board System, or BBS. BBSs seem largely to be dying out in the face of the Internet craze, but their structure, as well as the
larger structure found on commercial services, has served the online communities well for a lot of years.
Figure 10.4. Moderated chat programs on Freezone.
The end result of incorporating the gated model within the freedom of the Internet is powerful, as Freezone demonstrates. Web developers can take heed of the very specific aspects of such a structure, and whenever possible, think about using them within
their online projects.
The common model for these systems includes the following:
If you're about to design a Web site, think about this model. It is a very effective one, and one that is becoming increasingly necessary to provide for consumers of Web technologies. That Freezone has either chosen to build on this model, or naturally
fell upon it, has resulted in a very strong example of a seriously capable Web site model.
Figure 10.5. Crayola's colorful home page.
Remember the excitement you felt the day you got your first package of Crayola crayons? I sure do. I was completely enamored of the colors, the often exotic and mysterious names, and even the smell of the crayons was agreeable to me. To this day, I
blame Crayola for my inability to claim any single color as "my favorite." I love them all.
The Crayola Web site is, as one would expect it to be, colorful. It also is informative, teaching us everything about how crayons and markers are made, even giving us the history of Crayola, which is interesting because it is filled with little-known
facts that affect our daily lives. Did you know, for example, that tires are black because of a product Crayola made? It's true! Before that—for reasons you can read about on the Crayola Web site, they were white.
There is an inherent wisdom in offering some knowledge, a snippet of trivia, an iota of information on a Web site. Kids aren't the only ones who need—and want—to learn! In fact, even the most commercial of Web sites can make use of this very
simple, nontechnical technique of offering up some idea for the simple joy of knowing.
There are several things that naturally come to mind. Crayola has offered interesting historical tidbits about its company—and this is a great place to start!
Other items of interest would be ways products are designed or made, how a product or idea has impacted people from a philosophical perspective, and what an organization does philanthropically, such as offering a piece of information not directly
related to the product, but of interest to the company's goals. A perfect example of the latter would be the recent series of Nike television commercials, where gender law regarding athletics is used over images of women playing sports. The words
"athletic shoes" or "Nike" are never even heard, yet the impact of the commercial is potent!
Here is a short worksheet you can use to explore what your site might teach:
Writing out answers to these questions will help give ideas as to not only what you might teach, but also get you in touch with wonderful things you might have forgotten or taken for granted.
Another fine example of Crayola's contribution is its effort to educate moms, dads, and other adult friends or family. My favorite is a practical exercise in how to remove Crayola product stains from a variety of surfaces. The area is set up in a fun
way, with drop-down boxes that bring us to the information needed. My mom will be envious to know on-demand assistance such as this now exists to help parents undo the less-bright side of what happens when kids get down to having fun!
Figure 10.6. The Cat in the Hat's pointed navigation.
One Christmas in the not-too-distant past I found myself shopping for gifts for a friend's nieces and nephews. "They must have Dr. Seuss," he insisted. So we went in search of those familiar books. When we found them on the shelves, I picked
them up, noticing how the covers had changed from the more muted cloth to now-shiny cardboard. I opened one up and began to read—and the flood of time washed over me. I remembered the stories well. I became absorbed in the experience of Dr. Seuss and
the memories of a happy, distant time.
It's an interesting thing, how life has changed in 30 years. I learned to read with Dr. Seuss—Cat in the Hat, Green Eggs and Ham, Sam I Am. These characters and rhymes are as familiar to me as my keyboard has become—an
integral part of my life.
So it's easy to explain why I found the Seussville Web site to be so grand. Yes, perhaps I'm too busy working to worry about how to spend a rainy day, but one can never be too old or too engaged in the responsibilities in life to appreciate being
sidetracked just a little. Especially if it involves crayons, and scissors, and yarn—and a good book.
It's obvious that the intended audience here is quite young—three-and four-year-olds. But, even younger kids will enjoy the site provided someone is there to help them read. It's a very colorful site, with large print that makes it easy to read.
Follow the Cat in the Hat's pointing paw (see Figure 10.6) to get around. The simple navigation is geared to the younger set, but it is something Web designers should take note of! Maybe all Web designers need to think about gearing any site to a very
young audience. Simplicity is sometimes the answer to the most complex of life's questions.
In fact, I'm going to offer clarity and simplicity as a design concept, one that I practice when I run into a jam while designing heavy doses of information. The idea is to simplify, and think about how a younger person might experience a Web site.
Although I wouldn't apply a technique such as oversized print or very simple language to a credit union's site, the conceptual element of simplicity might enable you to find another perspective.
So, the next time you sit down to design a site—whether it's to sell a product or it's a purely creative endeavor—think about the ways a young child might experience the information.
How do you make the site sensibly organized? Instead of layering information very deep, it's often wise to keep things up toward the top level, or anchored with a main index.
What can you do to keep a site navigable without making the audience struggle? Notice how Cat in the Hat's finger points us along? This moves us very obviously to the next area of interest.
Do I have so much information that it is overwhelming? Where can I trim the excess without losing vital data? Arranging detailed information might be better in a virtual library rather than trying to put it all on the main site.
Keeping people interested is important, and that means making a Web site logical and enjoyable. Even the driest of scientific or mechanical information has something fun and interesting about it, and if you look at it from a child's eyes, you might just
be able to find the magic.
Figure 10.7. Kid'n Around's intended color.
Having visited a variety of 'zines in Chapter 3, "Sites that Speak: Newspapers and Magazines," you've already gotten an idea of what can be done in terms of magazines and layout, particularly when compared to the
original print versions.
Kid'n Around is, according to the magazine, the United States' "premier newspaper for kids and their families." Hinting at a more colorful design offline, Kid'n Around has taken a much more simple, but effective approach online.
Choosing to leave the typically bright color palette found in most children's Web sites behind, Kid'n Around uses only two main color choices, tan and black. Boring, one might think! But in this case, the focus is on the clever cartoons, the magazine's
humor, and the great content.
A technical lesson everyone can take home from this Web site is that glitz and glamour aren't always necessary to achieve successful style. The simplicity of this site's design, navigation, and communication are some of its greatest strengths.
A word of caution here, however. When selecting backgrounds and colors for a Web site, it is still good practice to make sure that the color is chosen from a "safe" palette. These are palettes that use the 215 colors resulting from a native
color management limitation in Windows 3.1.
Although this caution is something that will never be a problem for those of you using Windows 95 or Macintosh computers to surf, Windows 3.1 users—and there are still plenty out there due to the vast variety of home computers around—can only
see 215 colors.
What this means is that when you select a color outside of the 215 safe palette, colors dither to the closest color that they can manage. If you've chosen a soft yellow, say, with a Windows 3.1 Operating System, this yellow can suddenly be seen as a
very bright yellow, making the results painful to the eyes, and the careful design you've gone after is ruined.
In the case of Kid'n Around, the background color, which appears as tan with high-resolution monitors and video cards (see Figure 10.7), dithers to a mauve or deep pink with less sophisticated equipment. (See Figure 10.8.) This still looks good, so, in
this case, no one's the wiser except detail-oriented Web designers such as me. But for future reference, keep the 215 palette issues in mind.
Figure 10.8. The background color results when dithered.
A safe palette for Photoshop is included on the CD-ROM, and a GIF version of the palette is also included. Therefore, anyone can import these into their graphic program of choice and use them to select safe colors.
Figure 10.9. Nice, even margins on World Surfari.
This is a wonderful site from ten-year-old, Brian Giacoppo. Each month, World Surfari teaches visitors about a different geographical location. Visitors are treated to the history, culture, society, and even expansive demographic information about the
given destination of the month. This Web site is an excellent resource reference for anyone doing research on people and places, as well as a place to go and learn for the sheer fun of it!
World Surfari is very simply designed, using a subtle background and hand-drawn, colorized pictures for navigation and headers. The focus is on the content, which is laid out with a minimum of detail but with maximum effect and wisdom.
All too often, text-heavy Web sites forget the importance of margins. It's an odd oversight, considering that most all of us are familiar with margins in both the print and electronic worlds. Every book, magazine, or newspaper I read uses margins as a
method of pulling the text in from the absolute end of the page. When I sit down to write, my word processor insists on margins. Margins help text to appear neat and organized, and make the physical process of reading much easier.
Why they are overlooked in the creation of HTML documents is difficult to say. There are some very simple techniques that have been available for some time to create margins successfully. More recently, with most common browsers supporting tables, there
is a heightened level of control. For this section, I'd like to show the two most simple methods of creating margins. The Web would improve vastly in a second if most creators of pages took heed of this simple issue.
The blockquote tag is an effective way of creating an even margin on either side of the visual page. In fact, it is this technique that World Surfari uses to keep its margins nice and tight. (See Figure 10.9.)
Implementing blockquote is easy. In the body of your HTML document, immediately before and after the text you'd like to use, insert the opening and closing blockquote tags, <blockquote> and </blockquote>, respectively:
<blockquote> Sed tamen sine me loqui apud misericordiam tuam, me terram et cinerem, sine tamen loqui, quoniam ecce misericordia tua est, non homo, inrisormeus, cui loquor. et tu fortasse inrides me, sed conversus misereberismei. quid enim est quod volo dicere, domine, nisi quia nescio, unde venerim huc, in istam, dico vitam mortalem, an mortalem vitalem? </blockquote>
The resulting effect is demonstrated in Figure 10.10.
With Microsoft's Internet Explorer, there is a more flexible control beyond the blockquote that is just as easy: the margin arguments within the body tag. By arguing a specific number of pixels, you can draw margins specifically to your personal tastes.
Here is an opening body tag with standard arguments:
<body bgcolor="#000000" text="#FFFFFF" link="#0000FF" vlink="#FF0000" alink="#FFFFFF">
Here is an opening body tag with an Internet Explorer supported, margin argument:
<body leftmargin=200 rightmargin=200 bgcolor="#000000" text="#FFFFFF" link="#0000FF" vlink="#FF0000" alink="#FFFFFF">
As you see, 200 pixels have been argued for the left margin, and 200 pixels for the right margin. The result is demonstrated in Figure 10.11. Figure 10.12 shows how Netscape 3.0 ignores these arguments and defaults to the undesired end-to-end, rather
than an attractive, readable layout with margins.
Figure 10.11. Margin results as viewed with Internet Explorer 3.0.
Figure 10.12. The same code as seen through Netscape 3.0.
Just because it comes from New Jersey, it doesn't have to be yucky. In fact, I come from New Jersey. Suffice it to say that I was both pleasantly and humorously surprised to find such a great Web site from the heart of my old stomping grounds.
Sponsored by New Jersey Online, http://www.nj.com/, The Yuckiest Site on the Internet is geared toward education through fun and inventive means. The teachers are cockroaches (somehow fitting to certain areas of
Jersey), dinosaurs, and—my favorite—worms.
In fact, Worm World offers up a great example of a technique many Web developers employ, both as a solution to low-bandwidth issues and as a creative visual trick.
SRC is HTML's common graphic source argument. A standard, simplified tag (I've left out critical, but not absolutely necessary arguments for clarity's sake) looks like this:
<img src="worm.gif">
This requests the file, worm.gif, and serves it up to your browser.
There is an argument you can use to load what is known as a Low SRC image. This image is typically a black-and-white rendering of the worm.gif. The point of offering this is to give low-bandwidth visitors a graphic that loads very quickly.
High SRC, then, relates to the higher-resolution image. You can call this image to load on top of the low-bandwidth image for the high-bandwidth viewer. Here is the simplified syntax:
<img lowsrc="wormlow.gif" src="worm.gif" >
What this will do is load wormlow.gif first, and then follow it up with worm.gif, as you see in Figures 10.13 and 10.14.
Figure 10.13. The Low SRC image.
Figure 10.14. The High SRC image scrolling over the low image.
Part of the fun of Web technology is finding a creative use for a certain technique. The Low SRC/High SRC method has been employed to create a style of animation, albeit a somewhat limited one in light of technologies rapidly coming to the forefront.
The technique is based on using the lowsrc argument to load an image—full color, high-bandwidth (if you so desire) image, and then load a second image directly on top of it in the exact same place as the first one. The results can be quite clever.
Say you load a triangle first, and then an upside-down triangle above it. You'll end up with a Star of David, with the appearance of movement as the images render.
The limitations of this simple trick relate primarily to browser caching. Once your browser has both of the images stored in cache, the load will be so quick that it will miss the movement dictated by load time connectivity. Still, it's a fun technique
to play with. Of course, in its standard use, the Low SRC/High SRC technique can server the Web designer concerned with offering graphics at low-bandwidth load times.
Figure 10.15. International Kids' Space help page.
This clever site is the Web's answer to a salon for kids. With areas to share music, literature, and art, as well as chat and make friends around the world, International Kids' Space is certain to expand a child's creative horizons, as well as give him
or her a place to publish and be proud of achievements.
There is so much here, in fact, that it's very good that the Kids' Space designers made sure to give a visitor enough help. There is a guided tour of the site, a "jump" section where you can learn about what the many varied icons relate to,
and a help page (see Figure 10.15) that answers some basic questions about the recommended browser of use and some of its important functions.
The challenge that any Web designer faces when dealing with large amounts of data invariably falls back to navigation and layout. The non-linear aspects of the Web make this process especially formidable, and it is very easy to create a great site but
still have problems with navigation and structure. A help page with all of the information can sometimes be a quick and ready solution to these challenges.
The first step in helping visitors through large amounts of data is defining the three most important help needs on that site. If you've done a good job laying things out, this definition should be easily described.
Once defined, you have something quite concrete to work with. I'm going to set up a scenario and walk through it with you to demonstrate this concept in clear terms.
My three major needs are the following:
To reach a broad audience
To guide people through my content in a number of effective but easy ways
To offer a means of feedback, so people who find a problem or want a question answered can get to me
Now, I'm going to decide how my design relates to these needs:
I've designed my Web site to be viewed by everyone, but the best way to view it is by using the Internet Explorer 3.0 browser. The second best way is by using the Netscape 3.0 browser. The site is fully text accessible as well. So, I've covered my bases
with reaching the audience; however, I'd like to be sure that visitors have access to all of the necessary software to best view the site. As such, I'll need to make sure to put links to the best browsers on the site. Putting them just on the help page is
such a neat way of doing it, too! I don't clutter up my stylish design and risk losing people right away by placing browser links all over the place.
There are several ways to navigate the site. I have a navigational bar running along the right vertical edge, I have a series of icons along the bottom of the page, and there are text options as well as a full site table of contents. I can use an area
on my help page to describe different ways the icons and navigational options work, and how the table of contents can be reached from any page as a means of finding everything very efficiently. I also can take this opportunity to express that finding
unique ways of navigating the site is part of the fun!
I want feedback as to how people are navigating the site, and if there are specific problems that I can address. Here is the perfect opportunity to place a form or e-mail link for folks to get in touch.
Finally, I want to make this help page especially helpful by providing all of the help information right there. I think splitting up this type of information can be confusing.
International Kids' Space is a great place to pass some time, and offers a lot of help with navigating the content. I would recommend one help page that focuses on answering the navigation and user issues as a combined, cohesive effort.
Figure 10.16. The Mello Smello home page with an evil horizontal scroll bar (lower-right corner of browser).
Not only will the name delight young visitors, but the great Shockwave games are fun and educational too! Mello Smello is a company that is deeply involved in the creation and promotion of kid-oriented products, and that such a company would have a Web
site, much less a Web site geared toward kids, comes as no surprise.
What is especially pleasant about the Mello Smello site is the ample use of Shockwave's multimedia resources to add great animation and audio to the pages. A program as specialized as Shockwave is not always the best choice because, as always, you want
to reach as wide an audience as possible. The Mello Smello site designers have done a good job of making the information compatible for people without Shockwave capabilities, but also offering ample links for people who do have the capabilities to go and
get the software.
One unfortunate oversight is that throughout the site I see one of my least favorite things on the Web, and that is the evil horizontal scroll bar. (See Figure 10.16.) What's that? Well, it is something that is unnecessary. It appears frequently,
though, because Web developers using nice big monitors at high screen resolution forget that many—possibly the majority of—well-equipped Internet surfers see the Web on 14- or 15-inch monitors at a 640x480 screen resolution.
Avoiding the horizontal scroll bar is so simple! Maybe that's why it bothers me that it appears so frequently.
When creating a page, remember that 640 pixels is the total width that the sum of all your parts should equal, in order to avoid the appearance of that dreaded scroll bar. Watch what happens when I examine the elements of the Mello Smello site
and try to find why the scroll bar is there.
Okay, you say, that's only 610 pixels! It should fit just fine. Well it doesn't. So I looked in the source code to find out just why.
This Mello Smello page is laid out using tables, an intelligent way to effectively control page elements. Tables have a variety of arguments; one is called "cell padding." This is what the source code for this section looks like:
<CENTER> <IMG SRC="gfx/mstitle.gif" ALIGN=MIDDLE BORDER=0> <TABLE BORDER = 0 CELLPADDING = 10> <TR><TD> <IMG SRC="gfx/msindex2.gif" BORDER=0> </TD><TD> <IMG SRC="gfx/vline.gif" HEIGHT=300 ALIGN=MIDDLE BORDER=0> </TD><TD> <A HREF="games/guestbook.html"><IMG SRC="gfx/games.gif" ALIGN=MIDDLE BORDER=0> </A><BR>
Now, turn on the table borders just to see what the controls of this page look like. (See Figure 10.17.) See the space around the sections? This is cell padding.
Figure 10.17. Mello Smello with tables shown.
If I drop that figure to 0, I end up losing the extra space, and I've almost eliminated the horizontal scroll bar. Looking again at the code, I see a couple of other things that can be done to get rid of it. First, I'm going to close the <center>
tag before the table begins. It's the top image mstitle.gif that I want centered, not the table.
<CENTER> <IMG SRC="gfx/mstitle.gif" ALIGN=MIDDLE BORDER=0> </center> <TABLE BORDER = 0 CELLPADDING = 0> <TR><TD> <IMG SRC="gfx/msindex2.gif" BORDER=0> </TD><TD> <IMG SRC="gfx/vline.gif" HEIGHT=300 ALIGN=MIDDLE BORDER=0> </TD><TD> <A HREF="games/guestbook.html"><IMG SRC="gfx/games.gif" ALIGN=MIDDLE BORDER=0> </A><BR>
The results? Much better, as shown in Figure 10.18.
Figure 10.18. The horizontal scroll bar is gone!
Generally speaking, Web designers should anticipate layout issues such as this when preparing their design. It's a wise rule of thumb to make 600 pixels the absolute width of any given total graphic or table. For this site, I would recommend
dropping the size of the main graphic about 50 pixels in width, just so the extra space can be regained.
Figure 10.19. MCA/Universal Home Video Kid's Playroom home page.
Familiar faces such as Babe, Balto, and Casper the Friendly Ghost greet you from a virtual playroom filled with colorful sights, sounds, and interactive games. Each character has a dedicated page with links to arcade games, and a coloring book
adventure.
The site will delight the youngest of kids, particularly those who are movie fans. It is possible that many of the younger children won't even be able to read the text parts of the site, which are generally well-written and graced by the presence of a
variety of attractive graphics.
Yet, in reading along, I stumbled upon some mistakes in the writing! Grammar and spelling mistakes are unacceptable on the Web. I'm ashamed to say that I've made my fair share, and criticizing others who make fabulous sites is definitely a classic case
of the pot calling the kettle black. However, the fact remains that copy editing is yet another overlooked part of the Web. Shame, shame to those who don't do it—particularly on a kids' site, and very particularly when that site is sponsored by a
major industry!
If no one on your design team has copy editing skills, hire someone who does. It's that simple and that important! As trite as it might seem, you must be extra careful in this new medium to not lose grasp of something apparently being lost in mainstream
US education—literacy. It's disturbing, and the worst part is that in the electronic medium it seems to be especially rampant. But the good part is that, unlike print or other expensive media such as TV, you can change a typo or grammatical error
online in the blink of an eye.
The offending example from the Kid's Playroom was found on Babe's page. (See Figure 10.20.) Notice the "it's" in "every animal has it's purpose?" Tsk tsk and oink oink. Well, those of you who remember your grammar rules know the only
time an apostrophe appears in "it's" is when it's (as in "it is") a conjunction. There is no such thing as a possessive "its!"
Figure 10.20. The offending "It's."
"It's" and "Its" is a common mistake, and my most despised—maybe I had a traumatic experience making the mistake at some point in my own history. I bet a million to one you can go to some of the sites that bear my name and find
naughty grammar mistakes, but you won't find that particular one. You will, however, find a person who will jump instantly to fix it.
So be aware of grammar, spelling, and copy editing as being part of the Web design process. You'll make a better impression, and give all the kids a great big laugh when they see me slip off of this soapbox!
Teachers always made me check my answers on tests, usually because I got so many things wrong—well, really only in math. I sure could have used the Web for extra assistance back then!
I'd like to recap the lessons of the Web sites featured in this upbeat and fun chapter. Much like going over my math problems, I learned a lot in the process of this chapter, especially because I've enjoyed myself so much with these kids' sites. The
lessons come more easily when they're fun, at least for me! I suspect they do for you, too. That, in essence, is the most important lesson offered here—Web sites should find the fun and the magic. Even if it's just a small, clever piece of
programming, or a humorous anecdote told by the president of the corporation that you are doing the design for. It's hard to have completely dry material work, particularly in the commercial mien.
Other topics covered include
I have some business to take care of. Big business, in fact. Check in with the next, and final, chapter, as I look at the design of some sites that use the Web for commerce.
