Robot 6

Unbound: Design matters

Today’s topic is not webcomics themselves but the spaces around them.

A webcomic, by definition, exists on a website, and that website can be a valuable tool to set the tone of a comic, add context, and provide a smooth, pleasant reading experience.

Or not.

I am constantly amazed at the number of creators who work hard to make a good comic and then put it on a generic, poorly designed website that screams “amateur,” or worse, drives the reader away with clumsy navigation.

Design affects readers on an unconscious level. A tightly designed website has an aura of its own that can rub off on the comic and make it seem better than it really is—and a poorly designed site has the same effect in reverse.

It’s a tough world out there, and you want to stack the deck in your favor as much as possible. That means everything on a webcomics site should work to enhance the comic, and anything that doesn’t should be ruthlessly eliminated.

Herewith, then, is a short list of webcomics dos and don’ts.

DON’T hide your comic. This should be obvious, but a lot of webcomics fail this basic test: When I go to the front page of your domain, I should see your comic. Similarly, if I click on your Project Wonderful ad, it should go right to the comic. Not your blog, because I won’t care about your blog until I read your comic. Not your latest avatars, a picture of your desk, or a pitch for T-shirts. Just the comic. Or, at the very least, a large, very obvious link to it. If I can’t find it, I can’t read it.

Where's the comic?

Where's the comic?

DON’T center a vertical string of boxes on a page that’s too big for them. For some reason, this is the default design on a lot of webcomics host sites like Drunk Duck and Modern Tales: A bunch of tiny navigation boxes, blinking banner ad, another blinking banner ad, title, drop-down menu, navigation arrows, the comic itself (finally!) another drop-down menu, more navigation arrows, comments, more links, blinky ad, all swimming in a sea of empty space, usually tinted gray or a sickly pastel color. Don’t be that guy. Either customize the page or, better yet, get your own domain.

DO format your comic to fit comfortably on a screen. As Scott McCloud pointed out almost a decade ago, computer screens are horizontal. Don’t fight that.

Don't make Scott mad!

Don't make Scott mad!

Being forced to scroll down to read the bottom half of the page is distracting and annoying. It never really becomes as automatic as turning a page, because you have to scroll, reorient yourself, click to the next page, reorient again… On a poorly designed website, it’s enough to kick you out of the story.

But horizontal orientation is not enough. Take Kitty Hawk, a fine webcomic that I enjoy reading very much. The creators switched from vertical to horizontal format recently, but because there is so much … stuff… over the comic, I still have to scroll down to read it. It’s actually more annoying than the vertical format because my payoff for the scrolling is smaller—about an inch of the comic.

Zuda, on the other hand, has the right idea—format the comic to fit the screen. Their only requirement is that the works fit a specified aspect ratio; creators are still free to do three-panel strips or double-page spreads or whatever format fits their fancy, but the end result fills the screen in a satisfying way. And it’s easy to read.

animated gifDON’T allow animated ads. I know I just mentioned this, but I might as well belabor the point. Your website is the setting for your work, and anything that takes away from your comic is a negative. An animated ad is like a gnat flying around between me and the computer, except I can swat the gnat.

And while we’re on the subject: Ads are a part of your site, so keep an eye on them and maintain tight control. I have seen a porn ad on the site of an all-ages webcomic, and I have banned an ad from my own blog on the grounds that it was so ugly it interfered with the design. At best, a bad ad is a distraction; at worst, it could get you in hot water. So don’t pretend they are not there, no matter how tempting that may be.

Story continues below

DO make your archives easy to navigate. Calendars and drop-down menus, especially ones that only give a list of page numbers, are useless. A good archives page will help me find a specific page or story arc and hopefully allows me to view several comics on a single page, so I don’t have to click the “next” button 5,000 times. I like it when the archives are arranged chapter by chapter, like Alex Kolesar and Joseph Kovell do for No Need for Bushido. Even better is a creator like Meredith Gran, who provides a very nice story guide to Octopus Pie, with a brief description of setting and characters and a link to each story arc. Brad Guigar has some suggestions for making a good “About” page.

DON’T use white or neon type on a black background. It’s not 1995 any more, and it didn’t look cool even then.

DO strive for good graphic design: This is one of those things that is difficult to explain but instantly recognizable on the screen: Too much empty space around the edges, too little space between a block of type and the border, poor choice of typefaces, clashing colors, clutter. Anyone can put together a functional web page, but it take special skill to make it look good. If you don’t have that skill, hire a designer to put together a template for you. Or just use an off-the-shelf WordPress theme and tweak it a bit.

