Optimizing a 2 Column Layout for Search Engines

A little while ago, I published a basic centered two column layout.

A simple change to the style sheet and the code will improve this layout so that it is more accessible and search engine friendly.

Screen readers tend read a webpage in the order that it is coded rather than the order that it appears on screen, which is controlled by the style sheet. So, if the navigation appears above the content in the code (as it does in the above layout), someone using a screen reader will have to listen to all the navigation links before they hear the content.

This problem is exacerbated by the navigation being identical and repeated on every page.

Search engines need to analyse the content to determine what a page is about and rank it in the search results. However, they don’t always analyse the entire page, they might only look at the first 100 lines or so. If the majority of that is navigation, they are not going to find all the content. Also, the search engines want to find new content, which needs to be as near to the top of the page as possible.

The solution is to move the navigation div below the content div in the code. Then change the style sheet so the navigation and content div’s are floated to the right instead of to the left (replace float: left;  with  float: right;).

This retains the visual layout of navigation n the left and content on right.

HTML Tag Reference

It’s not easy to remember the multitude of html tags and their attributes, so it’s good to have somewhere to go for a quick recap.

My favourite site for most HTML help is Your HTML Source, which has a great glossary of HTML tags. It clearly outlines the correct usage for the all the common tags and many you might not normally think of using.

It’s a good idea to use an existing tag if possible, rather than defining your own class, as it makes your code more compliant with web standards and screen readers.

Contact Options

A lot of businesses on the web seem to make it hard for people to contact them, sometimes unintentionally, sometimes in an effort to combat spam.

They make the user use a contact form on their website, which can be over complicated or require information that a casual enquirer doesn’t want to give. Email addresses are obscured in an effort to confuse email harvesters and succeed in confusing users as well. Or contact information is just too hard to find.

In my opinion, if you are selling a product or service that requires people to get in contact with you, you need to provide every opportunity for them to do so and not hinder them in any way. Provide a phone number, email address and enquiry form. Any anti spam measures you need to take should happen in the background.

A lot of web developers and web designers (professional and amateur alike) forget that not everyone is as web savvy as them, not everyone is great at typing or filling in forms, or has any idea why you might want to protect yourself from ’spam’ (tinned processed meat?). Some people may think that their enquiry is so unique a website form just can’t handle it and will want a simple email address, or they may just want to find a phone number and speak to someone.

Make the most of all the hard work involved in getting users to your site and make it easy to convert them.

So here are a couple of ideas. Don’t write email addresses in a none-email format. If you must do something, make the email address an image and encrypt the mailto: link. (And beef up your server side spam protection and the filters in your email client).

Have a form for casual enquiries (e.g. with name, email and message fields) and a more detailed form for more serious users (maybe linked from a product detail page) – call it an order form. Protect these forms from spam bots with server side scripting, or dummy form fields.

And finally, how about providing a single field form where users can type in their email or phone number, and send it to you so you can contact them.