The Skeleton in My Closet

First, thanks for all the friendly, welcoming comments to my previous blog! As I looked at some of the initial questions posted, I thought I should start out sharing a deep, dark personal secret. I’m going to confess that, despite the plethora of great articles on CSS (even a book!) on SitePoint… lean closer… I still use tables for layout. (Gasp!)

As soon as you’ve collectively collected yourselves, I’ll explain further:

In the real-life arena of pleasing clients, I’ve found that most clients, when presented with a choice, aren’t willing to sacrifice the low-end of their user/customer base for the sake of being able to say “our site meets all current web standards!” (And when I say “low-end,” I mean low — some of the logs show people using Netscape 3.) Even a gracefully-degrading web site, which can at least still be read, isn’t enough for companies who are aggressively pursuing ecommerce sales and want to have their sites “look good” for 95% of their customers. On the other end, for cheap clients who don’t want to pay me to make x number of style sheets and y lines of JavaSCript, the only real recourse I have is to design the basic layout using tables and follow CSS 1 definitions for fonts, background colors, and the like… and hang complete accessibility. (No wonder that Trenton Moss found in his article that most of the “big players” fail, in more ways than one, to meet all current accessibility guidelines… even in basic ways.)

Don’t get me wrong; keeping accessibility in mind — which means using CSS generously — will help you structure your site better and separate as much of the content and layout as you can. Learning as much as you can about CSS and current standards will definitely pay off in the long run — not just for you, but for your viewers. That’s why I love reading stuff by the CSS and Accessibility gurus of SitePoint; they push for the pure, higher standard. But there is a pragmatic streak in me that, well, needs to work with clients who have customers who use Netscape 4.

So my advice:
1. Learn about CSS, accessibility, and valid code. Practice it!

2. Thoroughly research your customer or viewer base. Pay attention to your server logs and the percentages of browsers and systems used.

3. Then, draw a line (“No Netscape 3!”) and be prepared for the possible cost of losing some of your viewers.

4. As you build your site, use as much CSS and accessibility concepts as you can while testing continuously in the lower-end browsers.

5. And if this means using tables… well, so be it. But be prepared to redesign your site in the next few months or years to be compatible with future (and present) technologies (i.e., handhelds and such).

Anyone out there with a better or equally reasonable compromise? Please share!

