When I refer to blog design on this page, I’m specifically talking about the part of the process that happens in a graphics program like Photoshop or Fireworks. The part that happens after that (where I take the design file and turn it into a working design) is what I refer to as coding—and a lot of designers aren’t interested in that at all (which is fine by me!).

Elements of a blog design

I’m going to start by defining some terms that I use when talking about blog elements.

• The header is the section at the top of the blog that comes before any of the blog’s actual content. It often contains elements like…
  • The blog title usually describes the blog. Sometimes this is also simply the name of the main site if the blog is just part of a bigger site.
  • The tagline clarifies the purpose of the blog (or sometimes just provides a laugh).
  • Many blogs have navigation near the top of the blog to help visitors find their way around.
• The main content in a blog is its posts. Posts usually contain some or most of these items…
  • The post title communicates quickly the point of the post. It’s like an email subject line.
  • The post content is the “article” that gives the post purpose. It’s like the body of an email.
  • Information about the post is called metadata. The following are examples of metadata…
    • Most blogs feature the date and/or time the post was written to help readers gain context.
    • Categories and/or tags help the reader quickly determine the topic and find more posts on the same topic.
    • Blogs that allow comments provide a link to read and write them.
    • The name of the post’s author helps readers associate the post with a specific person. This is essential on blogs with more than one author, and helpful even on single-author blogs.
• Most blogs have one or more sidebar. The sidebar is a place for information and tools that go beyond specific posts. The sidebar is made up of…
  • Widgets are self-contained chunks of information that the blog owner can add and move around.
• The footer contains more “meta” information, typically about the whole blog rather than just a post. It usually has…
  • A copyright notice to protect the content.
  • Credit links to the people or tools who make the blog possible.
  • The footer might also have links to privacy policies, important pages, or contact information.

It is helpful to look at some working blogs to see these elements in action. Click on the images below to see annotated screenshots.

Standard blog layout concepts

When you’re working on a blog design, you’re typically working with “theoretical” content. Because they are dynamic, you never know what the blog owner is going to put in, so you have to design for many possibilities, while also showing enough variations to make it clear to the coder what you intend.

It’s a good idea to show anything and everything that’s different from just plain text. That includes regular links (think color, style, and what it will look like when the mouse moves over it), lists of information (do you want to use a cute little bullet? dotted lines between items?), and images in posts (should it have a border? how much space should be between the image and the text around it?) among others.

Currently most blogs are designed to fit a width of 960 pixels or less. That’s not always true; a particularly tech-savvy audience justifies a wider layout, because most readers will be on new, larger monitors. If you’re not given any guidance as to width, stick with 960px or ask for clarification.

Click the image below to see a basic guide to blog content. Note that this is just to show the main sections of a blog; the layout can be utterly and completely different. There might be more sidebars, or they might be on different sides, or you might choose to put some of the info in the footer. When you look at it, think in terms of “content I need to include,” not “this is a layout to emulate.”

Examples of good blog designs

Here are some blog designs from Alek Lisefski, a designer I work with regularly. In addition to the quality of work he provides, I also like working with Alek because he (visually) gives me all the info I need to code the design.

Notice how every design has a header, multiple sidebar widgets, and mouseover styles for the links? That kind of attention to detail makes it a breeze to get everything right the first time.

Go forth and design

And let me know what questions come up along the way! Leave comments and I’ll do my best to answer them.

Since I know people are interested in finding ways to cut costs when starting out, I thought I’d take a few minutes and outline a cheaper alternative to hiring me or another full-service blog/web development firm. This “how to” post is also part of the “Crowdsourcing Business How To’s” extravaganza at Sparkplugging.

Premium blog design is not for everybody

In case you think I’m nuts (or suspiciously unselfish, which hardly ever happens in the real world), I’ll start by addressing the obvious question: why would I tell you how to not hire me?

Simple. My services are not right for everyone!

Don’t get me wrong—if you and I are a match made in heaven, you will get tremendous value out of working with me. If you’re an entrepreneur, a consultant, an author, or represent a business, your investment in my services will generate a great return. My excellent code quality, attention to SEO, and blog savvy easily present a high value that goes on to pay for itself.

