Web Design: CSS vs. Tables

Everything to do with using your own website to advertise your rental property. Design, usability, hosting, getting listed on the search engines, optimising your site, pay-per-click, etc, etc.
User avatar
vrooje
Posts: 3202
Joined: Thu Dec 09, 2004 2:48 am
Location: Burgundy, France

Web Design: CSS vs. Tables

Post by vrooje »

This topic started on another thread, but is more appropriate here, and I would like to start a discussion on it.

I'll quote Garri's post from a different thread:
Garri wrote:Tables have been bastardised over the years to handle presentation and combined with transparent image files it adds weight to your sites, but not good weight, bloated weight.

But this was back in days of lack of web standards, the rapid adoption of which is enhancing user experience, there's no doubt about that.

Still someway to go before things really settle down.

I would be interested to see how many of the sites in CSS Zen Garden look on Linux. I might be retiring one of my Windoze machines here, so will load it with Linux.

I would also be interested in how stylegala.com looks on Linux, it looks beautiful in OSX.
The stylegala.com page looks very nice in Linux:
Image

And most of the sites in the CSS Zen Garden look nice too, but some of them (most noticeably the Red Stars style) have some major overlap problems.

My point is just: tables are a no-brainer way of making sure that everything on your site will show up where you want it to. If I have my page written using tables, I can be sure that my menus won't overlap my top banner image, and I know that two of my text paragraphs won't bleed into one another. Maybe they weren't originally intended to do presentation, but they do a brilliant job at it nonetheless.

I know this can be achieved with CSS as well, but I just think there are so many ways to do it wrong with CSS, and I'm not convinced that it's totally cross-platform either in the way that tables are, at least not without hours and hours of frustrating fine-tuning.

Don't get me wrong, I'd love to switch over to using CSS for positioning. I'm just not convinced that if I do so, it'll work on every browser that tables will work on with the minimal amount of time that tables require. My site uses tables for layout, and I'm certain that it will position things where I want them in any browser, including Lynx and IE and essentially everything in between that allows tables at all.

I also think (though I don't have evidence here) that image optimization and code optimization are more important for page load times than tables vs. css. So I'm not at all swayed by that argument.

Someone please convince me! Why shouldn't we use Tables anymore? Aren't they still useful and functional?

:)
Brooke
User avatar
Garri
Posts: 1689
Joined: Mon Jul 11, 2005 7:26 pm

Post by Garri »

Cheers Brooke, good idea!

I sorta guessed (hoped) that Stylegala would look and work OK on Linux, considering the people behind it. (the excellent Monc design house in Sweden)

This a testament to good and creative use of CSS, over tables.

This is what can be achieved with CSS by people who know what they are doing. I haven't checked, but they may use a lot of CSS hacks. That's not too offputting 'cos a lot of the hacks are freely available to cut & paste into your own files and tweak where necessary.

One article I came across when researching this field, for a project I'm currently developing, was this one:
http://www.hotdesign.com/seybold/index.html

It's aimed more at designers but you can get the gist from this, although the presentation style is a little jokey.

It does put across some valid arguments.

Another good resource, from where you can locate other good resources, is: http://www.weeklystandards.com/

And then there's the excellent, God-like, Jeffrey Zeldman over at: http://www.alistapart.com/

I am not convinced that using tables is still a valid, or useful way, for the presentational layer of your web site. Used incorrectly they undermine the semantic structure of your web site. Semantically structured web sites are good for search engine robots, and that's only 1 advantage.

I did some validation checks on a handful of the major rental listings sites and was amazed, although I shouldn't have been, at the results. None of the validated as being semantically correct html. In one sever case there were over 200 violations!

Not that it means much, cos you're all happy with the enquiries they generate for you. But compared with properly structured web sites they are slow - even with broadband (you may not think so cos you're used to them and may not be viewing the new school of sites using better technologies)

Yet they are near the top of the search engines rankings because that's all there is. There's no better alternative yet.

Continue to use tables for your design layout at your peril. You know where I stand on this issue

