webmonkey/design/

One Site, One Day, Five Bucks
by Joshua Allen

Before I broke into the Wired Digital office and tricked the Webmonkeys into thinking that I worked here, I earned my keep as a low-level manager at InterGlobe AudioWorks, a 12-person company committed to distributing the highest-quality motivational/romance-enhancement audio cassettes available today. We were low on resources and financing, but high on hope.

Although we carried top-notch products, we simply didn't have the necessary funding to reach the masses. Then one fateful day, the boss came running in with exciting news: There was a venture capitalist who'd heard our "Holy Matrimony with the Gender of Your Choice in Three Minutes or Less" tape and was interested in backing the company. Not only that, but this benefactor was none other than famed sumo wrestler Wakanohana who, as you know, took the grand champion Yokozuna rank at the Gogatsu Basho earlier this year. Needless to say, we were all thrilled and more than a few of us shed some tears.

There was a problem, however. Wakanohana said he'd been doing some research on our company and had been unable to locate our Web site. Our boss, thinking quickly, said that our site was "temporarily out of service" but that we were "transferring our collateral to a new DOS/QED server" and it would be up in the morning for Wakanohana's perusal.

As you might have guessed, we didn't really have a Web site. We were so absorbed in designing killer labels and editing out traffic noise from our "Top Secrets of Successful Middlemen" series that we never got around to our online presence. And now we had to get something up in 24 hours, something that would sell the company to Wakanohana, and something that wouldn't cost too much.

"But boss, it costs upwards of $17 million to create and maintain a corporate site!" This was Big Bill, always the defeatist.

"We'll just have to make do with what we have," the boss said, anxious sweat pooling around his hair implants. "C'mon, everyone, empty your pockets. What do we got?"

The grand total budget for this project: US$4.98. The job, of course, fell in my lap, as did all of the sucky menial jobs at InterGlobe AudioWorks. But I had put together that Bea Arthur fan page back in '95, so the gang figured I was the man for the job.

Folks, I'm here to tell you that it is, indeed, possible to create a halfway-decent Web site for $4.98 (or even less with some "creative management") in 24 hours. So if you're a Web neophyte and find yourself in a situation where you need a site fast and cheap (need to put a résumé online or create party e-invites real quicklike?), just take a gander at my hour-by-hour diary to discover exactly how it's done.

What You Have vs. What You Need
9 a.m.
Emergency meeting with the entire staff was delayed while Morris swiped some danishes from upstairs. Total cost: $0.

10 a.m. to 12 p.m.
Emergency meeting with the entire staff. First we determined what resources were available to us. Fortunately, we had one computer with Internet access, something the last tenants of the basement had left behind. They'd evidently cleared out in a great hurry. (I'm going to assume, since you're reading this online, that you also have access to a computer and the Internet, so you can strike that expense off your budget from the get-go.)

Next, the boss established what had to be included on the site. It didn't need to be a huge, bells-and-whistles production, but it had to cover the basics and look professional. Here's the boss' list of necessary items:

I nodded solemnly and said "No problemo." However, since I knew that figuring out secure ordering and credit card authorization would take way too long, I quietly suggested that instead we offer a form in which people could request additional information or email orders to us. The boss said that was acceptable but snatched away my vacation time as punishment.

Getting Sketchy
12 p.m. to 1 p.m.
Lunch break at Red Lobster. As the crew tore crustaceans asunder, I made some sketches on my napkin, planning out the best way to organize the information on our site pages. The whole site would consist of five pages (the main menu, the company bio, the product list, the testimonials page, and the order page), but they could each be constructed out of the same template. I just had to come up with one solid design and then plug the various content into that, and I'd be done. There was no time to reinvent the wheel here, so I stuck to the standard logo-at-top, navigation-on-the-left, content-in-middle setup.

To give this whole story a touch of realism, here's that historic napkin:




Again, nothing fancy, but we were trying to look like a solid business and not dangerous, bleeding-edge experimenters. (Yuck! Is there anything worse?) The boss wanted the site to "match" our existing products, so there'd be a consistent and recognizable theme across all of our promotional materials. "When people see purple and goldenrod," the boss would say every hour, on the hour, "I want them to think InterGlobe AudioWorks." So there was no point in fretting about the color scheme - that work had already been done by the fly-by-night designer who'd thrown together our press kit the year before. The sidebar would be purple, the rest of the page would be goldenrod.

