Design trends discussion: The tableless approach
 

So lately I was working on quite a bunch of designs using a lot of really advance coding techniques, from advanced CSS to DHTML, XHTML, unobstrusive Javascript, a little AJAX, you name it. Basically, what most people calls Web2.0 (in an erroneous way). Anyway, seems like the "new thing" is tableless design, and therefore I've made quite a bunch of tableless designs. As a matter of fact, I can say I'm doing magic with CSS, tableless and even pseudo-image CSS (I mean replacing a lot of instances where images are used with plain code)

However... I came to the conclusion tableless is really cool... for non adult and/or corporate. And quite unusable when it comes to tours, esp reality tours. And I'll tell you why:
1- most end users (my customers) can't replace the tours' episodes or make changes unless I do it for them.
2- Tables are parsed equally by any browser (more or less, but in a 99%). Tableless design requires different sets of CSS for different browsers, and the most complex you go, the more sets and hacks you need to apply, esp when it comes to that crappy piece of shit known as Internet Exploiter which happens to be the most used browser :Oh crap
3- Due to 2- the code growths exponentially, making one of the advantages disappear (I'm talking about page size) and still having you wonder whether your design will look as expected in every broswer

Now, when we're talking about long style tours, corporate and such, the advantages of tableless and advanced CSS are awesome, all the control you can have with this makes it really worthy.

I saw somebody asking for tableless galleries a couple weeks ago, wsa wondering why since I can't see any real advantage for galleries or reality style tours or anything else that requires further modifications, unless you're code wise, of course.

So, in short, my proposed combo would be:

- corporate, long style tours, blogs, FPA and stuff: tableless
- reality style, galleries, designs with updated content: tables + CSS (even thru some PHP controlling)

what do you think from and end user and a designer/coder approach?

Discuss

I hate CSS and always use tables.

Just easier to do, and less code if done right. I don't buy the whole CSS loads faster, I think it's BS.

Good read man. I, myself am slowly trying to redesign my sites to use pure css when it comes to the layouts.
And about the end user for pure css designs I don't recommend that at all figuring most end users who would have to get someone else to make something like that for them would have no idea how to modify it. (Like you said above.) But then again that could be a good thing for you...charge for updates! :)

I've been making css non-table galleries for over a year now. They're no more or less difficult to update or adapt than tables, except of course the code is cleaner.

I haven't made an entire site table-less yet, though I've been wanting to.

here's some really sweet CSS stuff:


http://www.smashingmagazine.com/2007...-live-without/

I'm not talking against CSS, there's a lot of stuff you can do with CSS you can't do with html, just warning about the tableless approach everybody and his mother is praising, just found it's not good for all purposes and stating the pros and cons. CSS (tableless or not) is a gift from the Supreme Coder :thumbsup

there you go :thumbsup

CSS is magic

I use a mixed approach i.e. tables for overall structure and CSS for design elements.. I find the IE problems with CSS to be a real pain.

It's been over a decade since I started web developing and I/we still have to fuck with cross browser compatibility.

-G

yeah, that's the way to go, at least until Macrosuck engineers learn WW3 conventionalism. But it might take 5-10 years at least :Oh crap

tables are for tabular data, not for layout.

css / dhtml / xhtml is not web 2.0.

if you do proper xhtml/css there is no table layout which will be more compatible with what you need/want.

css forever, i am webdesigner for about 10 years and if i before one year show to people website in tables, they said wtf! css is the future, html is dead! just try to make website with more subpages and try to change a link color from one color to another :). css = 1 file, html = how big is your website? :)). css, dont bother to talk about anything else... :). TC

I don't design much these days, but I've been playing with table-less design as well...I've been hardcoding for over 10 years now, so hard to break that old table habit (my fingers seem to automatically type out the full table code without me even thinking about it). It's a new challenge for me, that's for sure.

and as a designer who does all of that, and based in experience I strongly disagree with the automatic motto "tables are for tabular data, not for layout". I've heard/read it 1000 times. Beautiful theory. Not very true in practice

I have to declare a vested interest, since I make money from switching peoples' pages/sites to "pure" CSS, but I really do believe your points are off-target.

