Brought to you by

There seems to be a prevailing attitude in the web design community towards forcing “pixel-perfect” rendering across all browsers. In this article, we will question whether this is necessarily the best approach, and whether there might be an alternative.

There is an interesting term that I have heard (read) repeated in several places across the vastness that is the internet. That term is “pixel-perfect.” I think its origins are found in the minds of the same people who refer to themselves as pixel pushers, or some other clever, alliterative name. In the context of web design, it basically seems to boil down to the notion of having a place very every pixel, and more importantly, every pixel in its place.

Said another way, it’s about forcing a website to render exactly the way we want it to, in every possible instance.

Of course, anyone who has been in the business for more than a week knows that – as things currently stand – this level of perfection is far easier to imagine than to actually execute. In a recent article over on Drawar, Scrivs bemoans the continuing inconsistencies in contemporary browser rendering engines:

I’m tired. I’m tired of looking at one browser and seeing a result only to find that another browser decided to see things differently. I’m tired of reading CSS3 and HTML5 articles that show me hot new things only to tell me that they will work in some browsers and not others. I’m tired because it’s 2010 and we are still dealing with the same issues that we thought we were solving with CSS back in 2002.

I feel his pain. After all, the web the only area of design that I can think of that actually relies on multiple rendering engines to display a design. When working with print, you are designing for something much more static. There may be rendering issues to deal with on the press, but once the piece is actually printed, it isn’t prone to shifting or breaking depending on how somebody views it.

Application design may come a little closer to the problem we have on the web, but even there I don’t think that designers struggle as much with variation since, by and large, they are working within a singular operating (or family of) operating system(s), making it easy enough to produce consistently predictable results.

Web design is an entirely different beast, and, while I do think that we have made some significant strides over the past ten years, every designer and developer who works on this infinitely large, digital canvas that we call the internet has to come to terms with the simple fact that different browsers will render the same pages with slight (and sometimes massive) differences.

The reality is that, if we want to achieve pixel-perfection and have our designs look the same in every browser, we’re going to spend hours and hours making slight (or not-so-slight) design adjustments, writing CSS hacks and even building entirely different style sheets. In the worst of cases, we might even implement third party scripts to fake an unsupported feature, or to help smooth out something buggy. It’s a hodge-podge way to design and code, but though it’s less than ideal it’s something that just has to be done through that pursuit of perfection.

Or does it?

I may rustle a few feathers here, but here’s a simple question: what would happen if we stopped chasing perfection? What would happen if, instead of cursing browser differences, we embraced them?

It might just cause a revolution in the way we approach design.

The Ballpark Analogy

If you’ve been around this blog before and read some of my other posts and articles, you will probably know that I like to approach things through metaphor and analogy. You may also know that I love baseball. So, please forgive me as I indulge myself in a simple baseball analogy.

Why do we strive for pixel-perfection (image from Shutterstock)

As with any organized sport, in Major League Baseball there are a certain set of rules that govern the way the game is played. If you’re familiar with the sport, you probably know at least the basics – nine innings, three strikes, four balls, three bases and a home plate etc. Aside from the significant designated hitter difference between the National and American leagues, the same rules apply in every game, on any given night throughout the season.

However, that doesn’t mean that the players approach every game the same. There are a number of factors to consider, not the least of which is the ballpark in which the game is being played. Not all stadiums are the same, and those differences will impact the way the game is actually played.

For instance, compare Boston’s Fenway Park against Toronto’s Rogers Center (SkyDome). Fenway has a natural grass field; Rogers Centre uses a synthetic turf. Fenway is an outdoor stadium; Rogers Centre has a retractable roof, allowing for indoor baseball in inclement whether. Fenway has an asymmetrical outfield structure, with the iconic Green Monster out in left field; Rogers Centre has a much more symmetrical layout and fences of a normal height.

When you look at all of these factors separately, they may not seem like such a huge deal, but they all effect the way the game is played. The difference in playing surface changes the way the ball hops. The retractable roof changes the movement of their air, effecting the way the ball travels. The Green Monster can make or break home runs, and has a huge impact on the way the left fielder has to position himself. If players can’t adjust, you will find that they play really well in one stadium and very poorly in another. In fact, this is actually statistically true of many professional players, offering concrete evidence that the game is not exactly the same in every park.

We can think of web browsers in much the same way. We’re all playing the same game, but there are certain circumstantial differences from one browser to another. So, instead of trying to force everything to work in an identical manner, perhaps it would be better to embrace diversity and the uniqueness of each rendering engine.

The Key Question

This whole idea of abandoning the quest for pixel-perfection in web design invariably asks the question: why are we so concerned with perfection anyhow? Why have we convinced ourselves that it is absolutely imperative that designs render exactly the same way in every browser?

Measuring successful design differently (image from Shutterstock)