:wink:
jacmgr
Posts: 10
Joined: Mon Jan 24, 2005 1:47 am
Location: Poconos, PA, USA
Contact:

Post by jacmgr »

My opinion is that if your pages are very basic, you may not have problems using pure CSS and no tables. Complicated pages using CSS alone are difficult for me, but I am sure an expert could do it.... At my level of proficiency, I depend on tables to hold together the structure of critical elements of my pages. It is easier for me than becoming an expert in CSS.

However, I sure do use a LOT LESS tables than I did before, since I started using CSS and DIV tags. Having few or simple tables I think lets us (me) mediocre talented CSS/HTML folks show some good pages that are easier to control.

My recomendation is to systematically try to find how you can use less tables, but not remove them altogether. A prime area of table deletion for me was in the display sliced graphics. For me CSS is way easier for displaying graphics rather than sliced graphics and tables. (never learned how to slice, and now I don't have to!!).

Here is an experiment I am working on. The experiment is here: You can try 5 different themes on the side column menus: http://vacationrentalworkshop.com/midla ... php/pages/

The templates are based mostly on ones I downloaded from
http://www.oswd.org/

Ultimately with real content from my site content (which changes) I had to put tables in to keep the display correct regardless of the varying content. The tables are simple and small basically on a 2 or 3 column table and 1 or 2 rows and only in the center part of the page. (not header and footer.) The pages are definatly not going to validate, but my visitors like them!!

John
John and Hyonmi Del Ferro
http://www.vacationrentalworkshop.com
User avatar
vrooje
Posts: 3202
Joined: Thu Dec 09, 2004 2:48 am
Location: Burgundy, France

Post by vrooje »

Okay, so I went to the test page that you mentioned, jacmgr, and here's what I saw:

Image

I'd imagine that wasn't really what you had in mind!

The other styles weren't quite so misaligned, but that one is a case in point of what I mean.

I should point out, though, that of course I know it is possible for CSS to be done brilliantly. Tansy's new website is gorgeous and as far as I know is all CSS -- that's just because Tony is so good. :)
Brooke
jacmgr
Posts: 10
Joined: Mon Jan 24, 2005 1:47 am
Location: Poconos, PA, USA
Contact:

Post by jacmgr »

HA! That's why it is still an experiment and why I do not use that url for my real non-CSS property page.

