The Benefits of CSS Over Table Based Design


Many sites are still yet to embrace the wonders of CSS, and instead opt for the older, outdated table based layout. Why should you make the transition from table based design to CSS? Almond Resorts, a company which specialises in all-inclusive resorts and hotels in Barbados and St Lucia have just made that transition, so what was done and why?

Spencer undertook the task of removing the cluttered table based code, and the site can now be seen sporting its more slender CSS based code.

As a result, the site has seen a code reduction of around 1/5th of what it was before, the code is fully semantic, something search engines love, and the text to code ratio is now around 40-50% - before this was around 11%.

The reduction of code ensures pages load promptly, keeping users onsite. The drastically reduced amounts of code also means less bandwidth is used and less code for search spiders to crawl through.

The new code is valid XHTML Strict, and AAA compliant - ensuring the site is fully accessible to all users, as well as helping to make sure the site renders consistently in different browsers, operating systems and platforms.

The navigation was converted from being JavaScript based to CSS/XHTML unordered lists. A huge improvement, particularly as search spiders cannot understand JavaScript based code, an improvement that has greatly strengthened the internal link structure of the entire site.

Redundant pages have been removed, pages and files have been renamed to clean search friendly formats, using keywords where necessary. The URLs have been rewritten to a clean 'hackable' directory structure, greatly enhancing the site from both a search and usability perspective - allowing for easier navigation and memorable URLs.

The content has also been improved - image alt tags have been written throughout, rotating banners in the right column and header mast have been implemented, JavaScript flash detection now displays alternative content should the user not have flash installed and the flash photo library is now CSS based with title and alt tags.

The sitemap hierarchy has also been updated, removing links to redundant pages that were previously removed.

Static rewrite rules have been employed to redirect old pages to new and the footer has been extended and expanded to incorporate a comprehensive range of base links.

All this has helped to ensure the site is in the best condition possible moving forward. CSS based code means a much lighter, faster loading site, a benefit for both users and search engines alike, something that surely must always be a priority to enable a site to reach it's full potential?


Share this post

comments powered by Disqus