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.
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.
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
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.
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
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
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.
The best advice I can give is to keep it simple!
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
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:
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.