I really appreciate the screen shots. Never seen that one before with the header and footer both at top of screen. I have experienced disjointed text in non-IE browser. (I could fix it real fast with a table. but I won't!!)

The do properly align on my 3 different IE machines. But I am aware there are problems and continue the experiment and learning CSS!!

Not asking for advise on how to fix it, as I don't have a lot of time for that experiment. If you had other screen shots, I'd appreciate you emailing them to me!

Thankx!
John
John and Hyonmi Del Ferro
http://www.vacationrentalworkshop.com
User avatar
Garri
Posts: 1689
Joined: Mon Jul 11, 2005 7:26 pm

Post by Garri »

Like I said, Stylegala is a good example of what can be achieved if you're skilled in CSS.
User avatar
vrooje
Posts: 3202
Joined: Thu Dec 09, 2004 2:48 am
Location: Burgundy, France

Post by vrooje »

Dare I bring up the Choate example on StyleGala's site, though? It seems to be an example touted as CSS done right, but I have overlap problems on that site, too. Also, I have tutoring students who go there, and a few months back I had to look up something on the Choate academic calendar, and it was not fun navigating their website. Overlap is a PITA!

I guess my point is that it takes a skilled web developer to make a site the right way in CSS, but this isn't necessarily true with tables.
Brooke
User avatar
Garri
Posts: 1689
Joined: Mon Jul 11, 2005 7:26 pm

Post by Garri »

The Choate site is nothing to do with Stylegala - I was holding Stylegala itself as good example of CSS done right, not the contents of sites submitted for review.

I'm surprised that site has scored as high as 6.2 - will read the comments when I have time.
I guess my point is that it takes a skilled web developer to make a site the right way in CSS, but this isn't necessarily true with tables.
That last part is the problem! The internet is great because it's easy for non-skilled people to create web sites, but that's also the bad thing in my opinion.

We would'nt let unskilled people build the houses we live in, eh?
User avatar
enid
Posts: 5599
Joined: Mon Dec 27, 2004 4:47 pm
Location: Labretonie France
Contact:

Post by enid »

We would'nt let unskilled people build the houses we live in, eh?
I can't offer anything to this technical debate but just had to respond to this comment. Posting a web page just ain't the same thing. You can take my site or leave it but it seems to be doing the job and I have learned a lot doing it and enjoyed the challenge. What I like about the Internet is that everyone can be up there - doing their thing, living their dreams chasing that rainbow and it shouldn't be reserved exclusively for the super skilled!!

Like everyone on this forum with their own web page I want to improve it and have a whole list of things to work on when the season ends - and I will enjoy the learning process.

Now you've rattled my cage I'm off to have another glass of wine!!!!
User avatar
Garri
Posts: 1689
Joined: Mon Jul 11, 2005 7:26 pm

Post by Garri »

Dear Enid,

Sorry to have rattled your cage but I have to stand by the gist of my comment, athough I admit it was rather a clumsy comparison I made.

Although I may seem to know about web design I am not a web designer. I pay professionals to develop my web sites, I just get on with the copy, marketing and promotion, which is where I'm more effective.

That said, I can design as I used to be a graphic artist when I left college, but that was a long time ago and I never stuck at it. I am able to produce wireframes for my developers to work from though.

The reason I pay professionals to make my sites is probably for the same reasons why shops on the high street hire professional shopfitters, interior designers and sign writers. I want to attract customers, make them feel good, make them spend money.

Sorry, but I don't see commercial web sites any differently. So perhaps this would've been a better comparison for me to have made.

As I'm running a business it's important that my shop window is professionally presented, which is why I hire professionals. Like I said, I'm not a web designer.

Yes, the internet empowers many people to try it themselves, the barrier to entry is lowered but with a lower barrier to entry comes a lower standard. Which is a fact all too apparent.

As people become more discerning about what constitutes good design and in particular what separate bad sites from good sites, then it will be increasing difficult in the ever changing internet for poorly designed web sites to survive. Especially as more and more beautiful sites spring up, making it harder for the bad ones to prosper in their current form - they will need to change.

Now, whether site owners possess the necessary skills to implement that change is a different story.

The internet doesn't stop and wait for everyone to hone their skills before it moves on.

I might attempt to install a new bathroom, or at least think I can, but what I'll most likely do is call in a good plumber!

There I go with my clumsy analogy again, sorry!
User avatar
Alan Knighting
Posts: 4120
Joined: Mon Oct 18, 2004 7:26 am
Location: Monflanquin, Lot-et-Garonne, France

Post by Alan Knighting »

Garri,

I appreciate your membership of the forum and the fact that you express your views in an open and constructive manner.

I acknowledge that presentation is important in selling a product but it is the product which is of paramount importance. The most beautiful and most technically advanced website in the world selling a product that nobody wants is no good for anything, except the ego of the designer. An ordinary website selling what everyone wants is perfect, except for the ego of the designer.

Let’s not lose sight of what we, the rental property owners, are doing here!

We are not selling cutting-edge website design; we are selling time in holiday properties. Our clients are not looking for cutting-edge websites; they are looking for holiday properties. They don’t judge us on whether or not we use tables or CSS (most of them don’t know the difference between CSS and CWS, nor do they care); they judge us by our pictures and our text, i.e. by our properties.

Given a clean and simple website which presents an attractive property and which comes to the attention of the renter; we have done our marketing job.

Let’s also remember that the rental websites are designed and written by professionals like you and they come in for plenty criticism.

Alan
la vache!
Posts: 11065
Joined: Wed Feb 16, 2005 7:22 pm

Post by la vache! »

Enid,
I wish I had your knowledge to allow me to attempt my own website! I'm not a techie, but I use the internet a lot and your website looks great to me so don't worry!
User avatar
Garri
Posts: 1689
Joined: Mon Jul 11, 2005 7:26 pm

Post by Garri »

Dear Alan, firstly, I am not a web professional, so sorry if I mislead you on that, wasn't intended.

I admit I do seem to have become evangelical about the whole CSS and standards based web site design but this is hardly what you'd describe as being cutting edge since they've been around for a few years. The difference is, we now have modern browsers capable of dealing with these standards. Far from perfect right now but when you consider that Firefox launched version 1 of its browser at the end of last year, there's been a rapid uptake of these standards to date.

This can only be a good thing for users e.g. me and you the owners. And one day I may become an 'owner' myself. If that were the case I would invest in a professional web developer to create my rental site. That's just how I would approach it.

With the amount of people owning properties abroad, and more likely to do so this year and next, there's a lot of competition and for me, assuming that I have a place that clients want to spend their money and time at, I would want to postion my offering ahead of the competition. One of the most immediate ways of attempting to achieve that is a well crafted web site (notice I haven't used the word design).

