Sites looking the same in all browsers? We dont need that! Or…do we?

There is a movement afoot in the web design world, and although well-meaning and well-intentioned, for many of us it can do more harm than good.

Many incredibly good designers are getting behind this idea, and it’s quite hard not to agree with them. I mean, let’s be honest, when the likes of Dan Cederholm and Ethan Marcotte, authors of Handcrafted CSS: More Bulletproof Web Design and bloggers like Paul Boag all seem to be preaching the same sermon, and on top of that the sermon MAKES SENSE…how can we not get behind it?

Sadly, the gospel they preach needs to be taken with a grain of salt.

The Cross Browser Movement.

This is something designers know all too well. You spend hours upon hours building a website, only to realize its perfect in Firefox, but looks like hell in IE. Or vice versa. Something would always be a little off. There was too much padding. Or something would line up a little off.

This was compounded by the inherent limitations of the medium itself. HTML was never meant to do half of what it was forced to do. What WE forced it to do. HTML was meant to be a simple markup language. Hence the “M” in HTML. But we needed it to do more. We wanted vibrant, robust and beautiful designs….we didn’t want the page to look like someone had pasted a Word document onto the web.

In the process, we created a myriad of ingenious ways of delivering the content and graphics the way we wanted. Invisible spacer gifs. Nested tables. Nested tables nested inside nested tables and held in place by invisible spacer gifs. The code for these pages was often Byzantine in its complexity. We got what we wanted…but it wasn’t even close to perfect. The file sizes kept getting bigger and bigger. The length of coded pages longer and longer. And almost always we were told that it was “bad for SEO”. The search engine bots just couldn’t wade through all that muck to get to the meat of the content that they needed.

In the beginning we ignored all of this and used only two things as our limits: The Web Palette and slow dial-up connections. Then high speed internet came along, and most of us just forgot about the web palette and forged ahead.

And even with all of this….there were things that just still didn’t work the same in all browsers. So we just didn’t do those things if there was no workaround.

CSS To The Rescue

CSS came along and cured loads of this for us. We could lay out pages without all the nested tables. We didn’t need all those invisible spacers. The file sizes dropped. We could used more complex images, because the coded files were much smaller now. Everyone was getting rid of dial up, so life was great right? Beauty was everywhere! And if your manager balked at the idea of CSS, a couple of trips to CSS Zen Garden cured all of that.

But, sometimes stuff still didn’t work right in all browsers. Some browsers (usually IE) just wouldn’t display things the way we wanted. So we started creating “hacks”. Tell IE you want 10 pixels of padding, then tell the other browsers you REALLY want 5 pixels of padding and viola! It looks the same everywhere!

We had traded convoluted HTML for convoluted CSS. But…we were happy.

Well, as happy as we could be.

On to the FUTURE…

Now as we eagerly await HTML 5 and CSS 3, we are chomping at the bit for all of these great new things we will be able to do with code…

And guess what? Its STILL not going to look the same in all browsers. So as a group, we’ve discussing both the idea of our designs “degrading gracefully” and the idea of planning for the future not for the now. Degrading gracefully has caught on, even with those outside of our little tight knit community. Those people who are using old, outdated browsers already expect that things wont work the same, or they’re so inexperienced web-wise that it doesn’t really matter.

But, as for planning for the future, the tide has turned towards this idea that it no longer matters that things don’t look the same in every browser. Cederholm and Marcotte, in the great book I mentioned at the beginning of this post, devote an entire chapter to not only WHY your site doesn’t have to look the same, but to how to convince your boss / manager / decision maker / client to willingly accept that the differences will be there. (Incidentally, if you haven’t bought the book…you should. I’ve read it FOUR times, and keep it on my desk at all times. Yeah, its THAT GOOD.

On the surface, as I said from the start, this is a good thing. A very very good thing.

If we abandon this “build for everybody or nobody” idea, we can create cleaner code, pages that download easier, sites that degrade gracefully in older browsers, and sites that are not only ready for the new additions future code provides, but easier to update when that future arrives.

This is an idea, that comparatively speaking, belongs on the level of “world peace”. Something that is good for all, and should be striven for, by all.

The problem, IMHO, is that the idea doesn’t hold up as well in bright light. Sure, if you are creating some niche site for techies, and you’re certain they will always have the latest, greatest browsers with the top add-ons….the idea WORKS. Sure, if your site is meant to deliver mostly information, and the information is the key for being on the site…the idea WORKS.

But…if your job is to sell things online, be they book, movies, gizmos or widgets…the idea falls apart. Unless of course your company is on the level of a Google, Amazon or Facebook. If you site is already that big, then folks are going to buy from you…even if the CSS rounded corners and drop shows don’t render in IE. But, if you’re “Joe and Molly’s Widget Extravaganza”, that slight difference could hurt conversion rate.

And in a world where Marketing is informed by the likes of Sherpa, ClickZ and MarketingVOX….conversion is king. I for one, live in that world. And if you have ever heard the decision makers in your company utter the words “Google Website Optimizer” or “Tagoochi / multivariate testing”, then you need to realize you live in that world too.

Some may say, “Oh, well your users will never notice, unless they view the site with more than one browser.” That is very true. However, if your company is small, and lives and dies by percentage points of conversion rate, the fact that a new page doesn’t look the same in all browsers can kill an optimization test. And in the end, money talks.

So I too pray for a day when I don’t have to write wholly separate style sheets JUST for IE. I long for when I write code once, and I don’t have to worry about how it looks in EVERY browser…because it will look close enough to the same not to matter.

But right now? It matters.

Right now? If I cant get rounded corners in IE, then I wont use the CSS code, I’ll use graphics or the CSS Sliding Doors technique. Because although that difference might cause a slight $10k per month difference in conversion rate, and sites the size of Amazon wont bat an eye, to smaller companies, that $10k is a lot.

And its ten thousand reasons that the boss / manager / decision maker / client will tell you that it DOES in fact matter that the site doesn’t look the same in all browsers.

PLEASE NOTE: I mention Cederholm, Marcotte and Boag because they are designers I respect and admire. It would be far easier to have a differing opinion with folks I dont like. But these 3 guys are HUGE influences on what I do. If you dont know anything about them, then you should stop what you are doing RIGHT NOW and go find out. They have much to teach you, young one.