How to develop in pure css like large sites
What is the best practice / methodology for making a web page compatible with the browser and exclusively in CSS, except of course the content. I notice that large sites like yahoo.com use CSS purely for layout, which renders content pretty well on handheld devices. Being that I have the ability to redesign external websites, I would like to include this method, but I don't know how. Note. I am using JSF, but standard HTML / CSS guidelines are also welcome.
a source to share
EvanK's suggestion of working with a CSS framework is a great idea, and I personally would recommend Compass , which in my opinion really is a new way to think about CSS and is generally very nifty. The plan is mentioned in a number of other posters. The compass actually uses a Blueprint (or another structure of your choice) and abstracts it even further, allowing you to dynamically generate new grid patterns. Basically, it gives you a more programmatic framework for working with Blueprint and SASS .
Before looking into the framework, however, it is important to focus on some fundamental principles. W3Schools is a good place to start, followed by some good design blogs like A List Apart .
In terms of minimizing cross-browser issues, CSS reset makes a difference, namely the Yahoo approach.
a source to share
I think it's a good first step for you to learn some kind of CSS structure. The purpose of such a framework - according to Wikipedia - is to "allow a simpler, more standardized web page style" that sounds exactly like what you ask.
As far as the CSS frameworks used, I myself cannot recommend anything.
a source to share
You need to learn how to use CSS. There are many tutorials on the internet.
good one here: http://www.barelyfitz.com/screencast/html-training/css/positioning/
a source to share
I recommend using the CSS framework to get started. You will get a great grid structure for your pages (like using big names) and quickly speed up your development time once you get used to the framework.
Since you mentioned yahoo, I recommend their YUI Grids CSS for layout.
I prefer blueprintcss because it has a reset style for the default browser styles and it has a printable stylesheet as well.
a source to share
In contrast, to implement a cross-browser compatible site, I recommend that you first target a standards-compliant browser (such as Firefox) and then expand support for less standardized browsers (such as IE6) after that.
My experience is that it is very difficult (almost impossible) to initially target a non-standard browser (like IE6) and then make the firewall compatible.
a source to share
There really isn't a professional secret sauce for making clean CSS layouts. There are many ways to lay out a website in CSS, and all it really needs is a deep understanding of the technology.
Some people have success with frames. I can't say if these are really a good idea, but one advantage is that they abstract away some of the granular details of building a CSS site.
But you should study it anyway. There are really two sites that I suggest to anyone who really wants to sit down and learn how CSS works:
SitePoint CSS Reference: Concepts - Probably the most comprehensive explanation of how CSS works in an easy to read tutorial
W3 CSS 2.1 Spec - Difficult to read, but it does explain how things work.
a source to share
Learn as much as you can about CSS. A lot of the time people get frustrated with CSS layouts because they don't understand all the ins and outs.
Pay attention to things like pattern matching for selectors - this will make a big difference in simplifying your markup.
Remember that tables can be used for tables. The table tag exists for a reason.
Very helpful resource: http://csswizardry.com/web-design+/
a source to share