Better Your Blog in a Week: #6

Posted on August 20th, 2007. 5 Comments so far. You next?

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:

  1. 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.
  2. 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 ;)
  3. 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.
  4. Post subheadings, should really be one level below your post. I keep my titles as H1 throughout, and my subheadings as H2’s.
  5. 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?

4 comments

  • 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?

  • 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

  • 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 ;)

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

Leave a Reply

1 Trackback