This is just the short list. Joel Fagin offers some excellent advice, including a primer on image formats, in this tutorial, and I highly recommend it to anyone who is setting up a webcomic site.

Just as book designers fuss over cover designs, paper quality, and page margins, webcomics creators should be thinking about the best setting for their work. It’s harder, because the web presents more choices, but it’s a vital marketing tool, and ignoring it does your webcomic a serious disservice.

(Animated GIF from Andy’s Animated Gif Archive.)



Re: “Where’s the comic?” [Screenshot]

Aha, that looks like one from the Penny Arcade school of design. Perhaps there should be an addendum to the “DON’T hide your comic” rule; “You are NOT Penny Arcade!”

The thing about Penny Arcade’s design though is there is a button deliberately titled “COMIC” so they’re not hiding their comic. But yes, it would be best if the comic was on the main page and not the blog.

Hello! Nice article on a very interesting topic.
About scrolling: I agree with the notion of freeing the medium from unnecessary print comics conventions. While I can see that an horizontal layout fits better the screen, I believe that the need for looking at the whole comic page at once is a print comics “thing”, and I get the impression that currently people are less annoyed by scrolling than, for instance, the flash readers that Zuda and other comics use. I think a scrolling design may work for a reading experience more oriented to a “frame by frame” pacing than “page by page”.
There was a discussion recently about Zuda in the Whitechapel forums, and it may be surprising (or not) the amount of people who don’t like the Zuda reader:

I would note that not all of these are absolutes, just opinion. Those of us who make part of our living from places like ADSDAQ or Burst don’t have an much of an option to avoid animated ads if we want to make any revenue. As for the “the comic should fit the screen” argument, I would say it varies from different genres. Humor strips should definitely be “above the fold”. but with dramatic comics this is not as important, no matter what Scott McCloud’s personal pet peeves may be.

Good article but I also have to say that at least for dramatic or long form comics, I don’t think it’s that important to be in a horizontal format to fit the screen. I think you overplay the annoyance of scrolling a little. I had to scroll to read this article and that didn’t bother me. I agree though that in a case like Kitty Hawk, it’s annoying to scroll simply to fit the bottom 1/5th of the page on your screen. And that’s something that’s hard to avoid if you’ve got any sort of page header or navigation. Even the great Cameron Stewart comic Sin Titulo runs into this issue. But I’d really doubt many readers would complain about scrolling to read a vertical page, as long as you’ve got page navigation at the bottom of the comic as well.

Also, for someone like myself, I eventually plan to self-publish my webcomic so I have the printed page in mind as well as the screen. Not that horizontal comics can’t work on the page too but I think vertical works better for both formats.

Oh look! Yet another long-scrolling article advising us that it’s a bad idea to make anyone scroll on the web.

I declare this meme dead-by-autoerotic-asphyxiation.

Brigid Alverson

August 28, 2009 at 7:04 pm

Laroquod, Sorry to ruin the fun, but the issue isn’t scrolling per se, it’s the continuous scroll-click-reposition-your-eyes that gets to me. I find a continuous scroll, as in Bodyworld, much less intrusive.

Rich, when I think about it, maybe what I should have said is “don’t put so much stuff in the header.”

Considerations of scrolling are important for long-form dramatic comics as well as gag-a-day strips. I’m doing long-form narrative comic (NSFW) and I gave a lot of consideration to the page size as well as the site design; originally the whole page fit comfortably on the screen of an old 15″ Powerbook but a series of complaints that it was “too small” made me enlarge it a bit. It’s still only a little larger than a medium-sized laptop screen. I put the masthead and links in a sidebar instead of horizontally across the top of the screen partially to achieve this lack-of-scrolling.

I make people scroll for double-page spreads. Which I’m creating with the printed page in mind – does your printed page have to be in the same size as your average issue of “Dudes Punching Monthly”? My comic is not the same kind of story as those books; why should it be poured into the same-shaped page?

I’m working on another project that will stack all the pages of short-short stories on top of each other, for one long scroll. Use the traditional “comic book page” size and shape if you must, if it’s what fits the story, if you want to turn it into floppies that fit into the new issue bins at a comic shop.

And however you decide about scrolling… don’t drown your comic under a zillion other things.

An old article/thread I know but I’m wondering if anyone has any thoughts on this now that tablet pcs/mobile devices are commonly used? Both vertical and horizontal screen formats are now in common use. Vertical formats range from 3:4 aspect ratio to 9:16, whilst laptops are generally 16:9. How would you format a full page image for viewing across multiple platforms?

Leave a Comment


Browse the Robot 6 Archives