A Site For Sore Eyes: Principles of Website Design by David Wright

Why are there so many badly-designed webcomic sites out there? For a community that prides itself in its creativity, you would think that the sites would show that. For the most part, it seems that your average site’s design is almost an afterthought. Unimportant.

There seem to be two categories of people who have badly-designed sites: those who don’t really care what the site looks like, and those who are new to web design. For those who don’t care, that’s cool. There are plenty of good comics on badly-designed sites that somehow get beyond their limited showcase that do just fine. However, if you are in the latter category, and want to learn how to make your site look and work better, then read on.

When I first started web design, I didn’t know the difference between HTML and Hotmail. I was completely new to the Internet, and knew only that I wanted to put a comic strip on the web. The first year of my site was a collage of bad designs as I slowly learned about HTML and design principles. It was a long, frustrating road with many thousands of hours spent re-designing the site, messing up tables, and lots of trial-and-error sessions to see what I could and couldn’t do. The journey is still not complete, as there are designers out there who just amaze me, and do things leaps and bounds beyond my talent, but it’s good to have something to strive towards and inspire you. This series of articles is designed to help save some of the time and pain involved, point you towards some good places of reference, and showcase some sites that will inspire your web design.

THE BAD, THE BADDER, AND THE WORST

Before going into what makes for good web design, let’s start with what makes a site bad. These are some of the most common problems with badly designed sites:

1) ILL-PLACED BANNER ADS: What’s the first thing you see when you visit your site? Is it a big fat banner ad? Depending on your host, this might be something you can’t do anything about. If you can change the placement of the banner ad on your site, though, by all means do so! The best way to do this is to work the banner into the scheme of the design. Placing it within the logo area or above the navigation are two of the most common ways that the pros do it. If you have to feature advertising, this looks much better than a banner just floating at the top of your page, not being part of the element.

2) HAVING TO SEARCH FOR THE COMIC: If you are visiting a webcomic site, one would think that the comic wouldn’t be too hard to find. You’d think it would be up front and center, one of the first things you see, but that’s not the case with many webcomic sites. Some insist on burying their comic underneath home pages filled with everything but the comic. As with all rules, sometimes they can be bent. One example is Penny Arcade, a comic site that features news and rants on their main page, instead of the comic. These guys write really well, though, and the content of their writing has become an integral part of the site – many readers look forward to it as much as the comic. If you are that good of a writer, then by all means, feel free to put your rants/news up front and center. If your writing is lame, though, and you force people to view it, then there’s a good chance they won’t even waste their time getting to the comic.

3) SIDE-SCROLLING/SCREEN RESOLUTION: This is a tough one, because websites look soooo good in 1024 x 768, and higher. Unfortunately most people still browse with a screen resolution of 800 x 600. Therefore, if possible, you should make your site look good at any size, including 800 x 600. Few things upset someone – and by someone, I mean me – as much as having to side scroll when my screen’s resolution is set even higher than 1024 x 768! There are a few people out there who use the screen well, and take advantage of the infinite canvas. Drew Weing’s Pup is perhaps one of the best examples of a webcomic that gets away with this, stretching the ‘infinite canvas’ with amazing results. However, any page like that – even as good as Pup‘s – will take a long time to load on 56k, and you can run the risk of losing a good chunk of readers.

4) MORE SCROLLING ISSUES: Some badly-designed sites make you scroll down the page FOREVER to see all of the content. These sites’ designers insist on jamming as much information as possible onto their home page. Some contain every news post they EVER posted! These are also usually the same people who use GIANT BLOCKS OF GIANT TEXT to convey the importance of things, and have images the size of small countries littering the page’s landscape, when a small image would do just as well. This is not only annoying, but it also slows down your load time, and runs the risk of making visitors oblivious to whatever changes you make to the site. In all that mess, they aren’t likely to notice that cool new feature you placed near the bottom of the page. People like to click, don’t be afraid to put your stuff on sub-pages. If you build it, they will click.

5) USE OF EVERY KNOWN TECHNOLOGY KNOWN TO MAN: We’ve all seen sites loaded with scrolling text that changes colors, animated GIFs littering the page like garish parade floats, cutesy designer-created pop-ups, and blinking banner ads. Nothing screams amateur like forcing all the newest DHTML techniques, scripts, and whatever other new stuff onto your readers. Few people are impressed by all this "cool stuff" – heck, most of them will have already seen all these things before – and most will run away from their monitors screaming, praying for wolves to gouge out their eyes.

