Stop Using the Term “Pixel Perfect”, Start Focusing on Experiences
Note: I was digging through some old Google docs and found this piece of writing I did back in 2013. As I read through it, I thought some of it was good and some of it was a bit nauseating (why did I think the word “craftsman” was appropriate for people making websites?) Of course, this was four years ago. The world of web design has changed. More importantly, I have changed. I’m like a sleazy politician: you can’t expect me to backup whatever my stance was yesterday — at least when it comes to technology because technology is always changing and I am always changing.
Nevertheless, I thought there were a few good little pieces in here. Even if there weren’t, I’d post it anyway. I like the idea of keeping junk around from years past. It may not be good, but it shows the arc of change in my knowledge and experience and sometimes I like to see that because it makes me think I’m progressing. But don’t hold me to that because in another five years when I read what I wrote in that last sentence I might be disgusted at myself.
"Pixel Perfect". It's a phrase that gets thrown around a lot in the web community. In the early days of web 2.0, when images were predominantly used to construct websites, "pixel perfect" meant our pixels were crisp, snapping directly to the pixel grid in photoshop. It meant the sites we designed would look the exact same across major browsers - down to the very pixel!
However, today's realm of web design is much different than it used to be. Universality and accessibility (two inherent traits of the web) have become more important than ever with connected devices that increasingly vary in physical size, resolution (both size and density), processing power, input method, bandwidth, and more. With the rise of responsive web design it's impractible and, dare I say, irrational to expect "pixel perfection" in web site design.
We are entering a post PSD era in web design. Because our websites are no longer being sliced up in Photoshop, our usage of the term “pixel perfect” to describe our best work is failing us. The phrase has become a platitude to describe website design that fails to communicate the energy, work, toil, and strain that goes into crafting a modern, responsive, accessible website. So I submit we stop using it to describe our websites.
Scoping the Term "Pixel Perfect"
In the past, pixel perfect meant your web site (which was sliced up from photoshop) was crisp and clear. There were no pixels out of place. This was achieved by a craftsmen-level attention to detail.
However, responsive websites aren't being sliced up from Photoshop anymore. Many UI elements such as buttons are being created directly in the browser using CSS. Pixels are losing their place as the standard of measurement on the web. The sizing of UI elements is not accomplished with pixels measurements anymore; rather, they are being crafted and formulated from more elastic standards of measurement such as the em or percentages. Why? Because elasticity and scalability are part of the web's marrow, and pixels aren't elastic and easily scalable. As Trent Walton has stated: “every time we use a pixel value in CSS we’re rasterizing what was a fully-scalable web.”
Because of this move to more fluid measurements, the phrase "pixel perfect" is becoming antiquated. We're not writing CSS that says "300 pixels wide here" and "13 pixel size font there". If anything, we should be saying "em perfect design", although that doesn't sound nearly as good since we lose the alliteration of "p-p". "Percentage perfect design" would solve our alliteration problem, but not our terminology problem. You see, percentages are not always perfect measurements. 63.458395% may be rounded up a pixel in one browser, but down a pixel in another. And you know what? That's ok. The web wasn't meant to be pixel perfect. What it was meant to be is universally accessible.
Standards and Accessibility
Tim Murtaughs, over at A List Apart, argues why standards and consistency are beginning to become more important than pixel-perfection on the web.
As developers and designers, we need to ... be mindful of how we do our work—and that means letting go of the notion of pixel precision once and for all ... Standards and consistency are more important now than ever before.
Perhaps it is becoming more important that we, as web designers, stop using the phrase "pixel-perfect" to describe our web sites and we start talking about our ability to create beautiful, visually-varying, device-agnostic designs. Or perhaps even better, we should talk about how we're creating delightful experiences. Because the the websites we craft are meant to be experienced, not just looked at on a screen.
Designing Experiences, Not Pixels
Daniel Eden touches a bit on the subject of how we design experiences on the web and how difficult it is to showcase and describe our work:
We don’t design pictures. We design experiences. An experience is something that is impossible to display in a static format like a picture.
"Pixel perfect" is a highly-effective term for describing things that are static. In case you haven't noticed though, the modern web is not static. It ebs and flows. It's increasingly pixel-agnostic. Your website will likely be experienced differently by each and every person who will visit it due to the seemingly limitless number of factors that constitute a user's experience: browser, operating system, connection speed, screen size and density, internal hardware, input method, even the user's environment and ambiance is never quite the same. Many users will only get a glimpse, a portion, a fraction of the web experience you create (and often not the best one). Daniel Mall touches on this subject while speaking of the Post-PSD Era:
In our multi-device world, we’re quickly moving towards, “This is how some people will see your site,” but we’re not doing a great job of communicating that. As an industry, we sell websites like paintings. Instead, we should be selling beautiful and easy access to content, agnostic of device, screen size, or context.
This is why so many design galleries fall short of communicating the essence of a website or application. Snapshots of UI fail to tell the whole story of a website. The term "pixel perfect" fails to adequately and accurately describe the types of websites we're building today. Your responsive web page is not going to look the exact same, pixel for pixel, on the iPhone, Samsung Galaxy, Nexus S, Kindle, Blackberry, MacBook, Chromebook, Microsoft Surface, LG 42" HDTV, Nintendo DSi, and who knows what else in the increasingly internet-connected future of electronic devices. You don't need pixel perfection on mobile safari and on an internet connected fridge. What you need is accessible content optimized for its viewing device. As an adjective for describing the beauty and intricacies of modern websites, "pixel perfect" falls short.
Pixel Perfect: the skill
Don't get me wrong, the phrase "pixel perfect" can still have its place. There are still many UI elements being crafted in Photoshop. A designer who calls his skills "pixel perfect" can still communicate his or her commitment to detail. However, describing our work with modern, responsive websites as pixel perfect is selling ourselves short and mis-communicating what modern web design is as a craft.
If you keep calling your website "pixel perfect", I'll have a hard time believing it's a responsive, universally-accessible website. Instead, I'll venture to guess it's a fixed-width website composed of sliced-up images from Photoshop.
An Analogy
Designing an application for the web could be compared to designing a kitchen. There are many facets that go into its design and construction.
On the web, you have to take into consideration the many building blocks and elements that compose the application and their interplay. These include (but aren't limited to): web forms, buttons, page hierarchy, navigation, typography, icons, images, copy, and more (that's not to mention the internals that handle elements such as constructing, passing, and storing data).
Similarly, when building a kitchen you have to take into consideration it's many building blocks and how they will interplay with each. These elements include things such as countertops, large appliances (dishwasher, stove, etc), sinks, tables, cabinets, drawers, and more (that's not to mention the internals of how all of these things work, like the kitchen plumbing).
The pride you take in individual elements is the sum of your final product, so attention to detail throughout the entire process is imperative! Consider a cabinet maker. His craft is quite ancient and his fellow craftsmen are very skilled in creating something beautiful yet highly functional. However, even the best cabinet maker would recognize that his product is only a small piece of the overall kitchen decor. His job is not only to create something beautiful and usable, but something that blends and weaves its results into the overall experience of the kitchen itself. As Jared Spool has remarked, "when we’re in the kitchen, it's about the cooking and the family interaction—not about eternal admiration of the dovetail joints holding the utensils in place".
And so it is with web design. Our craft is not expressed in a screenshot. You cannot find its essence in a static image composed of pixels on a screen. As stated above, web design is not about pictures, it's about experiences.
Perhaps you're a single web design craftsman responsible for only an piece of the overall puzzle, like the cabinets. In which case you can apply loving, skilled detail to the product of your area of expertise, then pass it back to the kitchen's designer.
Or, perhaps you're a designer responsible for not only designing the kitchen, but creating each element of the kitchens composition - the cabinets, the countertops, the sink, and more. Many web designers find themselves in a similar situation. They are not only responsible for the vision of the web site, but also bringing it to life.
In either case, don't lose sight of your goal: creating an enriching experience.
Where Do We Go From Here?
Responsive web design is requiring a rethinking of visual web design from the ground up. Photoshop is playing a less important role while designing directly in the browser is picking up tremendous speed! That's because with web design we are creating web elements in photoshop while we create web sites in the browser.
As the web increasingly comes into it's own, we're going to begin losing the design terminology we borrowed from the print world. We'll also begin to lose outdated phrases that have lived with us through web 1.0 and 2.0. As the web continues maturing and blossoming into it's own independent medium, we will continue to create and revise our field's lexicon. As the web evolves towards a more fluid nature, it's time we revise our glossary of definitions and descriptions to fit our modern understanding of what the web is; not our antiquated understanding of what it once was.