Point #1 in particular isn't logical, because the HTML should be more simple with the styles and dimensions out of the way and with the ability to reduce table:tr:td simply to div.

It is possible, even likely, that someone setting out with CSS is going to still be thinking in non-CSS terms and therefore they will emulate the structural "vision" with which they are familiar. Then, not only would a client be asked to get used to something new, but also something nearly as complex. But if you strive to use semantically correct code and inheritance, you usually can reduce your instruction to the client to "paste the whole lot in here"...

Dealing with cross-browser incompatibilities also takes some experience. But once you learn where, for example, margins will cause problems but padding will not, the number of hacks you are forced to use declines dramatically. Most of my conversions use 2-4 hacks, some none, and I cannot recall any which have needed more than 6. So there certainly isn't any risk of losing the "advertised" advantage of having less code to deliver.

There are a couple of further points. All tables are not born equal. Coded well tables can load quickly: but most are not coded well and therefore they load slowly. When people switch to table-less (especially if they enforce on themselves the discipline of strict doctypes), not only do they gain the inherent SEO and speed advantages (because browsers handle non-table code more efficiently), but they will be forced to learn how to code properly and often be doing so for the first time. That by itself makes a big difference in many cases.

The trap I see people fall into regularly, is that of not adjusting their perspective into CSS terms and that is what can throw the file-size advantage away. I quite regularly see HTML+CSS pages more than 30% bigger than need be, because their old structure has been replaced more or less directly instead of being re-thought with CSS in mind.

Last, there is the purely pragmatic view that the 'net is never going back to the days of bloated code. People can persist with plain HTML, so long as browsers can recognize it. But in the end they will have to learn the "new" way (new in 1997/8 that is) and in the meantime, not only are they losing out on the many features and benefits which CSS has to offer, but they are denying themselves skills which their competitors are learning.

you have some valid points and finally a good discussion. As I've said, I'm all for CSS, and I'm doing a lot of tableless design lately, so it's not like I'm against it, just that the end users can't work on it easily (not their fault, but as a designer I need to think in terms of usability as well, I was always against designers with loads of eye candy or coded features which slow down pages and stuff like that, I still remember the times when every fucking designer thought that Java was THE shitnizz)

I'm very interested on the SEO thing you mention, can you explain (briefly and with no further details if you want) what do you mean?

Hey, that was me asking for css galleries.

I found this - http://dnevnikeklektika.com/css/en-gallery/

I?ve been trying to build some good looking galleries myself, but I keep going back to tables. I?ll buy a few tableless galleries from someone.

No, I was referring to another board member, but it would be nice to know why do you want them to be tableless. Just design purposes or anything else? The one I'm talking about gave me the impression that there was soemthing else to it

Okay then. I think separating content and appearance has many benefits. Mainly SEO, but I wanted to keep that opinion a secret.

Even without an overall code saving (and really unless you have reduced the total by at least 20%, take another look), the division of code between HTML that the search engines read and CSS, which if stored separately they do not, is an immediate advantage.

Let's say the original file was 25K and you end up with 16K of HTML and 4K of CSS. Your content remains the same, therefore the ratio of content to code now relates to 16K instead of 25K. That is an advantage you can push even further if you switch from foreground to background images and reduce the size of your HTML still more.

The second is that (although there are sometimes ways around it) old-style HTML is mostly coded in linear fashion. Given the most common layout with navigation on the top or left, search engines see your site in a quite different way than ideally you want. Some spiders may never even reach your content and headlines. But CSS allows you to place your content at the top of the HTML so it gets the prominence it deserves (and although this may not apply to many porn surfers, that also makes your site layout more "natural" for those who do not use mainstream browsers).

Bty - do you want to sell me gallery templates?

CSS is better for search engines, but it can be dangerous at the same time, especially things like display:hidden or display:none which are used for cloaking as well...so, use it carefully.

Yes, google crawls .css, it even gets PR !

sorry, I'm out for vacations in 2 days and after that booked for soem time :)

that's more or less the answer I was looking for :thumbsup

i used to use stables for structural purposes, then i learned css

Interesting, I might incorporate some of this

http://www.iseekgirls.com/g/tcg/roun...ofass/0000010/
All done in css.
I am using it as a template.