Redid site in CSS

Look Ma, No Tables

[foxtrot3]

As I mentioned on another thread, my adsense stats have been in the tank for the last 2 days. BUT....

I just finished redoing my whole site in CSS. No more tables, and the content will now be read first by the spiders. Hopefully this will result in more traffic and MORE CLICKS!

Man, that CSS is a bear! I hope it pays off.

[webnoob]

.. the things people do to earn an extra buck ;)
honestly, i would like to redo my site in just css, but its too much work and a pain in the ass if you have tables with multiple columns, not to mention its a pain since you have to keep an eye on browser compatiblity.

[foxtrot3]

Trust me, if I can do it, anybody can. I used a really nice template from bluerobot.com. It's called "3 columns, flanking menus". I had to mess with it quite a bit to get what I wanted, and yes it was work, but it looks great in both Firefox and IE6.

[Erku]

Can you guys elaborate about this a little more?

How much does it cost to redo a site in CSS?

I heard it's great.

Did it effect your traffic and your Adsense revenues?

[Jolly_Roger]

Foxtrot3, do you get text overlap when you expand the text size to very large? I've seen many CSS-based multi-column formats that don't have that problem, so it may not affect you. If the page width is declared as a static number of em's, for example, it seems to scale perfectly.

Many 'liquid' formats (those which adjust to fill the browser window), however, do have text scaling problems.

This is important to avoid for two reasons. First, some visually impaired people use very large text sizes. Secondly, Google doesn't permit adsense ads obscuring other text -- or being obscured by other text.

If you have a CSS format that displays correctly in all of the adsense-capable browsers, lets you reorder your content to put the important stuff at the top of the html, and doesn't suffer anomalies with large text, maybe I'll check out that site too. ;)

[m0nty]

Making your page content easily accessible by the spider is a good thing. The other major technique I have been using is wrapping the non-content elements (top menu, footer etc) in JavaScript tags. That way the spider ignores them and only sees the content.

[foxtrot3]

Jolly_Roger - I have to admit, when I run the text size up to max, it messes up the page, and drops some of the adsense content from the bottom of the column (160 x 600 skyscraper).
But the table based site did the same thing, so no difference.
The center column (content) expands and contracts so no text is lost.

The content comes first in the code (which was the primary goal in this exercise), followed by the two side columns, and then the heading banner (which I added to the template). Position:absolute... Great stuff!

[burnsal]

CSS is difficult to get to grips with at first but it should be worth it. I have done 2 sites with CSS recently. I don't think I can face redoing my existing sites though.

[Sweet Cognac]

I redid our sites in a simple 3 column css several months ago. It WAS a bear, but it cleaned up the sites so much, and made them look more professional.

I'm happy that I took the time to learn css, and as far as it increasing your rankings, I would say it still depends on your niche, because some of ours went up, and on some, it didn't make any difference whatsoever.

[Jolly_Roger]

Foxtrot: I looked at the 3-column format on the site you mentioned. It was one of the best-behaved 3-column liquid CSS formats I've seen. In order to mess it up I had to do quite improbable things to it. Max text size did cause overlaps, but those were quite minimal. Longer words might cause more problems there though.

In order to make the columns overlap, I had to shrink the width of the browser to quite a rediculously skinny chimney shape.

I've never noticed text overlap on tables -- tables just seem to widen the page rather than overlap. However, my experience there is limited to my own sites; I haven't gone looking at table implementations because mine work fine. My main interest in going to CSS is to separate the presentation order from the text order.

Congrats on the new format. I think if I try CSS again, I'll start with the same one.

[SEO_Report]

Making your page content easily accessible by the spider is a good thing. The other major technique I have been using is wrapping the non-content elements (top menu, footer etc) in JavaScript tags. That way the spider ignores them and only sees the content.

You mean something like this?

<script type="text/javascript">
<!--
<table align="center">
...
</table>
</script>

[Sweet Cognac]

Likewise, thanks for the link. I've been looking for a 3 col that loads content first, for a loooong time.

[m0nty]

Something like that SEO_Report, yes. Although my site is heavily PHP based, so instead of using echo in PHP I just use document.write in JS for those non-content elements.