Nothing puts a web developer in a bad mood faster than an angry email from a designer.  The one telling you, “It doesn’t follow my Photoshop PSD design perfectly…why does it look different in IE? I wanted pixel perfect.”

Pixel perfect. A polarizing term in the front-end community. Some complain the term is outdated. Others demand it changed to something of a cousin-like term, such as faithful reproduction, or craftsmanship. But what exactly is pixel perfect, and is cross browser pixel perfect design even possible? We will be exploring both of these questions.

What Is Pixel Perfect Design?

Stated simply, pixel perfect is working to arrange every pixel on your web pages in the sharpest, cleanest look possible. No compression artifacts, no anti-aliasing and zero muddiness. It’s not uncommon to work with a designer who doesn’t understand being flexible is a must, even on areas that demand it, like margins, image crops and line lengths.

The Downside To Perfection

We all share the same goals; a great looking website, across browsers and devices that are easy access for the user. The problem with customers asking for pixel perfect isn’t that it’s impossible to attain, but that it’s time-consuming and puts unnecessary effort on consistency while areas that should be focused on, i.e. adding features or user interfaces, get pushed back.

The Single Browser Perfection

One popular way of dealing with pixel perfect requests has developers asking clients to choose a single browser to achieve “perfection” and then making the site compatible with the rest of the browsers.

Because each operating system has its own set of specifications (think fonts, spacing), it’s not hard to see how things can get hectic fast. Not every browser shows images in the same way. This leaves clients confused as to why their version of pixel perfect can happen in some but not all.

Getting It Right Across Browsers

It’s hard to achieve pixel perfect design across browsers. Browsers render different things uniquely. This is not the fault of the developers. There are plenty of examples of straight up, bad coding mistakes like missing components and spacing issues, when a developer is certainly at fault.  If the PSD file is asking for 20px spacing and they send back 40px, that can’t be chalked up to browser problems.

But, if the code quality you are producing is modular and correct, it can be a huge pain explaining to the angry design team how browsers like to invent their own rules.

Areas Where Attention Is Needed

The actual term pixel perfect might seem out of place knowing that a ton of design work is done via code today, so obtaining an identical look in every browser should never be expected. That being said there are a few areas you can focus on keeping clean.

• Padding
• Margins
• Locations
• Sizing

Each of these areas has to change on every device your site will be viewed on. This means the focus should be placed on creating responsive designs. Not identical design.

Encountering Problems

The designer’s choices can create complications in various browsers and if this is the case, the best course of action is being honest with them. Let them know their exact design cannot be achieved and explain why. There needs to be a level of flexibility to keep the goal of usability above achieving visual perfection. Staying open with your communication is key to keeping your sanity. A quick email should do it,

Another place you will get frustrated: fonts. There are some fonts that exist only to ruin your day. Helvetica is the perfect example. It won’t translate when you move it from the PSD between operating systems.

Internet Explorer hates rounded edges. At least that’s our guess since they don’t support them. This problem alone creates a sea of developers who completely avoid certain browsers, like IE 6.

Pixel Perfect In Cross Browser Is Possible, But Comes At A Cost

Measuring spacing, layouts and ensuring your mockups are correct in every browser are completely possible, but they require enormous time commitment. While it’s possible, the high development costs associated with this level of devotion are pretty steep.

Adding insult to injury, pixel perfect development will not benefit the end user in any way. Users will never compare the website across browsers. Sure, a user might be using IE at work and Chrome at home; but it’s unlikely they would ever have them up side by side, picking apart the shadows on a button.

Instead of worrying about pixel perfect, the focus should be placed on accessibility, usability and responsiveness. Users certainly will be viewing your site from mobile and desktop. That makes sense. As long as your version of flexibility between browsers doesn’t have paragraphs overlapping and unreadable text, the more likely scenario would be slight design changes browser to browser that won’t affect the user’s experience. A website that works perfectly will win every time over the one that only looks perfect in a designers eyes.

We all want a visually perfect site, but if perfection comes at the cost of major increases in time, money and effort to achieve cross browser pixel perfect, it just isn’t worth it. Browsers and operating systems have their own sets of rules and quirks. Certain areas will consistently give you problems, like fonts. Keep communication open with your designers and clients so they understand why you have made the choices you have if a change must occur. At the end of the day, a functioning website with easy access to information that keeps their brand represented consistently should be enough to delight the client and allow for the minor differences browsers demand when incorporating design.