132 replies to this topic

[rkwinternet]

Hi from a newbie.

A point that I'm surprised hasn't been majored on is the SEO advantage of CSS. My experience indicates that CSS sites (all other things being equal) fair better in the rankings.

I say this because a while ago I had no alternative but to write a pure CSS site for a local blind society - not a table in site. And once having "learnt" it (long way still to go!) and applying what I'd learnt to other clients sites all these sites are doing well in Google (first or second pages).

And the thing is, looking at how Google "sees" the page I'm not surprised. BTW, I "tested" this by validating the page with Bobby. I know alot of you will say that's old news, but for the rankings value alone I've been totally converted to pure CSS.

Yes, it can be a swine to code at times, and does take longer to get your head round, but I reckon it's got to be worth it just for the client.

[mcjwb]

Hi,

The main benefit of CSS pointed out in earlier posts is the separation of style from content, in this way design is always consistent across the site and to change the design you should only need to change the CSS.

Employing a CSS based site means no inline style declarations which should mean less code as explained by Matt B. Also mentioned by Matt B is that your site will be more accessable to devices that don't need/want styles, which can only be a good thing.

In terms of benefits to SEO I don't really know. rkwinternet indicates that CSS based sites do fair better, but why? With less code, do Bots "understand" the page better and hence pick up on things that a page ladened with inline styles might obscure? Any other ideas?

The problem I have with CSS is that when you start learning CSS you quickly find the word "hack" often pre-pended with the word IE and a version number. To be fair other browsers also need so called "Hacks" to make your design cross browser compatible. IMHO CSS is still in it's infancy, Browsers interpretation (or lack of them) of the CSS standards can be infuriatingly different making designing a pain.

Like Scottie, I employ a combination of table based design and CSS as I think the time spent on developing a site totally driven by CSS could be spent better elsewhere - like proven SEO techniques.

[cookie-dude]

A combination of CSS and tables is the best approach.

We spent about a month trying to design a practical 3 column CSS website, it just was not possible with different browsers - Explorer being the one that needed the most work-arounds (called hacks!).

We also designed a CSS/table combination site for a Blind charity. The CSS allowed you to change background colours, font sizes, and be printer friendly. Excellent.

There is a steep CSS learning curve as well, I shall be looking at zen garden with interest.

[Tom Philo]

A lot of the "hacks" done for CSS refer to a VERY few esoteric features in order to get them LOOK the same on all browsers. And these features are not highly used in the overall base of CSS sites. Remember CSS is presentation!

Like in IE a certain use of a feature it puts a 4 pixel padding in IE, while in NS / Mozilla / FireFox it does not becasuse those codings implemented the spec correctly. Do you hack IE to meet the spec now? For people who want to ensure that it always looks the same in all then yes, since it matters to them.

If IE FIXES the code to work like spec, then you have to Un-hack it at some time - and while in transition then you will have THREE versions to deal with.

If 97% of the people coming to your site are using IE - spending time to use hacks to get a 100% compliance CSS feature as speced by W3C, so users don't see a 4 pixel padding where there should not be, to me is not worth it - and 99% of the users will never know that you did or did not.

I have never seen a truely business justified reason . with backing showing cost figures and facts, papers (white, blue, orange or red ) that stated why a CSS feature MUST be used on a page or else the whole web collaspes if this one string is cut.

[Dimmerswitch]

With the caveat that CSS-oriented design is not a panacea (I see CSS sites that have junky markup with tons of extraneous span and div tags), here are some potential benefits of CSS-oriented design:

* Significantly lighter pages (generally), which improves download speed, saves bandwidth, and improves the keyword density of any content (I'm assuming here that the CSS files are external and not embedded in the HTML document itself)
* Greater accessibility (generally)
* Ability to make sitewide changes in a simple and consistent manner (no more global find-and-replace drills)
* Ability to style the same document differently to suit various media types. So no more having to build 'printer-friendly' versions of all pages, no more having to build 'mobile' versions of pages.

I agree there's a curve associated with coding CSS designs as opposed to old-school methods. However, I've generally found that it's more of an "unlearning curve" than a learning curve. Those of us who cut our teeth on the "nested table flavored tag soup" methods of the mid-late 90s have a nontrivial investment in that skillset. When I teach CSS and HTML to folks who have little-to-no experience, I find that they "get it" relatively quickly. The folks who need the most handholding and explanation are people who have been doing web design for several years.

Table-based design seems 'easy' for those of us who have learned it because it's what we already know. I think there's a tendency to gloss over the learning curve once you've learned something. I don't think that grappling with things like colspan and rowspan in nested-table layouts is inherently easier than learning CSS.

[Dimmerswitch]

Stats from a project that I did for a previous employer:

Original page template-
document: 30.45kb
dependencies: kb (no css)
dependencies: 143.40kb (images)
dependencies: 56.9kb (hover images)
total:230.75kb
GET requests to render page: 112

Revised page template-
document: 18.74kb (including all css)
dependencies: 62.77kb (images)
total:81.51kb
GET requests to render page: 9

* accessible by default. Users will be able to access the new
pages with javascript turned off, with CSS turned off, or even with
browsers (like those for the blind) without support for the CSS we're
using. Site will degrade gracefully in all instances.
* lighter-weight pages, coupled with fewer GET requests per page, will
make these pages _much_ easier for our webservers
* smaller filesizes translate into faster response times for users.
Pages will generally load in one-third of the time (>60% speed
improvement)
* cleaner markup should make maintainability easier moving forward

Douglas Bowman has an oustanding writeup on improved filesize through CSS in his article Throwing Tables Out the Window - well worth a read.

[tmeuz]

I'm in the process of re-designing our e-commerce site which is laid out in 3 (and sometimes 4) columns, plus header, using CSS. After a steep learning curve, and a fair amount of experimentation, I realized that a pure CSS, truly cross-browser compatible site was too difficult, if not impossible. However, after adding in a few tables, the site seems to work quite nicely. So I'd echo earlier sentiments that CSS with some tables is the best way to go. I also suspect that as browsers adopt the higher CSS standards more uniformly (which now appears to be happening at a geologic page....), it'll be easier to make complex pure CSS sites.

I also found an SEO benefit for my particular layout. The individual columns and header are kept in DIV containers, and CSS allows me to specify the content for each container in any order, meaning that I can specify the most important content of my page (generally the middle column) first. ie. this is what the spiders will index first.

Can anyone point me to a good discussion on W3C compliance? This is my next hurdle, and so far I'm failing miserable.

[chrishirst]

On the CSS hacks, Use them and as Tom says at some time they may need to be "un-hacked" for a new version of IE.

I won't use any hacks at all for that reason and the fact that nobody is ever likely to notice that something is 1 pixel more to the right in Opera than in FF because they will only ever see it in the browser they use and if it looks ok and works that's all they want to know.

[Dimmerswitch]

I'm in the process of re-designing our e-commerce site which is laid out in 3 (and sometimes 4) columns, plus header, using CSS. After a steep learning curve, and a fair amount of experimentation, I realized that a pure CSS, truly cross-browser compatible site was too difficult, if not impossible. However, after adding in a few tables, the site seems to work quite nicely. So I'd echo earlier sentiments that CSS with some tables is the best way to go. I also suspect that as browsers adopt the higher CSS standards more uniformly (which now appears to be happening at a geologic page....), it'll be easier to make complex pure CSS sites.

/seconded.
Arbitrary-number-of-column layouts can definitely be tricky, depending on what assumptions you can make about the content that will be contained within them. There have been sites I've created where I've used a single table for the basic structure - we're still in a transitional time. That said, the overwhelming majority of site layouts can be created without having to resort to structural tables, in my experience.

I also found an SEO benefit for my particular layout. The individual columns and header are kept in DIV containers, and CSS allows me to specify the content for each container in any order, meaning that I can specify the most important content of my page (generally the middle column) first. ie. this is what the spiders will index first.

Forgot that one. Arbitrary source ordering of content can definitely be a benefit from a SEO perspective.

[Dimmerswitch]

On the CSS hacks, Use them and as Tom says at some time they may need to be "un-hacked" for a new version of IE.

I won't use any hacks at all for that reason and the fact that nobody is ever likely to notice that something is 1 pixel more to the right in Opera than in FF because they will only ever see it in the browser they use and if it looks ok and works that's all they want to know.

I agree that excessive reliance on hacks makes a design more fragile.

Since IE is almost always the problem child for me, there are two strategies I commonly use. The first is the star-select filter (a good writeup is at www.info.com.ph/~etan/w3pantheon/style/starhtmlbug.html). Great way to have a single rule only be parsed by Internet Explorer. And it has the benefit of being a legitimate CSS rule, to boot.

If I want to have a large number of 'fixed' rules be parsed only by Internet Explorer, I'll use their proprietary conditional comments functionality. So I might write something like:

CODE

<!--[if IE]>
<link rel="stylesheet" media="screen" href="ie_fixes.css" type="text/css" />
<![endif]-->

where ie_fixes.css contains all the workarounds fo Internet Explorer.

Edited by Randy, 23 June 2005 - 04:47 PM.

[lyn]

On the CSS hacks, Use them and as Tom says at some time they may need to be "un-hacked" for a new version of IE.
I won't use any hacks at all for that reason

We've been trying to get to CSS dropdown and flyout menus, in preference to javascript or DHTML, but haven't found any way to work them without an IE hack.

Suggestions?

L.

[Shane]

The menus here use no IE-specific code, and they look (and work) the same in IE as they do in Firefox: http://www.housebuyernetwork.com/

[jeremyb]

I am getting ready to change over our site from table driven to pure CSS mainly for the purpose of SEO but also to make it easier to format the page. Some pages will be completely dynamic using server side rewrite of the 404 error ( someone coming to our site looking for honda.html will see a page on Hondas but no such file exists on our server ). This will allow us to use different styles depending on the type of page hit -- make or model.

I am doing research and you are providing me with great help. I have been using CSS predominantly on my sites in the past with fewer and fewer tables as I go. This will be my first project of converting a table based site to a CSS site while preserving the look/feel and working with SEO.

[Jill]

Wow, thanks for all the great replies, keep 'em coming!

A warm welcome to all the new members who posted here including rkwinternet, mcjwb, cookie-dude, Dimmerswitch, jeremyb! (and any others I may have missed!)

I've pointed our designer to this thread as well!

[Dimmerswitch]

We've been trying to get to CSS dropdown and flyout menus, in preference to javascript  or DHTML,  but haven't found any way to work them without an IE hack.

Suggestions?

L.

Depending on your definition of 'hack', there are ways around this. The underlying problem is Internet Explorer's lack of support for the :hover pseudo-selector for elements other than anchor tags. Using the csshover.htc [www.xs4all.nl/~peterned/csshover.html] file created by Peter Nederlof will allow Internet Explorer to understand the CSS rules necessary for CSS dropdown or flyout menus.

The menus here use no IE-specific code, and they look (and work) the same in IE as they do in Firefox: http://www.housebuyernetwork.com/

Those menus require javascript to be enabled, which I think is part of what lyn was hoping to avoid.

Rereading this thread I realize I've derailed it a bit. Sorry about that, I get a little worked up about this stuff sometimes (/blush).

Edited by Randy, 23 June 2005 - 04:49 PM.