However, if you’re doing the web thing as a hobby, or you’re bootstrapping and have no capital to invest (regardless of the ROI), or you’re not sure if you’re going to stick with this business, it’s wiser to hold off on any purchases that aren’t absolutely necessary. In my friend’s case, the site she wants is for an on-the-side business that she doesn’t plan to take full-time for a long time, so her anticipated revenues don’t justify much investment.

Given that you might not be an ideal client for me—yet—I have no problem suggesting something you can do in the meantime. Hopefully you’ll remember me and come calling when you need all the bells and whistles!

Since you’re probably wondering, I’ll define what I mean by “small budget.” I believe you can get an attractive, working site or blog designed for as little as about $800. You may be able to get it done cheaper, but lower than that and I find that the results can be disappointing and inconsistent (sometimes you’ll find a diamond in the rough, but often you’ll just get a ho-hum looking site).

Start by doing your design homework

No matter whom you work with, you’ll get the most bang for your buck when you have a good idea of what you want. I’m not talking about having a specific design in mind (that almost always ends in frustration), but simply knowing your tastes.

An easy way to start is by identifying sites that you find attractive and serve a similar purpose as yours. They don’t have to be in the same industry (and it’s usually better if they’re not), but if you’re looking for a blog design, look for appealing blogs. If you want a site that’s more like a magazine, look for attractive magazine sites.

If you’re not sure where to look, you can get a head start by going through sites that others have identified as good-looking. There are a bunch of “CSS Galleries,” sites that showcase the best designs on the web (as decided by them, usually). Among my favorite galleries: CSS Drive · CSS Mania · Unmatched Style

As you look through the designs, watch for those that just strike you, that seem to resonate somehow. Go until you’ve found maybe 15 of them, and then look for similarities. Do most of them have a similar style (like “sleek and clean” or “grungy” or “shiny”)? If so, narrow down to your favorite 3-5. If not, keep looking until you identify the style that is most appealing to you.

Once you have just a few, make a simple list of likes and dislikes for each design. Think about things like colors, number of columns, advertising (if you want it, and if so, which types and locations you prefer), menu location, that kind of thing.

Create a design brief

A “design brief” is just a document that explains to the designers what you’re shooting for. The more they know about your goals and your desires, the more likely they’ll come up with something you love.

What should go in your design brief? A good starting point:

• A description of the site or blog the design will be used on, including how you intend to make money if you do (e.g. advertising, selling a product or service, affiliate marketing, subscriptions, etc.)
• A link to the site or blog if it exists currently, with likes and dislikes, and notes on anything you’re definitely intending to change
• A link to a high-resolution version of your logo, photo, or any other images you intend to use in the new design, along with any specifics on usage (many new sites will not have any of these things, in which case you can say so)
• A description of your target audience, with as much detail as possible about things like gender, occupation, age, and interests
• A list of the content that will go on the front page (the more detail, the better)
• A short overview of the style you like
• A description of the types of colors you like (pastels vs. earth tones vs. bold vs. bright) as well as specific examples in the next section
• Your list of sites you like (make sure you include the URLs!) with your likes and dislikes
• Anything else you think will help designers understand what you want in a design

You can create your rough draft in any text program of your choice and then copy and paste it in the next step and add links and such.

Set the designers loose

The least expensive way I’ve found to get one great design is to hold a contest (if you are going to need lots of great designs, like I do, it’s easier to find a few great designers to work with regularly, but if you just need one, the “finding” process can be overwhelming).

My favorite place to set up a contest is 99designs. Design contests are all they do, so there are many good designers already using them, making it a lot easier on you than finding designers yourself.

The way it works is relatively simple: you sign up, you buy credits, and you start a contest, using the information you’ve already gathered. You really just follow the steps, but here are a few notes:

• Plan on devoting a good chunk of time to your contest. Setting it up is easy, but you are expected to provide feedback to every designer who enters. Since designers are spending their time without any guarantee of winning, giving them feedback is a reasonable trade-off for the reduced cost. Give feedback every day if possible or you’ll get fewer entries. Feedback is in your interest, too, as it’s public, so your early feedback will be used by all of the designers to create something you like.
• Expect to spend somewhere between $400 and $600, plus the contest fee ($39 as of this writing). If you offer less, you’ll still get entries but the quality will generally be lower, as the best designers won’t consider your contest worth the time.
• Mention the prize amount in your contest title. It catches eyes.
• Pay attention to comments and answer questions. This should go without saying, but it helps the designers help you.
• Understand that in this step, you’re buying a design, not a functional website (that part comes next). Ask for the design in Photoshop (PSD) format.

