Webcomickry: Website Design (Part 1: Introduction)

Allow me to get technical for a moment.

It seems like a good time to talk about website design in relation to webcomics, as there seems to be a fair amount going on in that regard lately. Penny Arcade, Ctrl-Alt-Del, and Inverloch have just undergone major website redesigns, and Kris Straub just called some people to the table for being behind the times. Also, I feel I am somewhat qualified to talk about web design as I am a graduate student in electrical engineering by profession and a web programmer by trade. Note that I say web programmer and not web designer as my job is much more concerned with writing the scripts which control and provide functionality to web pages rather than making them terribly aesthetic. For instance, I've programmed pretty much this entire site FROM SCRATCH (including the calendars, resource management, various projects, etc etc etc. I did have help from one other guy, but it's just been the two of us), but I'd never be capable of anything on the level of the CSS Zen Garden in terms of sheer beauty. However, even as a web programmer I've learned a great deal about the design aspects that go into creating a good looking website, so I can comment on that as well.

So let's talk specifically about website design for webcomics. There's quite a bit to discuss and various conflicting views on the subject, so it's going to stretch for more than one post but it's an extremely important thing to talk about. Why? Because for a webcomic artist the web is your delivery medium and your website is both the mechanism of the delivery and the location in which it is displayed. So you've got to be a good artist and a good engineer. Good artists take into account the location in which their art is going to be displayed. If you're making a sculpture for a marble and limestone building with greco-roman architecture (large columns, vaulted ceilings and the like), you'd damn well better not make your sculpture out of rusted steel. The art should match the location, and the location should match the art. Good engineers make their machines as efficient, streamlined, and reliable on the inside as possible and as user-friendly as possible on the outside, so that not only will it be useful to people, but people will be able to use it. You could have the greatest piece of software ever written, but if it's prohibitively difficult to learn how to use, people will go for something easier (see: Unix vs Windows).

So when it comes to webcomic website design, you're looking at an intersection of good engineering principles with good artistic principles. You've got to have both to have a good website. Now, don't get me wrong. I'm not saying that you can't have a successful webcomic with an austere website. But what I am saying is that you will have a more successful webcomic if you have a good website design.

Now, this is not going to be a primer on how to write good HTML or make clever tricks with CSS and Javascript, or even how to program an archiving system in PHP. If you're interested in those sorts of things, you're going to have to look elsewhere. What this is going to be is a discussion of general principles of web design, and how they apply to webcomics. And keep in mind throughout this that these are just my opinions based on my experience and my own personal sense of aesthetics. I'll be pulling on a lot of sites, some of which I think are good designs, some of which I think have good elements and bad elements, and some of which I think are just downright lame. You may disagree with me on certain points. But that's essentially the nature of critical commentary. You raise your own opinions and people can feel free to disagree with them. So there you go.

I'll dive into the nitty gritty of this topic in a later post. Let's begin instead with a discussion of webcomic web design philosophies. There are several different ones, each with their own strengths and weaknesses. And they generally revolve around the question "Where do I put my comic?" and "Where do I put my news posts?" Some people don't really put up newsposts, so in that case just say "non-comic material".

What you must understand here is that the real question you want to ask yourself is: "What do I want visitors to see when they come to my site?" For you see, the average visitor to a webpage (note the use of the word webPAGE, not webSITE, meaning a single page on your site) will only spend a scant few seconds there before deciding if they want to hang around or click off somewhere else in the ether. This means that you absolutely, positively, MUST make whatever you think is the biggest hook into your site the first thing that a visitor sees. This is called "designing above the fold", which is a term borrowed from newpapers which means that if a user doesn't see something they like in their first screenful of your site, they're not going to scroll around to find it. You should also keep in mind that the most likely entry point to your website is from your index page (i.e. main page), so this is the page in which this principle most comes into play.

