CSS Hype

[GNU]

Hello all,

After reading a lot about the virtues of CSS eradicating issues of browser compatability associated with HTML, and listening to an associate rant and rave about standards compliance, clean CSS, tables being old hat... I thought I would try and build a site using only CSS.

I wanted a simple site with a header, tabs, content section and footer.
I wanted to add images to round the corners off and leave some whitespace at the bottom.

After a lot of faffing I got something that resembled what I wanted, but found it difficult and un-predicatble to work with.

I never got the white space added to the bottom as I was positioning corner images at 100% (vertical). If I changed this it lead to other problems. I could have added whitespace to the border image, but that would defeat the object of the exercise.

After spending a lot of time messing with different elements I started to read more and more 'hacks for browser x' 'work around's for browser y'. I re-visited the site of the associate i mentioned earlier, and saw browser hacks in his site also.

At that point I completely lost interest and came to the conclusion that the CSS revolution is all hype. It is no easier to build a browser compatible site with CSS than HTML. CSS is a valuable tool, but trying to re-invent the wheel with it is a waste of time, IMO.

If anyone can point me to a PURE CSS site (no tables, browser hacks, images used for spacing etc) that graphically rivals a good HTML site I would be very interested to see it.

 

[DuaneJackson]

Hi Gnu,

I'm afraid I don't have the answer to your specific questions but I can empathise with how you're feeling right now.

I was a die-hard table fan for layouts, and for frustrated with the time it took to do the same thing when using CSS and divs instead.

Do persevere with it. With time you'll find that you can turn out CSS sites just as quick if not quicker than with tables and they are so much easier to mantain.

www.kashflow.co.uk is all done in CSS although, as with most sites, I've had to implement a few hacks.

 

[GNU]

Hi Gnu,

I'm afraid I don't have the answer to your specific questions but I can empathise with how you're feeling right now.

I was a die-hard table fan for layouts, and for frustrated with the time it took to do the same thing when using CSS and divs instead.

Do persevere with it. With time you'll find that you can turn out CSS sites just as quick if not quicker than with tables and they are so much easier to mantain.

www.kashflow.co.uk is all done in CSS although, as with most sites, I've had to implement a few hacks.

Hi Duane,

Thanks for the reply, the question Im really asking is what is the point?

Where is the payback for time invested unless you overcome compatibility issues I see no benefit.

Are CSS sites really that much easier to maintain than a tabled site (using stylesheets for formatting etc)??

 

[creospace]

The payback is when you come to update the site months after not touching it.

I echo Duanes comments really.

 

[DuaneJackson]

They are easier to mantain. With the 'old' method, sure - you can update styling, etc - but you can't easily reposition elements of the page or make some bigger sylistic changes.

The other benefit (in my eyes anyway - others dispute it) is that you have a better text to code ratio which results in better serps.

 

[andrew1810]

I agree with what has been said above, I used to use tables for my sites (still do for a couple), but all new ones are done in CSS and I find it much quicker to build them.

I was putting together some web templates over the weekend and its amazing how quickly the designs can be altered once the first one is done. I managed 15 one page templates in 2 days.

If you need a hand, just shout.

Andrew

 

[DavidHorn]

The upsides are numerous:

- easier updates (say all your links are coloured red, but your client wants them all coloured blue instead. Well, change one reference in your CSS and the changes are site wide)

- lower load on your servers - style sheets are loaded by the browser once, and then cached ... so, all that presentational markup (tables, etc.) that you have in your code in the old way of doing things, is redundant ... strip it out to clean (X)HTML, and all the presentation can be stored in CSS. When your site is hundreds or thousands of pages, loading a CSS file once can save you a fortune vs. loading presentational pages with each page view.

- for some great creative examples of what can be done with CSS, check out www.csszengarden.com - every one of the sites in this show case uses *identical* (X)HTML - only the CSS varies, so you can really get an idea for the flexibility.

- as Duane said, you have a better text:code ratio, which can be helpful to search engines

- there are a ton of great resources to help you get started:

- an excellent place to start is this, Westciv's CSS guide: www.ticktockdesign.com/short/css/guide/

- for gorgeous looking sites designed purely with CSS checkout any one of these galleries:

- www.cssbeauty.com/gallery/
- www.cssvault.com
- www.cssmania.com

