The Importance of Good CSS (meaning ‘table-less’ CSS)
First off, some of you may be wondering what is CSS, and why does it need to be ‘table-less’.
CSS is short for Cascading Style Sheets, but to better explain what CSS is, lets start by breaking down what makes up any single page of a website. There are 3 basic components of any HTML website. 1. the Content, 2. the Presentation, 3. the Behavior. The Content layer is exactly what it titled, it’s the content that the end-user sees – all of the copy that you have carefully written in order for the end-user to know exactly what you want them to know through your web presence. In programming terms, this is the HTML. The Presentation is HOW the end-user sees your content; the fonts, the colors, the layout. Anything that has to do with the formatting of your website for the end-user experience is part of Presentation component. In programming terms, this is the CSS. The Behavior component controls the actions that occur on your site, it is the scripting behind the site. For a programmer, this can be javascript, php, or another language.
So now that you know about the components of a site, let’s talk more about how good CSS helps your site not only from a design perspective, but also from an SEO perspective. Take a quick look over at CSS Zen Garden. In my opinion, and that of many others, this is pretty much the Holy Grail of CSS website design. “Why?”, you ask. Click on any of the links on the right-hand column, and you will see the same page Content, but you will see it with a different Presentation. The thing to note about this is that the actual HTML of everyone one of those pages is exactly the same, the only thing that changes is the CSS file that controls the look of the site. For one page, this is not that big of a deal, but when the entire site is done properly this way any designer can come in, and alter just one CSS file, and those design changes will “cascade” down to reflect that “style” on every other page of the website controlled by that CSS “sheet”. That means that even though your site was initially designed one way, you can easily have that design modified in the future to have any new look that you choose without having to have someone change what can literally be 100 pages.
That’s pretty impressive, and important if you like saving money on your web design bill.
“But what about the ‘table-less’ part?” you might be asking. Tables are an old way of laying out websites before CSS became prevalent. Developers would embed tables within tables within tables – what is known as nesting them – in order to achieve the desired layout. One of the problems with this is that when making changes to a site, if you miscalculate by one cell in any row or column, the entire design can be thrown off. Also, to change the design of the site usually requires re-writing every page individually because there is very little chance that your old design and your new design are going to have the exact same table layout. So the increase in programming time can greatly effect your web development budget. More importantly, nested tables can also affect your SEO (Search Engine Optimization) due to all of the unnecessary code contained directly within your HTML file (CSS code is linked via a single line of code).
So how do you ensure your designer is giving you good (table-less) CSS? Well, firstly, you should ask for it and also ask for examples of their work that demonstrate that they have the ability to code that way. Secondly, if you do not wish to pay a third party web-design “auditor” a minimal fee to inspect the code and verify that it meets todays CSS standards, you can at least inspect the code yourself (if you open any .html file in NotePad or WordPad you will see the underlying code) and look for “tags” in the code such as “<table>”, “<tr>”, “<td>”, “</table>”, “</tr>” or “</td>”. If you see any of these tags in the code, you know you’re not getting table-less code like you asked…
Hopefully you enjoyed this bit of information on CSS, and it will help you prepare for your next web development venture!
Tags: CSS, design, development, table-less, web, web design, web development