Web Page Structure for Great SEO

I have just put up a post on the Webxopt site showing how to structure 2 and 3 column layouts to makes sure that your main content is always at the top of the HTML page, where search engines like it.

I’m never sure where to post these things these days, but just in case the link is

http://webxopt.com/wordpress/2009/08/web-page-structure-for-great-seo/

CSS text spacing, Internet Explorer and Dreamweaver templates

I have been setting up a site using a dreamweaver template to set areas of text that a client can edit. There were standard titles which I had put into the template and editable areas for copy between the titles.

To style and space the text I was adding into the css styling such as h2 + p then adding some padding. This worked great in firefox but when I came to test in internet explorer it completely broke.

After a bit of investigation it seems that the problem was the dreamweaver commenting that opened or closed the editable areas. The comment was coming between the h2 and p for example and ie was seeing them as not following each other. Firefox interpretes how you would expect of coarse and ignores the comment! Anyway take out the comments and ie works okay too.

This unfortunatel was the only way I could get the pages to work in ie and therefore broke the template.

This may also be of interest if you are adding commenting into your code and noticing copy spacing in ie is not right.

CSS Drop Down Menu System

I have spent the afternoon working on revising a CSS menu system. Having got it working, and with multiple level dropping down, I was actually amazed at just how easy it was to do. Why am I excited about this? Because it works in pretty much all legacy browsers, and does not require scripting. If you look at typical drop down menus, they tend to require javascript support, which is certainly common, but is not universal. A CSS based menu means that all your users will get the same experience.

So why am I so bothered if a well designed javascript based system is designed to degrade gracefully and still allow navigation? Simple reason is to make my life easier. If I know that every user will get exactly the same experience, I don’t need to design multiple ways through the site, or redundant navigation.

I guess that the other thing to explain is why we are doing this. I have recently done some user testing on one of the sites I manage and found that none of the users saw the 2nd level of horizontal navigation we have. I know that this second level is used but my feeling is it is used by people who know our site, although I am yet to test this.

The second reason for looking at this multiple level navigation is that if you focus on your user, under your product or services menu, you should have various methods of a visitor finding the content they are looking for. What do I mean? Our products are enclosures, metal boxes basically, people may want to find them by material, application, size, industry etc. Using 3 level navigation you can easily push them to the content they want and reduce the number of steps they have to take to get to their content.

Having said that I intend to test this navigation on our site and see if or user like it. I will report back then.