I’ve made some (more) tweaks to the design of this website over the past few days. They’re mostly little things and, unless you visit the site often, you probably wouldn’t notice them unless I were to point them out. In fact, in comparing the design today with the template I relaunched with on the 28th June, 2008, it’s amazing to see just how much the design has changed — while still sharing a common overall aesthetic. But then this is how web-design should be isn’t it? A website evolves with small, subtle, incremental changes, yet retains its “brand” by remaining true to its original design.

While I was applying the revisions I started thinking about web-design. I considered the current state of the art, how far we’ve come (I started building websites right back in the beginning when IBrowse on the Commodore Amiga really was cutting edge), standards compliance and the W3C, etc.

The catalyst for these thoughts was my adoption of a simple little CSS3 property known as border-radius, which is used to produce the RoundRects that, depending on which browser you’re using, may or may not be visible to you when you visit this website. If you’re using a Gecko or WebKit based browser, then you’ll see this website exactly as I intended - complete with RoundRects. With other browsers you’ll only see an approximation of the design I intended.

This is how the website should look (click image for enlargement):

“Hey wait a minute,” some of you might exclaim, “I use MSIE and I’m absolutely certain that I saw RoundRects here when I last visited - now they’re gone. What gives?”

Okay, I’ll come clean. Prior to these recent tweaks I used a small JavaScript library to render RoundRects on the site. You see there are many ways to achieve RoundRects on a design: there are graphical hacks, CSS hacks and software hacks. Sadly they are just that, hacks. They are clumsy, cumbersome and often don’t work quite as advertised. For example, the pure CSS implementations lack anti-aliasing. The JavaScript solutions sometimes conflict with other code and they usually render after the page has loaded (which looks awful). Sometimes they don’t even run (which was the reason I stopped using Nifty Corners Cube).

CSS3 provides the perfect solution with the border-radius property, if only all the browser producers would support it. It doesn’t look like Internet Explorer will render border-radius anytime soon. and I’m unclear on the position with Opera (although apparently it can be done using an SVG background image, a hack - WTF?)

Let’s be honest here, this sucks! RoundRects should be rendered correctly in every browser. Safari and Firefox show that it can be done, with beautiful anti-aliased corners produced with just one simple CSS property. No hacks, no clunky JavaScript and no tables.

It’s not just RoundRects either. Why can’t I, in 2008, produce a website with multiple columns of automatically flowing content? If I could, then I could have narrower, newspaper-style columns - making large bodies of text easy to read. I know a multi-column layout will be available at some point, but I want it today, my clients want it today!

Why can’t I, without resorting to the so-called “Sandbag” hack, implement a design where my body text flows around the contours of an image? I’ve been able to do this with DTP software for years, but I can’t do it on a website.

How long will it be before I can use CSS Transforms and know that they will be successfully rendered in all browsers?

It’s not that these design options aren’t available or at least very near, the biggest problem here is that of cross-browser compatibility. Some browsers support these features, some don’t and those that do often do so with subtle differences and inconsistencies - and it’s annoying as hell to both the web designer and the client who wants his website to look and act a certain way.

I could safely swap the RoundRect JavaScript for border-radius on this website because this is just a personal website. I maybe get a hundred unique visitors a day and my audience is biased towards Safari and Firefox anyway. But if I want to design a business-critical ecommerce website, viewed by millions with a bias towards MSIE - then I’m stuffed. I’d have to use hacks to maintain a consistent design across platforms or I’d have to make do with only the most basic design elements. Again, this sucks!

We’ve had web browsers for eighteen years now and we still haven’t achieved cross-platform rendering parity. It doesn’t help that it takes so long for specifications to be authored - we’ve then got to wait for browser producers to implement them and then wait again for software revisions to permeate through the web-browsing population.

There has to be a better way?