General Principles for Designing a New Theme or Template for Your Blog

Configuration Tips for Blog/CMS Themes and Templates


General Principles for Designing a New Theme or Template for Your Blog

by Christopher Heng, thesitewizard.com

Unless you have taken a particular fancy to the default theme that comes with your blog, chances are that you would have had to design or modify a theme or template for your blog before. Creating a new theme for a blog often requires consideration of a number of issues so that the blog can be more user and search engine friendly. This article gives a checklist of some of the main principles which guide the way I configure a new theme or template for a blog.

Note that while this article talks primarily of blogs, the principles also apply when you are configuring a content management system (CMS).

Theme or Template Related Configuration Principles

It should be admitted that when we create a new theme or template, we often think of its visual appearance. Notice how most blog software, from the ones you download and install on your own server to the online blogging services, give you a way to select a new theme based on thumbnail pictures of how it appears.

However, visual appeal is only one aspect of the process of configuring a new theme or template for your site. There are a number of other important things to look out for, when you create a new theme.

Navigation, Categories, Archives, Recent Posts and Breadcrumbs

The navigation system of a site, be it a traditionally-structured website or a blog, is always important. It is the means by which visitors to your site access the other articles. You'll be surprised how many blogs have a deficient navigational system that makes it hard for new and old visitors to find other articles on your site.

By navigation system, I don't just mean a link to your main page and "About" page. Those sorts of links are probably present in all the default themes in every blog script. Rather, I mean a way for your visitors to find other articles that you have written on, say, a particular topic. Or perhaps, if you have somehow made a fan of that visitor, a way for him/her to access all your older articles.

Many blog systems have, by default, archive pages, where your articles are linked to according to month. While archive pages are not without its problems, they at least function as a sort of site map that you see in traditionally-structured websites.

If you have eliminated such archive pages, and perhaps even if you have not, I suggest you take a look at implementing "categories" or "tags" for your blog posts. This allows you to place every post that you make in a particular category. The blog or CMS software then automatically generates a new index for you for that category.

In your new theme or template, make sure that you link to these category pages somewhere. Put it on every page, perhaps in your side panel or something. Don't rely on the automatic links created by the blog software at the bottom of each post linking to the tag for that particular topic. Give your visitors the ability to reach every category from any page.

Some blogging software allow you to do this easily by putting a "tag cloud" on your side panel (WordPress springs to mind here). If you have that facility, use it. And then when you post, maintain the discipline of tagging it, to put them into some meaningful category. If there is a particular ad-hoc post that doesn't belong to any category (because, for example, you traditionally don't write on such topics), then put it in a "miscellaneous" catch-all category. But don't post everything into "miscellaneous", obviously, or else your tagging system becomes useless.

If you find tag clouds ugly, or you have too many tags to place into the side panel, another way to improve the usability of your blog is to create a master index page that links to all the category indices on your site, and link to that master index from every page.

A useful feature, usually provided by default in most (if not all) blog software, is the ability to list the recent posts to the blog in the side panel. Do not remove this feature when you redesign your theme. Recent posts are another navigational aid to your site, and it keeps interested visitors on your blog.

Another way to improve navigation in your blog is to leave breadcrumbs. Breadcrumbs are something like the "You are here" markers on the newer pages of thesitewizard.com and thefreecountry.com. They help your visitors navigate around your site. Blogging software typically have very poor support for breadcrumbs. However, don't break your back over implementing this if your software does not. Most (if not all) of the breadcrumb advantages disappear when you implement tagging or categories for your post. Tagging also tends to be more flexible, in that you can place a post into multiple categories, while traditionally designed breadcrumbs forces an article into only one category.

Search

Ideally, you should really implement a way for visitors to search your blog, the way many traditional websites do. However, I empathize with the webmasters who have disabled search on their site: searching blog posts adds to the server resource usage for your site, and if the blog's search software is not well implemented, or if your site is on a weak machine, it might result in it hitting your web host's resource limits earlier than it might otherwise, particularly if your blog has many visitors.

I noticed a few blogs work around this by using an externally hosted search engine. I don't particularly fancy this approach, but I guess your preferences and needs will be different. In any case, my personal opinion is that blogs, like websites, should have some sort of search facility. If this is not possible, then try to make sure that your navigation structure is good enough to help visitors locate the articles they want.

Linking from the Teasers to the Main Article (Permalink)

If you are reading this, you are probably a seasoned blog reader and web surfer. When you read the teaser (usually the first paragraph or so) of an article on a blog's main page, and want to read the rest of the article, it's a simple matter for you to find the link (or permalink) to the main article. However, not everybody who reaches your site is going to be equally experienced. What may seem obvious to you is not necessary so for the average user.

