Tableless website

[WDC]

Hi,

I am not sure but heard a lot about tableless websites. Are they better than those using tables

[Rod Abbotson]

I have just spent a whole lot of time redesigning my site without tables I noticed the following points..

1) The redesigned pages load 3 times faster than when they were in tables

2) I had more problems making it work equally well in Mozilla/Firefox IE6/7 but with some perseverance and tweaking manged to reach a compromise on how things were diplayed.

3) I had tried this 6 months previously with poor results and when back to designing in tables - now it all seems to work better, im sizing all my divs in pixels rather than percentages.

4) The above I had to be careful and view the results in different resolutions.

5) I still have a few problems with Mozilla Firefox in the way they display heading tags - leaving a lot more margin around the tags which results in pushing the content down and out of the division sometimes not dipslayed - if I make it work OK in Firefox then it looks silly in IE too many spaces! But as analytics reveals the majority of browsers to my site are still using IE

6) Redesign a page at a time using CSS and divs, pages with the same theme you can use classes etc. Try to make the page appear exactly as it did in tables, this is good coding practice and herlps you control the appearence and not the other way around!

7) Always check that it displays in the major browers OK before uploading the files, keep back ups of your old table pages until you are sure that the new ones work OK!


I came across an interesting problem a couple of days ago. I have a tip of the day with an external javascript file, one of tips was slighty longer than the rest and pushed all the divs out of alignment beneath where it appeared. As the page appeared OK the previous day, it puzzled me at first and I spent a while tweaking the CCS to no avail. When I reaslised what was happening I cut the tip shorter and the page went back to normal without any further altrerations.
Moral of that is dont panic if a page suddenely appears funny! Its usually something simple.
So if you have active content changing on a time basis check that each change will diplay properly!

9) I resisted rebuilding the site for a while as lots of top sites still seem to designed with tables but I decided to bite the bullet and start redesigning and am pleased with the results so far- it also makes my site easier to maintain due less coding on the html files and more in CSS.



OK hope some of that is useful to anyone who is in the same postion wity a website - meanwhile I have to get on do a weekly update for my site (already done the Monthly update!) plus I have at least another 150 or more pages to convert to "tableless" oh I left things that should be in tables - in tables, price lists etc. Start with all the parent pages and work down! Good Luck!

Anyone has any similar probs or fixes post here

Rod

[DaveSawers]

Rod seems to sum it all up admirably... It's a lot of work converting an existing site; for very little benefit.

For a new site design, then by all means embrace the CSS mantra as you are future proofing your site. It makes it easier to customize for mobile browsers and new trends.

[dreras]

Here are a few more advantages to tableless layouts:

Semantic content
Search engines can't read everything in tables and it becomes even worse if you have many nested tables, where most table layouts will become nested too deeply.

Tableless layouts will arrange all of your content in a nice semantic fashion that the search engines can read much easier.

Shorter Production Time
Tableless layouts can be modified on the fly, not like tables where you'll have to edit multiple places on each page

Read Jeffrey Zeldman's "Designing with Web Standards" for every possible reason about why you need to begin developing this way immediately. It will make your life easier.

Start small with hybrid layouts and work your way up.

[ran_dizolph]

Start small with hybrid layouts and work your way up.

That's how I did it. It's a big step to get off of the table teet...once you do though, you'll wonder why you didn't make the switch a long time ago.

[Rod Abbotson]

My sentiments entirely I find my websites much easier to maintain with tableless layouts, just use table for tabular info now. Much to the chagrin of local web designers here in Jordan! (But then again they are still into loads of flash with skip intros and annoying music as they think its cool! LOL)

The only problem I have had is that my site used to display well on a small screen (ie using Opera F11 to review) When in tables everything used to display nicely in a column - now it all displays but lots of stuff all squidged to the left (presumably as using float left a lot in the css).

Any ideas on that???

I am just starting on a new website which has a mobile professional audience target so this will be more impoortant on this new site - I dont really want to go back to tables to sort trhe problem!


Rod

[activeco]

Rod, have you experienced any change in serp's?

[dreras]

Rod,

One thing I would always make sure of is that in the top of your CSS file you zero EVERYTHING out. I add this little piece of code to every CSS document I have:

 ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input,label,div,dd,dt,dl,table,tr,td { margin:0; padding:0; }

This code makes sure that no matter what browser your using the margins and paddings will start at 0 so that you can set everything yourself.

Also when your using floats make sure that you clear them out at the bottom of the last float. This can cause a lot of headaches if you don't know to clear them.

[Rod Abbotson]

Rod, have you experienced any change in serp's?

Not really noticable at the moment as I am already changing lots of other things as well seem to be on the first page in most relevant searches but thats not too difficult as I have a niche market!

One thing I would always make sure of is that in the top of your CSS file you zero EVERYTHING out

Thanks Ill try that and see what happens!

[jboeckman]

I know I am a little late here but I think this article shows how powerful CSS can be on large scales:
Mike Davidson - Interview: The ESPN.com Redesign

That's right it saved ESPN 2 terabytes/day, wow!