Current music:

Siouxsie & The Banshees - Silly Thing

Maximize Your Fanfiction web design: Part 1

Maximize Web Design with Fan-fiction in Mind
by Mike Rasbury

4.27.2005

Overview

It became quite obvious to me that more often than not, fan-fiction web design is terrible. There's several reasons for this; an Editor-in-Chief may know nothing about web design, there may be a speed and efficiency issue and things simply need to go up and quickly; or whoever is in charge of the design may just do what he/she thinks looks cool or 'artsy'. These are valid reasons, of course (I could make a very strong argument against the last one), however, even if the reason is valid, you can still do a disservice to your writers, your staff and more importantly your readers in doing so. This will act as a little 'how-to' guide or companion if you will, to use when you evaluate your site design, build a new design or start a new site.

In no way do I assume that I am the perfect web designer, or that this guide will always be comfortable to an individual, but they are tried and true formulas that help maximize the effectiveness of your site to a wide and varied audience. However, I do have five years design experience, extensive schooling and hundreds of books sprawled across my bedroom that will back me up on these principles.

Which, brings me to my last point before we actually get somewhere. Design, no matter what it is; web, collateral, architectural, any design is NOT art. Design is summarized as being a set of rules, principles, formulas and 'trends' (not fads) that continually succeed and appeal to a user, reader, consumer, what have you. Now, I've gotten into a debate about this with many people (including some well known Editors-in-Chiefs) that they have reason to believe that design is art. It was cited to me that an architectural designer perceives his craft to be art. Design is only art when it is produced for an individual, like a single house built for one client with specific tastes, or a website that is designed with the intent for only one person to ever view it. That would allow the eccentricity of art. However, if you want to build several homes that would interest the most broad cross-section of home buyers, there are guidelines to adhere to. The same goes for the web.

This is important to realize because users and readers over time develop what we refer to as a 'mental map.' This mental map is a precise way of thinking and operating when you drive a car, go shopping, and use a website. There is a specific reason why most soda comes in round, aluminum cans, or why most houses have roofs, or why every stop sign in the United States looks the same. I know those examples are rather obtuse, but they illustrate a point. Those principles are used because that is what people expect. Adhering to the principles of the web will keep fan-fiction readers happy, not confused and at your site. Which is all we really want, right?

The last thing (I swear) before we break it down, is a little bit about how I will present this guide. Each section will be broken up into pieces relating to the fundamental portions of web design. With each, I will provide the general rules, practical application of each, and then a list of sites that both do this well, and do this poorly. It is paramount to see these executed in a functioning website. The example sites listed aren't all the cases of good and bad, but should properly illustrate the point. Now, I've already gone over some of the sites I will be referencing in my planning of this guide, and I can hear the detractors already. "He only used sites that he writes for!" While more often than not this will be the case, it is not favoritism. Anyone who's sat with me and talked about web design knows that I gravitate towards the sites with better web design. That is a major factor for where I decide to write. Oh, this guide will also include HEROES' bastard love-children (Artifice Comics and Frontier Publishing).

Anyway, on we go...

Typography

It is important to start with the most basic of pieces in web design before you move on to things like layout and navigation because with out having succeeded in your basics, nothing else will matter. In the fan-fiction world (or any writing world), the basic with the utmost importance is the words you're reading. Without those, a fiction site doesn't offer much.

For those who don't know, a lazy way to describe typography is the study of type. More often than not, this study applies to the print world (newspapers and magazines etc.), but It also applies to the web. Also, don't assume that because you have a background in print typography, you are set for the web. Web and Print typography are almost contradictory.

Fonts

In the print world, serif fonts (like Times New Roman, Courier and Copperplate) are most commonly used because with an overhead light source, those little hash-marks help the human eye to focus. The exact opposite is true for the web, because a monitor renders in pixels (which are squares) the monitor cannot properly render a serif which has often got some curvature. Also, because a standard monitor is set to 72dpi (dots-per-inch) the serif fonts display much more constricted and muddled, thus harder to read.

Serif fonts are best used for logos saved as images, and pretty much nothing more. Some will argue they work as headings too, but they don't.

