Affordable blog Design fresh from Bristol, UK

This is the first in a series of posts I’m going to write about making your blog more search engine friendly. There are a lot of ways to boost traffic to your website, but the method with the most “longevity” is definitely Search Engine Optimisation. So without further a do, my first article in the series, how to use headings to get better search engine results.

Headings are XHTML tags (<h1>,<h2>,<h3>,<h4>,<h5> and <h6>) that are used, funnily enough, to define headings. Because headings usually contain a thorough and dense summary of a page, in very few words, Search Engines love them. So, they’re perfect for defining the terms you want , and other search engines, to index your site under.

The problem is, semantically headings are normally used to define “section titles” such as the name of your blog, “Latest News”, “Tags” and other generic terms. While this is semantically correct, it means that Google’s going to be indexing your site for generic terms that are non-specific to your site. People aren’t going to link to your site for the quality of it’s “Tag Cloud” are they? And how likely is someone to go searching for “Links”? So why waste a header on these generic terms?

The approach I’ve adopted is to place generic terms like these, which people aren’t likely to search for, in a standard <p> tag, using a class as a hook for styling. I do the same for the name of the blog, leaving me with a <h1> for the description of the blog and <h2>’s for the titles of articles (both bound to be keyword rich). I’m also left with <h3>’s to use wherever rich data is going to appear.

Heading tags below <h3> don’t hold much beef with Search Engines, but I recommend still using them to ensure your site remains as semantic as possible. There is hope that we can live in a world where both semantic and Search Engine Optimised markup can live hand in hand, but we’ll need the additional tags being released in HTML 5 for that.

I just noticed that the449 is now the number 1 result for “affordable blog design” . I’m pretty chuffed with that and it just goes to show how effective a well-maintained blog can be in boosting your search engine rankings.

Recently over at , Adii gave a preview of his latest free theme. The preview sparked quite a debate about how the dimensions of a theme should be defined. Adii’s choice was to choose what’s known as a fixed approach. Essentially, this defines setting the dimensions of objects in pixels (px). This means the dimensions do not change from one platform to another, giving the designer a lot of control but causing potential issues for the end user.

Because the width of the layout is fixed, it will not alter for users viewing the site on a low resolution monitor. In Adii’s case, his theme would force a horizontal scroll for 800×600 users and a certain amount of the layout would not be visible without scrolling to the right. Adii’s argument for this was that very few people are currently using 800×600, newer computers work at resolutions upwards of 1024×768 pixels. However, there is a hole in Adii’s argument. A lot of people choose not to browse at full screen, perhaps because they’re multi-tasking and have more than one window open. So while the user may have a screen resolution higher than 800×600, they may not necessarily have any more space in the browser available.

AJ, of devlounge fame, argued for the case of flexible layouts. To achieve a flexible layout, you simply set the dimensions of objects in percentages (%). This means that the width of columns and other objects are based on the width of the browser window. You can set min-width and max-width’s to avoid scenarios where they may be too few or too many words on a line or other issues that may break the layout. However, there’s not a huge amount of browser support for this and you can easily end up in a situation where you have no control over how your site is being displayed and your content is becoming unreadable.

At this point I stepped in with the mighty sword of victory, also known as elastic layouts. Elastic layouts combine all the benefits of the first two approaches. By setting the dimensions of objects based on the users font size, using em’s. You’re able to retain a level of control close to a fixed width layout but the user can also manipulate the width of the layout by increasing and decreasing their browser’s font size. By default, the browsers font size is set at 16px. So by setting your body’s font size at 0.75em, 1em becomes 12px. Setting an objects width at 10em will then result in a width of 120px, but if the user sets their font size to twice the default, the width of the object will be 240px.

While em layouts are a great option, there are a few reasons I only use them on specific projects. First of all, if you set the dimensions of an object in an amount of em’s that don’t equal a whole pixel value, the browser will take much more time and resources to render the item correctly. Secondly, using em’s takes significantly more time so we restrict their use to higher budget projects that would see a return on the investment. Finally, if a user has some form of visual impairment they’ll like be using a large browser font size, but if they’re also using a low resolution the layout will be much wider than their resolution permits.

David just put up a great post on Devlounge about making your themes client friendly. What this encompasses is making sure the theme can be moved around across domains, the title of the blog can be altered and basically avoiding hard coding details which the client may want to later change.

It’s also a great read if you’re producing themes for sale/free release as you need to be extra vigilant in catering for a mass of possible usage scenarios.

Making themes Portable/future-proof is a topic I’ve been promoting quite a bit lately. Our motto has always been to leave the client with total control, we don’t want to lock you into retainers and other such nasties so empowering you to make small changes like this yourself without a steep learning curve is what we’re all about.

David’s running a series of posts on this topic, today’s just focuses on Wordpresses header.php file. Looking forward to the rest.

My good friend David Peralty has put up a great, and frank, review of Entrecard and why he won’t be using the service.

Essentially, Entrecard is a service that allows bloggers to swap 125×125 banner ads with other bloggers, free advertising if you will. It seems very similar to BlogRush, only substituting the syndicated post titles for graphics.

David hits the nail on the head when he says there are very few benefits. The banners aren’t indexable by so you won’t see any SEO benefits and because they rely on both Javascript AND Images, you lose a large chunk of your audience including blind people and users on a mobile, or any other non-javascript, platform.

PS. While you’re over at XFEP, check out our sexy 125×125 banner advert in the left