Blood Bars are for Nightclubs, not Websites

or
Avoiding the Blood Craze
written by Incanto

A very important part of making your website is deciding on a concept and/or theme and then gathering/making layout items that fit your theme. Unfortunately, you might be working on, say, a Vampire Diaries website and automatically think... hey! Vampires... blood! Yes! You then immediately run out to find bloody site stuff to decorate with.

The problem with just running out to get the things you think look neato-keen and piling them all on one page is that your website ends up looking disjointed and mismatched. What's more, if you're stamping divider bars (called 'rules') dripping with animated blood everywhere, the site begins to look pretty juvenile. I've yet to see someone sophisticatedly fit an animated-blood rule into a layout... so until someone can show me that, trust me when I say that things like it are *not* a good idea.

Instead of picking individual items that you think look cool - and facing the risk of them looking cool on their own but horrible together on one site - plan your layout as a whole first. Where is everything going to go? What size is every graphic (including the rules) going to have to be? Does every part look like it belongs there?

Rules are a really tricky thing to select, because really... they almost always have to be very subtle or they just take over too much space and attention. Remember, they're just there to divide your text into sections, and there are *many* other ways to do it. While I'm focusing on steering you *away* from the cheesy Halloween store dripping-blood bars specifically, since they're vampire-related and thus a mistake you're more liable to make in vampiric fandoms, you have to think about this with every type of rule; even if it fits the theme, is it too big or too flashy?

Let's take a look at what some people have done with rules that make them work -

I blurred the text out in case the webmistress of that site didn't want the free publicity, but you can still see how she uses subtlety and *relevance* to divide sections of her website. Firstly, they fit there because they look like part of the layout. They follow the same color scheme and even fade out to blend into the background. Secondly, they're very simple and unobtrusive - you're basically looking at a long, thin line of color, not a flamboyant five-hundred-pixies-dancing-on-a-bridge picture. And thirdly, they're *practical*... not only do they divide the text, they also provide titles for it.

This is a snippet from an entire set of layout graphics showing just the title and the rule. Once again, pay attention to what we're looking for in a rule - simple, unobtrusive, practical, and relevant. Obviously it's simple - again, it's essentially a long, thin line - but it's also very unobtrusive. The color fits with the rest of the layout, and the decoration is subtle enough (a simple gradiation) that it doesn't take your attention away from other things.

Not sure you can pick out the difference? There's always an alternative! You can use the "HR" tag in HTML coding; it'll create a simple line across the page for you. But if you wanna get more creative, there are properties you can mess with on it: the basic HR tag, all you need to write to make a line...

<hr>
the full HR tag with all possible properties tweaked looks like this...
<hr width="number" align="left/right/center/justify" size="number" color="red" noshade="noshade">

Width decides how far the line goes across the page; alignment lets you select how your bar aligns on the page (i.e. centers, starts from right, or starts from left); size decides how thick the bar is; color, of course, turns the bar a certain color; and noshade makes it a solid line instead of a shaded bar (which is the default).

If you're feelin' iffy on using a graphic, stick with the HR tag until you're more comfortable. Also remember that you don't even *need* dividers... you can separate content by putting it on separate pages or by simply putting enough space between bundles of text and/or images. Remember, when you're just starting out in web design, there's absolutely no shame in starting out simple. Your website will look way more sophisticated with a simple but excellently put-together layout than it will with a bunch of mismatched, disjointed, and cheesy pictures crammed together.