iamelgringo

Wednesday, February 04, 2009

A reasoned response to unreasonable trolls

So, my last post apparently ruffled a few tail feathers. And, there were a number of CSS trolls that crawled out of their caves, clubs swinging wildly. They apparently didn't get the memo that they'd been banished, so against my better judgment, I'd like to address a few of the ideas they brought up.

"You're doing it wrong!", "CSS is the right way...", "You're not following the rules...", "That's not standards compliant"

These are moral and religious arguments, and not based on technical merit. Words like "right", "wrong", "purity", "following rules", "following standards" all convey moral overtones, and are designed to guilt a person into a specific type of behavior. They also appeal to a higher power, which in this case happens to be web standards.

When did designing web pages turn into a religion? I understand that OS's turn into religions 15 years ago, but web pages? Really?

Moral and religious zealotry is fine. But, at least do us all a favor, and be honest enough to recognize that that's what you're doing. Once we all agree that we have techo-religious differences, we can agree to disagree and move on.


"You don't seem to understand. By making your code semanticly pure, you're allowing other programs to fully understand your html markup and fully use the data on your page"

No, I do understand. I understand the whole argument about the semantic web. I understand the appeal of adding meta data and structuring HTML to give it meaning. I happen to think it's a waste of time.

If I want other applications to access my data, I'll give them an API. Otherwise, why should I spend tons of time and effort to make life easier for people trying to scrape my web pages? That's their problem, not mine.

Peter Norvig, VP of research at Google recently said that Google wasn't doing a very good job at doing things with structured data like lists. If Google can't make decent use of structured lists that are already enclosed in ul and li tags, what makes people think that only using a table for tabular data is going to do to bring about the future semantic web?

I happen to think that the semantic web is a pot of gold a the end of a rainbow. If you want to go hunting for it and make all of your HTML semantically pure, go right ahead. I'll pass.


"You haven't spent enough time learning CSS", "Go read a book", "After you're an expert in CSS, it's easy." "No reason for any intelligent person not to use pure CSS"

Most of these are simply ad hominem attacks and can be discounted.

When I need to learn more about CSS, and I will continue to learn it.

At the same time, I'm also upgrading skills in the following areas: system administration, HTTP, Apache configuration and optimization, SQL, PostgreSQL administration, Python programming, and the Django web framework. Oh, and I'm bootstrapping a startup, too.

So, spending 1-2 months learning CSS, just to satisfy someone's idea of a right way to style a page doesn't cut it for me. I already lost 2 weeks, that's enough, thank you. CSS doesn't pay my bill, shipping product does.

I get CSS blocks. I understand the theory behind padding, borders, margins and floats. I just happen to think that the system is helpful for some things and a complete kludge for other things.

Don't just take my word for it. Google seems to agree with me. Amazon agrees with me. Ebay agrees with me. Pray tell, what books should they read about web development? Perhaps the CSS trolls could enlighten them on "The Right Way To Do Things" (tm). Or, perhaps the trolls could stop and ponder for a moment why these huge multi-million dollar corporations haven't gone on board with pure CSS designs.


"Using pure CSS means you'll spend less time in maintenance"

Premature optimization is the root of all sorts of evil. I can always go back and refactor later if needed.


"Do it right the first time"

"Do it the right way." is a moral argument, not a technical one. See response to religious arguments above.


"CSS is faster"

Again, premature optimization is the root of all kinds of evil.

Developer time is expensive, servers are cheap. If it takes me 8 hours extra time to style my site, and my time is worth $100 an hour, that's $800. For $800, I can buy 3 extra Slicehost VPS slices for an entire year.

The performance bottleneck for the vast majority of sites isn't the use of tables for layout. The performance bottleneck is generally the database. On a cost/benefit analysis, I'm going to spend much more time learning database administration than styling. DBA's are expensive, CSS designers are relatively cheap.

At some point, if my company gets as large as ESPN, and I can save terabytes worth of bandwidth by switching to a pure CSS design, I'd be happy to. Right now, it doesn't make sense.

Finally, if site speed was the only issue we're concerned with, we'd all be writing web applications on C, O'Caml, Haskell or Common Lisp. We don't do that, so clearly there are other considerations.


"You can change designs at will. (see CSSzengarden)"

I don't need to change designs at will. I don't want to change designs at will. Adding complexity at the expense of future flexibility doesn't make sense for me right now.

Besides, I'm using Django. It has a robust templating system which lets me modularize my html creation. If I end up using a snippet of html more than twice, I create a template tag that generates that html for me. When I change the design or layout, I can change that snippet of html. The advantages of pure CSS for layout diminish rapidly once you're using a decent templating system that doesn't make you copy and paste html.