- my own site is pure css too!

Good luck - it's well worth i!

David

 

[Coding Monkey]

- www.cssmania.com

Absolutely. It's a great website

The problem with learning any new language is that it's going to be difficult. And the browser wars are nothing compared to what they used to be, as with some minor hacks, almost everything will work in cross platform. It just takes time to learn it the right way. The more accessible you can make a website, the more people can use it, and the more money you can make.

Although it is worth using the WC3 validator to verify the semantics, it is not a good way of determing whether it's using the correct code for specific uses, and this is what you'll learn as you go along in web standards, usability and accessibility.

 

[GNU]

Thanks for the replies,

I understand the benefits of CSS in positioning different elements, but can you not do this using div tags within containing tables?

Its when I try and erradicate all tables, using only CSS that things start to get very awkward.

I have rendered a site similar to the one Duane posted a link to, but when trying to add corner images, adding tabs with images etc. it gets increasingly messy.

It is the obsession with using only CSS that seems a bit ott, when you can create a couple of containing table's to take away a lot of the pain, but still lever the benefit of CSS within (and to format) those tables.

Also, dont templates resolve a lot of the issues around design changes??

After a bit of googling it appears this debate has been raging for a few years. I dont think Ill be spending hours trying to de-bug 100% CSS for the sake of eliminating one or two containers.

 

[Richard Conyard]

It is an old battle, and it's one that CSS pretty much won.

I can understand the frustration, especially with box model differences, but the separation of presentation and content is worth it.

 

[Coding Monkey]

There are still some bugs including float divs and the stretching of them where tables are, currently, the only option to have them work.

But tables are designed for tables. Use them for tabular data, and don't believe they're terrible things. But tables were erroneously used in the first place for web design, because there was a complete lack of standards, whereas now the standards are there and constantly improving.

 

[JustOneUK]

CSS sucks big time. It should be used for styling pages only and not for replacing tables.
Then of course you move onto xhtml validation, which sucks just as much.

This site uses tables... and it works just fine.

You might notice that all the webdesigners that rave about CSS have basically two colours and the most bland/basic designs you have ever seen in your life.

(..........gauntlet well and truly thrown)

James.

 

[Richard Conyard]

• http://www.redantdesign.com
• http://cip.kentconnects.com/
• http://www.dataintegration.com/
• http://www.careerworkshop.co.uk/

A few there, consider the gauntlet picked up

 

[DuaneJackson]

Has anyone seen the lid for this can of worms? : )

<insert debate below as copied from thousands of forums throughout the 'net>

 

[DavidHorn]

James - saying 'X sucks' is what my 3 year old calls an argument! Glad that you've given it your full consideration!

Sites using tables work just fine, yes. It's not a case of 'a website will work if you do this, and it won't work if you do that'.

One of the purposes for CSS is to separate code used for presentation from code used for content. Tables are presentational and - if you care about the way things are coded - should not be included within your code (except, as Tom points out, for tabular data). It could also be argued that forums are tabular data and that using tables for them is fine! (It doesn't mean that table based forums cannot be (X)HTML compliant - www.getvanilla.com is XHTML compliant.

If you don't care about the way things are coded, and are happy inflicting slower load times on people, happy making changes to each page that could be made centrally, and generally coding things in a heavy handed way, then by all means go on using tables. And good luck to you.

David

 

[DuaneJackson]

One of the purposes for CSS is to separate code used for presentation from code used for content.

TBH, that's the main appeal for me. I'm used to seperating business logic, data and presentation, etc for programming so it makes sense to do the same for web pages

 

[Richard Conyard]

Duane ditto: DB - Stored Procs - COM+ - XSLT - XHTML - JS and CSS ... everything separated out into it's own little compartment making maintenance etc. a doddle.

 

[DavidHorn]

Absolutely ... presentation (CSS), behaviour (JS et al), and content (XHTML) - the holy trinity of easily maintainable websites!

 

[GNU]

> It is an old battle, and it's one that CSS pretty much won.

Just looked at Amazon, Google and Yahoo, all use CSS, all retain some <table> tags also.

>I can understand the frustration, especially with box model differences, but >the separation of presentation and content is worth it.

Its no more frustrating than learning HTML, or programming languages, it is the removal of ALL <table> tags that I am really struggling to see the benefit of. The separation of presentation and content can still largely be achieved with minimal use of tables.

 

[Richard Conyard]

There is not requirement to remove all table elements. After all what would you put tabular data into? The move for CSS presentation is not about getting rid of table elements it's about getting rid of table elements for the layout of pages i.e. non-tabular data.

 

[GNU]

making changes to each page that could be made centrally, and generally coding things in a heavy handed way, then by all means go on using tables. And good luck to you.
David

But you can use templates to centrally control layout.
Im not talking about ditching CSS, but really cannot see the benefit in forcing CSS to work with hack after hack just so you can say its pure CSS without any tables, when, with minimal use of tables, and CSS you can achieve the same result in an easier more reliable way.

As for loading times, for small sites it makes little difference as the downloaded CSS document is not re-used as much as those from larger sites.

 

[JustOneUK]

Has anyone seen the lid for this can of worms? : )

