Reading one of Christian Heilmann’s excellent blog posts caused a great revelation upon my meagre mind (they have a tendency to do that). Imagine, if you will, a website. Not just any website; one that has been created by slicing up a Photoshop document. It’s for a small – medium business, so it’s entirely localised to the country from which it originates. This website needed to get out the door quickly so no extra effort was made during the construction.

And right there, tucked away in the bottom left of this site is a button. Simple, innocuous, but a button all the same. The button’s design could have been replicated using CSS, but alas, it was not.

Now the company is expanding. In fact, unbeknownst to even their expectations, it’s taken root in another country. So, now it’s time to get the translators and convert that site into another language. Oh, but wait, that button we had. Once comfortable in its fixed width glory, now breaks horribly under the weight of the extra characters imposed upon it by the different language. No problem, right? Let’s just whip open Photoshop and extend the width… Or do we.

We’ve all been there. Even us developers who have no right adjusting the design. What’s just happened, however, is that here we have a button, the development time of which – if built in pure CSS – could have taken about the same time as it took to load up Photoshop in the first place. So now we’ve just doubled the development time from the mere action of opening Photoshop at all. For a button. But wait, we’re not done. We still need to actually tweak the image itself then put it back onto the website. Hang on though, now we’ve increased the general size of the button in our language. That wasn’t in the plans. So maybe we should create a separate stylesheet for that language. And the implication soon dawns that, wait, there are other languages too. And yes… there are more buttons. And, of course, the matter of the entire website.

So, for what would have taken less time to implement in the first place, we’ve just increased development time for a single button by a factor of, what, 10? 20? 100? Maybe we’ve lost minutes, maybe you took the route of separate stylesheets and instead it’s now hours to this change. That equates into money very quickly, and this was just a button. And for what? Because it had to look the same in every browser?

Companies, by letting us do what we do best, and doing what we believe is right – simply because we know what we’re doing – we’re saving you money. A lot of money.

Thank you.