So, you may be saying to yourself at this point, I can see where a web site can be useful in my development work. But how am I going to bring this about?

Fortunately, it's not hard. You can be up and running with a starter site within a week or so of the initial gleam in your eye, and you may not have to spend a cent (not counting your own time) to get started. Or you could call in a professional design firm and pay them a lot of money. Some smaller libraries have found web-savvy folks in their Friends groups -- folks who will be happy to get you up and running as part of their mission as Friends. If you have web access, a computer with a word processing package, and an online browser, you have everything you need to get started.

Priorities for Building Your Site

Your first priorities in building a site are straightforward: Develop an online presence and a mechanism for feedback.

We would argue that it is better to go online with a modest site in short order than to wait to create the Mother of All Sites. The reasons? First, your audience can't find you if you're not there. Second, the experience you gain putting up your pages will shape the second iteration of your site, and this will happen much more quickly if you go ahead and develop that modest site than if you take weeks and months in initial planning. Once you have a modest site up and running, too, you'll have built up some momentum that will make it easier to expand it.

Depending on the political climate at your library, you may need to involve a few people or many others in the approval process for your site. Site building is a kind of electronic publication, and one or more other people may need to be involved -- but, unlike traditional publishing, you can always "stop the presses" and make a change.

You can base your content planning on a very simple initial outline. Here's one as an example:

• Introduce your library
  • mission
  • programs and services
  • accomplishments
• Electronic case statement
  • plans for the future
  • current and future needs
  • Hot topic (what's new)
• Donor recognition
• Becoming involved
  • attending an event
  • joining a friends group
  • signing up for a newsletter
  • volunteering time
  • making a donation

You can do this in one page, or several. You can also start with one page and build as you have time.

What You Need:
Hardware, Software, Server Space

You can buy a lot of fancy equipment and software and a five-foot shelf of books to get started in web publishing. Or you can bootstrap your way to your first web site using manuals downloaded from the web and your own motherwit. Here is the absolute minimum you need in the way of equipment and know-how:

• A computer with enough horsepower to run a graphical browser
• A graphical browser such as Netscape, Microsoft Internet Explorer, or even the built-in AOL browser
• Minimal knowledge of hypertext markup language (HTML), or an HTML editing program
• A word processing program that lets you save as a text file
• Access to the Internet, including a file transfer program and space on a server
• A means of acquiring scanned images

Computer. For web authoring -- and by this we mean a combination of writing, design, and HTML coding -- a fairly basic setup works perfectly well. Laura uses a high-powered machine at Penn, for example, but does a lot of her authoring at home on a Tandy 486 with 8 MB of memory and no special software. If you have a graphical browser on your computer, you have a powerful enough computer to do basic web authoring.

Graphical Browser. At this point, the three browsers to consider are Netscape Navigator, Microsoft Internet Explorer, and the built-in AOL browser, which is simply a stripped-down version of an early version of Microsoft's product. At this writing, the World Wide Web Consortium is about to approve a new HTML standard, version 4.0, and features covered in this standard should be supported and displayed in the same ways by newer versions of Netscape and Explorer.

Knowledge of HTML, or an HTML Editing Program. HTML is the set of codes which, when embedded in a text document, tell the browser how to display a file and how to retrieve linked files. It's not difficult to pick up, especially for older computer users who remember code-based word processing programs such as WordPerfect (remember "Reveal Codes?"). For folks who are uncomfortable without a graphical interface, there are add-on authoring programs for Microsoft Word and Netscape Navigator, and sophisticated web authoring packages whose names and features change daily. The newest iterations are always reviewed and rated in the computing periodicals.

There are many excellent HTML reference books available -- cruise your local bookstore and select the one that looks the least forbidding to you, because that's the one that will be of the most use as you get started. For the motivated and stingy, there are also many HTML tutorials available on the web, free for the downloading. (In fact, Laura has created a one-hour overview, with "online slides" and helpful cheat-sheets available on the Web, and mirrored on this CD.) See Appendix B for a further list of online resources, including tutorials.

There's a good deal to be said for learning enough HTML to do fast fixes to your pages. Most experienced web authors prefer to do at least some of their own coding. The trouble with those WYSIWYG ("what you see is what you get") editors is that the WYG isn't always WYS. Sooner or later the authoring programs give you something that you absolutely didn't want. It's nice to be able to go in and make your page behave.

A Word Processing Program That Lets You Save as a Text File. You can create your page, HTML codes and all, using your favorite word processing package. But for a browser to read it, it must be saved as a text file. Most of the Windows-based word processors offer that as an option in the "save as" dialog box from the pull down menu. (If you're still hanging on to your old WordPerfect 5.1, you can "SAVE AS DOS" with the CTRL-F5, 1, 1 sequence, but be prepared: it's a slow conversion.) You can also build files with your computer's text editor (Notepad or Wordpad in Windows, SimpleText on the Mac), although these text editors lack many of the amenities that make word processing easier.

Access to the Internet, Including a File Transfer Program and Space on a Server. Yikes! you may wonder, how do I get this? If your library already has its own web site, it may be a simple matter of talking with your systems administrator. If your library depends on a local nonprofit (or for-profit) Internet service provider for e-mail access, that provider may offer server space as part of the service. Here in Philadelphia, we have an Internet service provider for local non-profits called LibertyNet that provides e-mail and modest web server space to bona-fide non-profits for an annual fee of $30, including all the communications software you need to get started. You may find a similar project in you area. Failing that, you may rent space from a commercial server.

As we noted in Chapter 5, if your organization subscribes to America Online or CompuServe, it already has server space as part of the subscription package. You can find online support to walk you through the process in both online services.

A Means of Acquiring Scanned Images. Somewhere along the line, you may want to acquire a scanner and image manipulation software such as Adobe Photoshop. With scanners becoming less and less expensive, they may well enter the realm of home-office equipment in the near future.

However, you don't need to run out and buy a scanner to get started. There are other options. You might get someone on your Board or one of your Friends to donate one. You may have a colleague, family member, or volunteer with access to a scanner who can provide you with the images you need for a starter site. Some reprographics houses are offering scanning services. Some photoprocessors are now offering a disk with scanned images as an add-on to traditional developing and printing (Konica's PictureShow is a good example). If you're willing to ask around and finagle a little, you may be able to stave off the purchase of a scanner for some time.

