Dennette's HTML Style Guide
If you like the look and feel of my HomeBoy Pages, then here are some tips to make your own as friendly. Note that this file violates Rule Two, but then, there’s exceptions to every rule.
If all of this seems painfully obvious to you, then you’ve been crawling the Web longer than most, and this is intended primarily for the Internet virgins out there. Just remember that there was a time when you had to ask somebody how to answer an e-mail message. (Experienced Internauts can skip to the summary.)
Rule One: TARGET THE LEAST COMMON DENOMINATOR
Even if you have a Big Screen with millions of colors and a T1 connection that screams at 56Kb/s, there are a lot of Web crawlers out there using a 640x480 screen with only 256 colors and a 14.4Kb/s modem. Be nice to them, because if you’re not, then they won’t come back to your Home Page -- even worse, they won’t add a URL to your page on theirs!
I crawl with a 800x600x64K display and a 28.8 modem, but I always “sanity check” my pages at 640x480x256. This leads to some thoughts on image size. (Dontcha just hate it when the first thing on the page is a grafix file that’s bigger than your window?)
There are three ratios to keep in mind for images: (a) 4:3 is the standard Microsoft Windows ratio (640x480, 800x600, etc.); (b) 3:2 is the standard 35mm film format - 36mm by 24mm is the actual image size, which makes 3.5x5 and 4x6 prints; (c) 1:1 is your basic square.
To fit in the 640x480 format, which is diminished by menus, frames, sliders, etc., I like the following image sizes: 320x240, 256x384, and 300x300. With the exception of the last size, this keeps the GIF files under 100K.
Everybody like 24-bit color, but the human eye (and most monitors) cannot really distinguish 16.8 million colors. When you consider that a 24-bit file is three times larger than a 8-bit file, you quickly realize that it also takes three times longer to download and display! Coupled with the fact that most of the PC world is still hobbled to 256 colors, we’re talking a Serious Waste of bandwidth.
Rule Two: KEEP THEM SMALL
How many times have you hit the stop button when you noticed “3245 of 245627 bytes loaded”?
My HomeBoy Page (INDEX.HTML) is only 1,495 bytes -- most run 2K to 4K in size, with the story of my stroke (STROKE.HTM) running just under 8K. My father’s speech about “Lt. John R. Fox and the 366th Infantry” runs over 30K, but I’ll be breaking that down into smaller chunks Real Soon Now. :-)
Nobody likes to wade through more than three “screens” worth of data on a “page” -- learn to use the “hot-link” paradigm and keep each page simple. Keep your <UL> lists to a maximum of a dozen entries -- if they get larger than that, break them into categories that link to other pages of lists. For example, after completing my third obituary, I removed them from the list on my Dream Walk page and gave them their own page.
The most important thing you can do is use icon GIFs, and indicate the file size if it’s over 20K. That makes the pages load much faster, and people can look at the larger GIF file only if they’re interested. My icon GIFs are a maximum of 64 pixels high.
Another thing you can do with icon GIFs is to make them tightly cropped so you just see the face(s), even if it’s a full-length or group shot. For some of them, especially the black & white ones, brain-damage them down to 16 colors -- they’ll load even faster, with no loss of detail.
So, if you really want to show off your 640x480x16M JPEG files, use 85x64x256 icons and warn the viewer that it’s a 900K file they’ll be downloading -- the people with 14.4 modems and a 256 color display (like most laptop users!) will thank you.
Rule Three: USE LOCAL LINKS
Don’t use <A HREF=“http://www.some.where/myname/filename.htm”> when <A HREF=“filename.htm”> will do. The only benefit from doing the former is that someone can have a local copy of your file and still be able to remotely link to your other pages. (Big Whoop!) The downside of doing it is that some browsers are too dumb to recognize that it’s the same location as the file they’re displaying, and they’ll clog your bandwidth by attempting to reconnect! (They see the “http:” and that’s all she wrote!)
Rule Four: AVOID RAINBOWS
Notice those “cute” colored buttons and rainbow <HR> replacements on some pages? What a waste of bandwidth - GET OVER IT! After downloading somebody’s 15K page, I had to wait while the 15 different colored buttons and rainbow horizontal bars were transferred before the page would display -- you’d better believe I’ll never visit that person’s Home Page again!!
If you can’t dazzle them with dialog, baffle them with b*llsh*t! When I see too many colors, I know there’s not much useful content. The more time someone spends making their WWW pages “look pretty”, the less they really have to say.
Rule Four: MAKE IT EASY TO CONTACT YOU AND TO SEE YOUR OTHER PAGES
At the bottom of most of my pages you’ll find (a) a mail hot-link, and (b) a URL to Dennette’s Home Page, which in turn has a URL to my top-level HomeBoy Page.
It’s not fun to scroll back through pages just to find the one e-mail link, and it’s so easy to just copy& amp amp paste, or even put it in your HTML “stencil” file. You’ll get more feedback if you make it easy to send you a message.
My first experience with WebCrawler showed my that you can get to any WWW page from anywhere. When you jump into an HTML file that’s five steps down from the Home Page, you have to copy& amp amp paste the URL and hope that “index.html” will get you back to the author’s root page. Every page should have an explicit link to some higher page.