Better Your Blog in a Week: #6
By now every post on the home page is in the improve your blog series, but I just want to link to the category with “improve your blog” 
#6: Clean up Your Template, and Tweak the Structure
Today is all about the visual aspect of your blog. With only one day to go after this, it’s about time you perfected your template. A little bit of a typography review, maybe change some images and tweak the HTML behind the scenes and your site will be looking as good as ever, and the search engines will love you a little more.
Right now, from a personal standpoint, I’m liking Georgia in headings with Lucida Grande in the copy.
Step 1- Typography: Not everyone is a designer and can make good typography choices, but it’s a lot easier than you might think. A simple change in the fonts of your website can mean a world of difference in readability and over aesthetics. First thing, stop using pixels to set fonts. It’s 2007 and we can all use EMs for font size, so all browsers can resize them according to what the user wants.
Here a couple of tips that you can use to improve the way your site’s look by using simple font changes:
- A different font in headings and copy can work great.
- Some popular heading fonts are Georgia and Trebuchet MS. The can work in copy too (especially Georiga, very common copy font) but they have unique aspects that make them pop in a larger/heading situation.
- Besides aforementioned Georgia, some highly used copy fonts are Verdana, Arial and Lucida Grande.
- Choosing the right size for copy is important. Don’t go too big for the sake of a fad.
Step 2- Space things out: When things are crammed in or too close together or even overlapping, giving them some extra padding means a world of difference. This usually happens with list items, especially when using images as bullets. Be careful not to use too much padding, however. Don’t be afraid to adjust it pixel by pixel to get it right.
Step 3- Structure your page accordingly. Chris Pearson has published the Definitive Guide to Semantic Web Markup and I suggest you follow it. In a nutshell, here is what the article says:
- Make sure your <TITLE> is working right. The way I have mine setup, on a Single Post page, only the title appears up there. I share the exact code I use for that in this post.
- Serve your site’s name in a div, instead of an H1. You can serve it as an H1 on the front page, but otherwise keep it in a DIV. Your content is more important than you are
- Post titles. Pearson serves post titles in H2’s on his home page and in H1’s on their respective pages. I serve them as H1 always. I do this because I hold the #1 position for my site’s name “Connor Wilson” and I have a damn strong hold on it. I’m not concerned about having it in an H1.
- Post subheadings, should really be one level below your post. I keep my titles as H1 throughout, and my subheadings as H2’s.
- For the sidebar, H2 is way too high. This is the default WP way, and as Pearson says, it’s ridiculous.
Unfortunately, the WordPress-recommended sidebar architecture has sidebar headlines served inside
<h2>tags. Semantically, this is ridiculous.- Chris Peason
Now, you don’t have to go out of your way to change the graphics of your site, but these simple CSS and HTML tweaks go a long way. Over time, you’ll notice a huge SE traffic increase, trust me. I went from getting 0-10 hits from search engines a day, and now getting 50 is a low day. All because of this stuff! There are other contributing factors, but I’ll keep those secret. Or maybe #7 will be blog SEO?
Leave a comment
Adam McKerlie
August 20th, 2007 at 4:25 PM
Only one more
Another great set of tips Connor. When would you suggest a redesign of a site? I launched mine two weeks ago and currently I’m just trying to get content out. When should I worry about tweaking it?
Mutiny Design
August 20th, 2007 at 4:48 PM
Good post. I also agree that typography is an important part of making a website that people will want to revist. There are a lot of blogs out there I can’t see how people read because they are so cramped and jagged.
I really like your choice of fonts, particularly the use of Arial Narrow on your H3 tags down below.
I think, form elements are also an important, but neglected factor in beautifying your site.
If you have a look at my site, I made it all scaleable, so you can resize it with the bar at the top. Am currecntly working on a side project with similar facility at: http://www.semlabs.co.uk
Connor Wilson
August 20th, 2007 at 10:00 PM
I actually really like that design, and the total scalability of it is really a neat thing. That’s a site that looks like it has some potential
Mutiny Design
August 21st, 2007 at 5:22 PM
Thanks, there a re a few bits I would like to clean up on it and I am having some very strange problem when scaling with inline lements at the begining of block elements in FF.
CSS Perk
April 13th, 2009 at 1:45 PM
Okay, THIS is the cool stuff. The exact stuff I want to know more about because it confuses the hell out of me, or would, if I wasn’t reading stuff like this. I’m definitely going to look into implementing some of this stuff once I get off work today.
Login »