How I Built This Website

The tools and processes used to create this website have evolved dramatically since 1995, when I launched it. Here is a brief description of how it was done, along with some advice about how to create your own.

Computer Equipment

My 1995 computer system seemed pretty hot at the time, but now even the cheapest discount PC will put it to shame. Here's a photo from those days, showing me in front of my "blazing" 90mhz Gateway computer. And, yes, that's a box of 5.25-inch floppy disks on the desk.

I have gone through a few computers since then. I currently use a Dell laptop in my office and an older desktop upstairs.

You don't need an expensive computer to build a website. What you need is a machine that can connect to the Internet and do basic text editing and image processing. A fast machine will process images faster than a slow one, but there's no web task that I couldn't still do on my 1995 system.

Photography

All of the early photos were taken with my trusty old Nikon FE2 35mm film camera. Affordable digital cameras were still a dream of the future in 1995.

After having the photos made into prints, I used a flatbed scanner in the employee library after hours to convert the images to digital form.

Each digitized photo was then processed using an art program such as Paint Shop Pro or Photoshop.

I didn't have a fancy photo studio. Here's a view of one of the earliest setups.

Yes, that's a corner of our kids' playroom at the time. The subject radio was placed on top of their puppet theater (they painted the sign, by the way), and I arranged various house lamps and clip lamps to provide lighting.

The camera stood on a tripod in front of the radio. The set being photographed is an Admiral 5E22, which served as the front-page icon for our photo gallery during the website's first ten years.

One lesson I quickly learned is that you need to use a blue filter on a film camera when shooting with daylight film, to avoid too much yellow in the resulting image. Modern digital cameras typically have adjustments to prevent such problems.

In subsequent years, I have used a variety of other film and digital cameras. My favorite nowadays is a Nikon Coolpix digital camera that I bought a few years ago. Its resolution is more than adequate for web pages, and I love the convenience of snapping a few pics with the camera, sticking the memory card into the computer's card reader, and immediately seeing how they'll look on the screen.

For a gallery, photograph your radios against a plain background. I made a large white background by taping together some large pieces of thin white poster board. If you lay the photo board down on a table next to a wall, you can bend it so that half is on the table and the other half sits up behind the radio. The gradual bend in the flexible board where the table meets the wall allows you take a photo with an "invisible" background.

I have a few pieces of plain fabric that I use for other photos, depending on the color of the subject. If you think the background color doesn't matter, try photographing the same radio against a white, medium gray, and black background. Your automatic camera (most contemporary cameras are automatic) may adjust settings so that one background gives a better result than others.

Lighting can be an art unto itself. My first piece of advice is to avoid using your camera's flash at all costs. Flash lighting creates glare and unnatural shadows. You'll get much better results by turning off the flash and using either natural light or supplemental indoor lights.

If you're working indoors, try setting up in a room with the best possible natural light. You will usually need two or more supplementary lamps to evenly light the radio all the way around.

Put your camera on a tripod and be careful to align it with the subject to avoid unwanted effects such as skewing.

If you don't want to mess with lights and backgrounds, try bringing your radio outdoors. Natural light can be wonderful. I have gotten the best outdoor shots by putting the radio in "bright shade," for example, on the north side of a house where there is plenty of ambient light but no harsh sunlight or shadows.

Image Processing

No matter how you acquire the digital image, it will benefit from some tweaks before you incorporate it into a web page.

I use either Paint Shop Pro or Photoshop for this work.

In addition to cropping and sizing, most images in this website have had some adjustments for brightness, contrast, color balance, sharpness, and so on. The goal is not to make the image look "better than real," but simply to reflect what the radio really looks like.

Most of the images in this website are saved in .JPG format, which offers good compression (resulting in small, quick-to-load files) without sacrificing too much image quality. I also use .GIF format, especially for black and white images or where I want a transparent image background.

Even though many people now have high-speed Internet connections, it's a good idea to use a compression factor when saving image files, sufficient that the images will load quickly. Most of my pages also offer "thumbnails" of all the photos, so that the page itself will load quickly, and then people can click on the thumbnail to view a larger version of the image.

If you use consistent images sizes throughout your site, that will simplify any future site-wide changes.

HTML Editing and Validation

When I began work in 1994, there was no such thing as a WYSIWYG ("what you see is what you get") HTML editor or website manager. I wrote the first webpages as raw text files using DOS Edit or Windows Notepad as my text editor.

Over the course of the next ten-plus years, I tried out a variety of WYSIWYG HTML editors, both at home and in my "day job," which increasingly involved HTML publishing of very large reference documents. If I were creating a large website from scratch nowadays, I would use something like Microsoft Front Page, which includes site management tools in addition to editing facilities.

I still use Wordpad for everyday HTML editing. It's a simple, quick editor, and since I already understand HTML, I don't need anything fancier. Since my files are still hand-written HTML, and don't contain superfluous coding, I could still use Notepad, for that matter.

You can also use Microsoft Word to compose your page and then save the document as HTML. This is convenient, but be aware that Word inserts a large amount of extra HTML code, compared to a hand-written page, so your document may be confusing to edit later on using some other program.

