The Inside Story | Aaron’s Kidwriting Page | Aaron’s Home Page
Search | New | Contact | Subscribe

Designing Your Web Site

By Aaron Shepard

Printed in an earlier version in the SCBWI Bulletin, Sept.–Oct. 1998


For more resources, visit Aaron Shepard’s Kidwriting Page at
www.aaronshep.com/kidwriter

Copyright © 1998, 2000 by Aaron Shepard. May be freely copied and shared for any noncommercial purpose as long as no text is altered or omitted.


Book cover: The Business of Writing for ChildrenSo, you’ve decided that modern times require modern means—you’re going to build a Web site. Your Web space and Web software are ready. Now, how do you make sure that what you launch in cyberspace will be as effective as possible?

Here are some tips on designing your site. They are based on my experience with my own Web site (www.aaronshep.com), which in less than four years has had a third of a million visitors and draws up to 6,000 visitors a week.

 

Design for promoting. If the purpose of your site is to promote what you do, then you want a site that can itself be effectively promoted. The key word is resource. Offer something that people can use, whether for work or for entertainment. Make it different or better than what they can find elsewhere. And of course, make sure it’s aimed at people who might want your books!

For example, my own site has by far the largest collection of reader’s theater scripts on the Web—many of them based on my own picture books. Each time I add a script, I send a notice to email discussion lists that serve teachers, librarians, and others. The list moderators let me do this because the scripts are free and because I keep my site basically noncommercial. (Though I provide information on my books and appearances, I sell nothing there directly except out-of-print titles.)

I also mention the script in “Aaron’s Update,” an occasional email bulletin that visitors can subscribe to at my site. With its notices of new materials, the bulletin encourages return visits, while also providing news of my books, tours, honors, and so on.

In promoting your site, it’s essential to have a Web address that’s short, simple, and permanent. For this reason, plan to register your own domain name. A side benefit is that you can use your domain also for a permanent email address that forwards to your current email account.

Design for searching. “Search engines” like AltaVista and Infoseek have established themselves as essential tools for locating information on the Web. Not only should you visit the few most important ones and register your site, you should also make your site as “searchable” as possible.

One key to this is the hidden “meta” information you can put in the “head” of your Web page coding. Most important is a list of keywords for the main topics and concepts of a page. A word might appear already in your displayed text, but including it also as a hidden keyword gives the page higher priority in some search engines’ listings. This is also your chance to include words not found elsewhere. For example, the keywords for my home page include not only my name but also every common way to misspell it!

Another type of meta information you should include is “description” text for the page. This text is actually quoted by some search engines in their listings. In its absence, the quotes may instead be the first words of your page—which may or may not be helpful.

More on meta information and other search engine strategies can be found on the Web, including on the search engines’ own help pages.

If you have lots of materials and your own domain, you might want to give your site its own search function. Simple search programs can be found for free on the Web.

Design for navigating. Make sure there are links on each page—at both top and bottom—that let visitors move easily around your site without getting stuck in dead ends. Don’t assume they know even how to use the “Back” button! Also remember that a visitor may reach a page through a link from another site. If the page they reach has no links to others, your visitor might never get past it.

Many sites keep their links handy with a “frame” that stays always on screen. But I advise against frames. Not only are they difficult to set up properly, but they can cause annoying problems for visitors—especially those with smaller displays.

Design for minimal software. Multimedia can enliven a site, but if it requires special software, your visitors may not be likely to have it—or be willing to get it. All you can really count on is their browser and whatever plug-ins came with it. In fact, even if they have the additional software needed, their browser may not be set up properly to call on it.

On my own site, for example, I wanted to let visitors hear me read from my books. To keep the sound files to reasonable size, I used the RealAudio format. Since RealAudio was already a Web standard and the software was a free download, I figured that almost everyone would be set up for it. Wrong! My file access records at the time showed that the recordings were heard by only a fraction of those who tried.

There’s no real solution to this kind of problem except to wait for popular formats to be built into the dominant browsers or be included as standard plug-ins—and then wait again for the software to spread among users.

Design for slow systems. Professional Web designers delight in loading a page with graphics until it is excruciatingly slow to download. Don’t copy this! Remember that many of your visitors still use 14.4K modems! You can keep your pages fast by following these guidelines:

—Use graphics sparingly. Much can be done instead with color, lines, and tables.

—Make sure the graphics you use are no larger than you need. Reduce the dimensions if necessary with a graphics program.

—When preparing a graphic, keep the file size small by saving in the proper format. Cartoon-like graphics with solid blocks of single colors should be saved as GIFs. Photographs and more complex art should be saved as JPEGs. And JPEGs should be saved at “medium quality,” not “highest.”