There are two schools of thought on the issue. The first is to put your newsposts on your main page and the comic on a separate page (usually linked from the newposts, though). Popular comics with this model are Penny Arcade, Ctrl-Alt-Del, VGCats, and Inverloch. The other school of thought is to put your comic on your main page, at the top, with newsposts or nothing beneath it. This is a much more popular design for webcomics, and is used by such heavy hitters as PvP, Sluggy Freelance, User Friendly, Megatokyo, and so on ad infinitum. Oh, there is one more school of thought, the blog method of presentation, where your comics appear along with your newsposts in a blog listing format. Comics using this method include Yirmumah, Panda Xpress, and Overcompensating, in addition to many of the Daily Grinders, who use LiveJournal. But I don't recommend this method. It causes inconsistency in your site's appearance from day to day, can make it difficult for people to follow the comic if they miss a few days, and make it near impossible for anyone to navigate your archives unless you set up an alternate archiving method (which actually most of the sites I mentioned have). But if you have an alternate archiving method then there is inconsistency between the look and feel of your archive and the look of following the comic on a day to day basis, which can cause more confusion. So don't use the "blog method". It's just not a good way to deliver comics.

As for the two main schools of thought, here are the differing philosophies which accompany them. For the "news posts first, then comic" designs, there are typically three motivations behind these. The first is if you want to emphasize that there is more content to your site than simply the webcomic. This is the case with Penny Arcade and Ctrl-Alt-Del. Both of them want to be legitimate video game commentary sites in addition to being a popular webcomic. The Penny Arcade guys have gotten there, Tim Buckley's still working on it. The second is if your webcomic updates on a relatively infrequent basis but your newsposts update more often and tend to have interesting content. This is the case with VGCats and Bolt City. The third is if your webcomic tends to update in multi-page spurts. This is the case with Inverloch, and with numerous manga style webcomics which I don't feel terribly inclined to look up right now. In the first two cases the underlying idea is that you'll get more hits on your site from people checking to see if you've said anything new than if you have a new comic up. In the third case it just prevent confusion from people trying to figure out where they left off and what page they should start reading from, and it prevents potential "spoilers" if you put the most recent page on the home page but people having seen the past couple of pages leading up to it.

Now, as for the "comic first, news later" school of thought, the motivations are somewhat polar opposite: You want the comic to be the main focus of your site. You don't put up news posts terribly frequently, if at all. You post single pages of comics on a consistent basis. Many webcomickers, even those that make a fair number of news posts, feel that the main reason that people come to the site is to read the comic, and a fair number of their readers probably just ignore whatever inane comments they might have to say. So to put the focus on the comic, you make the comic the focus. Simple enough.

Which style is better for your webcomic? That's for you to decide. But keep in mind the motivations, and ask yourself, "which of these two sets of motivations more closely fits where I want my comic to go?" Then go from there. But don't be afraid to change. Experiment, see what seems to be giving you more readers, and more consistent readers. The Pet Professional just changed from "news first" to "comic first" and I think it's an improvement (I still wish they'd update more often, but they're still young so I cut them slack).

Here's a couple of sites which I think should change their ordering because it's bad for their site, to serve as a word of caution:

• Dork Tower: While John Kovalic is not terribly consistent in his online comics OR his newsposts, he is more frequent with his newsposts, and the newsposts tend to say A LOT, and have pictures and stuff which totally screw up the layout of his site since he only gave himself that narrow little strip. Plus his newsposts are generally interesting since they talk about stuff he's doing offline, which is where the majority of Dork Tower stuff goes on. He needs to change to "news first, comic second."
• Tweep: Ben probably thinks he's doing the right thing by putting his news first, since he updates his news more often than his comic and his newsposts actually do contain interesting content. HOWEVER, his comic is in strip format and is small enough that he could put it on the main page and still have two or three newsposts appear "above the fold". Also, his newsposts are so short and so "link to another site" intensive that it would only make sense to show the last five posts or so on the main page rather than just the most recent. As it is, his site looks glaringly empty, and he could add a lot more to make it look interesting before it would even begin to reach the realm of crowded. Consolidation so that people don't have to click around as much is often a good thing.

So there's some overarching design principles to consider. In future posts I'll discuss more in-depth things such as colors, navigation, and even delve into some more technical issues, so be prepared!

So, what does everyone think about the two schools of thought on webcomic website design? Did I miss anything? Got anything else to add? This sort of topic benefits greatly from discussion.