Comic Website Design
The ability to draw does not make someone a good designer and, of course, vice versa. This is quite clear in the world of webcomics where there are a quite considerable quantity of bad webpage designs. Hopefully this document will help.
I'm not here to tell you how to make the website look professional and pretty. That covers way too much and it's less relevant than you think. Even some of the most popular comics have bland, insipid and just plain bad websites. Most people seem to understand. As long as it functions and you can get around okay, the readers don't mind. Graphic design is simply the icing on the cake. The important part is the comic and the webpage must be it's servant. That's it's entire purpose and I'm here to make sure you don't interfere with that purpose. This document is to help you make life as easy and intuitive for users as possible. You do not want to irritate, delay or frustrate potential readers. Oh, no. You want them to stay.
Purpose and Design
The design of a webpage is simply what it looks like - what colours are used, the fonts, layout, graphics and so on. The purpose of a webpage is what it's supposed to achieve. A form is there to be filled out, for example, and a document is there to be read.
There are degrees, of course. The design is not completely subservient to the purpose. Small sacrifices can be made - even big ones in certain circumstances - but it's best to be cautious.
For example, the purpose of a manual is to inform the reader but I've bought equipment with manuals written in Korean; The purpose of a document is to be read yet I've seen one booklet with eye-achingly green text on fluorescent yellow; The purpose of a coffee cup is to let you hold boiling water without stinging your hands yet I've seen one with no handle; The purpose of a movie poster is to attract you to the movie but I've seen posters for movies I don't know about with no title; The purpose of a webcomic site...
Okay... What is the purpose of a webcomic site? To present the comic and information related to the comic, and to allow the user to get around the site and the archives.
That's what we want - and anything that interferes with that should be treated carefully. Very carefully indeed.
The Navigation Interface
"For my own webcomic (The Rainbow Orchid) I started out kind of gimmicky with the strip opening in a window with its own control panel. It was pretty nifty, but I noticed readers didn't bother too much with it. Slowly I simplified and simplified my site, back to the webcomic conventions. Less radical, and more what people are used to. My visitors went up."
- Garen Ewing, The Rainbow Orchid
There is an established interface for comics navigation which I'm sure you're familiar with. Four to six arrows, usually under the comic, which take you (from left to right) to the first comic, to the previous chapter (optional), to the previous comic, to the next comic, to the next chapter (optional) and to the most recent comic. Here's a basic example...
This interface has been copied from the audio/visual interface found on tape players, CD players and DVD players. As such, not only is the interface standard across most comics, but it's building on an interface everyone is already familiar with. Even newcomers will be able to grasp it quickly. It would be very hard to improve on this.
You can mess around with it quite a bit. Stylised arrows, dots instead of bars, different coloured arrows instead of different shapes... As with any icons, the exact look can be altered quite a lot without losing the intuitiveness of the interface. I mean, no matter how strange any given font, you can usually recognise the letters right? Same thing.
But there are limits to how much you can do. Here's a bad example...
Those are vaguely arrow shaped but they'd look more like decoration than buttons to the casual eye. The purpose of the buttons has all but fallen to the requirements of the design and anyone not familiar with webcomics would probably be quite lost.
This is an old and now unused navigation interface from the popular science fiction webcomic Schlock Mercenary.
(It's worth noting that it was replaced because of the emerging standard which I'm now talking about. Schlock Mercenary is old enough to predate it somewhat.)
The above navigation bar was in the expected place - right underneath the comic - but unfortunatly, it looks pretty much like a picture. The only visual clue that it isn't are the breaks between the buttons. A text label beneath each button would make it completely clear and quite a few comics use picture with labels in this way. The Wotch compromises by having the text pop up in speech bubbles when you move the mouse over the buttons.
Scott McCloud advocates a system where you click on the comic image to progress to the next. This clears up extra room on the page but it's not a good idea to use it by itself. Firstly because it's unfamiliar and would leave many readers lost, but also because it's an invisible navigation system. A button is immediately visible and even if you don't know what it does, you know it must have some purpose. The comic already has a purpose - to be read - so why should it occur to people that it has a second function as a "next comic" button?
However, there's no reason why you can't do this as an option and if people get used to it, it could become a perfectly acceptable interface. The problem is just that they're not used to it right now.
Generally, as a rule of thumb, if you feel you need to have instructions on how to use a user interface, then it's not a very intuitive one and you should seriously consider abandoning it. Sticking to the standard interfaces that people are used to is safest.
Placing the Comic Navigation
It doesn't matter much where you put your comic navigation arrows. Some comics have them below, some above, some to the left and some to the right. It's usually easy to find them if they're the expected arrows. Just make sure they're visible - not too small, for example, or hidden in amongst some complicated graphics.
I'll repeat the first bit of what I just said: It doesn't matter much. Now, having said that, there are some things you might want to consider.
When skipping through the archives searching for a particular strip, it's best if the buttons are always in the same place on the screen. That way you can just keep clicking without moving the mouse. In this case, the buttons should be at the top of the screen, just above the comic. If you put them below the user may have to scroll down to get to them which would be irritating if you're just skipping through.
However, if the user is reading the archives, then it's best to put the navigation buttons at the bottom of the comic simply because that's where their eyes are going to end up. Bottom right in fact, but bottom is fine. It also saves the reader from scrolling back up to get to the buttons.
So which should you use? That's up to you but I will just say… Why not both? Top left and bottom right.
The index page of your website presents a bit of a problem. It has to tell you what the comic is, who wrote it and so forth, as well as having all the major links for getting around your site, a news box, advertising banner, possibly a donations button, voting buttons, logo, links to other comics (of varying forms), the comic navigation buttons and possibly a tagboard. I've probably even forgotten a couple of things. In fact, I feel sure I have...
Oh, yes. The comic.
Anyway, this is all something of a difficulty. An index page of a normal website - say for some large corporation - needs all these links, buttons, menus, pretty pictures, flash animations and so on because the index page is how you get to everywhere else. That's it's purpose.
The content of a normal website, however, is usually found after a couple of clicks through different menus and is found on far cleaner, less full webpages. This is important because the purpose of the content is to be read (or viewed, or whatever) and you don't want a lot of clutter laying about taking up valuable room and being distracting.
A typical comic website, however, tries to combine the two. Tables, frames, iframes, boxes within boxes - the comic is surrounded by pretty graphics and often by other artwork. Technically, this is a bad thing.
What can be done about it? Not much.
It would be nicer if we could put the junk on the index page and have the latest comic just part of the archive. Some people have done this but, unfortunately, there's definitely something to be said to having the comic one of the first things people see. It's advertising and could be the difference between a user closing the site because it's one of twenty he's just opened or bookmarking it for a later and more careful look.
However, the problem can be minimised. Firstly, you can reduce the clutter as much as possible. A great deal of it is optional and you should only include what you genuinely want to have rather than, say, doing what all the cool webcomics do.
Secondly, you can keep it out of the way of the comic, especially those parts you didn't make yourself - voting buttons and advertising, for example. They stand out from your site design because they're not part of it, and the comic is the thing that should be standing out, thank you very much.
So, a navigation sidebar would be okay but nearly everything else should be moved firmly below the comic where possible. Comic Genesis requires the advertising banner to be right at the top. That's fine as it's still out of the way of the comic.
It's by no means a hard and fast rule and lots of comics get away with it. CTRL-ALT-DEL, for example, has a lot of clutter crowding the comic but pulls it off because the comic is so large and colourful, making it a clear attention magnet. Cortland leaves a buffer around the comic and keeps the parts of the website that don't match the comic - the colourful bits, since the comic is black and white - below the comic where they won't get in its way.
Conversely, Ornery Boy is an absolutly fantastic website design which really does look nice, but it uses the same colour scheme and dynamic style as the comic which makes the comic seem to be just part of the website rather than it's entire reason for being. It's like having a brown picture with a brown frame on brown wallpaper. Yes, it's there, and you can certainly see it, but it doesn't stand out as it should.
Thanks to Keenspot and Comic Genesis, who have standardised this, the typical comic archive page is a calendar based archive. They look somewhat like this...
They have a few obvious problems. They take up a lot of space on the screen and generally look fairly clunky and ugly. They also make for very large webpages which are slow to download since the HTML used to create the calendars is complex and messy. They're an exercise in wasted space and awkward navigation but, on the plus side, Keenspot and Comic Genesis create these automatically so there's no work involved for the comic artist.
The problem is purpose again. Why do people use a comic's archives? I can think of two reasons: To open multiple comics in different windows in order to speed up reading the archives, and to locate particular comic strips. The calendar archive is fine for the first - but any other form of archive would be too - but useless for the second. There's nothing up there telling us where certain stories of chapters start and finish, nothing to indicate what's happening in the strip on each date at all. Finding a particular strip is extremely time consuming and basically amounts to throwing darts at the screen.
Worse, the information the calendar archive does give us - which, in fact, it spends a lot of time, effort and bandwidth to present - is irrelevant. There's no reason why we need to know the date a comic was written on. Imagine a novel with no chapter names in the contents page but rather the dates each page was written on. What's the point of that?
Dates are of interest only to the curious and otherwise completely useless.
So, given the purpose of an archive, what should it have? Story titles, for one, so you can skip straight to the story you want, and each story should have all the comics in that story listed so you can skip to, well, at least the approximate remembered location of a particular comic you might be looking for.
And we'll include the dates for the curious. Why not? Nothing wrong with that if you have the room.
Something like this would be far more useful. (The links are all fake, by the way.)
||In the Beginning
||1 2 3 4 5 6 7
||The Plot Thickens
||8 9 10 11 12 13 14 15 16
||Race Against Time
||21 22 23 24 25 26 27
I've used in the archives of my own comic and you may feel free to steal the code if you wish.
Some comics use dropdown list box listing the chapters or even each and every comic in the archive. Here's an example of what I mean (again, this is not actually a functioning archive)...
They have good and bad points. They certainly allow the user to skip quickly from one end of the archive to another but they down allow them to open multiple comics in seperate windows or, indeed, open them anywhere but the current window.
They're also intended for use on forms and are not really an accepted part of the web navigation interface. It's a bit like having a DVD player half controlled by voice commands and half from a remote. Using pieces of two different interfaces adds unwelcome complexity. Dropdowns also tend to get unmanageably long which makes the webpage slow to load and means it takes a long time for the user to move through the list.
One final point which, I have to admitt, is a bit of a pet peeve of mine: Make sure the links the viewer has visited are a different colour to links that he or she has not. It simply lets them see where they've been - an invaluable addition to a page so full of links as a comic archive. You can pick up right where you left off without having to remember where you got to last time.
It doesn't have to be much different, mind you. A different shade (usually darker) of the same colour is not only fine but what people do anyway. It just has to be different enough for the reader to see it.
The links in these tutorials darken slightly once visited. For example, here's a link back to this page (which you've clearly visited because you're here) and a link to a non-existant site (which you haven't).
Wait... Didn't we just do this one? Well, no. Previously, I was talking about the page on which you will find links to all the comics. Here I'm talking about the webpages on which those comics are viewed. They can basically be thought of as the pages of a novel. They're usually pretty minimalist and that's a good thing. You don't want a lot of clutter for people reading the archives. The comic, navigation buttons, maybe some notes, the date - most have little more than this.
However, let's look at purpose again. You're reading through the archives of a comic. What information and controls would be useful?
Well, the navigation buttons, obviously. However, on every navigation bar for every comic, there is always a "first comic" button which could, if you think about it, be left out. People will very rarely go back to the very beginning of the comic and even if they do, they'll do it from the main page. You certainly don't need to skip to the beginning from a point three comics into the fifth story of year two. Generally, I find the "first comic" button is only clicked on by accident.
Still, it does give a pleasing symmetry to the navigation buttons because you really do need the "latest comic" button. If you have a "home" button somewhere on your archive pages, then you can do away with both without trouble.
What else? The title of the comic is a useful thing to have around. Even books often put their title at the tops of the pages. In fact, books are a good model to follow, which would mean that it'd also be arguably useful to have a comic number and the name of the current chapter shown. In fact, I'm not too sure how useful a comic number would be, but I definitely like the idea of the chapter title being displayed. It's nice to know where you are.
And really, that's all you need, and most of it is optional. Oh, wait. I'm missing something, aren't I?
The date. Well, once again I have to ask "why bother?" and "who cares, I mean, really?". I'm not interested on what day Stephen King wrote page 132 of "Wizard and Glass" and I'm not interested on which day the third comic of "Blue Madness" happened at "College Roomies From Hell" either.
However, it certainly doesn't do any harm and in lieu of a chapter title or comic number, a date let the reader know roughly where he is.
The Infinite Canvas
This is a great idea, first... Well, I don't know if he was the first to think of it, but Scott McCloud was certainly the first to recognise it and then name it. Basically, it simply means that a comic on the web is not constrained by the limits of the paper and can be any size - you could have fifteen metres of panels on one webpage, no trouble. You use the scroll bars to read the whole thing. Here, I'll throw in a couple of examples...
Zot! Hearts and Minds by Scott McCloud (Vertical canvass)
The Spiders by Patrick Farley (Horizontal and vertical canvasses)
The infinite canvas throws up a few points to consider from an interface perspective, though.
The first thing you might want to think about is direction. Vertical movement is far easier than horizontal simply because we have mouse wheels. You don't have to move the mouse to the scroll bar. Conversly, horizontal movement has a far more natural flow. We do, after all, read from left to right. They're both pretty minor points but worth thinking about.
However, the first point becomes a little more important and a little more irritating to the reader with a gag comic (which most webcomics seem to be). The problem is in the archives, where a reader who's catching up has to keep on moving between the horizontal scroll bar and the "next comic" button. If it was vertical scrolling, the mouse wheel would do the scrolling and the mouse wouldn't have to move.
But, wait. Why does that only apply to gag comics? Because the comic stops every few panels for a punchline and then you have to click on "next comic". For a story comic, the infinite canvas can stretch for dozens of panels and usually cover a whole chapter. The mouse can stay on the scroll bar to control your position and there's not nearly so much back and forthing.
The final point I have to make is to avoid, where ever possible, making the page scroll both horzontally and vertically. It's very irritating jumping between scrollbars and it mostly seems to get used as a gimmick more than anything else.
I am personally not a frames person. However, that's just a preference and I'm quite willing to concede that many sites need frames and use them well. A sidebar full of navigation buttons certainly works well in a frame since no matter where you scroll on the page, the navigation buttons will always be there.
The problem with frames is that they restrict the amount of screen you have to display the content of your website - the comic in this case. A navigation sidebar is an acceptable sacrifice since it's useful to have those buttons on hand at all times. Anyway, comics are often A4 sized and that leaves room for a sidebar anyway. No problem.
The rule of thumb regarding frames is this: If your comic is taller than the screen and the reader will have to scroll vertically, do not have a frame either at the top or bottom of the screen. Equally, if your comic is wider than the screen and the reader will have to scroll horizontally, do not have a frame either on the left or right.
For example, here's a comic which scroll vertically, both with and without a frame with the title in.
With frames, the view of the comic is far more restricted. Without them, the first thing to scroll off the top of the screen is the title, immediatly granting more space.
Documents as in a FAQ, archive, cast page... Anything which is basically just a pile of text. There are some very specific rules for document design on the web which I'll go over briefly here.
Document text should be in a narrow column down the centre of the screen - much like this tutorial, in fact. The human eye is more comfortable - and can read faster - when the lines are short. Magazines and newspapers use very narrow columns of text indeed for this reason.
However, unlike newspapers, the text should be in just one column. The reason is pretty obvious if you think about it. Newspaper has limited page sizes and the web does not. Anyway, it'd be irritating to scroll all the way up to the top of the webpage every time you start a new column.
A column width of between 600 and 700 pixels works well. That's about the width of an A4 sheet of paper in 1024x768 resolution and about as wide as you want to go.
There should be a skipped line between paragraphs. Again, this is just easier on the eye. The HTML paragraph tags do this automatically but some people get it into their minds that indented paragraphs - like in novels - are a better way to go. In fact, they were only used to save space (and therefore money). Skipping a line is better and HTML does it for you automatically anyway.
In fact, white space anywhere is pretty much always a good thing. White space refers to empty areas of the page. It includes margins, the skipped lines between paragraphs, padding around tables and pictures, and even the space between lines of text. This last one is one reason why assignments for University must be in double-line spacing (The other reason is that the students pay for the paper).
Margins, in particular, make life easy for the reader. The human eye is attracted to differences. A bright blob of colour in the centre of a page, for example, will attract your attention. If you have no margins, then when the human eye gets to the end of the line, it is subtly distracted by whatever is on the edge - whether the wood grain of the desk the paper is on or the navigational sidebar that allows you to get around the website. Leaving a margin means that, at the beginning and end of the line, there is a buffer of boring white space that will not attract the attention of the eye.
Okay, we're getting into areas that will be more well known by webcomics writers now but I must be thorough!
It is currently assumed by the web design industry that the minimum screen resolution you will encounter on an personal computer is 800x600 and, in fact, twenty to thirty percent of all internet users still work in that mode. In practical terms this means that you should make sure your website fits on the screen in that resolution.
Hey, it used to be 640x480. That was bad, let me tell you.
However, there are exceptions both ways. Consoles function at 640x480 so a website geared towards console users or about console games should be able to be viewed in that resolution. Gaming sites for PCs will be visited almost exclusivly by people working in 1024x768 and higher because they need high resolution for their games. Basically, it depends on your audience.
In truth, I would expect most webcomic readers to be familiar and comfortable with the web and computers and be in the age range that plays computer games. You could, if you wanted to, assume a minimum resolution of 1024x768.
Comics exist on popularity and the creators, who usually get little to no money, subsist largely on the appreciation of their fans. Those that do make money do so from donations, merchandise and advertising. In fact, everything the writers get out of webcomics is directly dependant on the number of readers.
So the bottom line becomes that you can assume that your readers use whatever resolution you like but the higher you go, the more potential fans you will be turning away. Twenty percent is a big slice.
I recommend 800x600.
Funnily enough, I've never seen this in a comic webpage but it's a problem elsewhere. Well, I might as well see if I can't nip it in the bud then.
Human eyes are attracted to movement. This is an evolutionary advancement that harks back to the days when "movement" meant either getting food or being food and either of those options was considered extremely important. So, whether we're talking about a comic or a document, movement on the screen amounts to being a distraction.
There are a few animated comics around. I'm not worried about them because the animation is part of the product. However, animation on the webpage itself should definitly be avoided. No spinning logos, mouse trails, moving backgrounds or flashing lights. Not when the visitor is reading the comic, at any rate. You can feel free to do little animations for your rollover buttons because if someone is using them, they won't be reading at the same time. Of course, the other consideration is that animated graphics make for larger files and slower downloads for your poor readers.
Animated advertisments are a necessary evil. They are, at least, kept well away from the comic, being typically above even the comic name.
The Mouse Cursor
With style sheets it's possible to change the mouse cursors that are used on your webpage. There's a fairly simple rule for doing so.
I mentioned above the standard webcomic interface and how you shouldn't deviate too much from it for fear of confusing people. Well, how the mouse cursor acts is part of the world wide web interface and, for that matter, the operating system's interface. The cursor changes in order to tell the user what will happen when you click - a finger means you'll open a link, arrows mean move or resize and so on.
And we're so used to this that it's largely subconscious. Change it and it's very jarring and very confusing, even for people who are experienced with computers. It should be avoided at all costs.
Never forget that the comic is the centre of your webpage's existance. That's the thing that needs to stand out. The background of the webpage needs to be just that: background. It needs to be considerably less noticable than the comic itself. Generally, the background should be basically one colour. Any texture or detail should be fairly faint and unobtrusive, just like real wallpaper. A background picture should be faded like a watermark.
Internet Explorer introduced the gimicky feature to allow background to stay still while the website scrolls over the top. This amounts to being a moving background and, as I said a little way above, this is distracting and should be avoided.
Finally: white backgrounds. Monitors project light and the purest, brightest light they can project is white. If your webpage has a white background, there's a lot of light being blasted out the front of the screen. It can contribute to eye strain, which in some people means eye ache or a headache.
Which isn't to say you can't use it but it's still a point worth considering. Light colours are far easier on the eye than pure white. Digital War currently uses a very light grey and although the difference in glare is considerable, you'd probably need it pointed out before you realised it wasn't white.
Another consideration is that pretty much everything else - newspapers, books, magazines and so forth - are printed on a white background. On the web, colours are plentiful and free, and it's worth taking advantage of that. Mind you, there is also a counter-point to that which states that since colour is so prevalent on the web, using white as a background makes the website more unique.
There are only two fonts you should use for the text in webpages and they are arial and times new roman. Headings, titles and so on can be any font but the bulk of your text should be in one of those two. The reason for this is two-fold.
- They're easy to read in large quantities.
- They - or very similar fonts - are standard across all computers.
Which one you use depends on your comic. Times new roman is what's known as a serif font.
This is a serif font.
A serif is a little tag that hangs off the ends of letters. Serif fonts are old fashioned and traditional and would suit a fantasy comic well. Serif fonts are also used in print - books and newspapers - a point picked up on by Polymer City Chronicles on it's newspaper-like website.
Sans-serif fonts are simply fonts without the little tag things.
This is a sans-serif font.
Arial is the main one for the PC. Sans-serif fonts look cleaner, more modern and more business-like. Science fiction comics would work well with a san-serif font, as would any computer related ones and anything modern.
Sorry, I have to add this. Most people know it but for those who don't, getting it wrong has the potential to turn readers away in their droves.
On the web size equals time. The larger a file is, the longer it will take to download. There are a lot of dial-up users still around - around 50% of all internet users as I write this - and for their 56K MODEMs, 5KB roughly equates to one second. For a comic website, most of the size and time will be taken up by the comics themselves and it's important to get them as small as possible. I've seen comics in up to around 250KB in size, which is 50 seconds waiting time or more on a 56K MODEM. On broadband, it's far quicker but remember the archives! People reading the archives will be loading all your comics and if each one takes ten seconds, even users of broadband will give up. I know I do.
There are three major graphics formats on the web: JPEGs, PNGs and GIFs. All are designed to make the picture as small as possible but in different ways and each works on different kinds of pictures. You can also use bitmaps (BMPs) but they're not officially supported, not compatible on all browsers and machines, and are an inefficient image type to use on the web. So, basically, no, you can't use bitmaps.
JPEG encoding is designed for photographs and pictures with lots of graded colour. JPEG is a lossy format, which means that in order to make the picture small, the quality of the picture is lowered. Low quality JPEGs look terrible and appear to be covered in blurry squares.
GIF images are made for pictures with large blocks of colour - such as cartoons and diagrams - and also for pictures with a small number of colours. In order to make the picture small GIF compression removes colours from the image and replacing them with another similar shade used elsewhere.
GIFs are used for most webpage graphics, rollover buttons and backgrounds but are good for black and white or cel-shaded comics. GIFs can have a maximum of 256 colours.
In practical terms, PNG images are almost identical to GIFs and are used on the same sorts of pictures. Usually a PNG will be slightly larger than an equivalent GIF but sometimes not. Usually if the picture involves a gradient - a fade from one colour to another - PNG will make for a smaller image.
However, PNG will allow for more colours than a GIF, using a maximum of 65,536 colours, any of which can be translucent. This will make for very large files sizes and the translucency is not well supported by Internet Explorer. Since IE accounts for around 90% of the web, it's a feature of PNGs that you can't really use.
And if you didn't understand any of that, don't worry. The best thing to do is to simply experiment and see what image type shrinks your comic to the smallest possible size whilst still leaving it looking good. Most comics should be between 20 and 100 KB in size but there are always exceptions. A4 sized comics in full colour will be far bigger than newspaper-style strips in black and white.
"(When I changed the navigation buttons) some readers complained. They felt the old site had "character" and the new site was too much like everybody else's."
- Howard Taylor, Schlock Mercenary
I mentioned at the beginning that sacrifices can be made to the purpose in service of the design. Legend of Ronin is a good example of this. The comic and site navigation - the big ring under the comic - is definitly not standard or familiar but a little experimentation from someone who's used to the web quickly shows how it works. It's a small delay rather than a huge impediment and shouldn't be a problem for most visitors.
Is the trade off worth it? I think so, yes. The website is absolutely gorgeous and catches attention right from the word go. It oozes professionalism and quality and the navigation interface comes off as innovative and original rather than a hassle.
And readers will be more patient downloading comics if they feel it's worth the wait somehow - if the quality of the art and colouring is high, or if the comic is side-splittingly funny. You can abandon readers who use 800x600 resolution if you think the extra space and bigger comic will bring in more people than it will turn away. A diagonal infinite canvass can be used if it happens to be particularly appropriate - for a long, sloping tunnel, perhaps.
Such trade-offs are for the indivdual to balance - as long as they're mindfull of the pros and cons. However, seeking outside opinions is always a good precaution.
Got any comments?
Feel free to buzz me. This document will be added to as new things occur to me but I'm always open to suggestions and criticism.