—The image tags in your Web page coding should always specify the graphic’s dimensions. Otherwise, the browser must download the graphic completely before displaying the text that follows. (But don’t use the image tag to reduce the graphic’s display size. That slows things down!)

By the way, perhaps 15% to 20% of your visitors will speed up their browsers by setting them to not show graphics at all! Make sure these visitors can still understand and navigate your site.

The other big culprit in slowing down Web pages is large and complex tables, and especially “nested” tables—tables within tables. The developers of some Web page layout programs have decided that complex tables are the best way to position elements on the screen. Unfortunately, a page with such tables can take minutes to render on a slow computer. Tables are certainly useful, but they should be kept simple, with a limited number of rows and no nesting!

Design for different displays. It seems that most Web sites today are designed for monitors with display resolutions of at least 800 x 600 pixels. But many of your visitors will view your pages on narrower displays of 640 x 480, and Web-TV users have only 544 x 378! (These figures are for the number of “dots” of picture information on display, not the physical size of the screen—though smaller monitors are generally set to lower resolutions.)

To make sure, then, that no one has to scroll sideways, don’t use any graphics or fixed-width tables that are too wide for those narrow displays. If you’re working on a high-resolution display yourself, you can test by narrowing your browser window. When you do, the page should reformat to keep the entire width in view. If anything’s cut off on the right, you have a problem.

Keep in mind too that different displays will show your graphics at various levels of brightness. On an older or less expensive PC monitor, your graphics will probably look darker than on a more advanced display or on a Mac. So when scanning a photo, for example, you may have to adjust its brightness to a compromise level.

Design for different platforms. Whether you’re on a PC or a Mac, you don’t want to create problems for users of the other. Unfortunately, especially on older computers, the difference in the two system color sets can make a hash of your color scheme and even make your pages unreadable. So if you choose your own colors for text and background, be sure to stick to the 216 “browser-safe” or “Netscape” colors.

Macs and PCs also deal differently with display resolution. Some browsers, and all older ones, display fonts one-quarter smaller on a Mac. At the same time, they print out graphics one-quarter smaller on a PC. If you’re designing pages to print out, your best bet for consistency is to offer pages in Adobe Acrobat format.

Starting with Mac OS X, character codes are finally consistent between Macs and PCs. But users of earlier Mac systems must avoid using special characters like “curly quotes” and real dashes, instead sticking to the “typewriter key” ASCII characters or using special numeric or name codes in place of the characters themselves.

Design for different browsers. The page that looks wonderful in one browser may not work at all in another. The same may be true with the same browser in a version that’s older or newer or for a different platform! It’s important, then, to test your pages in as many versions of as many popular browsers as you can.

The best way to help your pages display consistently is to make your Web page code conform strictly to standards. If you’re coding by hand, include all “optional” end tags and resist any tricks that make a browser do what it isn’t meant to.

Unfortunately, even using a Web page layout program or a word processor’s HTML filter does not guarantee correct code. To check yours, use the syntax checker of a text-based HTML editor like BBEdit or Allaire Homesite, or else an online validator such as provided by the World Wide Web Consortium at www.w3.org. Also at that site is a free program for download called HTML Tidy, with versions for most platforms. This program automatically fixes many kinds of questionable code.

Also for consistency, avoid rushing to adopt new coding tags and features. Style sheets, for instance, work poorly or not at all in older browsers. Keep in mind that most of your visitors will use browsers that are one or more versions behind. Of course, you should also avoid tags and features introduced by one browser and not supported by others.

Design for low maintenance. Creating a Web page is bound to take more time than you expect, and so is maintaining it. To avoid becoming a slave to your site, limit the material that must be kept current—for example, news items, calendars, and collections of links to other sites. If you do add such sections, either keep them up to date or else remove them. You don’t want your site to look like a ghost town.

It’s also a good idea to start your site small. You are sure to refine your design as you learn more, and that’s easier to do with a few pages than with hundreds. As your design settles down, you can expand your site with more confidence and less backtracking.

Of course, the ultimate in low maintenance is to not create your own site at all but to piggyback on someone else’s. For example, major online booksellers like Amazon.com allow authors to contribute a great deal of information about their books and themselves. This might actually help book sales more than would creating your own site, because people who visit such booksellers are more likely looking to buy. By contrast, visitors to author Web sites often want resources for free.

 

As you can see, there are many considerations in designing an effective Web site. But if it works, you’ll be rewarded by an ever-increasing number of visitors who may never have heard of you otherwise. And it’s always a pleasure to welcome them.