(Cross posted from the company blog at MetaBroadcast)

For a decade now we’ve been told that “pixel-perfect” is an indicator of great finesse in front end dev, and it’s a phrase that still crops up on job descriptions and CVs all over the place. Hell it’s probably on my CV, having done more sites and emails like that than I care to remember.

While it’s lauded as a good thing in reality it’s indicative of an outdated mindset; of brittle and short-sighted web design where creatives lovingly craft amazing comps in photoshop with little consideration for how it’s going to be built. And why should they? Their job is selling great looking sites, implementation is someone else’s problem.

On the dev side it’s so tempting to treat PSDs like a pixel-perfect blueprint (spoilers: they’re not), lift the heights and widths of all divs straight into the CSS and make it a literal copy. That’s how you get an avalanche of websites that break dramatically if things are knocked slightly out of alignment due to a link changing, or an image is swapped out, more copy added, or everything is translated into German.

And this is long before you even think of viewing on a mobile device! Responsive has made things squishy, but the dangers of over-constraining content-managed or multi-lingual websites is not new. Liquid websites are not new. It’s humbling to remember that ugly and basic as it is the first web page works on any browser on any device over the last 25 years. We’ve retrofitted incompatibility into the internet; the responsive revolution was only necessary because we’d made everything so rigid.


JS-based sites can be controversial because not everyone has JavaScript, the idea being that there are people with feature phones (particularly in the the unbelievably huge emerging economies), but even closer to home JavaScript is often a single point of catastrophic failure: some CDN’d thing might be missing, some third party script throws an error and you’re left with nothing at all. Even assuming you have the most robust system possible, nobody has JavaScript while they’re loading your JavaScript. HTML on the other hand is a crazily forgiving language.

So what can be done?

Avoid layouts that rely on conflicting horizontal alignments, avoid vertical alignments altogether. Test them with double and half the copy to make sure everything flows as you’d expect. Avoid using explicit heights and let the elements take the height of their contents. Avoid using explicit widths and let elements take the widths of their container divs where you can, using percentage widths where you must. Only build JS links to enhance existing HTML links. Keep css specificity low. Don’t introduce needless complexity when what you really want is just POSH, simple CSS, a squishy robust layout.

Take a step back and let the markup breathe.