Again, the answer to this question probably has its roots in the world of print where, as we have already discussed, browser variance is simply not an issue. As such, I think that for many designers coming over to the web from print, there is this lingering expectation (conscious or otherwise), that their designs should remain pixel perfect and entirely unaltered.

It may also be partially symptomatic of the amount of web design that takes place in Photoshop. After all, when a designer rocks out an awesome, graphically rich design, it only makes sense for them to want to see it rendered exactly as it was designed.

But isn’t this also missing the point?

What’s that line that keeps floating around the blogsphere these days? Content is king. It’s becoming one of the most prevalent cliches on the internet, but is no less true because of it. A website (like any form of design), in almost any manifestation, is a gateway through which to present content to a particular readership or audience. Often, however, I think that designers – and even clients – can get this important relationship mixed up. Emphasis gets put on the design rather than the content.

Yet, if content is really the main ingredient for any successful website, and that content is the reason that visitors actually visit a site (as I believe it is), then the question the follows might be: is a cross-browser-pixel-perfect design really necessary?

What if we just focused on making sure that the site looks good in all the browsers, rather than obsessing over trying to make it look the same?

A Different Kind of Measurement

As I was working through my own thoughts and preparing this article, I invariably found myself wondering what this shift away from the pursuit of perfection might actually look like in the real world. I felt like I needed to provide some examples. But l won’t, since I subsequently realized that we’ve probably all seen (if not created) sites that make use of browser-based variation through either graceful degradation and progressive enhancement – two concepts that I would like to consider for a moment.

While these concepts are certainly related, they are also divided along philosophical grounds. Graceful degradation involves building an advanced site, and creating “fallback” for older browsers that don’t support certain functionality. Progressive enhancement, on the other hand, involves creating an initial layout that works in all browsers, and then adding enhancements based on the availability of more advanced features.

Measuring successful design differently (image from Shutterstock)

Somehow, progressive enhancement just seems like a more intuitive choice, since it’s more about building a solid foundation, rather than constructing everything first and then implementing fixes to allow for a broad range of support at the end. Either way, however, you’re left with a site the behaves differently in different browsers, and that’s part of what we’re looking at in this article.

And that brings us to the core issue, which is not whether to progressively enhance your sites or allow them to gracefully degrade. The issue is that, as things currently stand, the pursuit of perfection (whether achieved or not), cannot be measured in terms of pixels and sameness. If it is to be measured at all, it should be in the context of usability, layout, typography and/or user experience.

Look at your design in the latest version of Chrome and the oldest version of Internet Explorer that you support. Does the site look the same? Probably not, but better questions would be: is the content accessible? Is the design and layout attractive in its own right? Is the overall message (both literal and implied) fully conveyed?

If you can answer yes to all of these questions, then that’s an excellent indication that you have created a strong, usable design, even if it doesn’t render exactly the same in all browsers.

Conclusion

Now, I want to stress that I am not advocating for an abandonment of a more consistent level of rendering between browsers. I would love to see that happen. Not only would it make our lives easier as designers, it would also provide a more enjoyable and predictable user experience. So if, as the Drawar article suggests, Internet Explorer was to embrace Webkit, I would be the first in line to support it.

Until that day comes though (if it ever does), we need to keep our attention focused on usability and user experience rather than the pursuit of pixel-perfection, which in many cases can be like trying to force a square peg into a round hole.

I also want to emphasize that what I am looking at here is not absolute. I am not taking a stand and saying that this is the way to approach web design. I am simply trying to raise an issue, ask a few questions and hopefully initiate a bit of a dialogue with on the subject.

So what do you think? Do you obsess over creating pixel perfect designs in every single browser, or do you take a somewhat looser approach and allow the different browsers to take their course (within limits)? Why do you chose that position? Come on and share your thoughts. Let’s have a conversation.

About the Author

Matt Ward is a digital artist who lances freely under the moniker of Echo Enduring Media, and specializes in graphics design, illustration and writing. He is also the Creative Director for Highland Marketing, a creative direct marketing company based out of Waterloo, Ontario. You can follow Matt on Twitter

Like this post? Help Promote it!

Comments

May 29, 2010

Elena says:

You know, I used to obsess about whether my websites where pixel-perfect until I realized that the font sizes in Opera & IE were always going to be larger than what you saw in Firefox, Chrome and Safari. After that, I was just happy to have well balanced websites that looked good.

I also loved your baseball comparision. It really made the differences of planning a website come to life. I think progressive enhancement is the way to go, since it’s a way to look ahead and most likely not have as many changes as you would down the road.

Thanks for this wonderful post.

Jun 1, 2010

Matt Ward says:

Thanks Elena. Glad you liked the baseball analogy. It seems to have gone over pretty well!

May 29, 2010

Brian McDaniel says:

Interesting and intriguing line of thought, Matt. I follow you and agree with your idea for the most part. Plus I love the baseball analogy, especially since I, too, am a fan of the sport.