If you provide detailed information, pay a respectful amount, and generally behave like a nice person, you’ll get good entries. Once you’ve paid for and received the design file, you’re ready for the next step.

Get that design coded!

There are a number of online services that will take your Photoshop file and turn it into a working website, like CSSRockstars. The process is simple: you upload your Photoshop file and pick the options you want, and they give you back working site code.

If you want a WordPress blog theme, they do those for a small extra fee—if you just need a static site, that’s the base package, but for the extra $70, you’re almost certainly better off with a WordPress theme, even if you use it to run a regular (non-blog) website; it just makes things easier to update. You can expect to pay between $149 and $399 depending on the options you choose, but you’ll probably tend towards the lower end.

The final step is to put the site up. If you’re not sure how to do that, we can help; our hosting package includes setup, so that’s an option, or you can find one of the many tutorials on the topic.

Ethical considerations

It should be noted that many designers dislike the contest structure that 99designs uses. They feel that it’s not fair to ask designers to create work without a guarantee of payment (you’re guaranteeing payment for somebody, of course, but not compensating every designer who enters).

I tend to take a fair-market approach to it and figure that if designers are regularly entering contests, then they find the arrangement acceptable. I actually like that it gives skilled designers all over the world a chance to compete for good jobs without discrimination based on location or language.

However, if you’re concerned about this question, I encourage you to do your research and understand the issues. You may find this interview with a contest-enthusiast-designer helpful, as well as the NO!SPEC site, which takes the opposing view.

Understanding the trade-offs

I alluded earlier to the fact that you can pay less if you’re willing to get less. So what are you sacrificing if you go with the above plan?

• Search engine optimization The folks at CSSRockstars are good, but their main focus is on producing functional code that looks like the design you sent them, not going above and beyond and coding for maximum search engine friendliness. Honestly, it probably won’t hurt you a lot in the beginning, but as your competition gets more SEO-savvy, it will become more difficult to be found.
• Online expertise If you need advice on your strategy, feedback on monetization tactics, or ideas about structuring your information, you’ll have to pay for it separately or fend for yourself.
• WordPress experience and setup If you want to use WordPress as the basis for your site or blog (and I highly recommend you do), it can be helpful to work with someone who knows WordPress in and out, someone who knows what it can do and can recommend plugins to get the most out of it.
• Time It takes a fair amount of time and effort to manage the whole process yourself—and frankly, that’s something many people are happy to pay someone else to do. If you have more time than money, it’s probably an advantageous trade-off if you’re okay with the first three on the list.

If you’re so inclined, you can start today based on the information in this post. If you have questions, or any come up as you go through the process, leave comments and I’ll do my best to respond!

Based on the response from Wendy Piersall’s Problogger post, I realized that many bloggers want to use a search engine optimized theme but don’t know how to evaluate the code. I also got many requests to review specific themes. Instead of writing “Best themes for SEO” posts forever, it seemed like a better idea to create a site for this, and that’s the basis of WordPress Theme Review.

The site offers thumbnail images of the theme in use, as well as info on whether or not it supports tags and widgets, if there’s a cost, etc., but the main feature is that each theme is assigned an SEO score (out of 100) that helps the average user know how optimized the theme is.

Bottom line, if you’re interested in getting an off-the-shelf theme (which are usually free or inexpensive), you can easily browse the best WordPress themes for SEO purposes and find one that fits your style and will help you in the search engines.

1. “Blogging is a great way to make money.”

Yes and no. Some people do make good money directly from their blogs (selling advertising, mostly), but most bloggers make an absolute pittance in direct revenue. It takes a whole lot of work to make the advertising model profitable, and it’s very rarely worth doing based strictly on the ROI. On top of that, advertising on business blogs tends to send a message of desperation.

So why does anyone blog if there’s no money in it? Well, there is money in blogging, but most of it is less direct than advertising. The most financially successful bloggers I know are using a blog in conjunction with some other business model.

