Do’s and Don’ts of Webcomic Website Design

 

We all wish we could stumble on Magic Answers, to the  questions like “How do I better market my comic?”, “How long will it take before my readership starts growing?”, “When is best to start exhibiting at conventions?” … as well as “What are the rules for creating the best website design?”.

I hate to burst your bubble, but website design, like many other aspects of being a creator, is subjective. You may start to notice trends– some gimmick that all the “heavy-hitters” are using– and as soon as you manage to employ it yourself, they go and change it around. That proves my point- there is no Magic Answer. But there are some helpful hints that can– and should– be utilized by anyone who is distributing their comic content online. Seeing as my website has gone from hastily-created flash website, to drunkduck-hosted, to wordpress/comicpress and beyond (with many redesigns), I have learned a lot about how to display your “baby” (ie: comic) for optimal readership and ease of use.

Lets make this easy and list the Do’s & Don’ts.

Do:

  • …I cannot stress this enough: make the comic the HERO. In fact, I’ll go on record saying this a Magic Rule of Webcomic Website Design. No matter all the other stuff you put on the site, the comic is still the reason people visit your site. “Making the comic the hero” means to allow it to be the predominant element of the “above-the-fold” (ie: before you scroll down) space the visitors will first see. If you have to scroll down to see the bulk of the comic, it may lead to a confusing first impression.
  • …Make the second element that jumps out in the “above-the-fold” area the comic’s logo. The way a new visitor should process your website sounds a bit like“Oh, this is a webcomic… and it’s called “____title___””
  • …Employ proper navigation. This is pretty much a standard for the webcomic field. Although some people are trying to be innovative with new ways to navigate through an archive… seasoned readers are still used to the “first, back, next, latest” system. If you hid away your archive, it’ll be that much harder to gain new readers. Make it SIMPLE and EASY.
  • …If you have chapters and storylines, a separate page clearly linked from the homepage is suggested. Although some creators use a special splash page that will direct readers to the latest comic, beginning of the chapter, or other chapters. This can be annoying for regulars, but helpful for new readers. One of those subjective issues… you’ll just have to decide which is best for your comic.
  • …Find a simple and clear way of directing people to your social networks. After all, it’s not just about getting new readers, but getting them to come BACK… and the best way to do that is via a social network– so make it easy for them to follow you! The twitter, facebook, and RSS feed icons have become very recognizable, using those or your own drawn versions of those icons is suggested. Be sure this is not obtrusive to your comic.
  • …Also allow your readers to easily share your comic on their social networks.  There are plenty of plugins and widgets for this, including ShareThis, AddToAny, and  “Really Simple” share buttons.
  • …Clearly list all your important pages in your menubar. Title them with the most simple-and-to-the-point names. WordPress/Comicpress allows for parent and child pages, so if it’s easier for you to split a couple pages into 2 or 3 for simplicity’s sake, go right ahead. Some widely-used pages for webcomic sites are:
    1. About – this could be about the creator(s) or about the comic or both
    2. New Readers – can be used instead of the “about” page, this page is an easy way for new visitors to explore the comic, cast, concept, and decide if it’s up their alley.
    3. Store – for, yknow, the stuff you’re selling!
    4. Links – as opposed to your friends/reference/comic list (which can get pretty expansive) being  on the mainpage, you can “hide” it away on it’s own page. You can also include banners this way, without using up space and precious load-time on your mainpage.
    5. Promo , or Extras – a good page to toss some banners people can grab to help promote your comic or for banner exchanges. You can also include wallpapers, avatars or other goodies for your hardcore fans.
  • …Make it clear when you update somewhere non-obtrusive. It can be as simple as “Updates M-W-F” under your logo. Seeing a schedule reminds your current readers when to come back, and gives new readers the impression that you are professional and dedicated.
  • …Try to entice your readers to go archive digging. Sometimes the simple navigation buttons aren’t enough, especially if you have a HUGE archive– that can be overwhelming! Utilize the sidebar to showcase a “start here” image– for those who work in chapter-based storylines. If you’re more of a gag-a-day creator, a rotating “ad” with some funny imagery may be intriguing. Pop-culture references (if your comic touches on them) that everyone can pick out are a good way to grab attention. A good plugin to use for this rotating ad idea is Datafeedr Random Ads.

 ______________________________________________________________________

