CSS3 – a big storm is coming

A big storm is coming, and it hopefully will blow away a lot of things that are wrong with web design. While the current CSS standard offered tremendous steps away from traditional print design, with CSS3 media queries and multi-column layouts it will be a whole new ballgame. The possibilies we have now hopefully change the way we approach website design like few things we’ve seen up until now.

“When it comes to the future, there are three kinds of people: those who let it happen, those who make it happen, and those who wonder what happened.” – John M. Richardson, Jr.

My personal hope is that it finally separates the wheat from the chaff. For many years designers originating from print flooded the web niche because the money’s better and print is basically a fraction of what it once was. With these floods came many who clearly have no real understanding of this new web medium they should be designing for.

The web is an informational medium. It is not a visual medium. Designing for the web is a little more interesting and challenging. People click things, they search, they skim. Designing for the web means designing for web behavior, which is very different than with static print media. Concepts like Usability, User-Centered Design and Accessibility have to be grasped and incorporated into a web designer’s thinking.

What separates good web designers from pretend-to-be web designers will be if they understand and learn how to incorporate what CSS3 enables them to do into their design process. If they don’t they will be left behind.

Browser requirements

CSS3 media queries are supported by the following browser versions, with the release of the new Firefox and Opera versions sometime soon it should be a technique you can safely use.

• Safari 4
• Mozilla 3.5
• Opera 10

The SPOT principle for web designers

The Single Point of Truth (SPOT) is a principle originating in data warehousing management. Whenever you have redundant data you have to make sure that there is a default state which is applicable when all other cases fail.

SPOT is often associated with DRY, in my opinion however it means something completely different. DRY tries to avoid repetition and redundancy, SPOT is about how to handle redundancy.

Especially with the techniues presented in this article it should be mandatory to check the CSS applied if there always is this Single Point of Truth. What happens if something is not explicitely defined? By following SPOT, you minimize faults by defining styles as globally as possible and try to account for every imaginable scenario that might happen.

CSS3 media queries

Telling the future by looking at the past assumes that conditions remain constant. This is like driving a car by looking in the rearview mirror. – Herb Brody

Using media queries basically you can change stylesheets based on for instance the width and height of the user’s browser viewport. In a broader sense, this means as the spec puts it: “by using Media Queries, presentations can be tailored to a specific range of output devices without changing the content itself.” While the majority of designers, most of whom come from print are still stuck with fixed layouts and argue them to death in fear of losing control over their precious design, this CSS3 feature completely changes the game for designing for the web.

The syntax builds on the existing @media syntax. You declare the type of media that you want the rules to apply to and then any extra query conditions that must be met.

Example of how to use CSS3 media queries. The first line ensures that SPOT is in effect of all other media queries fail to apply.

.grid  {float: left; width: 50%; padding: 1% 1% 0 0; border-top: 3px solid #ccc; overflow: hidden}
 
@media all and (max-width: 639px) {
	.grid  {width: 99%;}
}
@media all and (min-width: 640px) {
	.grid  {width: 49%;}
}
@media all and (min-width: 800px) {
	.grid {width: 32%;}
}
@media all and (min-width: 1000px) {
	.grid {width: 23%;}
}
@media all and (min-width: 1200px) {
	.grid {width: 19%;}
}

CSS3 multi-column layouts

Example of a multicolumn layout

#content {
    -webkit-column-count : 4;
    -webkit-column-gap : 20px;
    -moz-column-count : 4;
    -moz-column-gap : 20px;
    }

Combined with CSS3 media queries this can be much more powerful. What this example does is to output everything in the div with the ID #contentwrapper in 2 columns if the viewport is greater than 1200px, if the viewport is greater than 1600px everything will be in 3 columns. Again the first line is the default presentation.

#contentwrapper {width: 90%; margin: 0 auto}
@media all and (min-width: 1200px) {
	#contentwrapper  {
	-webkit-column-count : 2;
	-webkit-column-gap : 20px;
	-moz-column-count : 2;
	-moz-column-gap : 20px;
	}
}
@media all and (min-width: 1600px) {
	#contentwrapper  {
	-webkit-column-count : 3;
        -webkit-column-gap : 20px;
        -moz-column-count : 3;
        -moz-column-gap : 20px;
	}
}

Welcome to the future of web design!

References

CSS Color Module Level 3: W3C Working Draft

CSS3 module: Multi-column layout: W3C Working Draft

Media Queries: W3C Candidate Recommendation

Tags: css