<insert debate below as copied from thousands of forums throughout the 'net>

hehe..

Richard, I have seen your sites before and when i saw you were logged in I thought "uh-oh"
You use graphics exceptionally well on your sites, they are very nice.

You also seem to link to 6 style sheets and still have space for a little "on the page" too......

<link href="/_css/styles.css" rel="stylesheet" type="text/css" />
<link href="/_css/oldstyles.css" rel="stylesheet" type="text/css" />
<link href="/_css/wysiwyg.css" rel="stylesheet" type="text/css" />
<link href="/_css/templates.css" rel="stylesheet" type="text/css" />
<link href="/_css/docdownloads.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" media="print" href="/_css/print.css" />
<link rel="shortcut icon" href="/favicon.ico" />

<!-- get random image at top -->
<style type="text/css">
#colourblocks {
background-color: #0090C2;
}
</style>

.... cool

 

[DavidHorn]

Richard - yes, you can use templates to lock out content. But, that's not separating content from presentation, that's just helping with the update issue. When I've worked with templates they quickly get out of hand on complex sites - although if that's what you choose to do for smaller sites, then, again, fine - I don't mind at all!

You shouldn't have to use 'hack after hack' - even on the most complex sites I've designed, there's maybe one or two hacks. That's it.

I'm not going to try and convince you to use CSS only ... I'm not an evangelist like that, but if you are beginning to see some benefit to CSS then I really do recommend that you take a look at a couple of books:

- http://tinyurl.com/zu39f
- http://tinyurl.com/l4ygy
- www.csswebdevelopment.com
- http://www.sitepoint.com/books/html1/

good luck!

 

[Richard Conyard]

To be fair I'm involved in the development, but there was enough of a dig to get our designers to move over to CSS presentation I had to stand up for them now they have

 

[nsdesign]

I'm amazed at a few of the attitudes to CSS (and accessible XHTML) based websites... none moreso by the "css sucks" comment...

If ever you needed inspiration about some superb CSS designs, wave a look at w3csites.com

And if you want proof regarding the business aspects of an "accessible" redesign over the more traditional (in-accessible) tables based site...


Here's a few facts recently confirmed by David Wilton, Marketing Manager at Legal and General.


Concerned with the risk of litigation under the DDA laws, Legal and General re-wrote their websites to be more accessible.


As a direct result they noted:


General Benefits:

• 30% increase in natural search-engine traffic;
• 75% reduction in page loading time;
• Effort in site maintenance reduced from an average of 5 days per job to 0.5 days per job.
• A "significant improvement" in Google rankings under al their "target keywords"

Financial Benefits:

• Saving of £200k per annum on site maintenance;
• Increase of 95% in site visitors getting a quote;
• Increase of 90% in life insurance sales online;
• 100% return on investment in significantly less than 12 months.

 

[DeanD]

Hi guys

One of the major reasons I began experimenting with css was the benefits it offers to search engine optimisation. It's important when optimising a site to place keyphrase rich information as close to the top of the page as possible, as search engine robots believe the most important information will always be stated within the first paragraph or so.

It can be very hard to achieve this when using tables, as other elements end up being read by the spiders before the keyphrase rich text. By using css, you can place text anywhere on the page within absolute divs, and position it differently within the html code. This ensures that the se spiders place importance on the bits you want them to.

The best way to see this is by using a lynx browser that only displays text, and you'll see how your page will be interpreted by a search engine spider.

Dean