Don’t:

  • …Get too crazy with the background and color choices for fonts/layout. This goes back to “Do” #1– allow the comic to be the hero. Think of your website as a frame for a favorite picture. If the frame is screamin’ fuchsia, with bells and whistles and blinking lights, you probably won’t be as inclined to admire the picture.
  • …Use a ton of images built into the site design. Extra images means longer load-time. Longer load-time means impatient readers who’ll bail more quickly. Remember it’s okay to just pick a font and color (coded into the CSS/HTML) for the headers or menu items, rather than using a ton of extra .jpegs that have to be loaded upon every page load.
  • …Make your navigation buttons little complicated masterpieces of their own. They are buttons. They serve on purpose, let them do their job.  Getting too gimmicky with these may hinder a reader’s ability to flip through your archive… if they can’t figure out which way is “back”, they may just move on.
  • …Go overboard with widgets. I know, I know.. there’s so many to choose from and they’re all so dang neat! Just keep reminding yourself that your website is about your COMIC. Anything on the mainpage should only enhance the comic-reading experience. If you’d really like to test out a widget in question, “bury” it on a page of its own… and link to it from your blog area.
  • …Bombard your website with ads. We’re all trying to earn some extra cash, but you can work out your ad placement to be non-obtrusive and fit within the website layout well. This, yet again, ties into the idea that the comic is the hero…. then #2 is your logo. If you must have an ad in the “above-the-fold” area, just be sure it sits at #3 or beyond in the hierarchy.
  • …Neglect interacting with your readers! The comic may be the hero and the first thing people read– but they follow-up by reading the creator’s blog, and possibly leaving comments of their own! Even if it’s just a sentence about what inspired the current comic, try to give your readers a little glimpse into YOU. Post a picture. Ask a question that relates to your comic. Post a poll. And be sure to keep tabs on the comments and respond if necessary. When designing the site, make sure the comments section is usable and intuitive… if the standard WordPress commenting system isn’t for you, the Disqus plugin is a nice alternative.
  • …Forget to BACK-UP your website once in a while! Who knows what could happen to those servers.

 

Your Turn…

Like I said, this is mostly a subjective issue. Have YOU discovered any “rules” you’d like to pass on? What irks you about website design? What’s a “must-have”? Are there any points that pertain specifically to webcomic websites?


Dawn Griffin is a self-described “crazy chick”. She likes steak, Cleveland sports, video games and oh yeah, comics. She spent her high school years either playing street ball, pitching, or drawing comics and submitting them to syndicates. Once she –accidentally– discovered the world of webcomics, the sydication route became a pointless hurdle. After all, “Crazy Chicks” do things their *&%$ selves. Dawn is the mastermind behind Zorphbert and Fred, and the illustrator of the Abby’s Adventures kids book series. She can be easily bribed with ice cream.

 


Facebooktwittergoogle_plusredditpinterestlinkedinmailFacebooktwittergoogle_plusredditpinterestlinkedinmail
Posted in Business, Featured News, Helpful Hints, Tech.

21 Comments

  1. Great post! Some seem obvious. But it’s not until you hear it from someone else that it rings true!

    I get an email back up sent to me. I’ve never tested it though, wouldn’t know what to do with it. Is that what you mean by back up?

    Cheers,

    ROLFE

  2. Great article Dawn. I’ve been using the datafeedr for my sites ads to highlight whats in the archives for some time and it works wonders, well, for me anyways. I recently pulled it down while I reorganize my archives a bit, but it’ll be back. The way I see my archives being read in the stats show me the datafeedr can grab someones attention. I want to see what I can do to do a better job of attention grabbing with it in the future.

    • I believe there’s a way using google analytcs (in-page analytics) that shows you percentages of where people click or move their mouse. It’s a little finicky, though… you need the latest flash and operating software to use it (and my home and work macs are older– so flash stopped supporting Leopard OS, grr)

  3. Alas, would that you could go back in time and make this post — would have saved me a lot of trouble re-designing my website! Can definitely attest to the value of your advice!

    One “rule” I discovered in the redesign is “be aware of your white space”. The current design has a textured background, but when it first launched it was all white. I got a lot of complaints that the site was “blinding,” especially on larger screens. Never noticed it on my little laptop!

  4. Thanks so much for sharing all this great info, Dawn! Gives me a lot to think about. Your idea of the Links section being on a separate page for example. I’ve been wanting to dip into some advertising so I will be needing to move things around a bit on the Home page. You mentioned wallpapers and banner exchanges. I’d love to see a more in-depth article about those, the formats and how to set them up, and what kind of freebies are worth spending time on. Fantastic job on a fantastic article!

  5. All-in-all, good advice. I would like to know though, does anyone know the steps to back up a website that is NOT hosted on WordPress? It’s done by comicCMS. Plus, currently my website is hosted by a good friend with her own personal server at home. Our traffic has been light enough that she can handle it and saves us expenses, and we have 100% access to everything on the technical end.

  6. Pingback: So, what’s this newfangled “webcomics” thing, anyway? – MorganWick.com

  7. Great post! One other menu subpage I really recommend (that I just added when I revamped my site a week ago) is Characters. It seems really superfluous, but I was getting involved in a lot of art trades, and every time I wanted to draw something for someone else, I would want quick references to what a character looked like. Sometimes I would have to scour their archives or DeviantArt for hours to find a clear shot of their outfit. And it was worse if their comic was black and white and I wanted to make something in color for them. Guest art and art trades can be a really great marketing tool for reaching other creators’ audiences, so if you want to pursue it, make it EASY for someone to draw your characters.

  8. I second that! I think we can associate web comics with peace, innocence and pleasure. Thus it is important to understand the basic reason that motivates people to read or rather enjoy such comics. If a site is overburdened with unwanted design, fails with effective communication and underrates the significance of engaging content then creating desired impact is quite difficult. Well thanks for sharing these tips, I am sure they are going to be great help 🙂

Leave a Reply

Your email address will not be published. Required fields are marked *