posted by Matt Ward on May 28, 2010.
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.
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?
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.
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.
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.Post A Comment
Also from Echo Enduring Media: