| One thing that I have learned in over a decade | | | | rows all mixed together with textual content and |
| developing web sites is that the 'Net is continually | | | | graphics. With a clean, CSS-based layout you can |
| changing, and to keep up you need to change with it. | | | | create pages that are easily understood by looking at |
| One of the more recent developments in web design | | | | the source, making them easier to understand, |
| is the use of CSS and semantic markup. CSS and | | | | maintain, and update. Look at the source of my |
| semantic web design has several benefits: clarity in | | | | company site and then look at the source code of |
| code, browser and other web-enabled devices | | | | this site that uses a tables based layout: Big |
| compatibility, seperation of content and presentation, | | | | difference, huh? |
| smaller burden on bandwith, and better visibility to | | | | If you have a site with high traffic, you can |
| search engines. | | | | significantly reduce the amount of bandwdth used by |
| Back in the day, we designed sites with tables and | | | | transitioning from a table-based site to a CSS-based |
| hacked those tables into doing things that they were | | | | layout. If a visitor to your site doesn't have to load all |
| never meant to do. The table tag was designed to | | | | of the code needed to render those tables and |
| display tabular data, not as a way to render the | | | | spacer gifs, you are transmiting less data. |
| layout of a website. Unfortunately, a better | | | | CSS also offers search engine optimization benefits |
| alternative did not exist, so we used tables. This | | | | over tables. If you have a tables based business site |
| made for inefficient, slow loading sites with code that | | | | that relys on Internet traffic to turn a profit or aquire |
| was very hard to read and maintain. defines sematic | | | | new clients you will see real advantages by switching |
| markup like this: | | | | to CSS. When a search engine spiders your |
| Sematic pages "supply information for Web search | | | | tables-based site, they retrieve a large amount of |
| engines using web crawlers. This could be | | | | content that has nothing to do with you business. |
| machine-readable information about the | | | | When search engines spiders a clean CSS-based site, |
| human-readable content of the document (such as | | | | the majority of content retrieved will be textual |
| the creator, title, description, etc., of the document) | | | | content that describes your business. The ratio of |
| or it could be purely metadata representing a set of | | | | content-to-code is higher with CSS-based layouts. |
| facts (such as resources and services elsewhere in | | | | We've all seen search engine descriptions that don't |
| the site). (Note that anything that can be identified | | | | make any sense; that's because search engine |
| with a Uniform Resource Identifier (URI) can be | | | | spiders use a top down method for retrieving |
| described, so the semantic web can reason about | | | | information. Whatever is topmost in your document, |
| people, places, ideas, cats etc.)" | | | | the search engines are going to think is the most |
| These days, hip designers and developers use CSS | | | | important part of the document, and therefore |
| extensively to create beautiful, fully standards | | | | should be used as the description. Since we seperate |
| compliant sites. CSS-based layout allows us to | | | | content and presentation with CSS, we can put the |
| develop sites that will degrade effectively--that is | | | | most important information at the top of a |
| that they will be viewable on all types of devices | | | | document no matter where it is actually displayed on |
| such as PDA's, cell phones, T.V.'s--and will work | | | | the page. Try that with tables! |
| correctly on devices that don't even exist yet as | | | | I hope this article gives you an overview of why it is |
| long as they are standards compliant. | | | | important to transition from your current |
| Most importantly, developing sites with CSS allows us | | | | tables-based layout to a fully valid CSS |
| to effectively separate content and presentation. | | | | implementation. If you don't have a web site, but are |
| Have you ever looked at the source code of HTML | | | | planning on launching one in the near future, make |
| pages that were created with a table-based layout | | | | sure you tell your developers you want a CSS-based |
| and wondered "what the heck is going on here?" You | | | | implementation. |
| see lots of opening and closing of tables and table | | | | |