Simple Design Tips for Your First Set of Pages

There are as many opinions about good design on the web as there are web designers, and just about every web designer will be only too happy to share his or her opinions with you. Here are the design considerations we think most useful -- although we feel that content trumps all rules and so we break them when we need to.

Keep Your Home Page Simple. Surfers want fast response time when they make the initial contact with your site, and they'll be happiest if they get a fast-loading page that lets them start their site exploration quickly. Most surfers would prefer not to have to scroll while they're looking for the right page; if you can keep your home page compact enough to fit on the old standard 640 x 480 pixel screen, so much the better. Look for tips on making a page load more quickly, and test your page on a slow modem before announcing it.

Subsidiary Pages Can Have Longer Content. If your home page links to a page or pages that also serve as "menu" pages, you'll want to keep them simple as well. When the page's primary purpose is navigation, try to keep it short. When its primary purpose is to deliver content, it can be longer. Remember, too, that surfers who visit a library site expect to find something to read there.

Have a Response Option on Every Page. The beauty of the web is that it encourages interaction between creator and reader. Make sure that each page contains a device that lets the reader contact you. It can be as simple as a link that provides an e-mail form, or it can be a complex and sophisticated feedback form or questionnaire.

Plan for a Consistent Set of Navigational Tools to Appear on Each Page. For a small site, a simple link back to the home page will serve your needs. If you are building a site with multiple sections, you will want a consistent set of links (graphic or textual, or both) to the major subsections.

Remember the Text-only Surfer. A growing number of surfers are turning off the images when they use a modem to access the web. When they've surfed to a page with image content they'd like to see, they load the images for that page only. Be mindful of the needs of these users and provide a text-only alternative to any critical information that you've displayed graphically.

Use the Web as Your Tutorial. Another beauty of the web is that you can steal just about everything you can see. "Stealing" is a metaphor: by saving the document to your hard drive or using your browser's "view source" feature (from the "view" pull-down menu), you can examine the HTML coding that produced it so that you can produce comparable effects. If you find icons or other artwork that appeal to you, you can save them to your hard drive by right-clicking your mouse button, and if the site owner is amenable, you can then use them in your own work. (There is usually a link to the site maintainer, so asking for permission is fairly easy; without exception, site maintainers have been happy to grant us permission to use materials.) There are also many sites offering public-domain icons, buttons, bars, and other artwork.

