CSS: The changing shape of web design
Your web designer may be raving about CSS. Alternatively, he might be raving against it. The fact is that web design in general is a fashion victim and right now there are two camps - those that say CSS is in and those that say CSS isnt worth the bother..
So what is it all about? The point of CSS is to separate content (the words and, to some degree, the images) on a website from the design, enabling the owner or web designer to change design reasonably quickly without having to re-enter all the content. As the importance of content becomes ever more desirable for good search engine rankings, content-driven sites are faced with a dilema when it comes to a revamp of the design. With the layout of the site embedded within the web page, changing the design means changing the entire structure of the web pages - all of them.
The 'traditional' (if there is such a thing) way of laying out a website uses tables and table cells to accurately position the text and graphics the way the designer wants them. This approach probably stems from a book Creating Killer Websites, published in the 90's. Almost overnight, professional designers were using tables to layout their sites.
However, the table-based approach poses a number of problems.
Numerous table cells
For a start, table-based layout creates dozens of empty cells, as a table is effectively a rectangular grid. These empty cells represent unused space and can cause layout problems as they can be displayed differently in different browsers. Incidentally, one of the problems for designers is that all browsers display sites differently - there are standards generated by the W3C, but no browser yet fully implements all of the recommendations.
Spacer graphics and bloat
In addition, to make elements in a table-based layout sit in the right place, numerous spacers must be used. What with these and the HTML structure to support tables within tables within tables, the file size for an individual web page bloats in size considerably. In addition, browsers build a web page one piece at a time. Therefore, each additional file that has to be obtained, each piece of the puzzle, means another trip to the server to get the next piece. All of these things add up to increased loading time - not so important if your visitors are using broadand, but a pain if they're on dial-up.
Accessibility
Ease of accessibilty to websites is becoming law around the world. It's a fact that screen readers, used by the sight-impaired, have trouble with tables. It's not the screen readers that are at fault - tables were designed to hold tables of data, not layout websites. In an ideal world, screen readers would prefer to read off the text from a website, but in table-based layout they have to try to interpret hundreds of HTML 'tags' that are actually describing the dimensions and positions of the tables.
CSS to the rescue?
CSS isnt actually that new, as W3C's recommendation date back several years. It's just that browser support was patchy at best for a long time. The letters stand for Cascading Style Sheets - which aptly describe what are and how they work.
What CSS does is use 'style sheets' - separate files that then link in to 'raw' HTML on the web page. The style sheets are nothing more than a set of rules that tell the web browser how to style certain elements of a page. As the majority of a web page is made of the same items - the header, the font, its colour and its size in the main body of the page and usually some kind of footer - if the same rules are applied to the entire website then one change to the style sheet affects the entire site. Now, instead of changing the font on 100 pages, one entry in the style sheet can have the same effect.
The style sheets have a set of rules, referred to as the Cascade, which determine which rules have precedence over another. therefore, if two rules come in to conflict, the one with higher precedence wins out. This is useful when, for example you want o say "make all my text grey, except for headings, which I want to be orange and a little larger" as in this website for example. The headings would be grey text normally, but because they are headings, the orange-and-larger rule takes precedence.
CSS Zen Garden
Changing to CSS layout isn't easy - there are still design obstacles to overcome and the problem of different browser interpretations still rears it's ugly head. Designers were reluctant to change, especially as they were comfortable with table-based design. The truth though, is that there are things you can do with CSS that you just can't do any other way.
The advance of CSS really took off with the launch of the CSS Zen Garden website and the book that followed it. Here at last were stunning, inspirational, web designs based solely on CSS. Amazingly, each of the hundreds of designs on display use the same HTML page - they accomplish the amazing array of different designs solely on the use of CSS. Here were designers at the cutting-edge of web deisgn showiing what can be acheived.
Screen reader friendly
Because all the information relating to the layout of the web design is now in a separate file (which the screen reader can choose to ignore) all that is left in the HTML file that makes up the web page, is the 'raw' text. Raw is in quotes as there are still a number of HTML tags in the file, but these are 'good' tags. Tags that say 'this is a new paragraph' and 'this is a heading' - screen readers generally like these.
IAS Solutions approach
As you've probably guessed, we're fans of CSS and use it to some degree in all our websites. For the moment, we take a balanced approach. We would love to create all our clients websites using CSS and 'accessible' web pages. Unfortunately, CSS based designs generally take longer to build as there are numerous problems with browser support that we have to work around. That having been said, a CSS-based site will be cheaper to maintain in the future. Where budget allows we build non-table sites using CSS. Where budget is constrained, we will generally use a 'traditional' approach.
However, as time marches on, CSS is becoming the professional standard. Soon, table-based layout will be a thing of the past.
Further reading:
If seperating content and design wasn't enough, we propose a third seperation - behaviour - although for different reasons. We touch on this in our article about AJAX.
