How I Lost $1000 On One Pixel

This is the story of how a customer made me lose $1000 on moving stuff by 1px. It transformed my career, and I never asked to bet back the money. It also told me something about how web development transforms, and we can adapt to these changes.

Back in the day, I was running a social media agency. Aside from running social media accounts with an in-house cutting-edge system, we were also running contests and doing small marketing apps for our clients.

Sometimes a client came with no idea, so we were designing an app from the ground up. Only rarely we had clients that were coming with ready designs for a marketing app to be developed.

Usually what I did was loosely follow the design to fit the client’s budget. Everyone was happy, the contests were successful and gave our clients a lot of new followers and broad brand awareness.

It was the beginning of social media, and it was quite easy compared to how it is now to reach clients with organic activities.

So, my life as a web developer was quite comfortable. Until that one client came in. He didn’t want to have a contest. He wanted to have a newsletter subscription page on his social media account.

I won’t mention the name of the social media platform, but back in the day, it was able to create a subpage on your social media page with HTML, CSS, and JS.

The budget I negotiated for the task was reasonable; the client accepted it. I had enough time to fulfill the order without haste.

Did I forget to mention? He came with his own design for the newsletter page. It was beautiful and eye-catching, surpassing in miles what the idea for marketing apps back in the day was.

For me, it made the task easier because I just had to compose the page and move to other tasks. After two days mixed with other tasks, I finished the landing page and sent it to the client satisfied with the results.

But the client didn’t share my enthusiasm. He told me that the landing page differed from the design. Well, it did. The design was only an inspiration, and I just placed everything more or less in the right place.

I thought, ok, I will just adjust it more. Move a button to the left, image upper, and so on. It was quite usual for me, because often, even when making a perfect solution, some clients asked for some changes.

It is a natural and important step because it gives the client a feeling of participation and satisfaction in having something he wants.

After some more days, I adjusted the newsletter landing page and sent it to the client. After an hour, I got a reply, “It is still skewed.”

It was disappointing for me, because the implementation was *almost* a perfect representation of the provided design, and I ran out of budget for this project.

It was at that time that I decided to make a screenshot of the implementation and overlay it over the design in the Paint.NET app. What it revealed was that while the implementation was similar to the design, elements were pixels away from the design in various directions.

Up until this point in my life, I was pretty happy with not seeing pixel differences. I was frustrated. But I really wanted to finish this task that I took. So I’ve worked on this project further. In total, I’ve exceeded the budget by $300 by working several additional hours.

This time, I choose a different approach. I didn’t try to adjust the implementation. I just moved elements, so they fit 100% with the design in Paint.NET. It was my first pixel-perfect implementation.

In my head, I was fighting between “it does not make sense” and “let’s try it out.” Finally, I was able to send the new version to the client. Once it was pixel-perfect, the client accepted the result.

I was planning to move to the next task right away, but I was curious. What was the difference? I’ve opened two Paint.NET apps side-by-side to compare my first implementation and the pixel-perfect one.

What my rather eclectic, engineering eye saw was astonishing. My initial implementation looked ugly! I had never seen it before and thought these 2–3 pixels of a difference didn’t impact the perception. But there I was, looking at the newsletter Mona Lisa with a lousy eye.

I initially wanted to charge the client for this nonsense with pixels. However, taking into account I was just learning something extremely important, I just charged him a basic rate.

This moment and this client cemented my transformation from a front-end developer to a design developer. Since that time, I have worked with a lot of designers, clients, and front-end developers.

Not everyone expects pixel-perfect implementations. It’s not always necessary and not always wise monetarily. But sometimes it is, especially when you want to attract customers.

Good designs attract people’s eyes. Good designs hide in that 1px you’ve added to your CSS sheet.

To be able to focus on such issues, you have to sort out the technical aspects of your software. So that more effort can be put into the marketing, business, and experience aspects of your e-commerce store or app.

That is why I like what Elastic Path offers. It is a company that sponsors the contest I am participating in with this article. They offer all the operational functionalities you need to set up multiple e-commerce sites.

As a developer, I love the idea because I rather focus on the business needs than on maintaining and developing product catalogs, payment systems, etc. They offer an easy-to-use API that you can just tap into your new e-commerce venue.

This article was originally published by Tom Smykowski on Hackernoon.