Photograph

« South by Southwest | Back to Home | 3 (Controversial) Techniques to Improve Usability »

April 08, 2006  F*ck Web Standards

I spent the better part of a week in Austin, TX for the annual South by Southwest conference last March.

The panel I was on was a bit controversial in that it tried to prove a contrarian point-of-view to the heavily pro-web-standards panels at the conference. My part of the talk was about tables for layout and Flash. I was prepared for some tomatoes to be tossed at me.

We would get the funniest looks from people when they would ask us what our panel was about. I remember being at lunch with Sergio and Jeremy Keith when we told Jeremy about our panel. You could see him overcome by a mixture of shock and confusion.

There's a very simple example that we through out that made the whole thing much easier to understand: You have a box and inside that box you want to center (horizontally and vertically) another box that is of some unknown size (suppose it's an image the server passes to you).

If you are a loyal web standards advocate you will rack your brain to solve this simple problem. Horizontal centering is easy, but vertical-align in CSS 2 is meant to be used to align something within a line of text, not in an arbitrary block level element like a div. You could try to hack it by having a line of text (like a blank space) that is the same height as the bounding container and then offsetting the margin such that you account for the blank space. You could also hack it using Hicks's wrapper div trick (which is complex enough for me to avoid describing how it actually works here). There are also some JavaScript techniques that will dynamically compute the margin offsets and shift the images accordingly. Jeremy was saying he would use that trick to also shift the footer to the bottom of the browser window. The problem with it is that you'll see a noticeable jump as the browser renders the page because it has to shift and element to a new location from where it was originally placed.

Or you could just put the thing in a table that is set to valign center.

What is the best solution? What leads to the cleanest code and the best user experience (fastest load time, least amount of flickering, works in the user's web browser)?

A discussion like this will have even Jeremy Keith nodding his head that, yes, blind allegiance to web standards is not always the best way to go.

It was also nice having someone like Aaron Boodman on the panel. He works on the Firefox project at Google, so he is deeply interested in web standards, but at the same time he gave some great examples from the Google Page Creator project where deviating from standards was important to allow for rich wyswyg editing of the web page.

I had a number of people tell me that they really enjoyed our panel, and I did a round up of some of the blogs that mentioned us: Jackson West, Giga Om (written by Jackson West), Nathan Smith's Sospring, and Larissa Meek.

Larissa's opinion counts more than others because, well, she's a former model who is now a full-time web designer.

I had a great time at SXSW. I met a lot of people who I knew only through their blogs, had some heated debates about web development, and attended some interesting panels. My favorite was the Craiglist redesign. The redesign itself was nice, but the best part was that Craig Newmark, founder of Craigslist, was actually in the audience. He went up on stage later after people asked him to go up and gave his thoughts on the work he was shown. He was highly vague about whether or not the site would follow any of the suggestions, but the fact that he was simply there made the whole experience much more interesting. Oddly one person who wasn't there was Andrei Herasimchuk, who kicked off the initial "Design Eye" redesign on his Design by Fire site back in 2004. For some reason he wasn't able to attend in person and was just there via webcam.

I also pulled some of my favorite photos other people posted on Flickr:

Posted by johnnie at April 8, 2006 12:13 PM

Comments

Post a Comment




Remember Me?


Type the word 'Manzari' in to the box below:
(This is to limit spam)

the 9rules Network logo