Building a Site completely with CSS

[TheBrownRecluse]

I would like to get into the habit of building websites with CSS. However, I'm wanting to know, what are the most common issues with such an aggressive venture. The purpose, is of course to minimize the amount of code on the content page and force it up so that Google is more likely to index it.

In other words, is this just a minor difficulty issue, or the Holy Grail of Web Design/SEO that anybody's been able to make a completely tableless, CSS driven site.

-Clif

[speed]

I've been building pure CSS sites for years, the sites in my signature are built that way.

The biggest problem is getting the site to work the same across all browsers especially IE6 which has more issues than you can imagine and according to my stats is still the most popular browser.

My advice:

1. Try to avoid CSS hacks even if avoiding them causes you to add an extra div to make the layout work on IE6. I've seen too many sites break in IE7 because of hacks to fix IE6.

2. Don't try and build the page the same way as you would with tables.

3. Try to use 1 style sheet for all browsers, but if you have to tweak the CSS for IE6 then use a conditional to include an IE6 variant to adjust just the problem classes in the base style sheet.

4. Start with something simple and don't be surprised when it works in IE but not any other browser or works in every browser but IE. Then ask questions in forums such as these.

5. Build the page in Firefox with continual checking in both IE6 & IE7. The reason is the fixes to make IE6 work are documented around the net and IE7 doesn't always work the same as IE6.

6. Avoid absolute positioning. Others do use it but I've found avoiding it makes my life easier.

Others may disagree with some of these points but they work for me.

[weslinda]

Great tips speed. The only thing I would add from a basics standpoint is to try and use relative sizing whenever you can. Especially with text. % or EM for font sizes offers your visitors more flexility and is really quite simple to do.

Also, reduce your CSS by being as general with things as possible. If you want all lists in your content section to be setup the same way, do it by defining what lists are to look like in that section versus creating a style and having to apply it to every list.

Same for items such as paragraph spacing and much more. Simplify whenever possible.

There is a thread around here where Webnauts discusses a "structure" to a page and that is actually a really nice one to follow as well. I'd have to hunt to find it but it's out there.

[speed]

Good point, about relative sizing and simplification.

Another one that should have been on the list is use a strict DOCTYPE.

As should when it comes to debugging http://validator.w3.org/ is your friend, if your code has errors don't bother trying to make it display correctly, fix the errors first.

[weslinda]

How in the world did I miss that one, guess I assume that as a basic of all web pages, not just CSS based layouts, but Strict is definately the way to go if at all possible. It makes your life much simpler in the long run.

[speed]

When you are doing this stuff day after day it becomes second nature and you just forget about it, I'm sure there's a whole load more things we do without thinking about it.

[Dinghus]

What you are seeing here actually is all the reasons many people are fleeing from CSS only pages. It is too complicated to build them so that they look good on even most browsers.

A combo of the 2 is far better.

Think of how many times you go to a site that is pure CSS and when it first opens things are moving all over the page. Horrible.

Or you work hours to get it to look good in IE6 and find it is a mess in Firefox.

Unless your site is totally DHTML (as in using Javascript to move and place stuff) you are better served with using tables and CSS to get your page looking good. And much faster too.

And from what I have experienced and seen, the amount of code on a page is about the same or more for CSS. (count characters not tags). Most SEs are able to distinguish between code and content anyway.

Of course if money is not a concern, then knock yourself out building pure CSS pages.

[kanjigirl]

I've been building CSS-only sites for several years. One good reason - a client just asked me to clean up a page on their marketing products site.

This table-based page had a limit of 50,000 characters (it was to be shown in a frame) and was already up to 49,300 - and they needed to double the amount of product shown.

By stripping out the table structure and replacing it with pure CSS, the number of characters in the HTML page will be reduced by just about half.

It's not difficult to get CSS-only pages to appear nearly identically in the major browsers, and it doesn't take inordinate amounts of time - just experience. Code for Firefox first, and then make corrections for IE if/when needed.

[weslinda]

Content to Code Ratio is a great point as well. Reduced code equals solid results for your page. Just Posted an article on my blog regarding the importance of valid code and CSS for style.

[chrisJumbo]

Our site is CSS except for some of the info that is tabular data. It takes time, but a lot easier to maintain, especially if something happens to me. I've had to maintain sites done with Tables and it takes a lot of time just to figure out the structure.

Margins and padding are a big difference. The simpler it is, the more likely it is to look correct in all major browsers.

Since I grow up with IE, that is where I start. Once I have the layout I start testing in both. IE does offer conditionals and like others said, there is lots of info out there on fixing the various things that don't work.

