Back to my non-priscilla home...

The Adventures of Priscilla, Queen of the Spacelanes

So why's the Design Queen bitchy, anyway?

Well, I went and joined a webring. QueerRing, actually...

Christina Zennaro has done a wonderful job defining the ring and setting up instructions for joining. And it's great seeing all these L-G-B-T-etc pages. It's particularly wonderful to see so many non-American pages out there (the all-Hebrew page was a bit of a surprise).

I've been working my way around the ring, and have seen some particularly beautiful pages.

I've also seen some of the sorriest excuses for homepages since "Mirsky's Worst of the Web" went offline. Bad design and bad technique contribute to an extremely difficult browsing environment.

I work primarly from two different stations. At work I've got a 200mhz PentiumPro multimedia workstation. My office network is connected to an access provider by a pair of T1's (at least the last I heard). At home I've got a 150mhz PowerPC604 Macintosh clone with a 28.8 modem. The Wintel box has 32mb of RAM. The PowerMac has 96mb of RAM. Both have accelerated video. If bad technique and bad design cause problems on these machines, think of what the people using 486's and 68030 Macs have to go through.

We will take as a given that writing HTML is easy. Writing good HTML is even easy. Laura Lemay's Teach Yourself Web Publishing series is the best source I've found for learning the basics of HTML. I have a copy of Teach Yourself Web Publishing with HTML 3.0 in a Week, Second Edition. It doesn't teach much graphic design, but it provides an excellent overview of the techniques most important to building a web page. A baboon could probably learn to write good HTML from this book.

"But why do I need to learn HTML? FrontPage can build my page for me."

Well, webrings are a great example. Every site belonging to a webring needs to have a bit of code to link it to the ring. This code must be customized (only a bit, but it's much more difficult to get right if you don't actually understand what all these HTML tags and parameters actually do). Omitting this code breaks the ring (and being "under construction" is no excuse for omitting the code). Improperly customizing this code will either break or short-circuit the ring.

Users of frames must customize this code more. On the QueerRing home page, Christina has instructions for people using frames. She tells people to include a target="_top" parameter in all the QueerRing anchor tags if they're using frames. Anchor tags without this parameter are targeted to "_self" which can quickly fill your browser with a morass of nested frames. I've seen this happen. It's just good practice to explicitly target every anchor tag when you're using frames. It's even a good idea to explicitly target every anchor tag to "_top" if you're not using frames (it'll help your page "break out" of other people's frameset documents).

Oh, and one more thing about target parameters... that's "_top" with an underscore at the beginning. If the underscore is missing, Netscape (and probably Internet Explorer) will spawn a new browser window, rather than just redrawing your current browser. Starting a new browser intentionally can be useful. Starting a new browser by mistake can litter your desktop with irrelevant browser windows.

Understanding anchor tags and the proper use of their parameters can make navigating your page easy. Making navigation fast is another issue...

What annoys people most about surfing? My unscientific opinion leans heavily towards long download time for pages. What causes pages to download slowly? Well, slow modems (not your problem, as a designer), slow overloaded servers (usually not within your control as an amateur designer), and inline images (definitely your problem, and within your control, as a designer) are three causes that come to mind quickly.

Lynx users talk about "zipping around the web." They can do this because they've given up graphics. I don't want to give up graphics, myself, because there are ways to make your page display more quickly (although probably never as fast as they would in Lynx).

The easiest way to make your pages display quickly is the use of height and width parameters in your image tags. Height and width parameters can be used to resize graphics in some browsers (although images resized this way look ugly, and not all browsers will do this), but are best used to "declare" the size of an image before it loads. What does this mean? It means the text of a page can be laid out long before the graphics have finished loading.

More difficult is the actual optimizing of your graphics. It's also much more rewarding (well, in terms of improving download times). The Bandwidth Conservation Society has lots of hints on how to do this. Their instructions are tailored to Photoshop, but can be applied to many other (cheaper) tools.

For a comprehensive reference to HTML 3.2, see Wilbur (where did they come up with this name?). For more information on how to use frames, see THE Netscape Frames Tutorial.

Just as the Macintosh allowed any bozo to [try to] become a publisher, HTML generators like FrontPage and NavigatorGold allow any yahoo to build a web page (not that it didn't happen before, HTML coding just scared a lot of people away). Much of the web looks like early Mac magazines (and it ain't pretty).

Some of my design bitches are simply based on my aesthetic judgements. Others are grounded in technology.

We'll start with readability. We'll assume that the text of your page is coherent. Readability encompasses a large number of factors.

Text flow is important. Does your page read smoothly, or is it all chopped up? Why is it all chopped up? Probably because there are too many <HR> tags and too many cute rainbow-colored (or bunny-shaped, or whatever) dividing lines. Rules and dividers don't just space out a document, they draw attention and create optical breaks.

Contrast is important. High-contrast backgrounds may be cute, but anything you superimpose over them is going to be extremely difficult to pick out against the background. A low-contrast background, whether dark or light is much easier to work with.

Your background absolutely must be taken into account when chosing text colors, and designing transparent GIFs. Choosing a good contrasting text color can be a bit tricky. If you're a Wintel user, the Color Manipulation Device can help you figure out all those hexadecimal codes.

Transparent GIFs are a bit more work, particularly with textured backgrounds. If you don't do the work, however, they can be particularly unintelligible. If you have Photoshop, I would suggest taking a look at Doc Ozone's Hands On Training. The good doctor has plenty of useful tutorials on image manipulation, some specifically tailored to transparent gif creation.

All of this falls under the larger category of color pallettes. Color pallettes may be an asethetic thing, but the color pallette you choose must work well with your subject material. My Priscilla pages use nail polish and lipstick colors for their pallette. Rainbows are great on queer pages as accents, but make for an extremely difficult overall color pallette.

Just as important as color and contrast is page width. Designing a page for a 1024x768 screen may result in a really snazzy page, but it'll look like garbage on a 800x600 screen or a 640x480 screen. It's much easier to design a page which is workable on a 640x480 screen, and just ensure it scales up to the higher resolutions well, than it is to design a wide page and hope it scales down.

Remember page width when using frames. Side-by-side frames can drastically decrease your usable page width, and can seriously screw up the flow of your page. Ask yourself if you really need frames in your document.

Finally, we come to gratuitous technology. If I never see another animated GIF, I won't cry. I've loaded pages with so many animated GIFs my machines have almost choked. Animated GIFs are large (read download slowly) and waste processor and display time with their little animations.

Soundtracks are also gratuitous technology. I'm not talking about audio clips here. Audio clips are optional. Soundtracks load automatically. I have seen few pages where the soundtrack actually contributed to the content of the page. I may be branding myself a luddite, but my idea of a soundtrack for browsing is dropping a CD into the player. I don't need to hear another bad rendition of Dr. Who, I Love Lucy, or any number of Moody Blues songs on somebody's page about their dog. I switch off my speakers when I'm browsing at work. At home, the PowerMac is plugged into my stereo (I do a bit of digital audio production for friends here and there), and even then they don't sound any better. They just waste my time downloading.

Infinite Fish's Top 10 Rules for Homepage Design covers this territory and more. It's suggested reading for anybody designing their first homepage.

No content is no content.

Make your page interesting. Unless you just want to be a jumping-off point, give your visitors a reason to want to stay and look around. Your web page is a reflection on you. Give a good first impression.