**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.

Well, I’ve tweaked up the theme and added a test page for it over here.

I also made another slightly changed theme that uses a fixed-size header instead of the stretchy one, you can view it here.

So, please let me know which one you like better. I’m leaning toward the second one.

I launched the current Nusuni.com theme in July. Well, as soon as I launched it I realized I left out the search box, so I tossed it on top of the sidebar (I wanted to originally put it where the subscription info is).

Today I finally went to move the search box to the top and I’ve have come to the conclusion this whole thing is just completely unoptimized (files loading files loading messed up CSS files, yuck).

So, sticking with the tradition around here of tweaking the theme every month or so, I’m doing it once more. Sometime later today or tomorrow I will post a screenshot of what the new slightly modified theme will look like to see if you guys like it (if you don’t I’ll leave it as is and just clean up the existing PHP files).

I’m trying to make it much less boring (more images in posts, I promise!), and a bit more optimized (eg: cleaning useless code out of the PHP files).

I am still not sure what I’m going to do with the header/menu area, so please chime in with any ideas. I’m leaning toward changing the menu text and making the whole header area fixed size instead of having it stretchy. What do you think?

The sidebar will also be condensed a bit more and some bugs with it will be fixed for IE 6 users (believe it or not some people still use that)

So since I’ll have Photoshop and TextWrangler opened up with the theme stuff I figure, heck, let’s see if you guys have any ideas. Feel free to chime in, you’re thoughts really do help a lot.

Have you ever wanted to make a static page use the same theme and features that your WordPress blog enjoys? It isn’t too difficult, and I recently did it for my Uptime/Downtime Calculator with just a few lines of code.

The calculator is actually a static page, but it has the same exact layout as my blog. I did this by loading in the WordPress header file, manually calling the template functions, and doing some quick hacks to my theme to make things easier.

Most of the work is done with these few lines of PHP code:

define('WP_USE_THEMES', false);
require(dirname(__FILE__) . '/../../../blog/wp-blog-header.php'); 
get_header();

The first one sets the USE_THEMES variable to false, so Wordpress doesn’t auto load the theme (which would make the 404 page appear, since WP is oblivious to the fact a static page was requested) and the second line loads in WordPress.

The next line is “get_header();”. Which, obviously, tells WordPress “hey, load in the header.php file for my theme!”

After that I manually create content for the page in a way that makes it looks like a regular post. This includes the H1 tag, meta data (written by… on… ) and the entry DIV. For my theme it looks a bit like this:

<h1>Title</h1>
By: Jeremy Steele

<div class="entry">Page content</div>

That isn’t too hard.

And finally I finish off the page by loading in the sidebar and footer by calling get_sidebar() and get_footer() respectively. Depending on your theme you may have to do get_sidebar immediately after the get_header function is called at the top of the page.

And that’s it. Well… actually… not really. Remember those theme hacks I mentioned before? This is where those come in. At the top of the page, before the header.php file is loaded via get_header(), I create two vars called $nusuni_special_title and $nusuni_special_stylesheet. The first one is the title for the page (it’ll end up blank otherwise, remember WordPress has no clue a static page was requested, it things it is just a nonexistent permalink), and the second is an extra stylesheet (if I need one).

For the uptime/downtime calculator I used this code:

$nusuni_special_title = "Uptime/Downtime Calculator";
$nusuni_special_stylesheet = "style.css";

In my header.php file for my theme I simply added some if statements to check if the vars existed. If they did exist the data was inserted.

To load in the extra stylesheet I used this code:

<?php if(isset($GLOBALS['nusuni_special_stylesheet'])) {
	?><link rel="stylesheet" href="<?php echo $GLOBALS['nusuni_special_stylesheet']; ?>" type="text/css" /><?php
} ?>

It isn’t pretty, but it gets the job done. Basically it checks to see if I am using an extra stylesheet, then it loads it in if I am.

Then, for the Title I did this:

<?php if(isset($GLOBALS['nusuni_special_title'])) {
	print("<title>" . $GLOBALS['nusuni_special_title'] ."</title>\n");
}
else {
	?>
		Print title tag info for normal blog
	<?php
}

That checks to see if I am using a special title, and if I am it loads that instead of the titles I use for the blog.

While none of this is too difficult, it can be a pain to do if you haven’t any clue how WordPress works. If you need any help setting up a static PHP file to do this same thing, feel free to contact me (I won’t ask for anything in return, but a link would be nice ).

Microsoft’s new HD photo format has taken its first step toward becoming the new JPEG standard. The JPEG Standards Group has agreed to consider it as a standard.

As I said on a previous post about a Microsoft product earlier today, love ‘em or hate ‘em, they’ve sure had a couple of neat things coming out lately.

The HD photo format has lossless compression (doesn’t lose data, unlike other formats), supports CMYK, RGP, monochrome, and embedded ICC profiles, and it is designed so specific parts of the compressed data can be modified (only certain parts need to be decoded). It requires much less CPU power to decode than other formats likes JPEG2000 (which, if you remember, was supposed to be the holy grail of formats).