CSS vs HTML
Jul 11, 2003
In the comments on my last entry, Cheshire Dave and I had a discussion regarding the pros and cons of CSS based design as opposed to table-based ditto. At first I wrote the gist of this post as a comment to him, but figured I'd post it as a separate entry instead.
What Cheshire likes about table-based design is that it's dependable. Table-based layout just works, always, in all browsers. To a certain extent, he's right, assuming one thinks robots like Google, and text-based browsers like Lynx, are relatively insignificant. I have no problems understanding why some people are hesitant to switch from table-based design to CSS-based design.
Seemingly though, Cheshire thinks using CSS for design and layout comes with an inherent and unavoidable amount of "tinkering" and "tricks". I'm afraid others may think so too, which is why this is an entry and not a comment reply.
Isn't the goal of CSS to make it easier for designers to create accessible, flexible sites? Sounds like you had to jump through a lot of hoops. Not how I want to spend my time, thanks. Cheshire Dave
Using CSS in place of tables does not require tinkering per se. CSS is a more powerful, flexible and advanced technique than vanilla HTML and table-based layout is, but you only have to use all that extra power and flexibility if you want to do so, you could just use it exactly like you use tables and HTML too, and ignore all the extra possibilities.
I'll try to illustrate this with a recent example, not about layout per se, but which pretty well describes what I mean:
Douglas Bowman uses a few CSS "tricks" in his latest (stunning) work: Adaptive Path. For example, he wants to use keyword font-sizes (x-small, small, etc) instead of absolute pixel sizes (a conscious choice unrelated to CSS-based design). Some browsers define those keywords differently, which is why he uses CSS "tricks" to apply them differently to different browsers. Had he used HTML's <font> tags, instead of CSS, he'd have the exact same problem with differing definitions of font-size keywords, but no way to solve it.
Douglas could have just used absolute pixel font-sizes like Cheshire and I do, but he decided to go the extra mile and use keywords. If you use absolute pixel sizes instead of keywords -- with CSS or with <font> tags -- Internet Explorer will not let you manually adjust the font-sizes. Other browsers will.
CSS granted Douglas extra power and flexibility, and unlike Cheshire and I (regarding font-sizes), he decided to use it.. But -- and this is important -- he didn't have to as a result of using CSS as opposed to HTML.
Douglas has written a case-study of sorts about the development of Adaptive Path, an interesting read which I recommend.
Comments
You couldn't have made my argument for me any better than pointing out that site. On my work computer, the text kept flipping around like a fidgety child as I moved my mouse over the page. On my home computer (same exact browser, no less) the text was barely legible (I would say functionally illegible). This from a site that advertises itself as "putting user ideas into experience"?
Let's leave aside the CSS-as-positioning issue for the moment. I already stipulated that CSS for text can be powerful (if unexpectedly buggy as even the Adaptive Path site shows). But relative sizes just so he can use tags like "x-small"? Might as well use the old HTML font tags and party like it's 1994. Better to use Zeldman's trick of absolute sizes but give the user the option of switching style sheets on the fly, like Jeff does on his site.
Now, back to CSS as positioning. Look, I know tables are the devil's work and don't treat browsers like Lynx very well. (I'm not sure what the Google issue is -- Google indexes my site just fine. Not two days after posting a recent entry on my site, I was one of the web's top destinations for hoisin ribs, as I should be.)
But you're being disingenuous when you suggest that only hacks and tricks are used to access the most powerful aspects of CSS. The CSS cognoscenti have left 4.0 browser users behind, effectively treating them as though they're using Lynx. My pages are viewable to 4.0 browser users pretty close to the way they're meant to be seen. Now tell me this: how many more people are using 4.0 browsers than are using Lynx? Qualitatively, I'd say my site is more accessible.
Never mind my own site. For my job I create dozens of sites for literacy programs. Most of the people who look at those sites are using library computers that are horribly outdated. That's just life here in the US -- no adequate funding for education. No way can I use CSS for layout on those sites.
If someone could demonstrate conclusively that I'm full of it, I'll gladly listen. I want to join the present, I really do. I've been to different CSS proselytizing sessions, and it all sounds so nice, but in practice I've yet to see a very-well-designed site (most CSS-designed sites I've seen taste like cardboard) that works consistently across browsers and platforms, especially without a lot of tricks and hacks.
Comment by Cheshire at 19:56, 11 Jul, 2003 #
Sorry, hadn't looked at the link about the development of the AP site. Good thing I did, as I realized that I was missing an entire section of their page. Boy, I thought that big empty grey box looked funny. (Note: I added the big red arrow to show what I'm talking about.)
This is standards compliance?
Comment by Cheshire at 20:33, 11 Jul, 2003 #
Cheshire: You make a pretty solid argument regarding the lack of consistent support for 4.0 browsers, I can't verify or disprove any of what you're saying since I don't have IE 4.0 lying around.
You keep mentioning "4.0 browsers", I hope this is IE 4.x we're talking about and not NS 4.x, as I've never claimed NS 4.x has any CSS support worth mentioning, nor that NS 4.x is anything but a heap of dung. NS4 is left behind, way way behind, for very good reasons.
If installing a free browser in public libraries and schools in the US is a too costly effort, then you're in a far worse state than I had imagined. If that is the case I can only offer my deepest sympathies, we can afford that over here.
My own referrer statistics indicates that ca 0.2% use a IE 4.x browser, global statistics indicate that IE 4.x and NS 4.x each has ca 1% of the user base. Imho, that's not a crowd sizeable enough to optimize anything for.
Re: cardboard, I can't say I understand that, I have the complete opposite experience; web designers who stopped evolving in 1997 usually produces crap exclusively, in my experience. But anyway, how does the CSS Zen Garden look in the browsers you refer to?
Comment by Tomas at 20:48, 11 Jul, 2003 #
There are some very nice designs in the Zen Garden, and only a couple of those seem to have problems registering correctly on my browser. The "What Lies Beneath" version is particularly nice. Some of the others...well, I just hope I never meet those designers in person.
Sorry, I meant 4.x browsers. OK, I'll allow that the browser share of those older browsers is pretty low. But the reason some libraries and schools don't install newer browsers is the fault of their tyrannical IT managers. The librarians and teachers can't upgrade the software themselves -- they're simply not allowed. They live in prehistoric IT fiefdoms. I know you know what I'm talking about.
In the next couple of months, Mastication will get a new name and a domain of its own, and there will be a significant redesign as part of the change. I shudder with fear as I write this, but I promise I will attempt to learn from the Zen Garden folks and create a kick-ass, yet valid CSS design.
And I'm holding you responsible, Tomas.
Comment by Cheshire at 21:55, 11 Jul, 2003 #
Cheshire: Who better to "demonstrate conclusively that [you're] full of it" than yourself? I'm crossing my fingers, hoping that you succeed tremendously well in your effort, and by doing so become another vocal CSS and standards advocate.
I'm holding you to that promise, and I consider this progress, and I'll gladly take the blame for it. ;-)
Btw, is asking you to base it on Movable Type -- and offer a syndication feed -- pushing it too much?
Comment by Tomas at 22:10, 11 Jul, 2003 #
Movable Type? We'll see. I haven't played with it too much, so I don't know how much design flexibility I would have in individual entries. For example, how easy would it be to create a sidebar like I did in my latest entry? I don't do it in every entry, and I like my ability to have images and captions in a sidebar that the text wraps around. How much trouble am I going to have doing that sort of thing in CSS/MT?
Comment by Cheshire at 22:55, 11 Jul, 2003 #
Cheshire: MT does not make restrictions on what a post can contain HTML wise (or other wise), so yes, you could do that.
Comment by Tomas at 13:20, 12 Jul, 2003 #
Ah, a conversation amongst friends.
Chesh, my MT templates are set up in tables. No problem. I'm just completing my first design at work using no tables and just CSS positioning. And, so far, I'm having no problem (fingers crossed).
Understanding CSS syntax and form has taken me some time. But, I remember back to when I was learning to code in tables (a real left brain/right brain process as I moved back and forth between the linear code and the web page design). It took me time too. In fact, I was just helping a coworker who still has trouble visualizing tables.
An accesiblity point to make about CSS vs. Tables: text readers have an easier time without tables. And pages with no tables load faster.
At our museum, we made the decision late last year that we'd be designing only for version 5.x + browsers. Our stats supported that move.
Comment by Jeff at 22:48, 12 Jul, 2003 #
Thanks, Jeff. I'm going to try out CSS and see how it goes. As I mentioned to Tomas in an email, it occurred to me this weekend that switching to CSS layouts means, at least for the time being, that I have to go back to coding completely by hand, which was something I swore off back in '99. In my mind at the moment, more accessibility = lower productivity, since it would take me longer to build sites by hand than use the shortcuts I've come to love (and rely on for my sanity) in Dreamweaver.
We just counted up the number of sites I work on at my nonprofit. Now, I don't work on all of them all the time, but I have 63 different sites that I'm responsible for. And that doesn't even count the ones I do on my own time, like Mastication.
Faced with the prospect of converting all these sites to CSS, you can see why I'm hesitant.
Further, I have to do an analysis of which browsers our audience uses. From my own Mastication stats I see that 5.x and up accounts for roughly 97% of my audience, so switching to CSS shouldn't be too much of an issue. But I don't know about my nonprofit's sites.
When is DreamweaverReliableCSS coming out, anyway?
Comment by Cheshire at 22:36, 14 Jul, 2003 #
I have banned the use of Dreamweaver at work. There are multiple reasons for doing so and some of them are germane to this conversation.
Chesh, when something new comes along, like CSS, it's important to do things by hand at first. It really is the only way to become intimate with the code.
I asked that my staff not use Dreamweaver for any development because some of them had "learned" to make Web sites only by using the program, not by hand. In doing so, they didn't understand some of the issues that might come up.
Last year I had to redo by hand an entire site that had been done in Dreamweaver because when we resized the browser window, it really messed up the formatting and design of the site. Dreamweaver was building tables in a way that was much more complicated than it had to be and, in doing so, created the problem we were encountering.
Without having a "hand coding" background, it's hard to see potential problems that can occur with WYSIWYG programs.
I'm not against these WYSIWYG editors per se, but when one uses them, you have to be able to check their output and that requires being able to know the ins and outs of coding.
Comment by Jeff at 14:37, 19 Jul, 2003 #
Re: Jeff's last comment:
I'm from a straight hand-coding background myself, I started writing HTML before there was such a thing as "wysiwyg" editors.
My favorite editor was Homesite, from early on until the last version of it. Macromedia bought Allaire -- makers of Homesite -- and incorporated the Homesite text editor into Dreamweaver MX, which is what I use now.
To me, Dreamweaver MX is very nearly perfect; it's got a straight "coding" mode which is very similar to Homesite, as well as a wysiwyg mode which I don't use -- due to the reasons Jeff iterated.
Anyone who's tried Dreamweaver in the past -- when it was just a wysiwyg editor with a fairly sucky text-editor -- should reacquaint themselves with MX, it's the very best of both worlds.
Comment by Tomas at 17:36, 19 Jul, 2003 #
The discussion has been closed on this entry. Thanks to everybody who participated.