More and more customers are asking designers to create tableless designs. For the most part, the clients are not really sure why, but they have heard it around, or read it on design sites. So why no table? Isn't life easier with them?
It is important that we understand why tables for the web were created. For the most part, tables in the html world were created for well...organizing data. The problem was that we as designers found a clever way to arrange our designs back in the day, perfectly with tables. But that time has come and gone. In an era where stict html standards are being applied to most browsers, (and I say most, with the exception of IE who insist on making a designers life miserable), tables are a thing of the past and should be used for data. The other thing is that as search engines become more advanced, items in tables will be considered data (as in statistical type data), versus pertinent content.
The beauty of CSS is that, if done correctly, you could change your whole design layout with some minor modifications to one file versus page by page.
Granted, CSS is not perfect as it does not display exactly the same in all browser (i.e. IE(pun intended)), but it does make life a lot easier when it comes to re-designing a site. Plus, the search engines love css! They read all the h1, h2 codes, bold codes, etc, making it easy to distinguish what is important in your site without compromising design.
The key to tableless designs is seting up your page correctly. This is usually the biggest pitfall. I have a standard layout that I use for all my pages and then build from there.
For the most part, I start with a huge container that will hold all my content. Then, I nest in little section divs. Below is an example:
<div id="mainContent">
<div id="sideNav"></div>
<div id="contentText"></div>
<div id="bottomNav"></div>
</div>
<div id="footerInfo"></div>
mainContent will hold the bulk of my content except for the footer information (copyrights, disclaimer, privacy, etc..). In this case it contains my
side navigation, my
main content, and my
bottom text navigation or anything else I need along the bottom. Usually the side navigation is a graphical version of the bottom. I usually have 2 navigations for SEO purposes.
Below is an example of css I have used in the past:
#mainContent
{
width: 100%;
text-align: center;
background-color: white;
}
#contentText
{
width: 450px;
text-align: center;
color: #333333;
}
#sideNav
{
text-align:left;
width: 250px;
line-height: 2.3em;
font-size: 16px;
float: right;
color:#333333;
}
#bottomNav
{
clear: both;
color: gray;
}
#footerInfo
{
width: 99%;
color: gray;
font-size: 10px;
float: left;
clear: both;
padding: 2px 2px 5px 2px;
border-bottom: 1px solid #1e5075;
margin-bottom: 5px;
}
If you notice, the side navigation is floating but the contentText is not. (
See my post on divs.) This is so that the mainContent div will expand down to cover all of the space, otherwise the navigation div and the content div will be floating and the mainContent will not expand all the way to the bottom.
This is the basic layout. You can float the navigation left or right in this set up. Using this basic setup will help make your css designs a success.
Have a css question? Are you stumped on a design that won't display correctly on all browsers?
Email me! I'll try to help!
P.S. Feel free to look through the code on this page, it is all built in CSS!
Happy Designing,
Sol
Labels: cross browser design, css, designing with divs, successful css designs, tableless designs