Cracking the Code: HTML Demystified

Most people look at a document marked up with hypertext markup language (HTML) and get a little queasy; it's full of cryptic abbreviations contained within angle brackets and it bristles with forward slashes. How will I ever remember all that, you wonder -- and why should I?

As noted above, you can go to the "view" pull-down menu at the top of your screen and select "view document source" -- this will show you the raw HTML coding for this chapter. Yikes again! you say? Keep scrolling down, and eventually you'll find something that looks more like text. The scariest-looking bits of HTML coding are usually at the front of the document. Once you learn a "vocabulary" of about twenty codes, though, this formidable collection of angle brackets and quotation marks becomes remarkably easy to read.

We would argue that you should develop at least a minimal competence with HTML for all the same reasons that you learned long division: it's good for you and many times it's easier to go in and tweak than to mess with an HTML editor. Once you know a little HTML, though, we have no objections if you choose to use an HTML editor instead. Netscape is building an excellent suite of web authoring tools into the "Gold" versions of its browsers (which, by the way, are still free to non-profits), and there is an easy-to-use manual by Alan Simpson, with a CD full of useful companion software, available in most bookstores (Alan Simpson, Official Netscape Navigator Gold 3.0 Book, Netscape Press, 1996). Microsoft has created add-ons to convert Microsoft Word documents to HTML, as well as more sophisticated authoring tools.

You can find HTML primers online or at your local bookstore. When you've found one or two primers, these few simple concepts will help you make sense of what you read: the language is code based, the codes are contained within angle brackets, and most (but not all) of the codes come in pairs -- one code to turn an action on and another -- often the same code preceded by a forward slash (/) -- to turn it off. This is very similar to WordPerfect in "reveal codes" mode, except that here you have to type the code yourself instead of pressing a function key.

• Formatting codes control how a document is displayed on the page, and include things like bold face, italics, indentation, bulleted or numbered lists. If you wanted to put the word library in boldface in your HTML document, for example, you would type <b>library</b>. [MORE]

• Image codes instruct the browser to fetch an image file and display it within your document. A single code, not a pair, is all that's required, and a bare-bones image code looks like this: <IMG SRC="/alabook/chapters/mypicture.gif">. Within the angle brackets, you can also specify image dimensions, "white space" around the image, and the position of the image on the page relative to your text. These more complicated codes may look like this: <IMG SRC="/alabook/chapters/mypicture.gif" width="100" height="200" align=left hspace="10" vspace="10" ALT="mypicture"> All the numbers in quotation marks in this example refer to numbers of pixels; the rule of thumb is 72-75 pixels per inch, which is the standard screen resolution. The terms hspace and vspace refer to the number of pixels of "white space" around the image horizontally and vertically. ALT=mypicture tells the browser to display the word "mypicture" if the user has the images turned off. [MORE]