Many consultants are getting great results using a blog to attract new clients. Authors are increasing book sales by showing off what they know in a blog. Software companies are increasing their user-bases and reducing the cost of customer service by sharing relevant info on blogs. Salespeople are using blog articles to educate prospects and get them closer to a deal.

Beyond sales, lead generation and the like, blogging also helps professionals increase their own personal knowledge, communication skills, network of contacts, and findability online, all of which translate into better business across the board (online and off).

Bottom line, there is money to be made if you have the right model, but advertising by itself is very rarely the right model.

2. “A custom blog design is a great investment.”

Let’s face it; we’re designers. If we didn’t believe that good design was an excellent and important investment, then something would be wrong. We see (on a daily basis) the way thoughtful design helps our clients succeed online, so we’re inclined to recommend it.

However, not every client needs a custom blog design. If you’re just testing the waters, or you need to prove the concept before you get the budget, or you just want a design that’s attractive and readable and don’t care if other blogs have the same design, there are many good, search engine friendly, freely available designs available at no extra cost. When you’re ready to make a blog part of your central online strategy, that’s the time to look at a custom design. Until then, don’t let a passionate designer make you feel bad if you’re using a well-designed stock theme.

3. “You need to blog every day.”

In an ideal world, where everyone had all the time they wanted (both to read and write blogs), I’d agree. Then you’d have ample readers to read your musings, and plenty of time to write. In the real world, blogging daily is a huge burden and downright unattainable for many people. Besides which, it may not even be worth the effort.

Tim Ferriss, who’s something of a web celebrity right now and undoubtedly the most productive person I’ve met, found that posting every 4-6 days gave him the best ROI. He pays more attention to numbers like subscriber count and how many comments, and it’s obviously working well for him (his blog is among the top 1,000 despite the fact that Tim only got serious about blogging about eight months ago). You have to find what works for you (and your readers).

4. “We’re experts.”

Blogging has been around for about half a decade. It’s only begun to really take off in the last couple of years. On top of that, it’s changing so rapidly that keeping track of “all things blog-related” is far more than one person (or even a small company) can handle.

While the best people in the blogging industry are certainly experts in one or more narrow niche (like SEO for blogs ), you’re going to be hard pressed to find someone who knows everything about blogging. You’re better off looking for someone who knows everything about one area of blogging, and knows the people who are experts in other areas and can convince them to get involved as needed.

What are the “white lies” in your industry? Why not write about them on your own blog and help your customers sort out what they hear?

XV – Revised

We like this theme’s code because it:

• validates
• has better-than-average code structure
• emphasizes your post titles
• emphasizes your blog name
• emphasizes your blog’s description
• uses unique page titles

Hemingway for Wordpress

We like this theme’s code because it:

• validates
• has better-than-average code structure
• emphasizes your post titles
• uses unique page titles

Hemingway reloaded

We like this theme’s code because it:

• validates
• has better-than-average code structure
• emphasizes your post titles
• uses unique page titles

Rounded Blue V2

We like this theme’s code because it:

• comes very close to validating
• has better-than-average code structure
• emphasizes your post titles
• emphasizes your blog name
• emphasizes your blog’s description
• uses unique page titles

Freshy 1.0

We like this theme’s code because it:

• comes very close to validating
• has better-than-average code structure
• emphasizes your post titles
• emphasizes your blog name
• uses unique page titles

Now, I’m a little biased , but I think one of the best ways to get a great theme with great code is to have it built that way; you get the best of both worlds: a custom theme that represents you perfectly, and great, search-engine-friendly code.

However, I’m also a realist, and know that many bloggers can’t/don’t want to put cash into their blogs, so I wanted to take this opportunity to highlight some beautiful WordPress themes that also feature excellent, search-engine-friendly code. Read on to see the first five selections (in no particular order). (Hold your mouse over a “reason” to see a slightly longer explanation.)

Iceburgg

We like this theme’s code because it:

• validates
• has better-than-average code structure
• emphasizes your post titles
• uses unique page titles

Gridlock 1.4

We like this theme’s code because it:

• comes very close to validating
• has better-than-average code structure
• emphasizes your post titles
• emphasizes your blog name
• uses unique page titles

