Redesigning Webcomics: design your site for readers

| Comments

Warning! There are example links in the following that lead to mature content. This is because adult comics exhibit some of the best and worst user interfaces today. Make sure no one easily offended is looking over your shoulder. To the easily offended, I have warned you!

This post covers my second readership survey, where I asked readers how they use other web comics sites. (A recap of the first survey can be found in a previous post.) 27 people responded, helping me to formulate the following best practices guide to designing a web comics site. If you find this article useful, I encourage you to pass it on to others.

Web comics site design: guidelines and best practices

Put the latest comic and date on the front page.

People come to your site for the comics, not for your blog, your fluffy “Hi my name is Jenni and I draw comix…” introductory text, nor to see old comics they’ve already read. Readers hate having to search to find the latest comic (referred to as “hidden comic syndrome”). Keep your latest comic front and center! The majority of people visiting your home page every day are coming for just for that. And make sure the date it was posted is visible at a glance so people can tell if they’re behind on reading or if you’re due to update soon.

Keep the comic above the fold.

Survey respondents repeatedly mentioned how annoying it is when the comic is below the fold or when they have to scroll down the page to read the entire comic. Try to keep your headers narrow and your comics dimensions closer to that of your visitors’ most common screen resolution (and if you don’t know what that resolution is, hook yourself up with Google Analytics and find out!).

Unclutter your layout.

As stated above, people come to your web comics site for the comics, not the ads, not a picture of your dog, not for your blog. It’s okay to have these things on your site, and indeed, some readers will be keenly interested in them, but don’t let them take precedence over your comic. And definitely do not let them overcrowd your design or distract from your comic.

Remember, less is more. Whitespace is your friend. So long as people can see a link to your blog in the navigation, they will go there if they are interested. If you feel like something is really important and has to be on the front page or has to push the comic closer and closer to the fold, ask yourself, “Is this as important to my readers as it is to me?” 9 times out of 10, I find I can put the information in a more discreet location or give it its own page.

Be predictable.

Web comics sites these days have a certain cookie-cutter style about them. Perhaps this is due to the rise of ComicsPress and large comics sites like Keen Space. Whatever the reason, individuality is overrated in the comics field. Readers are used to finding the same navigational buttons (see below) in the same places. They expect cast pages and archives. If you try to be too original with your site design and layout, you risk throwing off seasoned web comic readers. Try to have the following pages:

  • Front page with latest comic
  • About the author(s) page
  • Cast page with bios
  • Well-organized archive with comic thumbnails

Use good fonts.

I was startled at how often this was mentioned. Use good fonts and readable font sizes both on your web page and in your comic. Take into consideration the age of your readership. Older people can’t read 10px Times New Roman like twelve-year-olds can. Just because Comic Sans looks good to you doesn’t mean it looks good to your readership. Get some good lettering fonts from a comic font retailer and brush up on your font stacks.

Have an RSS feed.

The percentage of my readers who use RSS is low, but they are vociferous advocates for the technology. You should have a feed on your site to accommodate these folks, because they aren’t likely to use any other format to receive updates. If you use a CMS like WordPress (see also ComicsPress), RSS is built-in. If you are not using a CMS with RSS capabilities or are publishing by hand, check out services like feedburner.com that let you set up and monitor your own RSS feeds. (I recommend you use this service even if you have WordPress. They integrate nicely, and Feedburner has a handy “subscribe by email” option.)

Keep a regular schedule.

Readers like consistency. My previous survey showed that majority of readers, 44%, would  pop by the site at a set time every week too look for new comics. So regularity is super important, or you risk losing these casual passersby. Readers also said they’d rather have fewer updates on a regular schedule than more updates that aren’t posted in a predictable manner.

Keep tabs on image quality.

Readers complained of butchered images and visual elements. If a graphic has been smooshed, stretched or cut off, they notice. This goes not only for the comic pages themselves for also for background images and other graphic elements. Comic readers are more visually aware than other Internet users. You can’t get away with graphic sloppiness with them.

Build for speed.

