|
WebWord Weblog Posting Posting Date: September 04, 2002 WebWord Comment -- I'm working on a new web site. Should I use tables or CSS? For what it is worth, I'm favoring CSS right now for the layout. Pros and cons? How has CSS worked for you for layout and positioning? What about graceful degradation? Are there other issues to consider? I'm mainly looking for advice from people that have used CSS instead of tables, and I'm curious about how they made their decisions.
Reader Comments...
I just want to make sure that from a usability and accessibility point of view, using CSS is the right thing to do. If it isn't I'll just back off and use tables like eBay, Amazon, and others still do. Perhaps I'd just like to be convinced that CSS is the way to go? Posted by: John S. Rhodes on September 4, 2002 07:26 AM
CSS is the way to go if the layout can be created reliably using CSS and you're willing to work out how to do it properly. Otherwise use minimal tables combined with CSS (e.g. don't use spacers and nested tables to put a box around something, use CSS if possible). CSS layout produces quicker pages with source code that's much easier to work with, but obviously the site has to work well, so it depends on your skills as a developer. If you're new to CSS tread carefully, start with tidy, structured (X)HTML combined with CSS for formatting text, then move on to layout. It's worked for me and my colleagues, we only use tables for layout where we have to (e.g. complex multicolumn designs, or sites which have to sit within existing table-laden code) and undoubtedly produce better sites more efficiently as a result.
CSS pros: http://www.zeldman.com/daily/0802c.html#evangeline Bottom line: CSS makes your site look great in web-standards browsers (not NN 4). Content will display in the lot - be they palms or even WAP-phones. Oh yes, you will also not spend time writing and downloading special code for each browser. Posted by: Nagarjun on September 4, 2002 07:55 AM
Matt, if I stuck with the templates supplied by Glish would I run into any problems? I do not want to do anything fancy. I'll be happy to stick with a basic design. What do you think? Posted by: John S. Rhodes on September 4, 2002 08:28 AM
My website at http://www.morriscox.com was done in CSS and the only table is on the front page. Posted by: Morris Cox on September 4, 2002 08:56 AM
I'm afraid I've not checked out Glish's templates, but as long as they're tried and tested and any compatibility issues are documented then you should be fine. If you're concerned, put together a rough test page and see if it's OK in a wide range of browsers (I'm sure WebWord readers would be happy to help with testing).
John, go with the CSS. This is a no-brainer. I converted my site to CSS about three months ago and it's been an absolute joy to maintain. Making a sitewide design change is a matter of changing one or two lines of code in one file. I'm of the belief that designing with nested tables is like running a marathon in loafers -- it'll work, but there are much better tools for the job. From an accessibility point of view, CSS is exactly the right thing to do. Assuming it's done well, the technique separates presentation from content, allowing your site to be accessible (and look decent) in different Internet devices (screen readers, text browsers like Lynx, wireless and handheld devices, etc.). That's not always the case with table-based layouts. Coincidentally, a relevant article by Zeldman, 99.9% of Websites Are Obsolete, was just published last night in Digital-Web Magazine. Definitely worth a read. Posted by: Adrian on September 4, 2002 09:16 AM
"Making a sitewide design change is a matter of changing one or two lines of code in one file." This type of thing was possible with eXtended Server Side Includes on Apache servers before CSS. Layout of my table sites are controlled by 2 files. Literally the only thing in my pages are some assigned variables at the top, and then the page content. You can get some complex effects if you really push XSSI. I've deployed redesigns of 500 page sites in a minute or two. But yeah, CSS is the way to go. First, check your browser stats in your server log. I bet very few people use old browsers because WebWord caters to the web development community. And your page layout is very simple. The usual 'con' arguments don't apply here. Posted by: Jack on September 4, 2002 10:10 AM
Jack wrote: "First, check your browser stats in your server log. I bet very few people use old browsers because WebWord caters to the web development community. And your page layout is very simple. The usual 'con' arguments don't apply here." This is for a new site, not WebWord (although WebWord does need a redesign). So, I can't look at the server logs. In any event, thanks for the advice. Good comment about SSI too!
If you're still not convinced that CSS is the right thing, read Mark Pilgrim's site Dive into Accessibility. Posted by: Joe on September 4, 2002 11:18 AM
If the new site is for a client, and tables are used for layout, I would include mention in my quote that the site will be built with tables. One day the dam will break and ADA web accessibility lawsuits will come flooding in. The last thing I'd want is a client coming back to me citing the existence of W3C WAI specs that I ignored. A table blurb won't save you, but it will state an obvious accessibility issue that the client ordered. Posted by: Jack on September 4, 2002 11:48 AM
CSS can aid accessibility through consistency in visual design and through semantic use of HTML for document flow. Not to mention alternate style sheets for larger fonts, less colours, etc. Win for those who can't read tiny fonts, win for designers who don't have to bend over backwards to maintain style. Problems with backward compatibility in web design is not new, but unlike v4 innovations, no information is lost on browsers that don't support CSS (unless it is an overly visual message). Win for Mosaic users, win for non-graphic users. The varying levels of style support mean that you can work on CSS for the latest browsers first, then track back and choose which styles are appropriate for older browsers -- even if that means only capturing the essence of the style instead of replicating it. Win for those using v4 browsers who don't know they're looking at a degraded design. Posted by: Chris on September 4, 2002 12:18 PM
My site is entirely XHTML 1.0/CSS 2.0. No tables, supports web standards, content renders in every browsing device, etc. (I sound like Zeldman).At any rate, it's high time for the thought leaders and layman alike to adopt web standards - our users will appreciate it, and the user experiences we create will be enriched by it. Go CSS, John. Posted by: Shane on September 4, 2002 12:41 PM
What? You're redesigning? Why wasn't I told of this :p Check yor site browser stats, John. Posted by: MadMan on September 4, 2002 12:52 PM
Check out the two and three column CSS layouts from Real World Style. They work in NN4 and in newer IE and NN browsers. The border does not work in NN4, but the layout is fine. The End of Free uses the Glish layout, and it does not format properly in NN 4.7. I'm going through this same thought process. Right now, I'm going to do what was suggested above, and that's develop the site with a few tables, use CSS as much as possible, monitor the weblogs, design templates without tables on the test server, and implement the new layout later, possibly. evolt.org also continues to use tables, even though they are a website dedicated to website development. Their reasons for sticking with tables for the moment are explained in the book Usability: The Site Speaks for Itself. I like the idea of not using tables, but at this time, tables are easier for me due to my current lack of experience with using CSS to control 100% of the layout. I have to keep reminding myself that a site can be standards compliant with tables.
First question is whether you want to support 4.x browsers based on your traffic stats. If not, the decision is easy -- go with CSS layout. If you want to support 4.x, I'd still recommend seriously looking at CSS layout for the various reasons mentioned. (I had to use tables in two spots because NS4.x would simply blow up otherwise.) Since you've got a simple layout, I'd suggest checking out various CSS layout templates and seeing if they're backwards compatible. I know most people haven't bothered, but I seem to remember some people have worked on this. Unfortunately, I can't point you anywhere, because when I built my site to be (almost) table-free and 4.x compatible, I did it myself. It was a bit of pain, but I also was experimenting with a more complicated layout and presentation than most people. At worse, if your NS4.x numbers are typical -- very low and dropping -- you can go with CSS layout even if it causes some layout problems for NS4.x users as long as your content is all there. Yeah, people will flame me for not being user-centric, but this is where business interests (development time and costs) gets balanced against user interests. You probably also want to put in a "hidden" disclaimer that appears only to user old browsers that explain the site may not look pretty, but should contain all the info. Zeldman mentions how to do this in one of his article. Basically, you use CSS to hide the P or DIV with the disclaimer. Older browsers can't understand the CSS, so it appears for them. That said, I'm not religiously opposed to tables. They're still often easy to work with for fine-grained layout -- and with CSS you can actually control width, etc. from the master stylesheet, so they can have the same flexibility as using DIVs. For things like data tables, TABLE tags are the best way to do things... BTW, using tables for layout _can_ be accessibility-friendly _if_ your content still makes sense if the table is omitted. Easier said than done, but for a simply-designed site like WebWord, it's probably practical. Just wanted to point that out, since designers and developers often over-react to what they _think_ the WAI guidelines say, rather what's actually in them. Posted by: George Olsen on September 4, 2002 03:20 PM
Catering fully for NS4 isn't particularly "user-centric" if it means 100% of users get a slower, less-accessible site so that 3% can have a prettier layout.
Before you commit to either, understand that css limits what design solutions are technically possible. If you look at commercial websites of any complexity, they are almost always built with tables. If they use css, it's usually for the low-hanging fruit, things like site-wide color specs and fonts. If you get into complex layouts with css, you'll end up having to deal with a lot of browser compatibility problems. The Zeldman approach, "fuck compatibility", won't work on a commercial site. You'll end up having to answer a lot of questions about why your site looks like hell in less common browsers. Most complex sites are built using tables, not because it's the perfect way of doing it, but because they let you build a site that works. That, despite the exhortations of css-freaks, is what you're paid to do, not go on some damn fool idealistic crusade with Zeldi-mon. CSS will eventually evolve into a very capable tool; for now, take its limitations into consideration. Posted by: jorge on September 4, 2002 05:55 PM
George, You've hit on one of my pet peeves. Why put a "hidden disclaimer" on a site nagging older browser users? Just let them use the site; if you're done it properly it will be boring but usable or close to the full layout, depending on the complexity of the layout. The sites I've designed in the last two months months use CSS EXCEPT for some calendars, which are tabular data and make sense to use tables for. I was caught up in the don't use any tables purist thing for a bit, then realized the amount of effort it was taking to recreate a tabular grid was silly. CSS is harder, but more elegant. Editing by hand it's not hard to invalidate an entire rule or even stylesheet with bad syntax. My advice: use CSS, but don't nag your users Zeldman-style. Posted by: Chad Lundgren on September 5, 2002 01:14 AM
I was going to avoid this one, but what the hell! George Olsen's advice was excellent, you can use 'simple' tables and style them (including widths, heights, borders, backgrounds etc) with CSS. This way you can mimise the file sizes, use mainly semantic markup and have it work in older browsers (although it won't look quite as good). If you aren't familiar with all the browser issues with CSS positioning then you could end up spending all your time making fixes for browser bugs. It's not really a choice of tables or CSS, it is how much of each is right for your project. (E.g. If you wanted it to work on TV browsers in the UK, you'd be stuck with HTML 3.2 and font tags.) Jorge wrote "CSS will eventually evolve into a very capable tool;" - CSS has been a useful method since 1998, it's just the browsers that have to catch up! If you do go down the full CSS route, I have to agree with Chad: don't nag the users, let them get on with it... Posted by: AlastairC on September 5, 2002 05:16 AM
Alastair wrote: "CSS has been a useful method since 1998, it's just the browsers that have to catch up!" I agree with you, Alastair, that CSS has been a useful tool for years. But I also agree with your statement that if you aren't familiar with all the browser issues with CSS positioning that you can end up spending your time making fixes for browser bugs. The bottom line is that it's a fairly trivial task to build a simple site using CSS. However, nobody is building complex commercial sites without using tables because CSS doesn't currently have the capabilities that tables provide, and because CSS implementations in browsers, as you mention, are all over the place. If you don't agree, please provide links to a commercial site with a sophisticated layout implemented in CSS. Posted by: Jorge on September 5, 2002 10:53 AM
Jorge, I really like your request: "...please provide links to a commercial site with a sophisticated layout implemented in CSS." I would also like to see such a list. Posted by: John S. Rhodes on September 5, 2002 11:52 AM
Few people are building complex commercial sites using more CSS (I agree some tables are required for many layouts) because, to be blunt, most developers don't know what they're doing and most complex sites aren't well-built. Don't confuse what people are doing with what should and can be done.
A disclaimer doesn't have to be a nag note telling users their browser sucks. Notice, I said the intent was to assure users the content is all there even if the formatting may look funky. Since some many sites _may_ make content inaccessible to old browsers, I think it's useful to clarify that, yes, you are seeing everything. This is just good customer service when you know you can't wholly satisfy someone. It's no different than my waiter apologizing because the chef took too long. Or my credit union apologizing when they decided to no longer handle business accounts. If you can make a site that looks good in CSS and in old browsers, more power to you. If you can't, then I think it makes sense to acknowledge the situation and offer potential solutions if feasible. As far as commercial sites using CSS, I know there are some, but since CSS isn't a personal crusade of mine I don't follow that debate. However, most commercial sites suffer from inertia and doing a major redesign is a 6-12 monthy project, so you're often seeing things where they were a year ago. Plus businesses are, rightly, conservative. They know tables work, so why screw around with new technology -- as Zeldman points out IE6 introduced new bugs that make part of his site hard to read. And as Matt points out, it does require more sophisticated developers. Posted by: George Olsen on September 5, 2002 12:53 PM
However, nobody is building complex commercial sites without using tables...If you don't agree, please provide links to a commercial site with a sophisticated layout implemented in CSS. Here are a few such examples: SitePoint.com redesign (Original site) Amazon.com redesign (Original site) Lycos redesign (Original site) Proof positive that so-called "complex layouts" can indeed be replicated in CSS. Posted by: Adrian Holovaty on September 5, 2002 05:20 PM
Speaking of 37signals, our site was recently redesigned in CSS/XHTML. The site still looks great and is now easier to manage (and page sizes are half of what they used to be). We like to think this shows our design and usability clients that we walk the walk. Caveat: it takes quite a bit of tweaking to get the pages to display properly in various browsers. You'll need time and patience to make your designs bulletproof. Posted by: Matt Linderman on September 6, 2002 02:56 PM
Adrian, there's a big difference between a fully functioning commercial site and a one-page mock-up. So far I don't think that anyone has been able to respond to Jorge's actual request. That being said, just because there aren't any major sites going full-bore on the XHTML/CSS front that doesn't mean that it doesn't make sense to go with these standards. A rule of thumb that seems to be emerging out of the discussion here and at 37signals is if you're developing a new site go with XHTML/CSS unless there are specific mitigating circumstances (i.e. the site is an intranet for a company that is still standardized on NN4.x). If you're managing a large scale site take an iterative approach to this transition. No need to throw the baby out with the bathwater to go standards-based, but understand that this is a transition that is going to have to be made at some point and the more that's invested in doing things the old way, the more it's going to cost to make the switch. Posted by: ek on September 6, 2002 03:52 PM
ek, I agree completely that mock-ups are different than full sites. I presented the examples in response to Jorge's comment that "CSS doesn't currently have the capabilities that tables provide". It does, indeed. The problem isn't one of technological capability, it's one of designers' capability. (Nobody, not even Eric Meyer, has *really* figured out the perfect way of designing in CSS yet. We're all learning together.) Another link: bigbaer.com is a fully functional commercial site that uses a CSS-based layout. Somebody mentioned it on the css-discuss mailing list a day or two ago. Posted by: Adrian on September 6, 2002 04:17 PM
""CSS doesn't currently have the capabilities that tables provide". It does, indeed." Indeed, it doesn't. CSS layout is quite robust. It can do things a table can't. There's also very basic things a table can that simply aren't practical or sometimes even doable in CSS2. Use CSS as much as you possibly can. Use tables for the rest. Make it a nice balance. Posted by: Darrel on September 6, 2002 06:00 PM
Darrell makes an excellent point. A glaring omission of "pure" CSS is an EASY way to vertically center without tables. You can do it, but it's a pain compared to the old-fashioned way. George says: "IE6...introduced new bugs that make part of his site hard to read" Hard to read? How about impossible? I rarely visit Zeldman's site because of the IE6 scrolling bug. It's ridiculous for me to hit refresh a bunch of times. And that doesn't always work. Yes, it's Microsoft's fault, yes, he shouldn't have to adjust for it, and no, I do not agree with his refusing to code around it. My company (an ISP) ends up doing support for Microsoft's buggy Dial Up Networking. We have a don't officially support policy on DUN, but practically, most people get help. George: I've never had a waiter make a snide comment about my worn out debit card. Talking about someone's browser either confuses or insults--not good customer service. The insulted may be the minority, but they will be vocal. To put it another way, in my experience on usability tests, the only time novice users seem to wonder if they got everything is if the page hasn't finished loading. I don't think it would even occur to them that they might not be getting everything if it had appeared to finish loading. For a site targeted at a technical audience that knows browsers, your argument makes some sense. But for most sites, I'm just not buying it. Posted by: Chad Lundgren on September 6, 2002 09:03 PM
Darrell makes an excellent point. A glaring omission of "pure" CSS is an EASY way to vertically center without tables. You can do it, but it's a pain compared to the old-fashioned way. George says: "IE6...introduced new bugs that make part of his site hard to read" Hard to read? How about impossible? I rarely visit Zeldman's site because of the IE6 scrolling bug. It's ridiculous for me to hit refresh a bunch of times. And that doesn't always work. Yes, it's Microsoft's fault, yes, he shouldn't have to adjust for it, and no, I do not agree with his refusing to code around it. My company (an ISP) ends up doing support for Microsoft's buggy Dial Up Networking. We have a don't officially support policy on DUN, but practically, most people get help. George: I've never had a waiter make a snide comment about my worn out debit card. Talking about someone's browser either confuses or insults--not good customer service. The insulted may be the minority, but they will be vocal. To put it another way, in my experience on usability tests, the only time novice users seem to wonder if they got everything is if the page hasn't finished loading. I don't think it would even occur to them that they might not be getting everything if it had appeared to finish loading. For a site targeted at a technical audience that knows browsers, your argument makes some sense. But for most sites, I'm just not buying it. Posted by: Chad Lundgren on September 6, 2002 09:03 PM
Being forced to *structurally* markup information is one of the biggest benefits of moving to xhtml and css. It forces thought and rigour in the production stages, making changes easier down the line, and minor content updates a breeze. Potentially this structural markup has more benefits than the other (perhaps unrealistic) ideas of the semantic web. Posted by: Timo on September 7, 2002 06:11 AM
Bit late in the game for me to comment, but I would definitely recommend switching to CSS for all of the reasons listed already. You may also want to read an article I wrote earlier this year on this exact subject: "Tables or CSS: Choosing a Layout"
The big caveat on most non-trivial (ie not borrowed) CSS designs is that it DOES take a LOT longer to develop them. This means money. The advantages that are usually lauded are accessibility but WAI says tables are ok if coded suitably, page size but one of the most important pages for customers is the home page which tends to get bigger for a large CSS site and maintainability which you can do a LOT better with a Content Management System. CSS only layout is a great idea but is not really ready for typical commercial use. There are still a lot of people out there with older browsers (more than browse with PDA's and WAP phones) and each one of them ignored or 'left out' is money lost for a client and you don't see many companies saying oh ok we'll ignore 3% of our customers because it's cool to use CSS Layout. Most companies profit margins are around 5-10% so losing 3-5% of customers can mean losing between 30% and 100% of all of their operating profit. My suggestion (and one supported by Zeldman now) is to use tables to layout the scaffolding of your site and then CSS to format and position a lot of the internals, possibly resorting to tables again for complex internal layouts (complex forms, custom borders/edgeing, etc). My own website (www.pollenation.net) is XHTML 1.0 Strict/CSS2 and uses tables in a way that is accessible and is very light. Maintenance is very simple and the content management system behind it manages very well with all content. I've cheated with Netscape a bit by using a search and replace tool in my content management system that converts the XHTML1.0Strict to netscapish code. This means I only have to maintain one site, I'm fully compliant and accessible and my site works in Netscape 4. ps I've developed a fully css layout site 2 years ago (for Citria, a company I worked for) which you can see at http://www.htmlbyexample.com/ when my ex work colleague gets his java fixed :-) Posted by: Tim Parkin on September 12, 2002 07:07 AM
Home | Moving WebWord | Cool Books | Hot Web Sites
URL: http://webword.com/weblog/ ©1998-2005 by WebWord.com. All rights reserved. |