Joe Levi:
a cross-discipline, multi-dimensional problem solver who thinks outside the box – but within reality™

Pixel Imperfect

Having been in the web business for 15+ years I get my fair share of people contacting me about potential employment with their company.

While I’m not actively looking for a new opportunity at this point I always like to take these calls and find out what others are looking for. This helps me make sure I’m properly compensated by own own employer, and keep a finger the the pulse of where the industry is and where it’s going. This, in turn, has a pretty good pay-off for my employer, since they know I’m keeping up with technology and can adapt those to future projects.

I recently received a job description from a recruiter asking for someone that sounds exactly like me – it was scary how accurately this position sounded like my current resume’ – with once exception.

The first item on the list of requirements was seemingly innocent: “Generate pixel-perfect web pages from high fidelity mock ups created in Photoshop…”

What’s wrong with “Pixel Perfect”?

I spent years developing "pixel perfect" websites that were a pain to build, and a nightmare to maintain, required ground-up rewrites just to upgrade.

You see, the problem with “pixel perfect” is that various browsers, different versions of the same browser, and the same browser on different OS’s render the same code differently.

“Pixel perfect” is a recipe for disaster and can lead to a very hostile development environment.

“Pixel perfect” flies in the face of “progressive enhancement” and “graceful degradation”. It makes your website “behind” everyone else who is practicing progressive enhancement.

Thought Experiment

Imagine back in the day of the Model-T Ford a company that sold auto parts and had a storefront that was cutting edge and looked wonderful. This company sold all auto parts, but wanted people to think “Model-T” when they walked in.

There was another store across town. They also sold assorted auto-parts, but, unlike their counter part, they were watching the edge of the auto industry. As new technologies and new cars eventually came out, they updated their storefront to match. They got so good at this that when the next newest car came out, their store already looked up-to-date and inviting to that set of customers.

The first store operated under the philosophy that you had to look “perfect” and cater to the lowest-common-denominator: the Model-T Ford. Over time the store began to look old and had to be renovated again and again. Each renovation took countless hours and caused customers inconvenience and confusion with each iteration. By the time each renovation was complete there was already something new out, and the store was already behind the times. Eventually the store went out of business because it was “too expensive” to keep up.

The second store always incorporated little changes to their design and displays, things that owners of the Model-T didn’t even notice, but that owners of newer, more capable cars could see and identify right away. This store was relevant and current across the board because they practiced “progressive enhancement”. Eventually all the old Model-T stuff faded into the background with the newer “stuff” featured. This model worked well for the second store.

When someone came in to the second store looking for high-end racing parts, the store looked like a high-end racing parts store.

When someone came in looking for parts for a utility truck, the store looked like a utility-truck parts store.

Ironically, when someone came in looking for parts for their old Model-T, it still looked like the same Model-T store they had grown accustomed to.

Now, sure, the Model-T store didn’t look as new and as slick as the racecar store. It didn’t have all the bells and whistles. But the Model-T guy didn’t even notice. You see, ALL the stores he visits look the same and have the sort of displays. He doesn’t know anything different—that is, until the day he trades in his Model-T for a racecar, then comes back to the store and sees the same store that he’s been visiting all these years for his Model-T now looks fresh and new with stunning new displays, stuff that fits in with his brand new racecar.

Of course, this metaphor gets stretched pretty far, but the take-away is that browsers have technological limitations. When your customer visits your site with a clunky old browser it should let them do what you want them to (complete a sale, subscribe to a newsletter, etc.). But when they get a new computer or upgrade their clunky old browser your site should look shiny and new. It should fully utilize the technologies available in that browser to make your site look like it belongs with all the other “current” sites out there. The good news is, if you do it this way and your competition doesn’t, guess who looks current and who looks “old and clunky”?

This brings us back to the “pixel perfect” problem. If you design sites using a static, “picture-in-time” methodology, you’d have to have dozens of designs to utilize all the features of the various browsers, and invest the time to develop each one of them. Each time a browser was updated you’d have to have another design and another iteration of development. If you ever wanted to change the entire design of your site you’d have go back to the drawing board and come up with (and develop) another few dozen design.

“Pixel perfect” does not – and should not – exist! Unless you have an entirely captive audience when you control the browser version, operating system, font-size, display size and resolution, and monitor size, it is entirely unreasonable to expect “pixel perfection”. The mere concept is insanity itself.

Pixel Imperfect™

I’m coining a phrase: Pixel Imperfect™.

This is a concept where a developer and designer work hand-in-hand to come up with a graphical concept and specific graphical objectives to be accomplished by the design and realized in the resulting code.

There should be a specific understanding between the two regarding the limitations and shortcomings of various browsers and environments and certain concessions should be made.

These concessions should be made based in part upon the browser capabilities of the site’s current audience (Google Analytics provides this information).


You may also like...

Leave a Reply