Layouts for Webcomics

In my reviews, I’ve talked extensively about site layouts, practically as much or more than the comic itself. Maybe I should be focusing on the comic more, but layouts are pretty important you guys! But I understand that the comic should be the most important thing, and also, all layouts aspire to be the same thing: smooth, fast, presentable, clean. Sure, there are tons of different types of layouts out there, but they all have the same goals in mind. Contrast this to comics, which have any number of different goals, from “tell a story” to “make a gag” to “show some furries having sex”. Whether you’ve got a one panel gag comic or a five chapter wolf-on-wolf romance, you still want the layout to work nearly the same! So instead of wasting time on every review talking about this kind of thing, I’ll just write up some articles on the issue.

So what does a good layout need to have? (Note: I am only talking about the front page.)

  • The webcomic’s title
  • Advertisements
  • The update schedule
  • A small menu of links
  • The author’s blog or announcements
  • Buttons and other navigation
  • oh and THE COMIC

The title is self explanatory. It needs to be the uppermost (or second uppermost) thing on the page. It should be extremely clear and easy to read, and should give a first impression of the tone of the comic. You can try drawing the title in the same style you use for the pages, or you can use a font that matches the mood. If your comic is long and dramatic, don’t use the Jokerman font… you get the picture. It should probably be centered and really big! And needless to say, it should link to your homepage.

Nobody likes advertisements, but let’s face it, you probably need them! Unless your comic is truly a hobby and you don’t mind skipping them, they should go in. With Project Wonderful, especially, using the money you get from ads on your site can pay for ads you place on other sites for YOUR comic, so ads will be able to benefit your publicity as well. You can really put them almost anywhere, but “above the fold” (meaning, you don’t have to scroll down at all to see them) will make you the most money. Putting the ad above your title (see Questionable Content or Shortpacked! for examples) works just fine. Putting it to the side of your title, or working it into the same area somehow, can be even better (see Dominic Deegan or Overcompensating). The thing is, you want to minimize the space you use above the comic. This is because the comic is ostensibly the most important thing you’ve got, and it NEEDS to be at least mostly, if not fully, all the way above the fold!

The update schedule is a friendly way to say how often readers should check back. They don’t have to wonder if you’re 5 or 7 days a week, or MWF; this is especially true if you’ve got some crazy schedule like Tuesdays and Saturdays and every third Sunday as well as every full moon and every other new moon. Though in hindsight I think I’d recommend against that schedule anyway… a lot of webcomics DON’T do this, and it’s not really as required as the other things, but if you can fit it in on the title somewhere, it’s simply a nice courtesy to extend to your readers! (If you’re not sure when you can update, or don’t have a set schedule, it’s better to be up front about it, too.)

Your comic probably has some webpages attached to it. About pages, cast pages, stores, RSS, forums, contact info, sketch blogs, etcetera. These links should be obvious and stand out, but should not take up that much room. Using menus to save space works very well! See A Softer World or Saturday Morning Breakfast Cereal for some examples of links done pretty well.

Announcements and blogs are pretty important to your homepage! These are not comments specific to today’s comic, but rather, a bit about what’s going on in your life, or with respect to your webcomic, or whatever you’d like to talk about. You can choose not to share any personal details and talk about nothing but your comic, but it’s still important to do just that! Whether you talk a bunch (see Least I Could Do) or like to remain mostly silent (see Gunnerkrigg Court), you need a way to communicate with your reader besides your comic. This is important to announce changes in the website, new merchandise, future downtime, appearances at conventions, what you think about the latest video game, etc. Sluggy Freelance often has some short announcements above the comic, which are further explained below- very handy!

Navigation buttons are a big deal, of course. That’s how your reader will actually, y’know, see your comic? You’ll not want to deviate too much from the standards here. Buttons for First Comic, Previous Comic, Next Comic, and Latest Comic, as well as Archive, and sometimes, Random, are all needed. On the homepage, if you can code it, you don’t technically need Next Comic or Latest Comic, since that’s the one being displayed, but plenty of sites still do (sometimes using greyed out images) just to keep the layout consistent. If your comic is short (vertically speaking), you can get away with having only one set (see Girls With Slingshots). However, if your comic usually goes down past the bottom of the screen, you definitely want to have the buttons both above and below the comic (see the navigation on a random page of Dr. McNinja). The archive button can be part of the links or sit right between the Previous and Next buttons; a dropdown archive and/or a calendar archive can go right below or directly to the side. If your comic is gag-a-day, a Random button is great! But if it’s a narrative comic, jumping to a random place in a random storyline is a lot less useful, so excluding it isn’t a bad idea.

Finally, your comic. This is what your site needs to be focused around. Everything needs to be in service of the comic, pointing at the comic, or supporting the comic, and the comic needs to take the best possible place on the website. Put it right up front, and if you can’t get it all above the fold, you better have a good portion of it up there! For instance, look how snazzy Dinosaur Comics is with the strip right there! I’m pretty sure that this should just go without saying.

At the bottom you’ll probably want to have contact details, copyright info, maybe a repeat of the links… some more ads, your twitter updates, links to facebook or digg or whatever else… the stuff down there is less visible and therefore less important.

Once you’ve got a good layout, you almost never need to change it. Taking a week off from your comics and turning your shitty or default layout into something nice and smooth is really worth it. If you are serious, or even half serious, about this webcomic thing, take the time and make it look professional!

I’ll expand on some other details, as well as some other websites, in further articles. If you ask any questions in the comments I’ll try and get back to them, too!


August 27, 2009. Articles, Webcomics.


  1. Betsumei replied:

    I’d love to see more comics with a “start of the current storyline” button, at least on the homepage, but it would be nicer still to have on every page – it’d make the “random” button on plot-driven comics more useful.

  2. Sen replied:

    I like your writing style.

    All very good advice! Every comic should be doing these thins. Every last one of ’em!

  3. Jason Carvarel replied:

    @Betsumei: You’re SO right! And I completely forgot that! The only example of that I can think of off the top of my head is Oglaf (which is totally NSFW), and yeah, story navigation is 100% useful! Thanks for pointing that out!

  4. Dr. Brillenschnitzel replied:

    The best navigation is to flip a real paper with a printed or even original drawing – the cyberspace is not envolved enough to give that feeling.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

Trackback URI

%d bloggers like this: