Web Design & Online Comics Pt. 1

Recently, I’ve been getting back into the swing of things with my new comic, which means I’ve been spending a lot of time on various Internet forums, reading up on various processes on how to better create comics, and, as always, I’ve been designing and developing websites for other people (my “real” job). In my various postings, I’ve noticed that many comickers don’t have the slightest idea how to begin designing, maintaining, or making a profit from a website. Given the fact that I’ve been a designer for almost 15 years, a web designer/developer for ten of those years, own and operate several sites of my own (one of which earns a fair amount of money), and also have quite a bit of experience with printing, I realized that I have a lot of experience in areas where comic artists find themselves deficient. After helping people on the InkOutbreak forums sort out a few website problems, the idea popped into my head that I could write about various aspects of website development and help people avoid a few of the easier-to-circumvent pitfalls of site creation.

I’ll preface this article by stating that not every concept works for every site every time and I am far from being *the authority* on all things design-related but once you read through this article, chances are you’ll agree with much of what I have to say… At the very least, you’ll better understand my thinking.

My Site: How Wide?

One of the first things I notice about many comics is that they’re painfully behind the times when it comes to website design. In today’s Internet world, we’re looking at more devices, more options, and more varying monitor resolutions and orientation. About five years ago, a “web standard” emerged in site width: 960 pixels. It came in under the (at the time) standard 1024 monitor width, allowing the vast majority of users to see the content without side-scrolling. The industry held on to this width for years (longer than it should have, in many cases) until we saw the emergence of two things that changed computing forever: the widescreen monitor and phone/tablet computing. Over the past couple of years, 1024 monitors have been almost completely phased out of existence in favor of the 1280×800 monitor, the most common monitor used on the best-selling sizes of laptops (13″-14″). That means designers now had 250 more pixels of width to play with but the vertical height of the monitor remained virtually unchanged.

Graphically, you can see how useable space changes for different monitor resolutions

You’ll notice that newer monitors tend to offer more horizontal real estate but virtually no additional vertical real estate to go with it. Oddly enough, this didn’t change much in site design for quite some time. Despite “above the fold” being such an important aspect of good design (Above The Fold area is “the area of the site seen by most users without scrolling”), many designers stuck with larger headers, horizontal navigation, and other hold stand-bys of mid-2000s web design. Meanwhile, sites such as Amazon.com (1050 pixels wide before moving to responsive), Gizmodo.com (980 pixels wide), Apple.com (980 pixels wide), Facebook.com (980 pixels wide +200 pixel sidebar), have been expanding their site design beyond the typical 960 pixel “rule”. You may look at those sites and say “20 pixels isn’t much”. You’re right, it’s not. On the other hand, those sites host enormous traffic and have to cater to not only you (a user probably rocking a relatively modern computer with a high resolution display), but they also have to cater to your 80 year old grandmother on her 2002 PC with the resolution cranked down because of her eye problems. The first person (you and people like you) are probably the demographic that most reads your comic. The second demo? Probably not so much. I’ll speak more on Analytics and how to read up on “your” demographic in another article but by and large, webcomic readers tend to be young, modern, and aren’t operating on outdated hardware and software. That means you can push technology a bit and skew your site toward the bleeding edge of things (ie. make your site wider!). As a general rule, I start out at a 1050 pixel width with most of my sites and adjust up or down from there based on the user base for that specific site. There is also something called “responsive design” that changes *everything* but we’ll talk about that later in the series as well (it’s a bit much to digest in one sitting).

To explain “Above The Fold” a little more in-depth, earlier I mentioned that the most common monitor found now is the 1280×800 monitor. Not all 800 of those pixels are available for viewing. In a Windows environment, you have 40 pixels at the bottom of the screen reserved for the taskbar. At the top of the screen, you have about 80 pixels reserved for your browser menus, URL window, bookmarks, tabs, etc. Suddenly, you’re looking at just 680 pixels of vertical real estate on that 800 pixel monitor (and Mac OS X consumes even more vertical space on its default settings).

My Site: Well, How Wide?

Well, that’s up to you and your users, isn’t it? But one thing to keep in mind is that wider monitors have given us more real estate left and right but they’ve remained (essentially) the same vertically. To combat this, a choice I’ve been making in several recent designs is to remove the conventional “header” we’ve seen in use for years on the internet and replace it with left-hand navigation. There are several different design options available, this just happens to be the one I’ve found easiest to implement while still keeping things in a place the typical user will expect and find convenient. Below, I have two examples: one using the “standard” comic site design, the other using my preferred style of design. These designs are approximated for how a user would see the site upon first load of the comic on a 1280×800 monitor. You’ll notice a few things right off the bat. First, the old design barely shows any of the actual comic. Is that what you want users to see when they first visit your site? A large header and/or advertisement and no real content? It doesn’t make sense from a usability perspective, as you’re showing the user no real content, just design fluff.

To “solve” that problem, I moved all the navigation and other junk to the left. It allowed me to keep the advertisement on top but by moving the navigation out of the way (and not having to cram the logo above the navigation, it’s now floating on the left). Suddenly, you’re looking at a site where a typical user can see at least 100 more vertical pixels of the comic. Don’t you think that’s important? Headers generally offer nothing of value. They’re filler. People visit your site to look at your comic first and foremost; everything falls in line after that. Therefore, doesn’t it make sense to give your comic the most real estate possible?