Toward the end of our meal, Bill made a big scene - something about his shrimp still being alive. Total cost for lunch: $0.

1 p.m. to 2 p.m.
When I got back to the office, I fleshed out my primitive sketch, figuring out exactly what content I'd be using (most of it would be pilfered from the press kit, so at least I didn't have to worry about writing and editing) and how the pages would be interlinked. It was important to get all of this nailed down before even picking up a computer (or however you operate them). I didn't have time for any last-minute changes, so I sorted everything out and put it all down on paper for the boss' approval. Since he had exactly one option to choose from, the sign-off didn't take long.

2 p.m. to 3 p.m.
This is the designated nap time for the office, and I wasn't about to break protocol. As I drifted off into sleepyland, it occurred to me that I probably wanted to start thinking about where I was going to steal all of the pricey software I'd need to create this site.

Hard Up for Software?
3 p.m. to 5 p.m.
After nap time, I played a quick round of Ping-Pong with Michelle, then I fired up the computer. It was an oldish Mac and looked a little grimy, but I pressed forward and cranked that modem up to 11 and got on the Web. (Luckily, there was a copy of Netscape right there on my desktop, but that, of course, is free for the downloading). I did some quick "surfing" to find out what I needed in order to build a site and get it online. Sure enough, I ended up at Webmonkey, and from my quick skimming, I realized I needed to get Photoshop, DeBabelizer, Flash, Dreamweaver, ImageReady, blah blah blah. It would cost thousands of bucks to get all that stuff! Did they think I was made of cash? For the first time, I felt real fear.

5 p.m. to 6 p.m.
I took a step back and examined the process one component at a time. First things first: I needed a place to put this site. If you have an ISP account, then it's likely you have at least a little server space for a Web site included with your subscription fee. But to find out what we had, we'd have to call the ISP. Not only would this mean hours of waiting on hold, but the ISP might finally figure out that we'd been using the last company's leftover account and cut us off. That was simply too dangerous an option. There are plenty of Web-based services that will host a site for free, and that seemed a lot less risky.

Of course, nothing is really free, and you pay for these services by having some kind of ad attached to your site. There's also the stigma of having a URL from one of those places. Perfectly fine for a homepage, I guess, but this was supposed to be a corporate site. Even if I used the space on our ISP, our URL would still be something amateurish like http://www.cheapo.net/~audioworks. The only way to get a vanity URL would be to shell out some extra dough to InterNIC; our four bucks and change sure wasn't going to cover that. The boss would just have to be happy with http://members.tripod.com/interglobeaudioworks/.

That's right: I went with Tripod. And let me just say that this decision was made before I worked at HotWired and before HotWired was in bed with Lycos, who is in bed with Tripod. I had done a quick survey of the various free Web site providers and decided they were all pretty similar, but I liked Tripod's extras (templates, free graphics, guestbooks, etc.), which all looked pretty lame, but were certainly tweakable. Plus, Tripod was good enough for my favorite traveling font salesman Chank Diesel, so I figured it couldn't be all that bad.

So I cruised on over to Tripod and set up a free account. It took like five minutes. Our site now had a home. Total cost: $0.

Now all I had to do was make the pages. Mama.

