If you are involved in the web design field, you undoubtedly have seen designers and developers that talk about Pixel Perfect Design. As an instructor, I personally have a problem with this because it goes completely against best practices in modern web design and web development. Here is why:
There is no such a thing as Pixel Perfect Design
The only way to create Pixel Perfect Designs is if you are targeting only one screen size and device. Even if you decide to target one screen size and device, there is a big chance that you end up having a headache with some positions of your designs in different browsers. Therefore, for Pixel Perfect Design, the only approach is designing for one screen, one device, one browser, and one version of the browser. That brings us back to the days of “This website is optimized for Internet Explorer”, or even worst because at least there were two main browsers back then with no mobile devices. Instead of thinking about pixels, professionals need to think in terms of features, browser and devices capabilities. Think of Progressive Enhancement as a way to develop and design websites and applications instead of concentrate all that energy in pixels. Pixels are just pixels, the experience of the users is more important, and our decisions should be based on the users and not personal preferences. Different browsers have different settings that can break your design. Moreover, users can change some settings in their browsers and you have to respect instead of overwriting with your “Perfect” design.
It Teaches Bad Habits to Newcomers
When new designers enter the field, they don’t know what is considered a good practice and what to avoid. They will be reading blogs, ads, see what other more mature and professionals designers are doing. If they see a profile of a person they think is an expert bragging about their “Pixel Perfect Designs”, they will assume that is the recommended way to design websites and applications. Remember, most designers are self-taught, and it probably will be years before they realize that what they are doing is wrong. Furthermore, bad habits are hard to eliminate because they become second nature in our design. For example, the only way to achieve a Pixel Perfect Design across all devices is by using a image instead of a recommended HTML element and CSS. But, if you use the image, in most cases, you demonstrate that you don’t know the basic knowledge of why designing for the web.
We have been Past “Pixel Perfect Design” for at least 6 Years
Let’s go back over 10 years, the most popular screen resolution was 1024×768, but the numbers for the 800×600 resolutions were very strong. So, the only options were to optimize for the smaller resolution and that was just good enough. Now, there are more than 2 resolutions and more coming every single year. Now it is even harder when you have to consider the amount of mobile devices accessing the web. For now, the only way to create a good enough user experience is by using Responsive Web Design which was a technique using media queries created in 2010. However, with media queries and Responsive Web Design , there is not pixel perfect because you are designing even for resolutions that you are not testing for. You have to be smart enough to use the breakpoints of your own design to make it look “right” in every possible scenario. That means that your pixel perfect, may not be that perfect in some or even most of the devices.
In Conclusion
There is no such thing as Pixel Perfect Design, because you cannot design with pixel perfect accuracy with the amount of devices and screen sizes in the market. When I see a designer or an ad online about Pixel Perfect Design, I assume that if it is a designer, they haven’t work in professional applications, and when it is an ad or an agency, I see it as a buzzword and the one who posted it, ignored the meaning of this.
