Hey Minstrel, it's the new site! (http://www.searchenginefriendlylayouts.com)

Minstrel asked where the new site was, so I decided to reveal it:

http://www.searchenginefriendlylayouts.com

This is in public beta at the present time, so any bugs should be reported here. The long and the short of this concept is that it takes advantage of CSS to provide webmasters with a more search-engine-friendly, white hat way of developing layouts.

There are 24 layouts at the present time, but if it goes well enough, I'll add more. (I plan on putting AdSense onto the site to make some income off it.)

And, if I meet my site monthly income goal off of it, then I'll develop more sites where I impart my unique and twisted brand of knowledge to you all.

Anyway, thoughts, comments, questions, etc. are greatly appreciated.

 

So how can search engine friendly layout be search engine friendly?
I dont think layout has anything to do with SE friendly.

Its just the url, title, descriptions, keywords and contents. Hope this helps.

 

It's in the organization of content. The whole idea is that people want their keywords and phrases (header tags, opening paragraphs, etc.) to show up as soon as possible.

Take this layout for example:

<table width="100%">
<tr>
<td>
Main Menu
</td>
</tr>
</table>
<table width="100%">
<tr>
<td>
Submenu
</td>
<td>
<h1>Header tag</h1>
Content area.
</td>
</tr>
</table>

Code (markup):

Compare that to this sample:

<div id="bodywrapper">
<div id="contentarea">
<h1>Header tag</h1>
Content area.
</div>
</div>
<div id="leftcolumn">
Submenu
</div>
<div id="header">
Main Menu
</div>

Code (markup):

But optimization of code isn't the only logic behind this. It's to try and get more people using web standards-compliant code.

Up until now, I haven't seen anyone openly present a practical, profit-motivated reason for doing so. That's the other angle as well...so even if the SE happens to net out to nil (which it won't), then there are standards-compliant reasons to use these layouts.

 

not sure about the absolutely positioned elements and the use of javascript I saw in the fixed widths examples.

I don't use any absolute positioning, and certainly no javascript in my css layouts..

great idea though, but couldn't you keep the se benefits to yourself !

 

The Javascript was necessary in the case of anything with a footer in order to ensure the positioning worked. I haven't yet figured out any examples that would work to the contrary that would still allow for this to happen...especially with a 3-column layout.

And no, I couldn't. I got money plans for it.

I ultimately plan on putting AdSense into it, or some other text link ad CPC revenue generator. If this works out well enough, I've got some other ideas for similar sites (not for SEO specifically, but code samples in general.)

The absolutely positioned elements are what make the layouts work, especially in the case of the header. The problem is that APEs get a bad rep because people almost never use them properly, or don't understand how to position something in an area without overlap.

In the case of my examples, the absolutely positioned elements are placed in areas where no other actual content exists. The margins take care of that.

Great comments, though. I gave you some rep for them.

 

<div id="wrapper">
<div id="content"></div>
<div id="leftcol"></div>
<div id="rightcol"></div>
<div class="clearboth">
</div>
<div id="footer"></div>

styles:
div.clearboth {clear:both}
div#wrapper {background: url(/images/fakecolumns.gif)}

then make a 1px tall gif, the width of your fixed width page layout that looks a bit like
+++++++----------------------*******

ie you add the column background colors with a repeating image, or am I missing the point of your post?

I'm using the same technique here:
http://www.milktwosugars.co.uk/
here's the repeating image
http://www.milktwosugars.co.uk/images/body/shadow.jpg

cheers for the kind comments

and I haven't come up with a way to do this with a liquid layout yet

 

You are, partly. But that's okay because it's a new concept.

Your site looks good, by the way. But the problem is the order of the code: the top nav comes first, and then the right side (your body). Let the body come first.

Although you may have given me an idea for another version of the layout, to come at a later date.

 

Nice, very good resource! Plain and simple. Add http://www.csszengarden.com/ to your resources so people can see the real power off css!

Check css validator, some small errors with http://www.w3.org/TR/REC-CSS2/text.html#propdef-white-space

Added it to my bookmarks.

 

Thanks for the add, WhatiFind!

I haven't actually gone through it with the CSS validator yet (since I haven't yet built myself a tool to do automated queries...that's tomorrow's fun.)

I'll add in the Zen garden later tonight. I'd forgotten all about it.

 

As far as the white space validation issue is concerned, it's got proprietary tags in there for compatibility reasons. I wanted the text to wrap within the pre tags, rather than stretch it out and make really long lines. I can't find anything else that works and is cross-browser compatible.

Any ideas?

 

I don't get what point I'm missing

Yes, that's because the site is a phplinkdirectory site. I just changed the templates - changing the order of content would have been too bigger a job than I could be bothered with.

Most of my sites do have the content before the side nav eg http://www.kiwiaccommodation.com/accommodation/details/1999.php

 

Ahhhhh nuff zed. I am wise to your mysterious ways now.

 

Hi there,

Just tried to go to http://www.searchenginefriendlylayouts.com to use one of your designs there, but it's gone!?

Any plans on resurrecting that resource?

Cheers,
Carin

 

I think you have heard enough of SE mystery , I would only comment that you should try to use the repetition approach on the analogous elements, that is if you are using thick gray borders, so for all border you should apply the same style to make the site look consistent. On the other hand, if you want to distinguish some bordered elements you could apply a different color, you could try pastel orange or blue, or darker/lighter gray.