When you design the template for your main, archive and category pages, make sure that links to the real article can be clearly seen as links by the visitor. A "read more" link that is blue and underlined usually works well, since people automatically recognize those as clickable links. You may think that "it's obvious that the title of the article is clickable". But if your title is not blue and underlined, you will be surprised to learn that it's not at all obvious to many people. Note that I'm not saying that your titles must be blue and underlined — it doesn't need to be. Add a link somewhere after the text of the teaser that leads obviously to your main article. Words (in blue and underlined) like "More..." or "Read the rest of this article..." usually do the trick. Those words are superior to even the word "permalink", which is meaningful only to a blogger.

Page Title

The page title of a blog post page should not be solely the name of the blog. I'm not talking about the main page of the site itself, but the article pages which contain the individual post, what some people call the "permalink" page. Nor am I talking about the printed text that appears on your blog itself. I'm referring to the HTML <title> tag. The words in this tag appear on the title bar of your browser window, and is the same title that search engines use to describe your article in their results.

Some themes have the name of the blog appear as the title for all its pages. That means that when a person searches for, say, "blah blah blah" in the search engine, and your page is returned in the results, your site will be listed simply as "Example.com". Not very enticing. It would be far better if the title of your post had been listed before the site name, such as "Why I hate Blah Blah Blah - Example.com" or the like. A visitor seeing such a title is more likely to click the link.

Other themes, as mentioned in my article on How to Make Your WordPress Blog Search-Engine-Friendly, list the name of your blog first, followed by the post title in the <title> tag. Although this is much better than those that list only the blog name, I prefer to have the post title first, followed by (optionally) the name of the blog. Search engines restrict the number of characters in the title they are willing to display. With your article title first, at least when they truncate your title for lack of space, the relevant bits are still present.

When you configure your theme, make sure you look at the title tag and place the article title in it.

Meta Description

I have yet to come across any blog software that allows you to set the Meta description tag out of the box (at least, at the date I originally wrote this article). If you don't know what such a tag does, see my article on How to Use Meta Tags In Search Engine Promotion. Although the meta description tag is not crucial, it is still a useful thing to have for most situations.

As a result, when you design your theme and configure your blogging software, find some way so that the tag can be inserted into every post. And each time you add an entry to your blog, be sure to use it to put some meaningful overview of that post in the tag. The method to do this varies according to the blog software you use. Both WordPress and Drupal apparently have plugins or modules that allow you to do it.

Colour Scheme of Side Panel

When you design the colour ("color" in US English) scheme of your blog, remember that a blog's side panel is typically very "busy". It usually contains the titles and links of your most recent posts, links to the archives and even a tag cloud. The background colour of the side panel and the color of the text that goes there must therefore be colours that have a very high contrast. For example, do not put red words on blue or vice versa — your side panel will be unreadable for the majority of people. A very dark colour for the text on a light background usually works best. Alternatively, if you want to appear more modern, a light colour for the text on a very dark background (like black) may also work, although, depending on the monitors your visitors have, these tend to have a lower visibility than dark text on a light background.

Conclusion

The general principles listed in this article can serve as a checklist of things to look for when designing a new theme or template for your blog. While the list is far from exhaustive, it nonetheless contains the key aspects of usability and search engine friendliness that should go into every theme for a blog.

Copyright © 2008-2014 by Christopher Heng. All rights reserved.
Get more free tips and articles like this, on web design, promotion, revenue and scripting, from http://www.thesitewizard.com/.

thesitewizard™ News Feed (RSS Site Feed)  Subscribe to thesitewizard.com newsfeed

Do you find this article useful? You can learn of new articles and scripts that are published on thesitewizard.com by subscribing to the RSS feed. Simply point your RSS feed reader or a browser that supports RSS feeds at http://www.thesitewizard.com/thesitewizard.xml. You can read more about how to subscribe to RSS site feeds from my RSS FAQ.

Please Do Not Reprint This Article

This article is copyrighted. Please do not reproduce this article in whole or part, in any form, without obtaining my written permission.

Related Pages

New Articles

Popular Articles

How to Link to This Page

It will appear on your page as:

General Principles for Designing a New Theme or Template for Your Blog





Home
Donate
Contact Us
Link to Us
Topics
Site Map

Getting Started
Web Design
Search Engines
Revenue Making
Domains
Web Hosting
Blogging
JavaScripts
PHP
Perl / CGI
HTML
CSS
.htaccess / Apache
Newsletters
General
Seasonal
Reviews
FAQs
Wizards

 

 
Free webmasters and programmers resources, scripts and tutorials
 
HowtoHaven.com: Free How-To Guides
 
Site Design Tips at thesitewizard.com
Find this site useful?
Please link to us.