CSS offers you the ability to basically go
Header
Column
Column
Footer

Or almost whatever you like. We do use a small amount of Javascript for the menus, but it wasn't necessary, just made the pages cleaner.

[weslinda]

The other nice thing about CSS Is how you can organize your content in a much cleaner way, allowing you to improve your on site SEO considerably. By using layout floats for your columns, you can move the meat of your page higher in your code, and that is just one of the many things you can do to improve the rankings through CSS.

[MarcThai]

One thing I love about the internet is that it forces us to keep learning. I found one of the easiest ways to learn the (to me) new CSS coding was to install WordPress and then download and view various templates. Check the CSS style sheets, compare how the coder used the styles to manage the design, and you will soon see how to do even the most advanced work.

Here's a thought. I wonder if this new forum (love it by the way!) is built in CSS? It doesn't look like it though.

[thindenim]

I've been using css for years to style my pages, but until the last few months had stuck with tables for layout. The reason for the change was I was developing a site for a public body, and accessibility was a big factor.

Now that I have made the change I would *never* go back.

Obviously there are various inconsistencies with the browsers, however, once you get to know them they are easily worked round. You can either use the hacks, or just work your designs in a way where they look ok with either display. I'm basically designing for Firefox and testing compliance in IE7 and IE6. Hopefully over the next couple of years as standards are embraced the quirks will become less and less.

I recently converted our Girls Night site into a pure css layout and reduced the code from around 15k in tables, to 4k in css. The page is around 8k, with 4k of code and 3 and a bit k of text. Obviously this is going to result in an immediate speed up of load time, however, the other advantage of css over tables is that elements load independently of each other, whereas a table will only load once all the content within has loaded.

The navigation bar I converted from complex roll over graphics, to a simple ordered list of links - accessible and lite on code.

As I said, once you get into the way of thinking, you'll never want to go back to tables.

[okparrothead]

I've been building sites in XHTML and CSS for a couple of years, and I wouldn't do it any other way.

There's a learning curve and some browser inconsistencies, but they're easily learned and documented in many places on the Web.

The three most valuable things I've learned are these.

1. Validate your code.
Bad code will break the styles.
2. Use margins rather than padding.
This eliminates a lot of the inconsistencies.
3. Add this snippet to the top of your style sheet: * {margin: 0; padding 0;}.
This levels the playing field by overriding each browser's default styles,
eliminating more inconsistencies.
You will have to define styles for everything, however (p, H1, blockquote, etc.)

If for no other reason, CSS lets you display the same content in many ways.
Check this out to get a feel for the possibilities: css Zen Garden: The Beauty in CSS Design

Peace

[steveglobal]

I'm going to chime in here and beg the Web dev community to use some terminology other than "CSS" in cases like this.

CSS is not the antithesis of tables. In fact, there is a significant amount of CSS markup that you can do with tables. I frequently use tables in my "CSS" pages. Really, the antithesis of CSS is HTML attribute tags; the latter offers little ability to position the on-screen elements, resulting in the need for CSS positioning.

The issue is that there are two main schools of thought for controlling layout on the page as a whole - one uses tables, the other uses CSS positioning. Thus, I propose that we all start saying that our pages use "positioning" (rather than "CSS") vs. "tables."

The thing is that tables are useful, but their intention is to display tabular data rather than to control page layout. Don't refrain from using tables, just don't use them for layout. Or do, if you accept the consequences (sometimes slower load time, poor automatic sizing).

Remember, CSS and tables actually belong together:

Tables

/rant

[Narasinha]

Originally Posted by Dinghus

Think of how many times you go to a site that is pure CSS and when it first opens things are moving all over the page. Horrible.

This is not an actual problem with the pages, but with the browsers. There is a delay time that the browser uses between its retrieval of content from the web server and display of that content. If the delay time is very small, or the connection to the browser is slow, then you will witness this "unstyled flash". A bug in IE does this all the time, regardless of the delay time. Pages using tables for layout are also prone to this problem.

Personally, I try my best to be compliant with the standards. I use XHTML 1.0 Strict for the content, and CSS2 for the presentation. Let's not forget style sheets for a variety of display media. You can always specify different style sheets for print and handheld media, among others.

Speed makes a great point about using conditional comments in IE for a way around the various IE CSS problems without using hacks of various types. I build sites while testing in Firefox and Opera, then fix the IE problems that always arise.

Dan

[TheBrownRecluse]

WOW guys, thank yo for the response. I really appreciate it.