Make Someone Else Do It
6 p.m. to 8 p.m.
I checked out a few online HTML tutorials but kept nodding off. It was simply too late to learn everything I needed to know. I had the basics of HTML (if you don't, take a look at our Teaching Tool) under my belt, thanks to my Bea Arthur, Bea Very Arthur site, but there just wasn't enough time to build a site from scratch. I needed something that would do most of the work for me. That's the American way!

I thought about going to sites I liked and stealing their code, but it would probably take longer to sort through their nonsense and modify it than it would to come up with my own nonsense. Plus, just the mention of that idea made our legal department, which consisted of Harry "Shakes" Grinnell, drop to the floor and start foaming at the mouth (fortunately, we have a popsicle stick set aside for just such situations). So I needed either a WYSIWYG editor (one of those programs that lets you just move text and pictures around and then figures out the HTML for you - the Webmonkeys seemed to loathe them) or a template that I could easily mess around with.

Tripod had a number of templates that were free for the taking. It even had a My Company Page setup - you just type in some fun facts about your business, pick an image, and it generates a page for you. Here are the results. Not bad for five minutes, but also really ugly. Plus that globe cartoon was from Tripod's free image directory and not our actual logo. A valiant start, but I needed to build something that matched my napkin design.

8 p.m. to 12 a.m.
The rest of the crew had gone home. The psychoactive effects of the flickering fluorescent lights were becoming increasingly potent. I wasn't happy with Tripod's templates so I searched around for others. Before long I ended up at the obscurely titled How to Make a Web Page, a modest little site with some quick tips on page-building and a handful of templates. Luckily, there was one that vaguely approximated my napkin art (the beauty of opting for a design used by 9 million other sites).

All I had to do was View Source and the code was mine, mine all mine! You can use any text editor to edit the code. The default on my computer was ye olde SimpleText, but some people like an application with a few more word processor-y features (Find and Replace, spellcheck) or some HTML-specific features (different colors for code, macros, table builders). Since I was in a rush, I stuck with SimpleText, but you can also download a number of shareware editors like Tex-Edit or BBEdit Lite.

I looked over SimpleText's code, and it all seemed pretty straightforward - just a big table with a cell creating the sidebar and a cell for text in the middle. Here's what the template looked like. Note that the navigation stripe on the left side doesn't run all the way up and down like it does on many other sites. That's because it's a table cell with a background color in it instead of the more common background image. Making one of those would be easy enough for someone with Photoshop, but since I was really getting pressed for time at this point (and also Photoshopless), I figured the table cell would be good enough.

So the template had created a rough sketch for me, saving me the time of building the HTML from scratch. Now I just had to modify it to fit my needs. The code had plenty of comments in it to help me figure out what did what and what went where. I was sure to leave the copyright information in there, of course, so if anyone viewed our fine code they'd know its true source.

I changed the sidebar to purple and the main page to goldenrod. I didn't even have to figure out the hex codes for those colors, I just typed in <font color="purple"> and <font color="goldenrod"> - already the page was oozing that peculiar AudioWorks vibe.

I added simple text links to the other site sections in the sidebar, making the text the same goldenrod color. Hideous? Yes. Boss-pleasing? Also yes. In the middle of the page (inside the table-within-the-table), I dropped in the intro text (slightly modified) that Felicia "Mighty Joe" Jung had cranked out for the press kit back in the day, then added our contact information and boilerplate at the bottom of the page. I made very few changes to the template - it set up the font styles and sizes and placement well enough. Here's what the first draft looked like.

It was at this point that I began to consider the benefits of an IV drip that could feed me a constant stream of liquified Vivarin. I also started to wonder how I was going to get our pictures onto this site, since it looked pretty boring with all that text and nothing else.

Get the Pictures
12 a.m. to 2 a.m.
The press kit had all the images we needed: our logo, a photo of the boss, and a picture of one of our cassette packages. These images had to be on our site, so they had to get into the computer somehow. For my Bea Arthur site, I'd used a friend's computer which had a camcorder attached to it. We actually filmed a picture from Golden Girls Monthly and captured it onto her system, then messed around with it in Photoshop (pasting a picture of me next to Bea, etc.). Not the highest quality, but a possible lo-fi alternative if you're desperate.

Unfortunately, there was no camcorder to be had in our office, so I knew it was time to bite the bullet, head on over to Kinko's, and finally spend some of that precious $4.98.

Kinko's, if you don't have one in your area, is a 24-hour copy store, which also has computers and scanners that you can use (for a fee, of course). I'm sure there's something similar in your hometown, and it can come in handy at times like this. Sure enough, the place was filled with red-eyed, shaky, low-level managers like myself, hurriedly assembling quarterly reports, transparencies, and business cards. I hustled on over to a free computer and scanner, and logged on. It's not expensive to use these things, but they do charge you by the minute (my Kinko's charged 40 cents per minute), so time was of the essence.

After a little trial and error, I got the machine working and quickly scanned in the logo, the picture of the bossman, and the cassette image. I saved the files as GIFs on a floppy disk (which I'd found being used as a coaster in the boss' semi-private cubicle) and logged out in a little over ten minutes. I leapt into the air and whooped, high-fiving my fellow late-night losers. Total cost: $4.40. I had 58 cents to spare and was seriously considering palming it for myself.

