Best Examples of Tableless Web Designs?

[Floris]

It appears that Tableless Webdesigns are the biggest thing since the wheel at the moment, so I was wondering if we could get a list of sites with excellent examples and designs using the tableless method.

I'd be interested in seeing what they did and how they did it.

I think it is the biggest thing at the moment because professional webmasters are slowly finding out they can do so much more in so much less time and get even better results and more happy clients.

[Faruk]

I said "you'd" which is a contraction of "you would" meaning if and/or when vBulletin is designed tablelessly, not right now.

ahh, okay. I didn't really read that from the context

That sounds great, I can't wait.

Once I get the project started, you're free to help out if you have the time

[Shining Arcanine]

"extremely easily" ? "just styling your forums" ?
Sorry, but it requires one to completely rewrite most of vBulletin's templates to make a real XHTML/CSS version of vB3. And you know how many templates there are... O_O

I said "you'd" which is a contraction of "you would" meaning if and/or when vBulletin is designed tablelessly, not right now.

The dev's probably will not do so for another 4-5 years, which is why I'm doing it on my own:

UNITY Project
---------------
The UNITY project is all about changing vBulletin to be more accessible and flexible, as well as more extensible and therefore powerful. UNITY aims to rewrite all of vBulletin 3's templates, replacing the tables and nested tables with clean, semantic markup.

Eventual goal of UNITY:
To have 1 single vB template set that can be used for many completely different styles, just like the CSS Zen Garden. Benefits:

• Styles will be more manageable, as they exist solely in the CSS files
• Forums will be much lighter (page weight) and render faster
• Upgrading vBulletin will not require you to do a lot of template work anymore - if any serious issues are in a template, then the UNITY styleset/templateset will be updated and you can just overwrite yuors with the new one without problems - all styles will immediately be updated
• Increased accessibility - Google no longer needs your Archive to have a clean way of spidering your content; additionally, the semantic elements in UNITY are superior to the elements in the vB archive, and Google *loves* semantic markup.
• No need for special PDA-compatible versions of your site anymore, if you care to support the use of those
• incredible flexibility in styling pages
• Best of all: COMPLETELY FREE (including all styles I'll make for it)

That sounds great, I can't wait.

[Floris]

You can report piracy here: http://www.vBulletin.com/piracy.php

I removed the URL from your post and added it to our piracy database for check up.

[Norman]

this web modified vB3 to "MolyX BOARD"

see..
<url removed & reported>

[Faruk]

Oh, and uh, most if not all of these are all table-less:
(taken from www.kurafire.net )


Bloggers I've met
Anne van Kesteren
Arthur Lugtigheid
Bobby van der Sluis
Didier Hilhorst
Egor Kloos
Hayo Bethlehem
Mark Wubben

Other sites
A List Apart
A Whole Lotta Nothing
Adactio
Andy Budd
Anil Dash
Authentic Boredom
Clagnut
CSS Destroy
CSS Discuss
CSS Zen Garden
Cutting Edge CSS
Daring Fireball
Design by Fire
Dive into Mark
Dunstan Orchard
Eris
Extension In Use
Functioning Form
goer.org
graphicPUSH
Hicksdesign
Meyerweb
molly.com
Obvious Diversion
Phil Ringnalda
Ryan Brill
Shaun Inman
Simon Willison
SimpleBits
Stopdesign
The Weekly Standards
What Do I Know
Veerle
Web Standards Awards
Web Standards Project
Webgraphics
Whitespace
Zooiblog

[Faruk]

replying to many...

Dang...after seeing all this, we gotta get tutorials and guides

Keep an eye out on www.kurafire.net over the coming months and slowly there'll be a lot of tutorials, guides and UNITY* development articles there. Most useful for you guys

* UNITY is described below.

Nobody ever said to stop using tables, they said to stop using tables for building a design. Tables should always be used for tabular data, and using CSS and no tables to present tabular data is horrible practice.

Thusly, vBulletin uses tables where they are supposed to be used.

vBulletin also uses tables for a lot of things that are NOT tabular data. A showthread page is not tabular data, but a discussion / thread, for instance. The menu/navigation of vB, the breadcrumb, they're all NOT tabular data, but rather lists / nested lists.

vB can still be way more table-free than it is today.

Is this just a trend?

You'd be able to decide that extremely easily by just styling your forums (or using the default stylesheet which I'd imagine would look similiar to what you see now).[/QUOTE]

"extremely easily" ? "just styling your forums" ?
Sorry, but it requires one to completely rewrite most of vBulletin's templates to make a real XHTML/CSS version of vB3. And you know how many templates there are... O_O

It doesn't only use tables for its design. It also uses them to ensure backwards compatibility (personally I'd like the devs to make a 2nd optionally downloadable style that is designed without outdated rendering engines into consideration).

The dev's probably will not do so for another 4-5 years, which is why I'm doing it on my own:

UNITY Project
---------------
The UNITY project is all about changing vBulletin to be more accessible and flexible, as well as more extensible and therefore powerful. UNITY aims to rewrite all of vBulletin 3's templates, replacing the tables and nested tables with clean, semantic markup.

Eventual goal of UNITY:
To have 1 single vB template set that can be used for many completely different styles, just like the CSS Zen Garden. Benefits:

• Styles will be more manageable, as they exist solely in the CSS files
• Forums will be much lighter (page weight) and render faster
• Upgrading vBulletin will not require you to do a lot of template work anymore - if any serious issues are in a template, then the UNITY styleset/templateset will be updated and you can just overwrite yuors with the new one without problems - all styles will immediately be updated
• Increased accessibility - Google no longer needs your Archive to have a clean way of spidering your content; additionally, the semantic elements in UNITY are superior to the elements in the vB archive, and Google *loves* semantic markup.
• No need for special PDA-compatible versions of your site anymore, if you care to support the use of those
• incredible flexibility in styling pages
• Best of all: COMPLETELY FREE (including all styles I'll make for it)

Unfortunately, the most used browser in the world doesn't have a modern rendering engine. The mozilla foundation is beginning to resolve that issue through.

Indeed! *cheers*

Any plans to take vBulletin in this direction?

As far as I know, no plans at all from the vB devs, but as you can read in the UNITY project description above, I'm going to do just that.

I personaly, do not see vbulletin EVER going tableless, at least as of current, There are a very who can do very well designed full CSS tableless designs, but that is not true for all users and all browsers

You don't have to know how to create a table-less design to use one if it's provided for you.

[Deaconxgp]

ahhhh i gotcha jamslam...NOW i get it lol

[Shining Arcanine]

Consider that 1 out of 4 new customers, that I have spoken to in the last year, use Frontpage to manage their webdesign and vBulletin. Another 25% decided they were going to run a website after seeing "a cool site" on the Internet on a subject they liked. They don't even know what HTML or CSS is and yet they want to change colors, upload new graphics and so forth.

They are going to get their instructions on webpage building from tutorials and books that have been around for years and don't cover CSS-Based design. By completely going to such a design, the support levels are going to at least double. Heck, probably more than that. We already have customers who purchase telephone support and call for every little template change, sometimes 15-20 times a day.

If we spend all our time telling people how to make add a column to the right of their forums for advertisement, there won't be time for anything else.

Wouldn't it be faster with CSS because you would simply have to instruction them to type some CSS and write the XHTML for the the ad anywhere in the page?

By the way, didn't someone from Jelsoft mention that Jelsoft wanted to have additional styles that you could download from your member's area. Why couldn't you write this and make this one of them?

Some people don't like hacks and think they shouldn't be used- others don't mind. I don't mind (as it improves accessbility across browsers)...

I think they shouldn't be necessary in the first place but can be used. I use standards compliant hacks when I need to. Figuring how to get IE to render my pages properly (when it should have been able to do it without any extra work) is a huge pain.

How is it incorrect...? It looks perfectly fine.. lol...

The login menu's width is different between IE and a standards compliant browser. At least for me...

That requires javascript, though...

Call it legacy support.

How are css hacks a bad thing? If they work and allow multiple browsers to be fully supported, then whats the problem?

MGM out

The idea of CSS is cross platform compatibility. If you need to hack it to get it to work on a specific browser there is a problem; particularly with that browser.

Well, an argument might be that your stepping away from the CSS recommendation, as your are relying on a bug in a browser (or something that isn't supported) in order for something to work. Which generally isn't good practice. I however think using CSS hacks gracefully is perfectly fine, esepcially if it helps.

If the hack is a standards compliant method of doing the problem isn't with it. The problem is with the browser.

[jamslam]

How are css hacks a bad thing? If they work and allow multiple browsers to be fully supported, then whats the problem?

Well, an argument might be that your stepping away from the CSS recommendation, as your are relying on a bug in a browser (or something that isn't supported) in order for something to work. Which generally isn't good practice. I however think using CSS hacks gracefully is perfectly fine, esepcially if it helps.

[MGM]

The hacks I used are necessary... If I don't use them, it might still work, but accessiblity drops.

Some people don't like hacks and think they shouldn't be used- others don't mind. I don't mind (as it improves accessbility across browsers)...

The width of the menus in your sidebar is incorrect in IE through. It is minor but it is something I would be banging my head over if you was you.

How is it incorrect...? It looks perfectly fine.. lol...


You don't, you use tables for that


That requires javascript, though...[/QUOTE]
How are css hacks a bad thing? If they work and allow multiple browsers to be fully supported, then whats the problem?

MGM out

[jamslam]

I like how you padded your CSS. I see that you spent time hacking it through, which shouldn't have been necessary.

The hacks I used are necessary... If I don't use them, it might still work, but accessiblity drops.

Some people don't like hacks and think they shouldn't be used- others don't mind. I don't mind (as it improves accessbility across browsers)...

The width of the menus in your sidebar is incorrect in IE through. It is minor but it is something I would be banging my head over if you was you.[/QUOTE]
How is it incorrect...? It looks perfectly fine.. lol...

How would I define in CSS that I wanted 2 rows of data or one column lined up vertically etc.

You don't, you use tables for that

Would Jelsoft consider bundling IE7 with vBulletin:

http://dean.edwards.name/IE7/

That should take care of most of the CSS problems.

That requires javascript, though...

[Khuffie]

That, youd generally use tables for... The best idea of 'tableless' designs are those that do the general layout without tables (ie, navigation area, content area, header area), all done using CSS. You can specify that say, the an area will take this many pixels (say 300x400), or you can set to be free flowing (ie, resize based on content, usually limiting the width), you can even position it at exactly the pixels you want, or inherit its position from a previous 'block'.

It sounds confusing, but once you get into it, its kinda cool.

I designed a couple of websites myself:
http://www.khuffie.com
http://www.gkryerson.com
http://64.191.8.200/ <-- I'm still working on this one, might take a while since its more complicated

[Zachery]

CSS has alot more than colors and backgrounds, you can set positions height widths the list goes on about alot of things.

[Deaconxgp]

i've never quite understood how you design specifically from CSS. correct me if i'm wrong but CSS (Cascaded Style Sheets) only set the attributes of your site like font color, background color etc...how are people manipulating their style sheets to mimic tables? How would I define in CSS that I wanted 2 rows of data or one column lined up vertically etc.