Starting a blog? Mind your layout.

Chatty DM has concluded his series on starting your own RPG blog with Part 5: Then What?, in which he discusses what might happen after you’ve set up and begun writing.  As with the rest of the series, it’s good advice.

Since he’s soliciting further input, I thought I’d throw in my two cents’ worth on the topic of blog layout.  Since my recent move to self-hosting, I’ve been working on defining my own layout.  While my theme still needs a bit of work, I figure the information might prove useful to others — and naturally I have opinions on what makes a good layout.

I’ll assume that you’ve already decided upon a host, whether it’s the free but limited service through Blogger, Wordpress.com, or similar sites or paid web hosting through a provider.  (I wrote an earlier advice post that might help if you’re still looking for web hosting.)

The first thing you should do is choose a theme.  This is a set of files that determines the layout of your blog.  Free hosts will typically offer a number of themes to choose between.  If you’re on a paid host, you’ll have to look for one yourself, but there will be a lot more options to choose from.  Google is a good place to start.  (The link will search for Wordpress themes.  If you’ve chosen other software, alter the search as necessary.)

I would avoid paid or “premium” themes.  You can get free ones with almost any functionality you’d want.  Also avoid “sponsored” themes; many of these include links you might not want, often in the page footers.  These are sometimes encoded to make them more difficult to simply edit out.

When looking for a theme, the most important choice you make may be the number of columns.

A one-column theme is essentially one long webpage; these are relatively rare, but they exist.  The one-column theme focuses attention on the content very well, but it lacks a sidebar for any additional functionality you might want to throw in.  You can still have a header and footer if you want them, though, and you can place that functionality there (particularly in the footer).

Two-column themes have either two evenly-split columns of content, which lends itself to a magazine-style layout, or one content column and one sidebar.  The sidebar might be on the left or on the right, and it contains things like links to recent posts, a summary of recent comments, RSS feeds, archives, and so forth.  The default Wordpress theme, Kubrick, is a two-column theme with a right sidebar.

Three-column themes have either two content columns and a sidebar, or one content column and two sidebars.  The two-sidebar themes often contain both a left and a right sidebar, but some have both sidebars on one side.  The theme I’m using is a three-column theme with two right sidebars.  Three-column themes have been gaining popularity recently.

Four-column themes are also fairly rare.  They tend to feature two sidebars on one side, one sidebar on the other, and one content column, but some feature two content columns with two sidebars.  Four columns allows for the display of a lot of information, but you’ll have to be careful to ensure that your theme isn’t too crowded.  Some themes pull it off well.

It’s pretty easy to change themes, so don’t be afraid to experiment until you find something you like.

The other thing you’ll need to decide as you search for themes is whether you want to customize yours.  A free host might not allow you to do so to the fullest extent, but if you don’t want to edit your theme at all, then you’ll need to consider factors such as the colors, the fonts, and the font sizes the theme uses — things that are easy to adjust with minimal knowledge of CSS.

Okay, so you’ve got a theme in mind… what do you do with it?  Do you want your sidebar on the left, or on the right?  Does the choice of font or color really matter?

Well, yes.

When you’re working on your design, keep in mind this fact:  Your readers want your content.  That means that your content should be easy to find and easy to follow.

Google's Heat Map

Take a look at Google’s “heat map” of a page, to the left. The darker areas represent places the reader tends to look first. Google offers this as an answer to the question “Where should I place ads on my page?”

I would instead use it as an answer to the question “Where should I place my content on my page?” — readers tend to look first to the top center and left areas.  Therefore, put your content column(s) in the center or left of your page.  If you use a left sidebar, make sure that sidebar has the most important navigational plugins — things like a “Recent Comments” tracker and archives.  Place things like your links to other blogs or ads toward the right — you don’t want the first thing your readers see to be links to other sites.

It seems to be fairly standard to put the content column on the left, though themes using a left sidebar aren’t that uncommon.  Double left sidebars should probably be avoided, judging by the heat map.  If you use right sidebars, put your more important navigational links toward the top, and the links to outside sites toward the bottom.

Colors and fonts?  You want your main content to be very easily readable.  I would choose either black text on white or white text on black — I prefer the former, personally.  It’s possible to get by with a variant such as black on pale yellow or pale blue, but I still favor stark contrast.  (I changed my own theme, which defaulted to charcoal grey on pale blue — but I left the pale blue background for the areas outside the main content.)  For areas other than your main content, make sure your colors are complementary.  A bold color can be useful for drawing the eye, but if you choose one, make sure you use it sparingly; otherwise, you could wind up with a distractingly “loud” page.

Choose fonts that are easy to read; Lucida, Arial, Helvetica, Times New Roman, and Courier are all good options.  Generally, prefer sans-serif fonts to serif fonts; they’re easier to read.

How else do you make your content easily accessible?  I suggest a sidebar.  Near the top of your sidebar, place your RSS feed, your recent posts and recent comments.  (The latter is very important for letting people get a sense of discussions.)  Make sure you include some form of archival to allow people to hunt down posts that aren’t on the front page.  You can use a date-list archive, a category listing, a tag cloud, a calendar, or some other method, but make sure it’s there.  It wouldn’t hurt to have multiple archive methods.  (I use both date-list and category.)

Try to stay away from putting too much in.  There’s a temptation to add a lot of widgets to play with.  Try to add only those that will direct readers to your posts, or those that are useful to you personally (such as a blogroll).  Clean and simple should be your goal.  You don’t want to be too flashy — you don’t want your site design to leech attention away from your content.

Avoid landing pages unless you have a compelling reason.  If you’re displaying adult content, for instance, then you have a compelling reason for adding one of those “I agree” landing pages.  Displaying a flash animation is not a compelling reason.

Keep images, especially animated images, to a minimum.  Obviously this doesn’t apply to portfolio-style or photo blogs, but for a traditional text-oriented blog, a little decoration goes a long way.

Finally, keep in mind that sometimes it’s okay to break rules.  If you’ve got a great idea for a four-column theme with three left sidebars and animated images scattered all around the borders of the page, there’s no need to dismiss it out of hand.  Try it and see whether it works.  By the same token, though, be honest with yourself:  if something doesn’t work, change it.  Getting a friend or three to look over your new site might help a lot with identifying these problem areas.

Related posts:

1. Moving, minus the boxes.
2. Humor and Gaming Blog Carnival Roundup
3. Pardon the Stray Electrons…
4. RPG Blog Carnival, April 2009: Humor and Gaming