6) LONG DOWNLOAD TIME: I will touch on this more in the following chapter, but the old rule of thumb was that a page should load within 11 seconds. Nowadays, designers are pushing the envelope, and designing for high-speed Internet access users. Doing this for art’s sake is one thing. Usually though, the things that slow down a page are all the images, tables, and an endless amount of link buttons and banners. Each of these things takes time for your browser to load. The more objects you have on a single page, the longer it takes to process. If a site takes too long to load, you are losing a large number of visitors – remember that this is the age of the short attention span, of the chronic remote control clicker and the microwaveable burrito. People just don’t have the patience for anything past a few seconds of wait time.

GOOD DESIGN PRINCIPLES

Now that I have listed some of the horrible things people do with their sites, I’m going to list some of the ways to make your site better. This month, I will start at the beginning: the basics of good web design.

And the basics of the basics? This simple consideration: What purpose does the site serve? What is your goal with this site?

I- THE EYE OF THE BEHOLDER

Nobody said that your site has to be beautiful. There are sites out there with sparse design that pull it off very well. And while sometimes a "beautiful" site can work in favor of the comic, remember that good site design will not by itself make a comic successful. Done badly, though, it can drive a permanent wedge between your comic and its potential audience.

So, what is the purpose of your site? If it is solely to show off your artistic web design skills or to create infinite canvasses with comic panels that go on from here to eternity, then by all means go for it! Your site is only as limited as your skill and imagination. However, keep this in mind: most people are still connecting to the web via dialup. A giant page with all sorts of cool extras might look great, but it is going to take FOREVER to load on a 56k connection.

If your goal is to get as many readers as possible, then you want to make a page that loads quickly and is easy to navigate. Page load time is a somewhat touchy topic among designers, as there are two schools of thought here. One is, that you should design for the slowest of browsers, keeping things simple as possible. The other way, and a recent trend in web design is to assume most people are on high-speed connections nowadays, and to go ahead and design for those people with all the graphics, flash, and scripts you want. While there are a lot more people using high-speed access now, it is still not the norm. Most people are still on dialup, and if you want to get as many visitors to your site as possible, you should keep this in mind when designing.

II – FORM FOLLOWS FUNCTION

Your website is the vehicle that brings your content to your readers. It would stand to reason then, that you would want to do everything possible to ensure that your site doesn’t stand in the way of the content. Good design is not just limited to a site’s appearance; it is about making the site work for your content. It should showcase the comic in a way that makes readers want to keep coming back. One way to keep that vehicle running smoothly is to make navigation easy and intuitive. There are a large number of websites that employ cool looking navigation schemes which look great, but force the average reader to use the mouseover text (when the designer was even thoughtful enough to include an ALT TAG) to figure out what the buttons do. While these buttons might look good, they can confuse new readers. Functionality is key to a good site.

III – LEAN AND MEAN PAGES

The pages that load quickest are those that have the fewest images, tables, and scripts. Seeing that you are already featuring a fairly large image through the comic itself, you will want to trim down the use of other images on the page. One way to do this is to use text links instead of image links. If you just can’t part with your kick butt buttons, then at least make them as small as possible. Use image compression software to bring that file size down. Another trick to keeping both images and a fast-loading page is to reuse images from page to page within the site. Keep the same logos, buttons, and whatever other graphics you can use repeatedly, and when the next page is called up, that image is already loaded. Many clever web designers also break up large images into smaller components, which load quicker in browsers.

Complex tables also slow browsers down. The simpler the tables you use, the quicker the page will load, and the less likely the page will be look messed up. Each browser reads HTML differently, and tables that look good in one browser might not look too hot in another. Many HTML editors and web design programs have features which allow you to see how a page will look in another browser. This is definitely worth looking into if you are making precise tables and need to know exactly what the final product is going to look like.

Two other things that most frequently slow a page down are scripts and Flash animation. Not only are these not compatible with all browsers, but they take forever to load, and sometimes require the person to download a plug-in. If I go to a site, and need to start downloading things just to view the site, I almost always leave. I don’t have that kind of time to sit and wait for things, especially when these things are usually just extras amounting to nothing more than eye candy to show off the site builder’s skills. Remember the microwaveable burrito rule?

Of course, having lean pages does not mean that you have to create sparse, barren landscapes of nothingness, either. Spare, effective use of images and good use of text and Cascading Style Sheets can make your site look professional and sleek. Sometimes simplicity can be elegant, and can (if done right) better draw the reader’s attention to the comic itself.

David Wright is a contributing writer for the Comixpedia. You can find his ever-evolving website here.