Nothing is perfect, but we’re not swelling on that…
Nothing is Perfect. Your design is not perfect. Even if you test your design on all platforms with your perfect target audience, you are more than likely going to find behavioural problems. Which leads us to the most important part of our Dapper Dog talk :
Web Browser Behavior and Screen Resolutions
When the term “Pixel Perfect” was coined, we had far fewer resolutions and browsers to serve to. The “desktop” 1920 x 1080, and the “phone” 800×480. As someone who works on computers all day, there are SEVERAL screens in my office, none of which are these sizes. So you can toil away at making the PERFECT alignments for that 1920 screen, or accept that it is an outdated standard, and be better!
So what does it actually mean? It means that whether I mock up a design, or a client provides one, they want the end result to reflect that design to pixel perfection! There is nothing inherently wrong with this idea, but as technology has improved and changes, so must our design approach.
I get asked by potential clients if I can make “Pixel Perfect” design A LOT. Like, a lot a lot. This is a sticky question. If I just say “No”, they are going to instantly write me off as not knowing what I am doing. So we must answer this question with a bit more finesse. Something along the lines of “I prefer responsive design” will more often than not open a dialogue about what that means.
Ten years ago, phones far outpaces laptops in sales, and ipads were JUST released. Today, we must consider a myriad of sizes for desktop, laptop, tablet, and phones..with all the variations within. And don’t forget that a lot of these devices can be turned SIDEWAYS!
So what do we REALLY need?
“Look and Feel”
This means adhering to the brand standards and ensuring that the user experience is great on ALL platforms and screen sizes. Being agile, and mobile optimizing the content to move fluidly within it’s space.
Yes, I can make you a pixel perfect design that fits nicely into that 1920 screen, but what happens when the user drags the window or reduces it? It’s not going to look so pixel perfect then. So in other words, “Pixel Perfect” just isn’t logical.
Pixel Close-Enough
Let’s just face the reality here – Pixel Perfection is HARD. Why? Because there are so many variables. How Chrome interprets your code, might be different than how Safari sees it. You can spend hours on hours perfecting your build, just to jump over to Firefox and the font weights are off! Another thing to keep in mind is the format of your design. A lot of times they will be coming from something like Figma or Photoshop. These are DESIGN software, and adhere to design principals.
A great example of this is “Optical Centering”. Sometimes the mathematical center of an object is what looks like the center. Here is an example of the number 1 centered within a circle. The image on the left is mathematically centered, and the image on the right is optically centered.
So you may get a design from a client that is optically centered, but your browser is going to mathematically center items. And BOOM – perfection failed.
Another thing that can happen is extra pixels around letter kerning. The design will have all your text nicely aligned to the left. But after the development face, you can see 1 or 2 pixels of padding beside the words on the left. This is the kerning space you are seeing. The letter is TECHNICALLY left-aligned, even though you see the padding.
So what do we do?
We relax! Get fluid. And most importantly – get mobile responsive! I test my websites before hand-off on multiple devices and screens, and drag the window around to make sure my break points make sense. The break point is at what resolution an element changes to it’s mobile form. By doing that, I ensure that your website looks good no matter how someone is viewing it – on their extra wide desktop screen, or taking up half the screen on their laptop.
Not only that, but the pixel isn’t even always needed in terms of measurement. We have “VW” (view width which is a percentage of the viewing screen), and “VH” (view height). This allows for a a design element to always take up the full screen regardless of what size screen you have.
Static Design is OUT
“Pixel Perfection” implies a design that is static. This is great for graphic design – a flyer, a poster, a manual…but a terrible idea for a moving website. If you look through my web portfolio you will see some screen shots of landing pages. What you are not seeing is the moving parts. The rolling color palette on scroll, or a clever carousel with mouse over effects. Those things will never be pixel perfect, because they are always in motion.
If you truly want a great web experience on your website, then let go of the notion of perfection, and embrace responsive and adaptive design. Let your website breathe!