**Note: I’m still new to this submitting blogs thing, so I realize the formatting is totally screwy. Hopefully it’ll be fixed soon!

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • http://www.rebornstudio.com optimus_prime

    I have to agree. As nice as it is to use css for layouts and all that great stuff it’s meant for, I just don’t think were quite there yet. There are too many browser inconsistencies and people out there using older browsers to make the switch on websites that must appeal to a broad audience. In the end, customers could care less if my website conforms to webstandards. They will care if it looks ugly or the layout is broken.

  • http://www.sample.com Widow Maker

    I’m all in favour of using CSS and web standards, but lets be honest for a moment :)

    Not all browsers are of the same breed are they ? One thing that stops me dead from using CSS and DIVs for page structures is the cross browser issues present.

    Something works great in one browser but bombs in another, and I don’t really have the time to research answers either :(

    I’m a developer, but now and again I need to be a designer as well, and if TABLEs get the job done quickly, TABLEs it will be :D

    Shame really, since web standards are important, just we have some dodgy browsers that’s all ;)

    As for accessability, that’s down the pan :p

  • mashby

    Even if a client insists on supporting a Netscape 3x browser, I still don’t see why CSS and web standards can’t be followed. Since you’re going to have to build multiple versions of a web site, why not do one or more for the legacy browsers and one for modern browsers?

    The bandwidth savings alone are enough to warrent following web standards and once you show your client the other benefits, speed, ease of updates, etc. I think many would opt for that.

    I don’t think following web standards is an either or proposition. I think you can easily offer a hybrid format in most scenarios and then create the other versions as needed.

  • http://www.revmedia.com dhecker

    I think it would be a wonderful thing if everyone could take advantage of a more elegant solution like css/xhtml. Unfortunately, just about all of my clients are commercial enterprises, and could care less about code elegance – instead, they just want the site to look perfect on as many browsers as possible. So, it’s all about using as much css as possible, but also using tables when needed.

    I am also very focused on resource management, and track all my developer’s hours for every job. So, I’m now convinced that css work takes much longer to complete overall.

    I like css for it’s elegance and sensibility. But, as a business owner I’m fine with tables until the browsers are up to snuff. Business is business.

  • mpdesigns

    I also still use tables. For one thing, it nearly eliminates the use of “centering” hacks that don’t seem to translate well in macromedia contribute 2. Tables are in fact what I call a foundation for CSS to build on. Tables still have their place and probably will for a couple more years to come.

  • http://www.rideontwo.com z0s0

    Well I think you’re all wimps. You’ve all come crawling out from under that dirty table and admitted that you’re not up to the challenge either from a business or skillset perspective ;-P

  • http://www.platinum-central.com platinum

    For a very popular forum I co-admin – out of 3,674,072 hits, 49 were using netscape 4, thats rounded to 0% ;)
    On the other hand, there were around 300 requests from PDA’s and Mobile phones!

    I’d rather work on integrating a mobile stylesheet than go back to the 90′s and whack in some tables.

    Looking forward to your next entry on spacer gifs! :rolleyes:

  • http://www.ironorchid.com/ Paul_C

    Yup, ya got to know your target audience.

  • http://www.autodirector.co.uk/ ceeb

    Web standards and accessibility guidelines are about allowing everyone to view your site no matter what browsing technology they use.

    Using standards you can support NS4. It may not look the same, but it’s usable. You can also support ancient browsers such as IE1.0, which didn’t have CSS or TABLE support!

    Have you tried viewing you’re table-based design on a PDA, or 640×480 monitor? And, perhaps more importantly for your clients, a well designed XHTML/CSS site will get a higher Google rank than a table-based layout.

  • http://uxmal.co.uk petersj

    Over the next few years the number of mobile phones with XHTML browsers, Nokia 7250i is a good example, will increase. I envisage lots of work for those developers with good CSS layout skills reworking table based layouts.

  • http://www.redcow.ca/ Ray Oliver

    The whole mobile phone thing may be a bit overrated. Is anyone doing serious web surfing from their phone? I did for a couple days when I got my Treo 600, but the novelty wore off quickly. The real power of access from mobile devices will be the use of custom web applications for people on the road.

    As for backwards compatibility with older browsers and lower resolutions, I think it is safe to say that < 3% of the population is in that boat.

    I do my best to ensure that my sites work in the newer versions of IE, Safari, and Mozilla, and that there is no horizontal scrolling with an 800×600 resolution. That takes care of 98% of the population which I think is good enough for most people.

  • Sojan80

    The vast majority of the development I do is for educational institutions. Some of them receive govermental funding for research they are doing and for which they would like a standards compliant site.

    Add to the mix that there are now laws governing accessibility of informational sites that were built using federal funds and you get one hell of a mess.

    The folks I work for are encouraged to be compliant with 508 and the WAI, yes it means I end up with a lot of extended maintenance contracts because they don’t have the time or know-how to update their own content, but hey, it keeps me employed, and I do offer to come in and train them so they could maintain their own sites… but they either don’t have the time or are to afraid of the technology. And as for tables… well I am slowly trying to wean the vast majority of the sites I work on off tables. But since a lot of these sites are research related needless to say there are tons of tabular data to be dealt with and styled.

    As a developer you just have to draw that line in the sand and say “I will be backward compatable this far and no further.”

    Harry Crews was quoted as saying, “Nothing good in the world has ever been done by well-rounded people. The good work is done by people with jagged, broken edges, because those edges cut things and leave an imprint, a design.” So me, I choose to break a few eggs…

  • Thirteenva

    1) I have recently made the jump to css layout(in the past year), while some backwards compatibility keeps me from validating as xhtml-strict, i can say that i have no intention of going back to purely table based designs. The days of nested tables are behind me. So many designers have proven that you can have a beautiful design and layout that’s not table based.

    2) This was a tough choice for a first blog post, and a gutsy move. But as a whole the article came across as ignorant. To come out and say you need table based design in order to cater to ‘low-end’ users on older browsers makes me cry ‘BULL’. If nothing else you’ll have as many issues with table layouts cross-browser as you will css. I remember many sleepless nights tweaking table layouts to work properly across ie 4+ and ns 4+.

    Also you make mention of customers wanting their sites to look good for 95% of their customers. Well if you catered just to IE5+ and netscape 6+ you’d have that covered. This degrades your argument about netscape 3 (much less than 1% market share) in your previous sentence.

  • http://boyohazard.net Octal

    I have to agree with Ray, ceeb, zOsO and mashby.

    As well as the points they raise there is the issue of legality. If your table based layout/navigation causes that site to be inaccessible to disabled users you could be facing legal action.

    Another problem I have noticed and one I am guilty of employing myself is rather than using css to its full potential to come up with new and inspiring designs it is being used to try and emulate the rigidity of table based layout.

    You only need to look at CSS Zen garden, whose tag-line is “beauty in css design”, to see what I mean.

  • http://boyohazard.net Octal

    Sojan80: “But since a lot of these sites are research related needless to say there are tons of tabular data to be dealt with and styled.”

    Don’t worry. This is what tables are meant to be used for – tabular data.

  • http://www.codehooligans.com PMenard

    Wow. Can’t say much that has not already been stated in previous postings.

    After reading a few books on Web Standards like Zeldman, I really feel that CSS/XHTML is our future for web development. Tables should only really be used when they make efficient use like in tabular data. For layout and positioning CSS is the way to go. As for the design of the commercial corporations to have their site like exactly the same on all browser platforms and version…get over it!

    P-

  • Philip

    I find it extremely disappointing that the only “design” blog here at Sitepoint is advocating the use of tables over CSS. All the points in favor of tables are just plain wrong!

    Using CSS saves both you and the client money! Now that’s good business! You save money because development time is generally shorter and maintenance is easier and your client saves money on bandwidth costs which are significantly lower and server usage/load.

  • konky2000

    Here is a message for for-profit businesses: Someone who hasn’t yet upgraded from Netscape 4 — even though doing so is absolutely free — is not likely going to also be spending a lot of money buying things on the internet.
    My clients don’t even want me designing for Netscape 4 anymore. Seriously, have you tried surfing the web lately with a Netscape 4 era browser? It is an amazingly ugly experience. On my websites, the number of people on these browsers is insignificant. Heck, even people using 800×600 are in the minority nowadays.

    Still tables do have their place and I not yet been able to create a site that both satisfied clients AND satisfied css/xhtml purists.

  • John

    The myth of pixel perfect design was born in the realm of Windows and IE, among 18-30 year old web designers who have great eyes, and is still being clung to.

    The web was never intended to be pixel perfect. Users can override every single design choice you make, and will often do so.

    Maintaining the same overall look and feel is one thing. Having it look the same everywhere and at all times is something entirely different. The technologies that we use aren’t intended to allow for that. We can kid ourselves that we’re nailing it every time, but I’d rather look at it from a worst-case scenario than that elusive combination of hardware/software/user that in reality so rarely comes together.

    What I also think is funny is that the same designers and developers who are saying “it should look the same everywhere” are often the same ones who, when notified of a Netscape or Mac bug in their layout, will claim that “that’s only 3% of the users out there anyway.”

  • http://www.igeek.info asp_funda

    Well, its one of my dark secrets too. I too use tables for my page’s layout. Sometime back, I tried to convert to all CSS positioning but to my badluck, I found that no 2 browsers support a style in the same way. So, I had to do a browser check & use different stylesheets for IE/Opera and Netscape/Mozilla.

    But a

    will render your layout exactly as you want in any number of different browsers. No problem in that. And yes, most clients don’t want to sacrifice any visitor for the sake of web-standards. I mean, if you look from their point of view, why should they do that? They are running a business & they need more clients, web-standards be damned, excuse my language. Web-Standards are just a means to improve their revenue, but not as important as a client which is the source of revenue.

  • Michael

    I work a state-funded University and Texas developing online courses and maintain the university’s website. We have a basic template that is created using CSS positioning of div tags — but the problem we came across is that the secretaries who input the information (using MS Frontpage *MEH!*) see the divs laying on top of each other and start moving them around. Then they complain that nothings is right. We have had to resort to using a combination of tables and divs to accomodate for their lack of knowledge. The header and left nevigation are in divs, but the main page content is in a table so the secretaries can add content at will without being frustrated by their WYSIWYG editor. I’m all about positioning with CSS, but teaching others to work with it can be a nightmare and a half.

  • http://www.xDevDesign.com/ xDev

    I thought I’d add a solution to the problem of supporting 4th generation browsers, and up, using CSS layouts. Its possible and it has already been done here:

    http://www.saila.com/usage/layouts/saila_layout.html
    http://www.fu2k.org/alex/css/layouts/3Col_NN4_RWS_C.mhtml
    http://www.projectseven.com/whims/cssp_3box/3boxnoscript.htm
    http://realworldstyle.com/nn4_3col_header.html

    As far as NN3! Serve those yahoos a text only version by detecting them with javascript. Inside that the text version you should put a disclaimer for them to at least upgrade to 4.x. NN3 is horrendous! I had to use it for six months in 2000 and the web looked broken even back then!

    I wouldn’t take a business owner seriously if they insisted on providing a design that looks the same in NN3 as it does in 6th and 7th generation browsers. Its simply ludicrous. The time and money needed to provide this type of support would be detrimental to their ROI. Its not even worth considering.

  • http://www.xDevDesign.com/ xDev

    Even if a table layout is required to keep all browsers in check, by all means do so. There’s nothing wrong with it, if used intelligently. Have one table enclosing the middle structure. The header and footer can go in divs, as well as the content within the center cells. Keep away from nested tables at all costs and you will be a much happier developer.

  • http://www.generationphp.net Xenon_54
  • TBanks

    First off, bravo for admitting your skeleton! Acknowledging is the first step to change. I began in all this only two years ago and immediately after learning table layouts found Sitepoint, CSS and Standards. Thank goodness. I fully believe that Standards are the way to go. I find it interesting that so many comments revolve around what the ‘client wants to support’ and ‘it won’t look the same’ and ’3%’ and ‘it takes too much time for (insert me, my team or the designated layperson forced to update, etc) to update’…The fact is that as the developer community, we are the ones that should set forth the guidelines for the way the web works under the hood. We’re the ones that will be stuck creating, implementing designs or fixing it! Hallelujah for the Standards pioneers that have vowed to throw off the shackles of designing for browser x, y AND z (did I actually see someone say they had to serve a different stylesheet to work across browsers or platforms..I’m not going back to reread it… but it defeats the purpose! This is Browser War era thinking). Amen to those who are attempting to lay down a standard method of development to which the browsers should adhere for display. Correct me if I’m wrong but, essentially what I’m hearing is an argument to STAY in the dark ages? Please, please, please! Change is hard, but it’s coming and it’s for the best. It’s up to US, the average developers, to embrace the concepts and begin to utilize them (saying oh CSS is a good idea, but I’ll wait until (insert ‘browsers support it’, ‘customers understand it’, ‘h*ll freezes over’). It’s up to US to shake off the apathy and get involved, otherwise we are at the mercy of ‘trends’. It’s up to US to educate our clients, consumers and all web surfers that this is the way it is – and not by burdening them with the details of standards and why this is better, and oh please won’t you try it? (Does the AMA ask the public for permission to use an easier, more effective surgical procedure? Does your dentist inform you every time they upgrade their instruments? Does your psychologist discuss her new therapeutic techniques with you?) but by doing and showing results (which speak for themselves…faster loading pages, better SE ranking, greater accessibility, etc.). When the inevitable questions come about NN4 or some equally out of date browser, we need to educate – this is an old out of date browser, it doesn’t work well with the modern web (just like your records don’t play well on a cd player…or some equally charming comparison). And through such education we help effect the change. Hanging onto the old ways and continuing to support them will just extend their inevitable demise (and keep us developers suffering a bit longer).
    Thanks for this post folks

  • Rick

    For the guy with the dumb secretaries using MS Frontpage:

    Get XStandard, I’m sure you can implement some sort of CMS with it. Even if it’s just a “cut n’ paste” CMS.

    http://xstandard.com/

    XHTML strict. No excuses. (Frontpage? Come on, that word should be FORBIDDEN in these forums :P

    If you can’t afford the *FREE* download from xstandard, i guess you can purchase the low-budget -heh- Dreamweaver MX 2004.)

  • Rick

    Forgot to say.

    I am in favor of the *one only* table for layout. header, 3 columns, footer. ta-da! But only if it’s part of a multiple template system so i can switch to the CSS-only template in a near future.

  • Thirteenva

    AMEN TBanks!!! Maybe you should be writing this blog. I agree with TBanks 100%. As the developer community we need to drive the era of change by informing clients and being the experts in our fields. When a client says i want to appeal to netscape 3 explain to him why it’s not worth that less than 1% market share and that it might alienate a much larger more powerful group of buyers.

  • dgibson

    I hate when people make blanket statements, sometimes even blatantly wrong, self-serving statements in the name of pushing some envelope. There are still plenty of good reasons to use tables-based layouts. I have made a number of table-based sites with good templating scemes that will not require much effort in a redesign. I can get up on my high horse and claim that most of my tables-based designs are fluid and collapse down to below 640×480 without breaking, which even many CSS layouts do not do, and how everyone who uses fixed size designs (CSS or not) is inferior. Yet, I keep revisiting certain projects wanting to redo them in CSS for the fun of it and just to say I did. Obviously it’s for the interest and challenge and not the money.

    CSS is not some magical answer and the learning curve of making it work cross browser and platform often means it is not necccessarily “cheaper” for anyone. It does not disolve design “limitations” or guidelinees that should be heeded (such as designing for lower resolutions). And more often than not, when a client wants a “total redesign”, they are usually prepared to pay for a whole new site. Someone recently said that programming for the future is a waste, and I partially agree with that. At least that the arguements don’t carry so much weight to me as they are intended to.

  • Transpyre

    Has anyone been able to successfully convince a client that designing for standards-compliance versus older browser versions is the way to go?

  • http://boyohazard.net Octal

    “Has anyone been able to successfully convince a client that designing for standards-compliance versus older browser versions is the way to go?”

    Yes. In fact I have yet to find someone that insists otherwise.

    There are two great accessibility articles on Sitepoint quoting real life facts and figures:
    How to sell accessibility
    Interview – Julie Howell, Royal National Institute for the Blind
    (I especially recommend the first)
    Of course you may have to research your own figures if you live outside the UK but you can get the point.

    With that in mind I find it very difficult to understand Corrie’s statement:
    “I’ve found that most clients, when presented with a choice, aren’t willing to sacrifice the low-end of their user/customer base for the sake of being able to say ‘our site meets all current web standards!’”