Old Design, Above The Fold

New Design, Above The Fold

To boot, moving the navigation to the left allows me to eliminate the right hand sidebar found on so many comics and make the comic wider. This is your comic. You want to display that art as loud and as proud as possible. Make it wide. Make it big.  Make it smother the page so that no user will ever miss your latest comic. It may seem like 60 pixels doesn’t mean much on a site… Well, it does. 60 pixels is nearly 10% of your Above The Fold screen space.

On devices such as a phone or tablet, the above the fold space is even more important. Many people browse on tablets horizontally, restricting vertical space even more. To boot, tablets and phones are “resolution independent”, meaning that they will automatically expand or shrink your site to fit the device’s screen size. If you’re adamant about having a large header, this is what your site will probably look like on a horizontally-oriented tablet device:

What exactly are you trying to tell users when they come to your page?

That’s no good. Given that tablets and phones are consuming nearly one-quarter of all Internet page views, do you really want one out of four people to see your site like this? More than ever, we need to be concerned about how people interact and see our site because users are browsing on more device shapes and sizes than ever before.

My Site: Prioritize It!

I have a general rule when I start designing any site. I take three or four sections of each page and prioritize them in order, one to three (or four). Then, I size each element based on its priority. In a comic site, that will probably end up looking something like this:

1. The Comic (duh!)
2. Site Navigation
3. Comic Navigation (you may even flip #2 & 3)
4. Advertising (if applicable)

An example:

Prioritize Your Site Elements To Maximize User Experience

The comic dominates the page. That’s what you want people to see the second they visit your site. No distractions, no (useless) junk shrinking the comic’s size, nothing. You decide how big to make the comic and then fit everything around that, not the other way around. Far too often in site design, I see people add a widget here, a sidebar there, which cramps the content window (in this case, the comic). This is wrong. Do not do this. You should make everything fit around the comic, not make the comic fit around everything else. That’s your bread and butter, it gets the top of the marquee every time. The comic is top priority so it gets the most space. Site navigation (where you might have links so people actually buy things from you) is #2 and therefore, it gets the second most space. The comic navigation/advertisement ranks third and gets the appropriate amount of space for its ranking. In design, things on the left tend to be prioritized over things on the right, as that is where English-speaking people begin reading. Therefore, if you have two identically-sized elements, the left object will be of “higher priority” than the right.

You’ll notice that I didn’t even leave much space for the site/comic logo. This is perfectly acceptable in today’s world. On every brower, there is a URL bar at the top of the screen. Users found your comic and often identify with the look of the site, not the logo (and many people automatically look right past a header, even if it’s huge). Conserve that space, re-prioritize your layout, and put a nice, clearly written and identifiable, logo somewhere near the top of the page. But don’t believe that logo needs to be 400 pixels high. Your branding should not take precedence over your actual content.

For you strip-style comickers, I will take an aside to mention one very important thing: your users should never have to scroll to read your comic if it’s done in a horiztonal, four panel arrangement. Your header, navigation, and comic should all fit into the top 680 pixels of the web page. Nothing is more frustrating than having to scroll half an inch to read the next comic. And user frustration usually precedes “I’m closing this window” by one or two seconds.

My Site: Why So Cluttered?

Every time I see a site with ten widgets, three comic voting incentives, a 300 pixel header, four Project Wonderful ads, and 15 items in the navigation bar, a little part of me dies. Remember that your comic is not only competing with other comics, your own site is competing with itself. Every single thing you add to your site increases the likelihood that a user will stop paying attention to your comic. I often equate the average internet user to a squirrel hopped up on meth. Don’t give them a reason to leave your site because they’ll take it nearly every time. Don’t encourage them to become distracted. Keep them focused on your comic because that’s what drives clicks (and therefore, user interest).

If you absolutely must have your comic collectives, banners, shares, ads, etc. on your page, keep it to a minimum above the fold (again, prioritization). Add all that junk below the fold where a user has to actively participate in the page to even see it. If you’ve convinced a user to scroll, you’ve probably hooked them enough where they will make a small attempt to see what’s on the rest of the site. An even better alternative is to put most of that stuff on the chopping block. Simplify things and keep what matters. Do you really need links to four voting incentives? Take some time to find out which voting incentive works best and keep that. Lose the rest. Do you really need Scribol, InkOutBreak, and three Project Wonderful ads? Pick two, more prominently display those to drive user interest, and lose the rest. Hard design choices must be made in every good website design and in my ten years of experience, the best answer has never been “leave it all there”.

Another simple way to avoid clutter is the use of textures, gradients, and other CSS bells and whistles. If you use textures or gradients on the background and in widget backgrounds, it’s probably not a good idea to also use them on buttons and navigation. You have to give your readers’ eyes a break and in design, less is often more.

I know a lot of this seems like pretty basic stuff but we have to start somewhere, right? In future articles, I will dig into the nitty-gritty of site analytics (an absolute must for every site owner), basic HTML/CSS coding, and how to actually profit from your website using advertising. Thanks for reading part one of this series. I’ll be back soon with part two, which will deal with responsive design and where we’re heading with HTML5 and CSS3.

Share this page: