Browser Compatibility and Pixel Perfect

A few days ago, Matt Ward raised the topic of Pixel Per­fect, the idea of mak­ing sites look exactly the same across all browsers.

As a Front-End devel­oper, and a User Expe­ri­ence enthu­si­ast, Pixel Per­fect is a touchy sub­ject for me. When I’m con­tacted by clients or future employ­ers and asked about my skills, I usu­ally throw the Pixel Per­fect term in there, some of them rec­og­nize it, oth­ers ask what’s the mean­ing, and when they ask, I say — very proudly — that the code that leaves my hands is 100% cross-browser and will look and behave exactly the same across all plat­forms, if I can help it.

I never thought of the sub­ject much, it seemed very nat­ural to me that the sites I build should look and behave exactly the same across every pos­si­ble plat­form. But as some of you may know, there is a small prob­lem with that notion — it is a very hard thing to accom­plish. To make a site actu­ally be 100% pixel per­fect, I find myself wast­ing time on things that are so minute and unim­por­tant (in hind­sight), that it’s quite ridicu­lous spend­ing so much time on a small detail like a line that is 2 – 3 pix­els higher than it should be.

Matt raised an inter­est­ing point:

What’s that line that keeps float­ing around the blog­sphere these days? Con­tent is king. It’s becom­ing one of the most preva­lent cliches on the inter­net, but is no less true because of it. A web­site (like any form of design), in almost any man­i­fes­ta­tion, is a gate­way through which to present con­tent to a par­tic­u­lar read­er­ship or audi­ence. Often, how­ever, I think that design­ers – and even clients – can get this impor­tant rela­tion­ship mixed up. Empha­sis gets put on the design rather than the content.

Yet, if con­tent is really the main ingre­di­ent for any suc­cess­ful web­site, and that con­tent is the rea­son that vis­i­tors actu­ally visit a site (as I believe it is), then the ques­tion the fol­lows might be: is a cross-browser-pixel-perfect design really nec­es­sary?

Three years ago, this ques­tion, for me, would have been easy to answer, a sim­ple Yes would do. but when the iPhone arrived, new type of browsers emerged, the small browsers. In the last year, there was a huge explo­sion of smart-phone users who surf the inter­net like nor­mal users, and those users are actu­ally expect­ing the web­sites they visit to look dif­fer­ent than the orig­i­nal sites for nor­mal browsers.

Maybe we have put too much atten­tion in mak­ing our sites to look exactly the same cross-platform? per­haps we should actu­ally make our sites look dif­fer­ent to vis­i­tors using dif­fer­ent browsers? it sure is accept­able and com­mon for mobile browsers.

This raised an inter­est­ing idea, what if you actu­ally reflected your sites’ look-and-feel based on the vis­i­tors’ browser? You use IE6? you will get a 2001-ish look­ing web­site, using Apples’ Safari? you will get a pol­ished metal web-site, brows­ing with Chrome? Min­i­mal­ism rules.

Of course that this idea will not sim­plify any­thing, but rather com­pli­cate, but it is pos­si­ble to accom­plish, and would send out a mes­sage to the browser ven­dors, that as long as they make their own rules, their users are get­ting incon­sis­tent expe­ri­ence. Also, this of course can­not be applied to sites such as face­book or google, but pri­vate blogs such as the one you’re read­ing now, it sure can make an inter­est­ing choice.

---

To answer Matt’s ques­tion, I think that mak­ing web sites pixel per­fect is over-rated. and you do have a point that some things could be ignored. We usu­ally tend to adver­tise our­selves as Pixel Per­fec­tion­ists because we are sure that it’s the right things, and on some (if not most) occa­sions, this will get us the job we want, because we all think that Pixel Per­fect is the right way to go.

The inter­est­ing thing is, that the only ones who actu­ally notice if the design is Pixel Per­fect are usu­ally the devel­op­ers them­selves and the QA depart­ment (if they are anal about it, like Kfir ), the design­ers, direc­tors, and users will doubt­fully see any dif­fer­ence at all, or notice the minute changes.

The bot­tom line is, yes Matt, you are right, I tend to agree with you, and being a Pixel Per­fec­tion­ist is miss­ing the point, we should be more focused on user expe­ri­ence and usabil­ity, make sure that the con­tent we try to deliver is acces­si­ble and read­able across any and all plat­forms, a user that seems the site on IE will not know or care that the site looks slightly dif­fer­ent on Chrome.