(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.
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.