How to design in pure css similar to the big sites

Question

What is the best practice/methodology for creating a web page that is browser compatible and purely in CSS, except for of course the content. I notice that big name websites like yahoo.com use CSS exclusively for layout, which renders the content pretty well in hand held devices. Being that I have an opportunity to redesign the external websites I would like to incorporate this method, but I do not know how to. Note: I am using JSF, but standard HTML/CSS advice is just as welcome.

Answer 1

I think a good first step for you is to look into using a CSS framework of some kind. The goal of such frameworks -- according to Wikipedia -- is to "allow for easier, more standards-compliant styling of a webpage", which sounds just like what you're asking.

As for which CSS frameworks to use, I can't recommend anything myself.

Answer 2

I was going to recommend the same.. here are the two I like and seem to be the most popular/supported

http://www.blueprintcss.org/

http://960.gs/

Answer 3

You need to learn how to use CSS. There's plenty of tutorials on the web.

here's a good one: http://www.barelyfitz.com/screencast/html-training/css/positioning/

Answer 4

I recommend using a CSS framework to get started. You'll get a great grid structure for your pages (like the big name pros use) and rapidly speed up your development time once you get used to a framework.

Because you mentioned yahoo, I recommend their YUI Grids CSS for layout.

I prefer the blueprintcss because it has a style reset for default browser styles, and it has a stylesheet for printing as well.

Answer 5

Learn as much as you can about CSS. A lot of the time when people get frustrated with CSS layouts it's because they don't understand all the ins and outs.

Pay attention to things like selector pattern matching - that will make a big difference in simplifying your markup.

Remember that it's okay to use tables for tabular data. The table tag is there for a reason.

A very helpful resource: http://csswizardry.com/web-design+/

Answer 6

EvanK's suggestion of working with a CSS framework is a great idea, and personally I would recommend Compass, which to my mind really represents a new way to think about CSS and is generally very elegant. Blueprint has been mentioned by a number of other posters. Compass actually uses Blueprint (or another framework of your choice) and abstracts it even further allowing you to dynamically generate new grid templates. Essentially it gives you a more programmatic framework for working with Blueprint and SASS.

Before you look into a framework however, getting your head around some fundamentals is essential. W3Schools is a good place to start, followed by some good design blogs like A List Apart.

In terms of minimising cross browser problems a CSS reset is essential, which is the approach Yahoo takes.

Answer 7

Frameworks aside, to implement a cross-browser compatible site, I recommend that you initially target a standards compliant browser (like Firefox) and then only after it is working, extend support to less standards-compliant browsers (like IE6).

My experience is that it is very difficult (nigh on impossible) to initially target a non-standard browser (like IE6) and then make the site cross-browser compatible.

Answer 8

There's really no secret professional sauce to making pure-CSS layouts works. There are MANY ways to lay out a site in CSS, and all it really takes is a solid understanding of the technology.

Some people have success with frameworks. I can't really say whether or not they're a good idea, but one benefit is that they abstract away some of the gritty details of building a CSS site.

But you should learn it anyway. There's really two sites I suggest to anyone that really wants to sit down and learn how CSS really works:

SitePoint CSS Reference: Concepts - Probably the most comprehensive explanation of how CSS works in an easy to read guide

W3 CSS 2.1 Spec - A tough read, but it really does explain how everything works