"CSS is a solved problem, there is no excuse for not using it"

Um, if it's solved, then why do 75% of Alexa's top 20 still use tables in their designs? What's Google's excuse? Amazon's? I'd really like to hear an answer to that. And, making ad hominem attacks against companies, doesn't count as a decent reason.

For company in ["Amazon", "Yahoo", "Google", "Whatever_company..."]:
.....print "Don't even get me started about %s 's use of web standards." %(company)

>>>*Yawn*


"...use Blueprint, YUI framework, they solve your problems"

Frameworks are workarounds for weaknesses in the system. CSS frameworks were created because styling a standard multi-column design from scratch in CSS is a pain. Yes, they solve certain problems, they don't solve all problems. They certainly didn't solve all my problems.


"Your page won't work well with screen readers"

If this is still a problem, then it's a problem with screen reader technology. Like it or not, people still use tables 19 years into the web. Fix the screen reader technology instead of trying to guilt everybody into changing their sites because of the visually impaired.

Also, if screen readers can't handle tables, then they can't read 75% of the sites on Alexa. Google has Phd level people working on accessiblity. They use tables in their designs. Methinks this argument is overdone.


"CSS lets you adjust your presentation based on mobile browsers or regular browsers"

Most companies that are building mobile friendly sites just make a separate page of mobile screens. Don't believe me, check out Google and Flickr on your iPhone or G1. It's a separate page. It's not a different CSS styling.

If I want to develop a web app for mobile, I'll do the same as Google and Flikr. I'm not going to Frankenstein my CSS to be able to handle anything from at 150px screen to a 1000px screen.


Pure CSS lost the argument.

A lot of us understand the arguments about semantic purity, separation of content and presentation, flexibility of design, increased accessibility and speed.

Problem is we don't care. We've heard you. We've listened to your arguments. We don't buy them. We disagree. We use CSS at times and tables at other times.

And, it's not just me. Apparently, 75% of the top 20 English language sites don't care either. For giggles, go table hunting on a "CSS tutorial" Google search. Half of the sites that have front page ranking for "CSS tutorial" use tables in their layout.

Spend a few hours table hunting the web with the developer toolbar Outline->Outline tables->table cells. The vast majority of the internet has table based layout. It's not just a few angry table holdouts that haven't gotten with the program. We're the silent majority.

With as many nasty comments as people made, no one was able to explain why 75% of Alexa's top 20 still use tables. The conclusion I have to come to is that the CSS purists won a few zealous converts that are rather loud, but for the vast majority of us, they lost the battle. We think that CSS has it's place. It's wonderful for styling text and links uniformly across a site. It's helped make prettier sites the world around. Thank you CSS. We'll use it when we can and when it makes sense. But, we're not going to use it 100% of the time just to be web standards compliant.

So, swing away with your pure CSS clubs. Feel free to condescend. The rest of us will continue to ignore you and go about the business of making the web run.

Monday, February 02, 2009

Tables vs CSS: CSS Trolls begone

First mistake, drinking the CSS Kool-Aid

Several weeks ago, I started designing the layout for my threaded comments on a social news site that I'm building. I had created a down and dirty layout using nested tables. It was ugly, and used nested tables but it worked.

I was then paralized by guilt. I couldn't let the nested tables go. I figured that I had to take the time to layout the site properly using CSS and Div tags. I figured this would give me a chance to get up to speed on current web design best practices and to learn more about CSS. Besides, Reddit models their threaded comments in CSS, how hard can it be to model a tree structure out of nested div tags? I believed what I've read online about CSS, web standards, semantic purity, screen readers, blah, blah, blah...

I drank the Kool-Aid, and I woke up two weeks later with a broken design. I had a headache from banging my head against the CSS wall. But, it simply couldn't be a problem with CSS itself. The problem had to be that I didn't understand CSS well enough. The answer had to be that I was bad, lazy or I didn't care about web standards or something. The internets had told me so.

But like a shaft of light in a dusty attic, a single comment by Nosredna on this thread changed my web designing life forever.

Want to see gratuitous? Go to Google Finance and use Web Developer Toolbar’s Outline->Outline Tables->Table Cells to show all the crazy ways Google is using tables for page layout.
.
iGoogle? Yep. For real table things, but also for layout, like that new sidebar to the left.
.
Twitter? Yep. For rough layout.
.
Google News? Yep. For layout.
.
Amazon? Lots of tables for layout.
.
Sure, you can say all these pros are lazy are dumb if you want, or we can try to improve the situation as we all learn to use CSS better. It’s going to be gradual.


I want my money back