Fresh (Compact) 1.2

We like this theme’s code because it:

• validates
• has better-than-average code structure
• emphasizes your post titles
• emphasizes your blog name
• uses unique page titles

Time Manager

We like this theme’s code because it:

• comes very close to validating
• has better-than-average code structure
• emphasizes your post titles
• emphasizes your blog name
• uses unique page titles

Fluid Solution

We like this theme’s code because it:

• comes very close to validating
• has better-than-average code structure
• emphasizes your post titles
• emphasizes your blog name
• emphasizes your blog’s description
• uses unique page titles

This will be an ongoing series, so if you want to know about a particular theme, leave a comment and we’ll consider the theme for future evaluation.

Wendy of eMoms at Home did a great writeup on ProBlogger yesterday where she talked about the importance of a well-coded blog template and described the phenomenal results she saw when I implemented a much better coded them for her (the number of people that Google sent her doubled the next day). Wendy explored the reasons for that and the result was the ProBlogger post.

I want to go into a little more background here so that you’ll understand why the theme change made such a huge difference. Most people choose a blog theme based strictly on how it looks (and that’s definitely a valid concern, since it’s setting the tone for your blog) but aren’t aware that the behind-the-scenes details of the code can drastically affect the way the search engines “feel” about your blog.

A brief history of blog themes

Way back in the early days of blogging most blog themes were created using the popular code technology of the day: HTML tables. Tables were a nifty way of coding that allowed designers far more control over where things showed up on the web page than we’d ever had before. Designers loved tables, and in 2000 or so, they were everywhere.

But lo, times (and technologies) change. Since that time, HTML tables have gone way out of fashion, and this isn’t just an arbitrary shift. When it comes right down to it, HTML tables were never really intended to be used for laying out a design, and they weren’t very efficient. Along came a new technology called Cascading Style Sheets (CSS) that really was intended for positioning designs, and worked much better.

Beyond the fact that CSS was created just for this task, it had some profound effects on the way HTML code is written. It dramatically reduced the amount of “extra” code that’s needed to put things in the right spot, which in turn made it much easier for the search engines to sort through the code and find the meaningful pieces of content. It also helped the search engines identify the important pieces, like titles and headlines.

Because the new code is easier for the search engines to use, sites (and blogs) that use this new code are at a real advantage over sites that use the old code. The technology keeps improving, and now it’s possible to effectively “tell” the search engines what parts of a given page are most important—and the search engines “listen.” A site that uses the new code to the fullest naturally sees much better results.

Enough theory! Let’s get practical.

So what can you do if you have a theme that’s working against you? And more critically, how can you tell if you have a theme that’s working against you? Well, it’s a little tricky, because most people find all code to be equally indecipherable, and kind of like it that way.

One tool you can use is the W3C Validator. This tool lets you put in your blog address and test to see if the code in your theme is “legal” code (meaning it follows the rules). You’ll see either a “Valid” message or the number of errors that are standing in your way. It won’t tell you if it’s using the newest code, but the chances are very good that if your blog is declared “Valid”, you’re on the right track.

Don’t panic if you have a few errors… say, less than 15. A few errors tend to come in just from really common mistakes that often have nothing to do with the theme itself (for instance, if you forget to end a link in a post). If you have more than just a few errors, though, it’s likely that your theme is pretty flawed.

What to do?

If you have reason to believe that your theme is a problem, what should you do?

If you’re a business and even remotely serious about your blog (or website), you should seek professional help. A professional developer can whip your existing theme into shape or create a new one that’s well designed both in terms of look and code. It doesn’t cost much in the overall budget of a business, and it will play a big part in the overall success of your blog or site.

But what if you’re an individual? Most people can’t afford to pay much for a hobby, so if you’re in that category, what you want is a well-designed free theme. This can take some trial and error. (You literally have to try adding the new theme, run it through the Validator, and see how it does. Rinse. Repeat.) You’ll be off to a great start, though, if you look for themes that say they were built using the Cutline theme or Sandbox. Those are two kind of “base themes” that are very well designed, code-wise, and provide a great starting point for other designers.

If there is interest (say so in the comments!), I’ll also be glad to do a list of really well-written free WordPress blog themes.