Although I don't use Word as my primary HTML editor, I do use its grammar and spelling checkers on every file. After noting any corrections, I close Word and make the edits in Wordpad, to keep my HTML files small and easy for a human to hand-edit the source.

There are many online resources that will help you learn how to write web pages in HTML. The World Wide Web Consortium has a good Getting Started page.

It's a good idea to run your HTML page through a checker, to ensure that its coding is valid and will display reasonably well on different browsers. Every page on my website has been validated using the World Wide Web Consortium's free validation service.

In addition to grammar/spell checking and HTML validation, it's important to test your website using at least a few of the available browsers. Before posting any new page to the Web, I view it locally using Microsoft Internet Explorer, Netscape Navigator, and Firefox.

The various browsers look very similar when displaying a plain-vanilla HTML page, but differences are noticeable for a page that's very complex or which diverges from W3C-approved coding.

I don't try to adjust for every tiny difference among the browsers, but if I create a page that looks great on two of them but displays very poorly on the third, I know that it's time to change something (often through simplification). If you perform HTML validation before previewing the page on multiple browsers, this should not be a big problem.

If your website contains more than one page, you'll find it very beneficial to make all of the pages as consistent as possible. Some day, sooner or later, you will want to update your site in some fashion. If the internal coding and external design of your pages are all different, this can make the update extremely difficult.

A couple of years ago, I decided to update the visual design of my website and reorganize (in most cases, simplify) its navigational structure. I thought that I had been writing pretty consistent HTML for the preceding ten years, but when it came time to implement the new design, I found myself doing a lot of hand editing, to account for differences that had crept in over the years.

The biggest chore was regularizing the internal format of my hundreds of HTML files, so that in future I could implement site-wide changes through a mass search-and-replace action.

This factor is less important if you're using a WYSIWYG editor rather than hand-writing your HTML as I do. But the general point still applies. For example, if every page in your website has a different sort of navigation bar, you'll have to hand-edit every single page if you make a site-wide change in navigation, add new sections, and so on.

Website Design

The best advice I can give is to keep it simple!

Beginners are often tempted to load up their web pages with too many graphics, animations, fancy scripts, and other bells and whistles. This can make your website hard to maintain, and annoying for visitors who are simply looking for a piece of information.

The most common beginner's mistake is to put everything into a single, gigantic page. If such a page contains lots of pictures, it will take forever to load, and some visitors may get impatient and leave in frustration, before viewing your content

A well-designed website will divide different pieces of content into separate HTML pages, with links between them to allow visitors to quickly navigate to points of interest.

Start out with a simple, straightforward organization that is easy to navigate. If people can't find their way around your website, then you have wasted your time writing a bunch of pages that nobody will ever see.

Organize your content logically. If you go to my home page, you'll see how this site is organized. There is one section for the photo gallery, another for general information sources, another for building projects, and so on.

Navigational aids are very important. The high-level pages in this site have a table of contents on the left, showing all the major areas. Lower-level pages have a little navigation bar at the top that shows where you are located within the site. This page has a navigation bar showing that it's part of the Features section, which is one level below the home page.

Such navigational aids are especially important now because of the widespread use of search engines such as Google.

When I launched this site, people found new websites primarily by surfing—following a trail that led from one link to another, and one site to another. For example, someone who was curious about the Hallicrafters model SX-28 radio might have started at the home page, then clicked on the Gallery, then clicked on Communications, then clicked on Hallicrafters SX-28.

Nowadays, many people start with a search. Our hypothetical visitor may search for "Hallicrafters SX-28" on Google and go directly to that page rather than tunnel down through the heirarchy. The navigation bar at the top of that page shows the visitor that this page is not the only one in the website. It is part of a section named Communications, which in turn is part of a Gallery, and so on.

The statistical logs for my site illustrate this dramatically. During the early years, I kept a "hit counter" on the home page, which incremented every time somebody visited that page.

By the time I retired the counter years ago, it had recorded more than one million hits, which may seem like a big number. But the true number was much larger. During recent years, this site has consistently received several thousand separate visitors per day.

The majority of these visits begin with a search and direct the visitor to a specific page within this site, not to my home page. This underscores the importance of providing clear navigational aids on every page of your site, so that a visitor who lands at Page X can see that's there more which might be of interest.

Once your site is up and running, it's instructive to look at its statistics. They will tell you which pages are most often visited, how long each visit lasts, how many pages were visited in that session, and so on. By analyzing this data, you can get a sense whether your website's organization is helping people find what they're looking for.

In addition to its visible organization, your website will have a physical directory structure on the web server. I prefer what is called a "flat" directory structure. All of my hundreds of HTML pages are stored in a single directory. My thousands of image files are stored in a single subdirectory named "art."

This structure simplifies your links and website management. For example, in my web pages, most IMG SRC tags to display a picture look something like this:

src="art/halli1266.gif"

If I revise the visible organization of your website, I don't have to change all of the links that point to my image files. They are all located in "art."

If you use descriptive names for your image files and HTML files, it will still be easy to locate them within these large directories. In the early days, I used old-fashioned filenames like the one shown above. Since then, I have adopted more descriptive names such as RCACT-100RefinishedCabinetRear.jpg.