Pixel perfect design is no easy feat

The Cleggmeister

by Ricky Clegg

Fri, 07/13/2018 - 12:11

 

In a constantly changing ecosystem, staying on top of changes to your device, os and browser is becoming an impossible challenge. You are just hoping that the next update does not break part of your site. A quick example is that Chrome updates every few weeks, and each change could be problematic. While the chances are low, just the other week an update broke the visuals on our Scalable Vector Graphics (SVG) switch.

The working button looks like:

PP1

However, after Chrome updated we started seeing:

PP2

As a developer and someone who just enjoys making things look great, there’s nothing better than getting the creative looking ‘banging’ on screen. The modern creative toolset is making life a little easier for us with Sketch and Adobe XD, but I often still find myself in the following scenario: “I get dumped a PSD on a server and am just expected to start coding. And the designer is expecting to see a website that is on-point.”

Back when websites were more of a fixed width, most people were on the 960 grid. This was a nice easy starting point. There were 12 columns, evenly spaced across the screen, with a gutter and everything lined up nicely. With the launch of the iPad, Flash was suddenly taking a downturn. The iPad was about the only tablet that needed supporting, so that gave a nice 768 by 1,024 which also worked very well with the idea of a 12 column system.

 

xx

 

Fast forward to today, and there are now many widths to support. The designers here at Burrows love to produce full-screen experiences. 12 columns is still a very popular format, especially when using Bootstrap. But, as the width of the browser is constantly changing, certain elements must remain pixel perfect, while others can be taken with a pinch of salt.

So, it’s Day 1 of a new project. I open the PSD, and the first thing that always scares me is the amount of lorem ipsum I see. I once saw a great meme: “The pathway to hell is signposted Lorem Ipsum”. I couldn’t agree more.

Everywhere that justified text appears, it is always the ideal word count in the Latin language. It fits perfectly, often with a centred bottom line, and with no widows hanging off the end.

PP4

However, what’s easy for Photoshop is not so easy for a browser. So, I make a note, as I know this will cause me issues. In an older browser, you will have to change the sentence as the width shrinks, or dynamically insert line breaks. The centred bottom line of text can also be very tricky to do.

While nothing is impossible, trying to stick to deadlines and budgets can be hard. Thankfully, in modern browsers, we can use ‘text-align-last: center’, along with ‘text-align: justify’. But, sadly for many people using Safari or an iPhone, this property does not exist.

One thing with HTML text that people overlook when trying to create something pixel perfect is that, even with ‘margin: 0;’ and ‘padding: 0;’, there is still a gap between the text and its bounding box.

PP5

So, we need to correct this if we want to be perfectly aligned. It’s not hard to do, but it can get a bit messy as we need to shift the ‘h2’ back a pixel. This the same for all left or right aligned text.

Normally, the designers I have worked with are following a grid. If this is the case, fixed positions can be matched perfectly to the grid and elements can easily be nudged around in the browser’s developer tools.

The Ford Remarkable Technologies App was only on the iPad at 1,024 x 768. This was the opportunity to easily achieve exactly what the designer had intended.

PP6

This is a very simple user interface (UI), but just keeping the elements inline makes the interface much more pleasant to look at. Most of how we read and interact with text is subconscious, and we take much of it for granted. But, letter spacing, line height and having a clear hierarchy from your ‘h1’ to your ‘p’ tags is really important for clarity and ease of use.

I love that feeling of knowing that you've done something great, and of achieving the ‘wow’ factor when people look at it. I always want to produce great products and do my best work. I've learnt where careful attention needs to be paid, and whose opinions I value when it comes to creative input. After all, there are people out there who will see no problem in this:

PP7

One of the hardest parts is to achieve the perfect transition. Now, a lot of people think just smashing out ‘transition: opacity 500ms linear;’ works. But if you want something to look really good, it takes a lot longer. I find the best approach is to sit with the designer and tweak the numbers there and then in the browser.

PP8

A single transition can take an hour if you want the timing and easing to be right. But every once in a while, the alignment, transitions, and text rendering come out pixel perfect.

 

Ricky Clegg

Front-end Development - Team Leader