2 a.m. to 4 a.m.
Back at the office, I realized that the newly digitized images needed some work. They were all really large, both in physical size and file size, and it just wouldn't do to make Wakanohana wait ten minutes for our logo to appear. Also, the scanner had included all sorts of extra space around each photograph. I needed to trim those edges. I now officially needed an image-editing program, like Photoshop, only maybe about $600 cheaper. And I needed it in my hot little hands pronto.

You can actually get a demo version of Photoshop, but I wasn't about to wait the endless downloading time required for that monster. So, after doing a little searching, I stumbled upon a shareware program called GraphicConverter. Its primary function is to convert one file type to another (GIF to JPEG or what-not), but it also has an impressive array of other features, including some basic photo-editing tools (for drawing, shape-creating, filling, etc.) and a number of ways to alter the colors and resolution of an image - it even out-does Photoshop in a few departments.

It was just what I needed. It had a familiar enough interface so I didn't have to blindly shlep around for too long, and soon enough I'd shrunk my scanned images down to a workable size, cropped off the extra border stuff, and reduced the colors to make the images load more quickly. I then resized a copy of our logo so I could have a smaller version for the sidebar. The photo of the cassette package had a nice little shot of an audiotape in it, so I made a copy of that, cropped it down to size, and had a cute, tidy tape image that I could throw in here and there to break up the text. I also found that I could get a better quality image of the boss' photograph if I converted it to a JPEG, rather than using a GIF, and this nifty little program handled that, too.

GraphicConverter is just one example of the many fine shareware (and freeware) applications that are available out there (see the end of this article for a list of others), and by getting a good collection of them, you can typically accomplish anything that you'd want without having to resort to the big, famous, expensive programs. Please note, however, that just because it's shareware doesn't mean it's free. Since I liked GraphicConverter so much, I ponied up the $35 shareware fee - but not that night (sometime after pay day). I rationalized it by thinking of this as a trial period while I tested out the product.

OK. My images were prepped and ready to go. I had a workable template, so I just made a few copies of it and plugged in our other content - the company bio, product information, testimonials - with the accompanying images. I threw in a reference here and there to sumo wrestling, per my boss' request.

I groggily checked my list of things to do. I still had to come up with some kind of order form and that hit counter. This was going to involve swiping and modifying stuff from someplace else.

4 a.m. to 5 a.m.
I have little memory of this time period.

Forms with Form and Counters that Count
5 a.m. to 7 a.m.
I awoke with keyboard marks on my face and a scream upon my lips. I got myself together and started desperately searching the Web for an answer to my "form" problem. Then I remembered a site that came up during my template hunt: Freedback.com. Freedback's motto, which made my head swim with euphoria, goes something like, "Free feedback forms without the CGI!" You just select what you need (various fields, radio buttons, menus, etc.), fill in the text, and it generates the code for you. Copy and paste it right into your HTML file and you're good to go. The company slaps its logo there at the bottom of the page, which I later told the boss was actually the product of a sweet co-branding deal with Freedback, thus reclaiming my vacation days.

To get the results from our form, however, we needed an email address. As you probably know, there's a veritable bevy of free email services on the Web, such as Hotmail and Juno. I opted to go with HotBot (which is probably what got me the job here at HotWired). It just took a couple of minutes to set up, and then I had an active account that allowed me to check for messages via my Web browser. I added my new address, audioworks@hotbot.com, to the Freedback form and was golden to go.

I then zipped on over to Federico's Counter Gallery, a fine collection of GIFs that look like hit counters with really high numbers on them. If Wakanohana was paying attention and reloaded the main page over and over, we'd be screwed, but I assumed he was more of an idea man, less consumed by the details, and that this little subterfuge would slip under his radar. I picked one of the GIFs and added it to the code on the main page. Again, I could've quickly made my own with Photoshop or something like it, but why bother when it's right there, ready to be repurposed? And if I had had time to spare, I could've dropped in a real, honest-to-goodness counter (Tripod makes that pretty easy, too, or you can always swipe the code from Matt's Script Archive, if you're ready to deal with some CGI), but then I'd have had to risk a carpal tunnel injury, hitting the reload button repeatedly to get the counter up to an impressive number (and if you think AudioWorks paid workman's comp, you haven't been paying attention).