For the past 6 months I've been studying rental listing sites, not owners' own sites. Most of the ones I have seen haven't been that impressive but not because they haven't used CSS or any other cutting edge technology. In a lot of cases they evidently haven't read Paolo's tips on photography. Reading that alone would offer them a quantum leap in the quality of their sites, which may or may not lead to an uplift in interest, therefore bookings. My guess is it would.

Medicore web sites are only useful until someone else down the street, offering the same thing, decides to do things better. Raise the bar, then everyone follows. Result is better experiences for the people spending their time and money, and in particular their pre-time i.e. searching web sites for suitable places to holiday.

Dear Susan, sorry if I have given you the impression that I've been attacking Enid's personal we site, I haven't. I was merely making a general point about web standards.

On that subject, I will calm down about web standards & CSS as it does seem to be a contentious subject, for now anyway.
User avatar
Alan Knighting
Posts: 4120
Joined: Mon Oct 18, 2004 7:26 am
Location: Monflanquin, Lot-et-Garonne, France

Post by Alan Knighting »

Garri,

Once there is a single universally adopted standard for CSS and all browsers fully support that standard I will agree with you.

Even then my belief is that a private property owner's website should be "a clean and simple website which presents an attractive property and which comes to the attention of the renter".

My view is; if the end results are indistinguishable from each other in appearance and performance it matters not to the renter whether the website was created using a hammer and chisel or using the latest technology.

Old fashioned does not equal mediocre, rather it means tried and tested. New fangled does not equal better, rather it often only means trendy. Once CSS is tried, tested and universally adopted the Web be a better place, but it will then itself be old fashioned. What follows, I wonder?

Alan
User avatar
Garri
Posts: 1689
Joined: Mon Jul 11, 2005 7:26 pm

Post by Garri »

New fangled does not equal better, rather it often only means trendy. Once CSS is tried, tested and universally adopted the Web be a better place, but it will then itself be old fashioned. What follows, I wonder?
Alan, new fangled a few years ago was table based design when people realised that by setting the border attribute to "0" you could create graphically rich web sites. It was tried, tested and it worked and everybody followed suit. It was trendy yes, but it was a better way of doing stuff, then.

New fangled a few years ago was also spinning logos, then Flash intros, all of which we are still seeing to this day. Fine. But for me, and a growing number, it's not fine.

New fangled today is things like folksonomies and tags. A different way of doing/finding stuff, and for me a better way.

Right now, we have one foot in the past and one in the future, so in that sense I would have to agree with you.

Of course, I understand that it is easy to follow a tried and tested path, which is why you see a lot of cookie cutting with regards web sites. This is an attitude that I have tried to steer clear from and have enjoyed moderate success in doing so.

But the problem right now is that we are still emulating what was successful in 1999 and now with modern browsers and new paradigms, sooner or later that will change. Whether it's CSS, XML or whatever, that effects that change, one thing is for sure: changes are already happening.
Post Reply