As I read web design forums and blogs, it seems that the Divine Essence itself has given us CSS standards and Div tags. Any one who would dare to use a table for non-tabular data in their web design is committing a sin against humanity, Love, Art and all that is good. Tables violate all that is semantically pure in this world. CSS is the new way forward, CSS is progress itself. Tables kill kittens, ponies and unicorns with each misguided use. Any and all problems are not the fault of CSS, it is the fault of the dark and sinister overlords of Microsoft who stubbornly refuse to bow to internationally recognized web development standards.

Prompted by Nosredna's comment, I did some research. What I found has shocked and outraged me. How could the internet mislead me like this? I want my money back.

My research on Table usage

I used the Firefox developer toolbar to take a look at the frontpages of the top 20 Alexa sites. Please try it yourself. Install the FireFox developer toolbar extension. Then, for each page, click Outline->Outline Tables->Table Cells. Then go table-hunting.

For the time-constrained, I submit to you the results of my highly scientific research:



  • Yahoo: Minimal Use of tables. I found a picture of Hugh Downs horizontally aligned with it's caption in a table
  • Google Home Page: Not only does Google use tables for it's iconic home page, it embeds styling in the <td> tags. The horror.
  • YouTube: Uses tables for of layout of videos
  • Windows Live: Uses tables for footer layout
  • MSN: There is one table, but it's only for stockquotes which is tabular data
  • MySpace Semantically pure. MySpace. Whoda thunk it
  • Facebook: Does form layout with tables
  • Blogger: No tables anywhere on the front page
  • Orkut All tables all the time
  • Rapidshare: A table with a single <td> for header placement. And again a single <td> table for the central "browse" section. Tsk tsk
  • Microsoft: Navigation bar is a table. What did you expect? Unicorns and rainbows?
  • Google India: It's the same Google layout. I wonder if they used copy and paste for the template?
  • Ebay: Tables, tables every where
  • Hi5: Tables for every thing, pretty much. BTW, I didn't even know this site existed until last week. Alexa rank 14!?
  • Photobucket: Tables for photo gallery layout
  • AOL: AOL's layout is semantically pure! Friggin AOL?
  • Google UK: Same GOOG layout. I'm now sure the copied an pasted their html
  • Amazon: Now that's just silly
  • IMDB: They used tables for their 3 column layout. What! No CSS framework?
  • Imageshack: Semantically pure as the driven snow.
  • Finally, even though it's not on Alexa's top 20, log in to your Gmail account and look at
    the use of tables

My Hypothesis: Pure CSS design == overcompensation

So, the five companies that use CSS are the web powerhouses--MSN, MySpace, Blogger, AOL and Imageshack. MSN, MySpace and AOL have been maligned for years throughout the web savvy community. My hypothesis is that these companies are overcompensating for the crap that they've taken thoughtout the years by designing their site in pure CSS.

Other companies that have more web street-cred like Google and Facebook don't really have to worry about how the web design community sees them. This leads to things like Google making extensive use of inline styling on their homepage instead of putting it in their stylesheet. I've never heard anyone claim that the Google folks are slouches at the web design/development thing. Why is that?

CSS Trolls, Begone!

So, I don't ever want to read how web designers who don't use pure CSS in their layouts are lazy, stupid, don't care about their craft, backwards or don't bathe properly. Never again. People who post such things online are heretofore to be known as CSS Trolls and are to be banished from the internets for all time. Begone yea vile fiends!

What I've learned

I suppose I should have listened to the Perl and Lisp guys. The attitudes in those communities tends to be--just use the tool that gets the project shipped. It might be ugly, but it works. They practice what they preach, too. Just look at the table usage on the Perlmonks site or Paul Graham's Hacker News with the developer toolbar.

So, I'm going to give up and use tables. It's going to take me all of 45 minutes to undo the last two weeks worth of CSS work. I'm going to launch my site. And then, I'm going to go and get a donut.

Anyone else find joyous and flagrant table based design? Please post links in the comments.

Update:

1. I'm not against all CSS. I'm against CSS trolls. And, by trolls, I mean people who post nasty comments about someone who disagrees with them on whether to use tables or CSS.

2. I haven't given up on CSS for good. I did give up and use tables for one part of one project. I will give up and use tables a lot more frequently. I'm positive that 75% of Alexa's top 20 sites agree with me.

Update 2:

My apologies to the devs at the 5 companies that were able to use a pure CSS layout. My snarkiness was more a function of my frustration with a technology, a specific form of trolling and trying to write an entertaining blog. That should in no way detract from the technical achievements you've accomplished. The "overachievement" bit was out of line. Much respect.