Creative web solutions

Why CSS Matters
by Mike Tekula

There's something you should know about if you're looking to hire a web designer - something important that you might not have otherwise considered. In most cases, as a matter of fact, it can be virtually invisible. Namely, it is the use of HTML tables for web page layouts.

Now, if you have any experience at all with web design you know that this topic is nothing new within the school of web design. Indeed, the argument goes several years back (and in the world of the internet this is a long time). If you know what I'm talking about, stop reading. This article is for those of you who don't know the difference between table-based and CSS-driven layouts.

In the early days of the internet web designers realized that by using the HTML <table> tag - which consists of rows and columns (think of a spreadsheet) - they could actually lay out their entire web pages. By using very width and height controls, nesting tables within tables (within tables within tables), removing all borders and padding, slicing their background images and pasting them into table cells web designers could exert precise control over their web page layouts without pulling their hair out dealing with cross-browser compatibility issues.

Meanwhile, and for quite some time, the W3C (World Wide Web Consortium) was recommending the use of what are called Cascading Style Sheets (CSS) to separate content from presentation. What this basically means is that none of the particulars of what the stuff on your pages looks like (font sizes, colors, background images, column widths, etc) should be contained in your source code. If you're a little foggy on what source code is go ahead and open your favorite web page. Now right mouse click anywhere on the page (not on an image) and select "view source." What you'll see is probably pretty alien to you - a bunch of <tags> and parameters, maybe some programming (which can look really strange) and lastly, and probably leastly, the content of the page.

CSS provides a means for minimizing the amount of source code that is taken up specifying where and how things should appear. A well-designed web site that utilizes CSS to the full have very different source code from a site using table-based layout. In short, it looks a lot cleaner. Table-based layouts create source code that is littered by level after level of nested table tags, while the best sites exhibit source code that is actually quite readable.

So why, you ask, does it matter whether tables or CSS are used to lay out your pages? Your web designer tells you tables saves him or her a lot of time and thereby saves you money. Or maybe they haven't said anything - in which case they could be using tables to get your full fee for less work. What does it matter what the source code looks like if we're really focused on user experience? The answer is pretty simple: Search Engine Optimization.

In case you aren't aware there is an enormous amount of competition on the internet. Publishing a web page to your domain, while it might fill you with some pride, is done probably hundreds of thousands of times every day. How are you going to be found among the millions of other websites out there? By search, of course - unless you don't care about being found or are willing to pay a lot of money for advertising.

Name your favorite search engine. Chances are it's Google, but perhaps not. What matters to search engines most is content, and what they see when they visit your page is not what it looks like in your favorite browser but the source code. The quicker they find relevant content in your source code, the higher you'll be ranked for the keywords your content is associated with. In other words, the cleaner the source code, the higher the rankings (all else being equal, of course). If the search engines bots or crawlers (that actually visits your website) have to get through hundreds of lines of code, be it for table-based layouts, JavaScript methods or whatever else, there's a good chance your rankings will suffer.

You don't have to be an expert on CSS to ensure your own web designer is working with it. Just ask a few questions. "Are we utilizing a CSS-driven layout?" "Are we up to W3C Standards?" "We're separating our content from our presentation, correct?" These are just ideas, but simply mentioning these kinds of issues with your web designer will at the very least make them think twice before taking short cuts that might increase their rate of pay but diminish the quality of your site.