• Linking codes instruct the browser to retrieve another file and display it in the browser window. If I wanted to link to the University of Pennsylvania Library web site, for example, the code/text combination I would include would be <A HREF="http://www.library.upenn.edu">University of Pennsylvania Library>/A<. (This long piece of code is called a URL (Uniform Resource Locator). What does "A HREF" stand for? A genuine geek will tell you it means argument hypertext reference, but I find it more useful if less accurate to think of it as an abbreviation for "a link." [MORE]

  Remember, too, that the web is your tutorial. You can view the HTML source code for any document by using the "view source" command located in the "view" pulldown menu.

  Getting the Picture

  If push comes to shove, you can put together a graphically pleasing starter site with nothing but text and some navigational icons you've downloaded from a public domain site or from a private site with the owner's permission.

  But there's no question about it: your site will be much more appealing with illustrations. Photos can help you put a human face on your organization and its patrons; they bring recognition to staff, donors, and volunteers; they offer a testimonial to the vitality of your events. Photos and artist's renderings can combine to educate, inform and persuade on behalf of your current and contemplated projects.

  Ideally, you will be able to purchase a top-of-the-line flatbed color scanner and a powerful image manipulation package such as Adobe Photoshop (you'll need a powerful computer, though: at least 32MB of memory, 64MB is better, and a fast processor). But what if the $1,500 to $2,000 for scanner, software and upgrades isn't in the cards right now?

  Fortunately, you have some options. If you're not too proud to beg, you may find someone with access to a scanner who can prepare a few images for you to get you started. We personally know of three libraries in our area who have had entire sites (including images) done for them by members of their Friends organizations. Your Board, if you have one, may include a member with scanner access. (If you're really lucky, your Board will include a member who will buy you a scanner!) If you have a local nonprofit Internet provider (like our LibertyNet in Philadelphia), they may be able to help you out. Some reprographics houses are starting to offer self-service scanning stations by the hour. Others will do the scanning for you, for a fee. Laura recently tested photos-on-diskette that came along with her traditional prints from her supermarket photofinisher for an extra five bucks; while she prefers her own scans, she says these aren't at all bad. The photoprocessor software also exports the photos in web-readable formats in a series of pre-set sizes, and offers rudimentary photo-editing features.

  You can also manipulate images and computer graphics with a relatively inexpensive shareware program. We've downloaded one, PaintShop Pro, and tested it on a 486 with 8 MB of RAM running Windows 3.11. We wouldn't want to have to manipulate large images with this equipment configuration, but for photos the size you'd want to put on the web it works just fine, and it allows for a fair degree of manipulation and special effects. You can download an evaluation copy for no charge from http://www.jasc.com/ -- registration for the version we downloaded, at this writing, is a very reasonable $69.95. Many of the techniques you develop playing around with PaintShop Pro can be used if and when you move up to Adobe Photoshop.

  It's important to remember that graphics files are comparatively large. A 30KB text file will run for several pages when printed out; a 30KB image file may only fill a few square inches. Especially on your introductory pages, you want to make sure you don't add so many images that the page takes minutes to load.

  For a brief time, it was fashionable to have a home page that was one large imagemap, that is to say, clicking on different areas on the image would link to different pages. These home pages took excruciatingly long to load; and, to add insult to injury, the text-only surfer saw nothing but the word "IMAGEMAP" in brackets. Happily, this fashion passed quickly as its drawbacks became evident. The large clickable image can be an important tool in a library development site -- especially for a virtual tour of a planned new space -- but it should not be on the first, or possibly even the second, page a surfer clicks into. There's an excellent shareware program called MapThis! that makes image mapping as close to painless as it gets.

  There are several useful ways to work around the problem of images slowing page loading time. They include:

  • Putting in the image size in pixels in the image tag. This lets the browser lay out all the textual elements around a space reserved for the image instead of waiting for the image to load before displaying text. (Some HTML editors, such as the editing feature in Netscape Navigator Gold, do this automatically.) The surfer can start reading while the images load.
  • Making certain that you are saving in the fastest-loading file format for that image. Some images are saved more effectively as .gif (short for CompuServe Graphics Image Format) images, some as .jpg (short for Joint Photographic Group) images.
  • Setting up your HTML file so that a low-resolution "placeholder" image loads almost immediately, followed by a slower-loading, higher-resolution version. Putting in a small version of the image, with a link to a larger version for those who are willing to wait for the larger image to load.

  Getting It All Online

  You can build your entire site right on your hard drive, but eventually you will need to put it on the World Wide Web. This can be a complicated process, but it can also be remarkably easy. Netscape Navigator 3.0 Gold has a push-button publishing function. If you have chosen an Internet provider that accepts their publishing function (and Netscape has a list of them, available in the "Creating Net Sites" section of its web site), it's as simple as point, click, and upload. It's not much harder to upload traditionally with Windows or Mac, either: there are shareware programs (WS_FTP for Windows and Fetch for Mac) that are a real pleasure to use.

  If your library has its own web server, you'll need to consult with your systems administrator. She may want you to become minimally proficient with the Unix operating system -- for many fledgling web authors this is pretty scary but it actually only involves learning a handful of unintuitive commands. Or, you may be able to hand off files on a diskette and have someone else upload them.

  In Chapter 8, we'll look at taking your site beyond the basics.

  Jump back to
  "Chapters and Other Links"

  From the CD version of Fundraising and Friend-Raising on the Web: A Handbook for Libraries and Other Non-Profit Organizations. ALA Editions, 1998. Copyright © 1998, Adam Corson-Finnerty and Laura Blanchard, all rights reserved.