Blog Theme Design

**Note: this tutorial assumes you have knowledge of CSS or HTML. If you don’t then you can either learn it or just use a pre-made template for your blog software (Google is your friend).

**Another Note: I am not a professional web designer. I am a coder. Most of the stuff in this post is what I have found to be the most efficient way of doing things, but may not be the “correct” way. This tutorial does not cover how to make themes for a specific blog software package, this is just a general guideline.

Blog themes have some interesting traits: most blogs have sidebars, pretty much every blog is centered on the screen, the designs generally won’t rely on flash or many images, and tables are a big no-no (believe it or not, many regular websites still use tables instead of DIVs and CSS for the layout).

The General Rule

The general rule for blog theme design is simple:

Blogs always have the content be the main area of interest, not fancy graphics, flash effects, or annoying banner ads.

The Main Layout

What do pretty much all blogs have in common? The content area is of a fixed size, and it is centered on the screen. This is easily achievable by creating a DIV of a fixed size, then setting it’s left/right margin to auto. Setting the margin to auto will tell the browser to place it right in the center:

.content_wrap {
width: 900px;
margin: 0 auto;
}

Another common trait is they have sidebars, which are usually on the right side of the screen. Simply float the sidebar to the right or left with CSS and you may have to do the opposite for the content (sometimes there is no need to float the content). Then after the sidebar and content make a div and make it “clear: both” with CSS. This will cause the page to display correctly, otherwise your blog’s footer may overlap the content because it is floated. That can all be done with code similar to this:

<div class="content">Content</div>
<div class="Sidebar">Sidebar</div>
<div class="clearall"></div>

.content {
width: 400px;
float: left;
}

.sidebar {
width:200px;
float: right;
}

.clearall {
clear: both;
}

As far as how the header and footer goes, there’s really no rules at all. Be creative.

Colors

Color schemes are important - but having a unique color scheme is even more important. The colors, not the actual layout, are what make a blog design unique. If you compare blog A to blog B, chances are the layouts will be pretty similar, but the colors will be completely different.

There’s no real trick to picking colors. As far as I can tell it is more of a pick calm colors that go good together type of thing. I am sure professional web designers have some system worked out to make it easier to pick them, but I’m a coder - not a web designer.

The one thing I do know for an absolute fact is A) make sure your links contrast the main text fairly well, and B) don’t underestimate the power of gradients - they can make a theme look really professional.

Font Families

Try different font families and find what you like. On this blog I use Arial Narrow for the logo and the subsystem. Trebuchet MS for the menu. Arial for the main content. And Lucida Grande for the headers (post title, subsections in posts, etc).

Always use “web safe fonts” to fall back on in case a font you like isn’t available on your user’s system.

Font Sizes

Usually when I’m designing a page I use a guideline like this for picking font sizes:

• The logo is the biggest text on the page. This should always be wrapped in an H1 or H2 tag. It can also be an image logo.
• The subtitle/slogan (if you have one) should be smaller than the title - but not too small.
• The post titles should be the second biggest thing on the page, and should also be wrapped in an H1 or H2.
• If you use them, post subsections (like “Font Sizes” above) should be a bit smaller than the post titles, but not too small. You want them to stand out in the text. Bolding it is also helpful.
• Make the comments area stand out with big text for the section title. Nothing is worse than scrolling through a blog looking for the “leave a reply” box only to realize the text for it is tiny and blends in too much.
• For the sidebar do whatever, I make each section have nice big title text, the same size as post titles in fact. However, there are no rules here. Just make it stand out so it is easier to find a specific section of the sidebar.
• The main text should be at least 11px in size. Any smaller is a pain to read on large screens.

You may have noticed I didn’t say anything about the navigation menu (like the one on the top of this page). There’s really no guideline or anything for it. I’ve seen some blogs make the text the same size as the main text on the page, and I’ve seen other blogs use slightly different font size.

The key with all of this is to use your own judgement. Depending on your color scheme, general layout, and font families you use you may have to use completely different sizes.

As far as px vs pt vs em, etc for the font sizes goes, they say using em for the sizes is technically better, but I don’t know. I tried that a while back and it’s just a pain. Use what you like.

Graphics

A layout that uses lots of graphics may look alright for a non-blog website, but most blogs rely more on CSS than they do graphics. Images tend to be more useful for blog posts than anything else.

Most Of It Is Experimentation

From the few years I’ve been doing it I’ve learned web design is all about experimentation. Try different things, find what you like, show it to other people and see if they like it, then maybe change some more things, etc. One thing I’ve found very helpful is to go on free template sites, find some that you like, download them, and look at the CSS files for them. It’s a great way of getting a desired effect.

The one thing I cannot stress enough is use CSS files (and a print CSS, I’ve been meaning to make one…). The whole reason CSS was invented was to separate the design from the page structure.

Don’t Forget About Photoshop/GIMP!

Before CSS it was nearly impossible to make a layout look like it did in Photoshop. But nowadays you can design it right in your favorite graphics app and then design it in CSS/HTML with ease.

Well, that’s it. The next tutorial in the Back To The Basics series will cover WordPress theme design.

Please subscribe, or else I will cry. Do you really want to make a programmer cry?