132 replies to this topic

[Jill]

I was showing our lead designer the CSSZenGarden site today, so she could see what was possible with an all CSS design. She found it interesting, and was going to look through it further, but she couldn't help but wonder what the benefits of that type of design were.

I remember having that same discussion years ago with a designer friend who was (and still is) big on CSS, but I really couldn't remember all her arguments off hand.

How about we start a list here of the benefits of an all CSS site?

The main one that I know of is that you can pour the same content into various things, but I couldn't really remember what sorts of things you might want to do that with!

Any CSS gurus here?

[Shane]

The biggest benefit to me is that it allows me to move almost all display code out of my HTML, leaving only straight content. It makes it a lot easier to make changes to the page and users only have to download display code once (in the linked CSS file).

[qwerty]

It's great for clients who update their own pages or create new ones. A paragraph is just a paragraph, a list is a list. You don't have to worry about nested font tags, throwing extra formatting into a tag when it doesn't look the way you expect it to, or anything like that.

They basically just enter the content and the CSS does the rest for them, so you've got consistency across the site, and if they decide they want to make changes to the look of the site, a change in the CSS changes all of the pages in the same way.

A foolish consistency may be the hobgoblin of small minds, but not all consistency is foolish

[leadegroot]

The presentation is separated from the content, so both are easier to tweak without ruining the other.
The lower cost of development and maintenance for the same reason

[Matt B]

It renders the content from one file and all of the mark-up can be kept in another, external file.

If you go to the CSS Zen garden Site in Firefox, and then disable the CSS (using the web developer toolbar), you can then view the content without the mark-up, and in a "search friendly" way. Or, just view the Sample HTML file.

The structure of content enables viewing regardless of access device:
-screen reader
-braille display
-PDA
-BlackBerry
-web-enabled phone
-search engine
All can view the content without the limitations of the design. Or, a stylesheet can be created to suit each display type.

The additional plus is page weight. A CSS page can skinny down up to 60% compared to a traditional HTML mark-up page. This is harder to quantify, but pages load faster and less bandwidth is used.

[lyn]

As the Zen Garden demonstrates, you can dramatically change the look and layout of the site without reformatting. Large page elements like navigation bars and subnavs, sidebar stories, photos, contact lists, shopping lists, etc. can all be "containerized" and moved to different locations on the screen by changing only the CSS file.

This can facilititate changes in branding and graphic standards as well as allowing different looks to reflect seasonal themes and special events or to test out the effect of different page layouts on clickthroughs and conversions.

Separating the content from the presentation also means that your site can adapt easily as browsers and standards evolve.

L.

[projectphp]

Biggest benefit: the wow factor. Other geeks get all excited and gooey.

Other than that, the main benefits are debatable, especially as one gets more and more CSS obsessed, and pushes further and further away from "old skool" design.

[Scottie]

Now for the other side of the coin...

CSS-rendered sites are tricky to develop in a way that will display consistently across all browsers and resolutions. I have an all-css site that just drives me nuts because things overlap at lower resolutions and look oddly spread-out at higher ones.

The Zen garden example, while very versatile, does not display a site with lots of content that needs to be precisely organized. Yes, they can work, but more often than not they return unexpected results at different res.

Unless you are just bound and determined to have the cool factor of an all-CSS layout, I find a combination of tables and CSS gives the most consistent display while removing a lot of the redundant code.

[leadegroot]

2 thoughts on the other side of the coin:
- I can't remember who it was (darn it) but a web-standards type blog a year or so ago had a discussion of 'have you ever *really* redone a site just by changing the css? The consensus seemed to be that, no, its not valid to say 'we can redo the site without touching the css!' because the html always needs tweaking, if not rebuilding completely.
- lots of people feel they can't get a consistent layout in css, and its 'too hard' and table design is 'easy'. Its important to bear in mind that no one said it was 'free' - there is a learning curve, and until you have ascended that mountain you won't be happy with the results. But, unless you have to support NN4 or worse, you poor sod, a cross-browser css-based layout is quite possible, with experience. The argument of 'i could so this in table-based design' really means 'I'm unhappy to have to redo all the training I did to be a master of table-based design'. Tabled was never easy, either.

Hope thats on topic.

[Matt B]

Unless you are just bound and determined to have the cool factor of an all-CSS layout, I find a combination of tables and CSS gives the most consistent display while removing a lot of the redundant code.

. . . Which I think some purists would have a heart attack to hear, but the combo is still a valid use of code and is standards-compliant (with proper table mark-up and cell/column identification).

[zurita77]

As with any tool, use depends on the area of focus. The right tool for the right job. It's always going to take a combination of tools to complete the job because no tool alone can accomplish everything.

[Tom Philo]

CSS allows you to build a more modular web site - if you think it through and think of making it modular before you start to build the CSS file!

If you section off a page into the basic design components - then code the CSS to allow use or non-use of each section to dynamiclly flow into the void if a component's area is not used, then converting the look of a site becomes much easier.

[meta]

A site created with CSS is printer friendly - you can have all sorts of fancy elements display on the screen, while the printed pages will be simple and readable, without extra steps to create separate versions of the content for printing.

[search_guru]

My site is completely CSS driven. I am using Mambo. I can change looks and feel in a jiffy. You can check out the site from my signature.

I am no CSS guru, but I like CSS+CMS driven sites, that can pour content into any other shell. They are very low maintenance..

I have started another topic on CMS/Portals that is related to CSS driven sites. I am currently doing research on what CMS/portals are SEO/Search Marketing friendly-Link to topic. Would love to hear members thoughts on that topic..

[projectphp]

My (extended)

I love nothing better than an excellent CSS site. They are truly excellent and incredibly useful. I just couldn't be arsed creating one. Simply too much hassle.

However, if I get one ready made, they are an absolute joy to work with, as long as I don't want to make major changes to layout and design. So, the question really is what is important: speed to market or ease of updating after launch.

That is for each person / project to decide, but usually, a few tables won't kill anyone!