The first point that popped into my head as a reason I pursue cross-browser rendering consistency is the client. Most clients have little or no understanding of the differences in rendering between browsers. They just know what they see. How many times have you been asked by a client, “Why doesn’t this look the same in the other browser?”

I have a standard speech of explanation that I have rolled out so many times I can no longer count.

Regardless, the client must be satisfied with their website, and almost always this entails consistent rendering of the site across all browsers.

Unless we can change the expectation of the client, this battle is already over before it started, I think. Designers/developers everywhere can choose to toss cross-browser consistency out the window but if no one’s hiring us to do it I think we might quickly change our tune.

Not trying to derail your train of thought, Matt. Just another point to throw into the discussion.

Thanks for getting my wheels turning (again)!

Jun 2, 2010

Matt Ward says:

Thanks for the comment Brian. Insightful as always! I totally hear what you’re saying about the client – something that has been echoed by some of the other comments below. The client is definitely one of the most important considerations for any commisioned design work.

I can see it being a bit difficult to explain to these clients about how pixel perfect aren’t really necessary, for all the reasons outlined in this article. That being said, I would still try to have the discussion, especially if giving up on pixel perfect rendering could save some money.

If the client still wants pixel perfect rendering, though, then you should probably be prepared to offer pixel perfect rendering!

May 30, 2010

Anixia says:

Try working with a client who only ever uses IE and a Mac ad agency that only ever uses safari! Answer, the end client counts most, make it work for him and the middle men will stop fussing over pixel differences… better still tell the end client he can have whatever he wants if he is prepared extra to make it work on the ad agency machines

Actually, I find firefox is most often the odd one out these days and using trans spacers helps a lot to make it consistent on all.

The example above was solved when the end client realized the ad agency hadn’t even bothered to view it on IE because they didn’t think IE was worth running, while the end client said all his customers only used IE.

May 30, 2010

Nils Geylen says:

I agree with Elena: web site design is about balance and presenting the message.

I guess with all that is technically and theoretically possible, many still confuse web design with overall graphic design.

Designing a web site so it looks like an illustrated poster or an art book is an interesting experiment but it’s not what web design is about. It would be like making a steam engine look like a flower arrangement.

I say: go for aesthetics and cross-browser usability, but don’t waste time over pixel hacks. Anyone obsessed with that should go develop standardized rendering engines first.

May 30, 2010

Rachel Orrell says:

I think that seeking pixel-perfect cross-browser compatibility is a huge waste of man hours. Of course, you want them to look similar, but what end user is going to be flipping between browsers looking for the tiniest shift?

Of course, it’s not always my choice. I can and will do it if the client won’t accept anything less, but really it’s hard to see why it matters so much.

May 30, 2010

Belinda says:

I do like your baseball analogy, but one thing I have to point out is that you never play baseball on multiple fields at the same time… You can adjust your strategy for each field and have it work then and there, and then for your next game you adjust again. It would sort of be like saying “this project has to work in IE” “now this one needs to work in Safari”. Does that make sense?

Regardless… I don’t think it’s important to have the page render 100% the same in each browser. As long as it does what its mean to do, portrays the brand/product/company in the right light, and gives the client what they are looking for, I’m quite happy.

About 50% of my projects are optimized for IE6+, Chrome, Safari and Firefox. The other 50% drop off IE6.

May 30, 2010

Bruno Barros says:

Man, great post! Beside I can’t guess how to play baseball, I enjoyed your coparison.

I use to think in a perfect project, then I apply the concept of Beautiful Degradation, sometimes it huts, but as you said, the content, the UX are the most important thing.

Jun 1, 2010

Rufus Shepherd says:

All of this doesn’t matter. What matters is the client and his/her spouse, maybe a mother-in-law, perhaps a distant cousin and what they thing they know about web design. The rest is just an academic argument for the break room.

Jun 11, 2010

Art says:

I absolutely agree. I am all for embracing the differences, and making a site that works in every browser, with slight display differences. The problem comes when an ignorant (and that’s using the term non-pejoratively) person becomes upset because something doesn’t display exactly the way they think it should in THEIR browser. Never mind that it displays as intended in most other popular browsers, or that it really doesn’t effect the functionality of the site. Until this “bug” is squashed, the client will not consider the job finished.

It is a matter of education and understanding, but it can be very difficult to pull off. People seem to mistrust the practitioners of arts they themselves don’t understand. Who here has gone to a mechanic and had the feeling that they were being ripped off, that the recommendations made were just to take advantage of you? Many clients feel that way about us. We see ourselves as honest craftsmen, as experts in our fields; clients, too often, see us as hucksters, on the make.

We KNOW (and can prove) that Matt is right; convincing the people who pay us for our knowledge and skill is the difficult part.