Many readers are still on slow connections, and more and more are using mobile devices to read comics. Web comic images themselves usually take awhile to load even on a fast connection. In general, your site shouldn’t take longer to load than your comic’s image. So try to keep your pages lightweight. Use image replacement and CSS sprites instead of clunky image tags for interfaces and logos. Eliminate inline styles, and use an external stylesheet. And if you’re still using tables, get out of them stat! It’s 2011!

Navigation

This is the going standard for web comic navigation:

[caption id=”attachment_279” align=”aligncenter” width=”337” caption=”Comic navigation featuring the prerequisite First, Previous, Next and Last options. (This UI is from "Menage a 3.")”][/caption]

If you use this navigation model, stick to it. Don’t change the positions of the arrowsor try to get clever with it or you risk severely confusing/annoying readers who look for those little arrows and think no more. It’s a pattern, and as such, cannot be strayed from.

Less navigation is more useful.

Although at first you may think that readers would like more options, such as jumping to the next story or the previous one, it’s hard to do right. More often than not your efforts will feel more overwhelming than useful. Oglaf, a very adult comic, manages to pull it off with a user-friendly navigational design (and archive) that we would all do well to take notes from.

As I suspected, most participants only use the “first” navigation button once in their site-use lifecycle, usually when they first visit the site and want to start reading the comic from the beginning. They only use the “last” button when reading through the archives and checking for a more recent update.

I found that people use Previous, Next, and Last the most. “First” could be replaced with a “Read this comic from the beginning!” call to action somewhere else, like on the archive, where people tend to go when looking for the start of a series anyway. Ostensibly, if your latest comic is on the front page and you have a “home” link in the main navigation, you could get rid of “Last” entirely, reducing the navigation to “Next” and “Previous” alone.

Put navigation where readers can find it.

Readers don’t like having to scroll to get to the navigation. If you have a comic that doesn’t reside entirely above the fold, you can:

  • Put the navigation at the top and bottom of the comic
  • Put the navigation on the sides of the comic.

Alternate navigation expectations

Readers have come to expect to click on a comic to be taken to the next one. I personally enjoy it when you can use the forward and back arrows on your keyboard to navigate as well. (There  just so happens to be a handy WordPress plugin for keyboard navigation, too!)

Also, for gag-a-day comics, strips, and series with more compact, self-contained storylines, readers tend to request a “random comic” option.

Archives

Web comics archives are notoriously inconsistent. Some models work better than others. People use archives for three reasons:

  1. To catch up on back issues
  2. To find a storyline or comic they want to read again or share
  3. When they first start reading a comic, to start at the beginning (this implies that they are not using the "first" button).

Date-based archive models got bad marks because very few people remember when a comic was posted. But archives that have no dates associated with the comics make it hard for readers who’ve gone away for awhile to pick up where they left off. Readers appreciated titles, short descriptions, and thumbnails in addition to dates. Archives organized by chapter or storyline are popular for plot-driven comics. This doesn’t apply to gag-a-day strips with no connecting plot, obviously.

Searching Archives

Many participants expressed dismay at how to find a comic whose name and date they could not recall. A search powered by keywords, characters, even dialog would help them find these comics faster.

Ditch the calendar.

Participants repeatedly bashed ComicsPress’s built-in calendar, which, when they click a date, doesn’t take them to that day’s comic but to an archive page.

Advertising

Readers expressed a deep loathing for cluttered layouts and ads flashier than the comics themselves. They also deeply disapproved of putting ads right beneath the comic, where story navigation buttons usually go. They complained that all too often, they’d click the ad by accident.

You can have ads on a web comics site. Just make sure that they don’t clutter the layout and that they aren’t visually distracting from the comic. Try to choose advertisements that relate to the content at hand as opposed to run of the mill google ads. People are more likely to click if they feel the ad was placed there to benefit them at the author’s behest.

Why you should run surveys, too.

I encourage you to run your own surveys (and to share your results, too!). IT’s important to communicate with your readership directly instead of assuming you know what they want and need. As always, communication is key. Love your readers. Serve your readers.

Comments

comments powered by Disqus

Conference Schedule

Do you love web animation and digital storytelling?

Sign up for my mailing list and get updates when I post new projects, blogs, workshops, and shennigans.

Join my mailing list
Copyright © 2008 – 2019 Rachel Nabors