The site was finally complete. Nothing fancy, nothing epic - just five HTML files and a handful of images - but it was a damn "site" better than what we had had the day before.

Pushing the Site Live
7 a.m. to 8 a.m.
Now I had to get these files to my Tripod account. Tripod's setup actually makes this process pretty simple. Within its file manager page, you can select a file from your hard drive and have it added to its server. You can also edit files right there in your Web browser, if that sort of thing floats your boat (so you can skip finding a text editor and all that). But I found it more cumbersome than necessary, so I did it all offline.

Tripod (and many other free Web page providers) also allows you to upload files in the more traditional way by using a third-party FTP program. I used the shareware program of choice for Mac users, Fetch. There's also CuteFTP for Windows (which costs $34.95, but you can download it for a 30-day free trial period), among others. They all basically do the same thing - get files from one location and put them somewhere else - and none of them are too creepy to figure out. Just connect to ftp.tripod.com or wherever your files are, and fire away.

Before I could say, "benevolent hallucinations due to sleep deprivation," my text and image files were neatly stored on my Tripod account. Our online corporate presence was a complete eyesore, but officially live: http://members.tripod.com /interglobeaudioworks/.

If I'd been diligent and a hardcore Webmonkey, I would've downloaded some other browsers to see how the site worked on them (who knows what Wakanohana was running), but I figured since there was no weird HTML on the site, it would look good enough no matter what. The navigation was all text-based, too, so even a Lynx user could get around without too much hassle.

That Tripod URL still bugged me, though - so unprofessional. Was there no way to fake a URL? Or at least fudge one? A final quick search brought up a handful of redirection services which could give you a different URL. It wouldn't be audioworks.com or anything, but it would be a little more subtle than members.tripod.com. I signed up with Easy.to/Remember and secured us a little something called as http://i.am/audioworks and http://hello.to/audioworks. Not bad. I later convinced the boss that this was going to be all the rage in the next fiscal year.

Show Time!

8 a.m. to 9 a.m.
My slacker co-workers stumbled into work just as I was doing a final run-through. I showed everyone the site and they were amazed.

"That must've cost at least 10 dollars!" Big Bill said. "Maybe 20!"

"No, friend," I said. "A mere $4.40, and I even slept for two hours."

"Where the hell's the other 58 cents?" Freddie the Financier barked.

"I'll get on the horn to Japan right now," the boss said.

And so ended my 24-hour, roller-coaster ride through Web design. Keep in mind that this is a diary of the cheats and workarounds that got the job done for me. There are plenty of other ways to assemble a site quickly and cheaply, and below are links to a number of sites that can help you along, as well as a small library of shareware or demo programs that can get you out of a tight spot - or even aid in your daily tasks if you do this sort of thing regularly (sucker!).

The end result? Wakanohana was very impressed with the site, but became violently enraged when his thighs were not toned within 30 days, as one of our tapes promised. He canceled the deal and soon afterward, InterGlobe AudioWorks went the way of Braniff - up, up, up into the heavens.

But the site lives on, a testimony to what can be done with zero budget and on an impossible deadline - ah, America!

Useful Applications and Sites
Here is a quick list of solid freeware and shareware applications that can be useful when throwing together a Web site. There are also some commercial products that are available on a free trial basis, which will usually give you enough time if you're dealing with a short-term project. You can often pick up trial versions of some of the heavy hitters (Photoshop, Illustrator, Dreamweaver, Premiere, FrontPage, etc.), though these are really just for the purposes of demonstration and sometimes have key features crippled or missing.

If you do end up using any of these shareware products on a regular basis, please be sure to pay the registration fee. Many of these programs are top-notch, often out-performing their commercial counterparts or at least stripping away much of the unnecessary bulk in those larger programs. For example, I've been using Tex-Edit Plus for just about all of my word processing needs ever since I found it; meanwhile Microsoft Word sits in a seedy section of my hard drive, too old and bloated to move, begging for euthanasia.


Shareware Macintosh Applications

Tex-Edit Plus ($10): A clean, powerful, and flexible text editor, it's meatier than dumb ol' SimpleText and speedier than a full-featured word processor. It's AppleScript-able, too.