Jun 1, 2010

Leo Allen says:

Andy Clarke has been following this line for a while now, and I’m glad to see its beginning to become the standard viewpoint for most web designers nowadays. He similarly notes that key to moving away from “pixel perfect” design is to move away from photoshop as well and design more in the browser. Have to say I 100% agree with him, and felt such a relief when the concept fully hit home. Basically web design is about creating flexible designs – the “perfect” design is one applicable to all contexts, not just a 21inch screen with the latest webkit browser.

Lucas Cobb Design says:

I agree with what has been said, in the end it is up to the client to decide how and where they want the site to look its best.

Every client I’ve worked with has focused on one browser (not that its always the same browser) and has no concept that there are other browsers out there that their design must be accountable too. This has made my job a little easier, but then what about my personal sites?

I feel usability is most important when I design for myself and I always take a clean and minimalistic approach to design which helps rendering cross browsers. Text size will change and I get that, I’m ok with it. With css layout is almost always spot on and I optimize my graphics for fast load times. I really have no need for third party scripts or insane implementations so I dont really have to worry about that either. All in all I focus on the browsers that most users are on today and focus on the future from there.

I see the web as an ever changing organism and I just wonder where my site will be in another ten years. Here is to change everybody.

Jun 1, 2010

Joshua says:

Great article. I work in the digital agency biz and find myself on projects where we are fixing and building things for 5% of the market where time money and resources can be better spent elsewhere.

If a site does not have content nor updates the content, it does not matter if there are great images, 100% validation, SEO etc..no one will come back.

Nice job!

Jun 1, 2010

Michael says:

The point of CSS is to address this reality and move on, but a lot of us haven’t taken that to heart–or we haven’t figured out how to communicate this to our employers or clients very effectively. Also, yes, we need to design with CSS realities in mind rather than creating a dream design in Photoshop and then trying to force CSS to recreate that design after the fact (and after our client has signed off on the gorgeousness).

I agree that progressive enhancement from a baseline is the way to go. WHY would anyone spend money on backward-compatibility if they didn’t absolutely have to? It’s money wasted, in my opinion. Your users’ VISUAL experience of your site will only get BETTER. Also worth noting, Microsoft is actively asking IE6 users to upgrade to IE8: http://bit.ly/a4vBBz — FINALLY.

BUT, we need to get out of the habit of thinking of our designs as equivalent to the user experience–they are not. Aesthetic appearance, though obviously relevant, will not fundamentally alter the user experience if they are coded properly. There are clever ways to use CSS validly that can maintain the integrity of a user experience across browsers and operating systems, though it won’t be a pixel-perfect visual rendering of your design. It also doesn’t mean it will be ugly. The truth is, the user will never know the difference, and as long as they are able to have a successful experience, our work is done. But having a site appear exactly as it does in Photoshop, in every browser, does not a successful user experience make. (I highly recommend Dan’s book, “Handcrafted CSS,” and the accompanying DVD, in which he takes you through a site he built from scratch, and shows how turning off images or altering default type sizes won’t break a site or render it unusable if CSS is implemented well.)

We need to get better at helping our employers and clients understand and accept this. The price we pay for perfection now will cost us more later when we have to recode it for new software or devices. Large corporations, of course, may not care about having to do that, but most small or mid-sized businesses don’t have that luxury. I, for one, can vouch for having successfully helped most of my clients get over this, “my nephew says my site looks different on his computer” business. Design for the future, not the past–move forward, not backward–and remember that the user experience is what matters most. The size, typeface, or positioning of the “BUY NOW” button is nowhere near as important as whether or not the user clicks it, especially if the difference is a matter of mere pixels.

Jun 11, 2010

John says:

Excellent article! I usually go for “pixel-perfect” on whatever browser the person writing my check uses, then make sure all the rest look good and are usable.

This lays the concept down very well. I’ll definitely be referring clients to this article.

Jun 11, 2010

Matt Ward says:

Sounds like you have a good system for dealing with this issue! And I’d appreciate any referrals of course! Thanks John!

Jun 11, 2010

Frank says:

Hi Matt,

Good article. Just a little while ago I’ve read the exact same kind of article… in Dutch. The author is a Dutch programmer called Jeroen Hulscher. He pleas for digital disrimination and has good arguments for it too . You might wanna connect to each other and plea further together. You can find him on twitter @jeroenhulscher. The article itself you can find clicking on : http://bit.ly/97WZGP

Cheerz, Frank

Jun 17, 2010

Tim says:

I agree with this line of thought. Time is to short to worry about pixel perfection across all browsers, unless the budget is available for such time consuming tasks. Generally those that insist on such things come from a print background and are not developers themselves. If the live site stays true to the static design flavor across recent browsers, that should be an attainable goal, delivering the style as intended. Of course, as mentioned, eventually having browsers all render things the same would be fantastic.