For your body text, you should always, always, always use sans-serif fonts (Arial, Verdana, Trebuchet MS), because this text is required to be read, and often in large quantities, we can protect the eye from strain (and the reader from discomfort and irritation) by using sans-serif fonts.

The most commonly used sans-serif font-family is:

• Arial


• Helvetica


• sans-serif (acts as a default for your machine)

Others sans-serif fonts are acceptable of course, but those are the industry norms.

When declaring a heading, the standard to use is Verdana. Do not simply bold Arial. Verdana's sole purpose in life is to be a slightly heavier Arial (but not quite Arial Black). This means is should be used as the alternative to Arial for headings and things that need to stand out. Inversely, Verdana shouldn't be used for body text. Tahoma should ALWAY be avoided; it is the hunchback of sans-serif fonts. It's big, ugly and awkward.

An interesting 'exception' to this can be found at Artifice Comics. They use a font called Georgia. Georgia is a serif font that was designed solely to be used for the web. While I don't think it's practical in a readability sense (the anti-aliasing creates a blurry and unfocused text) it certainly helps to drive home the 'pulp' feel the site has repeated throughout the page. Not to say that makes it without it's problems. Georgia is not a font that should be used in overkill (because it still does get muddled) and Artifice Certainly does that. Instead, they should invest in more white space for the body text and use a sans-serif font for the titles/headings.

A site should also never contain more than two to three fonts in the entire site not page. This includes headings, body text and links. Logo is not included. JLU2001 is a prime example of how too many fonts can be both distracting and confusing.

Overwhelming use of italics and bolds MUST be avoided. M2K's latest layout has a major problem with this. On the main page, everything is in bold or italic. The problem with that? As opposed to drawing attention to one or two things, it manages to distract attention because everything is screaming for it.

Sites with good font selection: Marvel Omega, Altered Visions, Avengers2000
Sites with poor font selection: Revolution X, Frontier Publishing, JLU2001

Font Size

Font size is also an important contributor to eye focus. When a font size is too large for body text (1em, 11pt, 11px, etc.) it is extremely hard to get the eye to focus on the word, due to the sheer size of each letter. This is especially true with sans-serif fonts which we've established work best for the web. Too small a font (.7em, 8pt, 8px) is often just too hard to read. The key is to use something in the range of .75em to .9em or 9px to 10px.

Sites with good font size: Artifice Comics, Marvel Omega
Sites with poor font size: Altered Visions (too small), Avengers2000 (perhaps isn't to big, but feels like it)

Also, those of you who still use the deprecated < font > tags need to stop. Mostly used in conjunction with that tag are font sizes measured in points (pt). Viewed across different resolutions, the font does not adapt to the change and can become too small or too large. You will want to get into the habit of using Cascading Style Sheets (CSS) and switch to em. This will translate the font to how it should be seen in different resolutions.

Font Color

Since I plan on doing a color section, there will be a bit of overlap here. Since I've focused mostly on body text though, I should cover font color now. Black backgrounds/white text is the hardest color combination on the web for the eyes. It also causes the most strain on an eye and is less conducive (more in-depth with the color section). White backgrounds are the most soothing. However, black text (while not bad) is not best for the eye. A dark brown or navy over white works best.

The key is to want contrast. However, this contrast should still be achieved with softer (and more soothing) colors like pastels. Also, you always want the color that carries the most weight on the page to be the text.

Like with too many fonts, too many colors can be confusing to someone navigating the site. When too many fonts or colors are used, a page loses all order and can break that mental map we talked about. A user (reader) who's mental map is constantly being toyed with will get annoyed and will read. We must remember that it take patience to read and when we constantly combat that with text alone, only the hearty will stick around.

Sites with good (text) color selection: Avengers2000, Artifice Comics, Altered Visions
Sites with poor (text) color selection: Marvel2000, Marvel: Dark Design, Alternate Marvel, Marvel Omega.

Justification

Last little typography note to nibble on; justified text. Justified text is a great tool design-wise. It gives it a nice boxy feel with can fit into more alluring design patterns. However, studies have shown that when large blocks of next that need to be sat and read, it is harder for a human eye to follow along with out the nice 'ragged' breaks at the end of a sentence. That said, justified text should be left to blurbs.

next section: Color Theory