BBEdit Lite (free): BBEdit is really the best HTML editor for the Mac, but you'll have to shell out $119 for the real deal. Still, BBEdit Lite is no slouch, and you can't beat the price.

PageSpinner ($25): This is an HTML editor with plenty of features to simplify the Web -building process.

GraphicConverter ($35): It's no Photoshop, but it can work with a wide variety of image formats and do some rudimentary image-editing stuff. It's especially good at preparing images for the Web.

Fetch (free for educators/nonprofits, otherwise $25): The only FTP client for the Mac that I've ever used and ever heard of anyone using. It's simple and flexible and fast.

GifBuilder (free): A great little program for making GIF animations. Easy as falling off a dead horse.

QuickEditor ($35): A powerful program for editing video and preparing it for the Web.

SoundMachine ($10): This application is mainly for playing an assortment of audio files, but it also has some basic editing features that could come in handy if you don't want to spring for some pricey audio suite.

ColorFinder (free): I've needed this thing forever. Using a Photoshop-esque Eyedropper tool, you can grab any color on your desktop, in any program. It'll then spit out the appropriate hexadecimal code for your HTML. Find something alluring about that murky red color in Quake? Grab it, and it's yours.

Web-o-Tron Layout-o-Matic ($10): This is an incredibly weird and neat-o template generator. It's one of those programs in which the interface is so interesting-looking that you have no idea how it works. According to legend, the Layout-o-Matic was created in 15 nanoseconds by the Web-o-Tron, an electronic brain designed by a biochemist 60 years ago.

Mapedit (free 30-day trial period, then $25): This can help you with the potentially tricky business of making an image map.

NiftyTelnet (free): Need to telnet? Who doesn't! Well, I don't, actually, but some people seem to get off on it, and this application can get you onto that remote system out in the great beyond.



Shareware Windows Applications

I wasn't able to dig up a free/cheap text editor for Windows that was any better than Note Pad and/or WordPad. So I say, why buy the cow when you can keep milking it for free?

HomeSite (free 30-day trial, then $79): OK, if you simply have to get an HTML editor, you can't beat HomeSite. I'm a Total Mac Dork, and even I have used this program and been perfectly happy with it. You'll have to shell out some relatively big bucks after a month, but if you're going to be doing any kind of Web-building work on a regular basis, it'll be money well spent.

GIF Construction Set ($20): Want obnoxious, animated ad banners on your site? Sure, we all do. The GIF Construction Set will make this a painless process.

QuickEditor ($35): To quote myself from earlier in this article: "A powerful program for editing video and preparing it for the Web."

Color Picker (free): This will help you convert colors to hexadecimal numbers and/or vice versa.

Mapedit (free 30-day trial period, then $25): As I said in the Mac section (please pay attention here, folks): This can help you with the potentially tricky business of making an image map.

CuteFTP (free 30-day trial, then $34.95): Pretty much no matter how you slice it, you're going to have to FTP something somewhere. This program makes it easy and fun. That's right: fun! You'll be FTPing files even when you don't have to, just to have more fun!

CRT (free 30-day trial, then $30): A useful and customizable telnet program, also very popular, if that sort of thing matters to you.

LView Pro (free 21-day trial, then $40): This is a basic image editor/converter that can perform many of the necessary tasks if you're living in a Photoshop-free environment.



Useful Sites

Freedback.com: This site will generate a form to your exacting specifications, then deal with all the CGI script headaches for you - for free.

Dr. Watson: An online HTML-checker, Dr. Watson will scour your code for mistakes or proprietary tags, helping to speed along the proofing stage.

Matt's Script Archive: Invaluable resource for handy and stealable CGI scripts, including the ever-popular guestbook, hit counter, message board, and cookies.

WebAlias: Free URL redirection service, one of several currently out there.



Joshua Allen is a senior editor for Webmonkey. When he's not bloviating at Fireland, you can find him pop-locking for change at Fisherman's Wharf, wearing his bloodied white jumpsuit.





Feedback  |  Help  |  About Us  |  Jobs  |  Advertise  |  Privacy Statement

Copyright © 2000 Wired Digital Inc., a Lycos Network site. All rights reserved.