Web Design > Tips: CSS layout vs tables

over the holiday I saw a former colleague who's been working as a consultant. We were talking about the necessary skills web designers need to have to compete in today's market.

For instance, being able to write action script for FLASH may be a more valuable asset than writing JAVA script.

But on a broader level, as a web designer, we both agree on the importance of applying CSS (cascading style sheets) when developing a website. I appreciated her observance that websites are being built with fewer font or table tags. Using CSS for the navigation eliminating roll over images and the mouse over JAVA script. Instead a simple hover tag applied to the CSS creates the roll over color change.

I noticed this when I needed to revise a site that was built by an outsource design company. The navigation was a CSS layout using absolute positioning and hover to change the text or background.

So why use tables if a CSS layout is so darn cool. Well for one-reason tables can be center aligned to a web browser and CSS layouts can not. Another is when using dynamic text from a database, a table can adjust to the size needed to show the content.

When replacing tables with a CSS layout however, table, td and tr tags are replaced with a div tag resulting in less code for the browser to render.

Using CSS for font tags is a must. By adding a class name to a td tag it will eliminate the need for those repeating font tags. Plus you can change the look of an entire site by a single change to your CSS page.

Now, this is not a tutorial on how to build a CSS layout, you can get that from Dreamweaver's help or Google. Instead feel free to view the source code for Coolness which is completely done using CSS layout then 52nd St which uses tables and roll over images.

Tips and Tricks

Tips:
CSS layout vs tables - Not only is the content of "Coolness" and "52nd St" completely different, the development of these two sites have little in common. [more]

Includes - You can make changes to content, links or images on your site that appears in multible places by simply updating a single include file. [more]

CSS Navigation - Ideas and recommendations for your CSS navigation that might come in handy. [more]

Tricks:
Hide your sites email from the spam spiders - Some code to prevent search engine spam spiders from finding your web site contact email address(s). [more]

Create a FLASH slide show in seconds - Just like the one in my art gallery, first close you FLASH program and open PhotoShop CS. [more]


LOTS MORE COMING SOON..