Don’t Be a Pixel Perfectionist

blog_css

Recently I posted a tweet about the idea of pixel perfection and it struck a chord with a few people, so I thought I should elaborate:

Pixel perfection doesn’t have a technical definition, but it’s basically the idea of working so hard on a design that almost every pixel has been given some degree of consideration. The contrast of every border is sharp, the space between every content module is exceptionally proportional, and the weight of every font is just so; and admittedly it looks pretty great. On the web, a pixel perfectionist will strive for a ridiculously consistent experience across every device, every browser, and every screen resolution. They often take pride in their ability to deliver on this promise to their clients.

There’s a time and place for pixel perfection, and the web is not it.

Don’t Get Me Wrong

In the fine art world, they say that a painting is never finished. Neither is a website. There’s always going to be something that you can do to make it better, even if that’s taking a design from 98% to 98.2%. If you carry this mentality through every last detail, you’re doing yourself and your stakeholders a disservice, because you’re spending a lot of time on things that don’t make a big impact.

I think the desire to tweak every detail comes from print media. Reprinting a large run is almost impossible, so it’s important to get everything right the first time. This is why major publications have lots of editors and people proofreading before they hit the press.

Things change constantly on the web, so if there’s a few small issues here and there, it’s very easy to roll out a quick update. Sure, first impressions count and you need some solid follow through after that, but don’t spend 90% of your time squeezing out the last 2% of beauty. Staying up until 3am fixing a weird padding bug in an older version of IE isn’t going to convert more customers, so get something out there and start finding the real problems. The beauty of the medium is that it’s easy to iterate.

Experimentation and Time Spent

Drawing on the comparison between print and web once more, I think the physical nature of print makes it more difficult to experiment, especially in fine art where the processes are more labor intensive. The cost of experimenting on the web is almost zero, so you should try a lot of things and see what works.

Experimenting is how you grow as a designer. By trying out lots of different things and exploring the broadest possibilities, you’ll rapidly figure out where to focus your time. You’ll learn what works, what doesn’t, what you’re good at, and what you need to improve. Sometimes you’ll even stumble upon something that nobody has explored before, which is pretty fun. This is a big reason why I’ve been using CodePen lately: There doesn’t need to be an immediate practical application and context for your ideas.

For example, I made this CSS filmstrip (below) because it was an idea that popped into my head and it seemed like a fun way to spend an hour. I’m not totally thrilled with the way it turned out and it probably has a lot of cross-browser issues, but that’s not the point of experiments like this. If I decide to use it on a production website, I can worry about all of those things and work on them. More importantly, if I decide to create a similar experiment, I’ll have all the experience I gained from this one.

See the Pen Film Strip by Nick Pettit (@nickpettit) on CodePen

If you’re making things all the time, you’ll become faster and better. Focusing hard on one thing will give you tunnel vision and can make it difficult to see the big picture. By moving rapidly from one idea to the next, you’ll start to find efficiencies and patterns that can decrease the amount of time you spend on each project. I pause to mention this, because increasing your speed is a lynchpin of your value as a web professional. If you’re billing per project, you can work on more of them, and if you’re billing hourly, you can increase your hourly rate because you get more done in less time.

A website is never done, so learn how to put down the paint brush and move on. Everything is temporary.

Free Workshops

Watch one of our expert, full-length teaching videos. Choose from HTML, CSS or WordPress.

Start Learning

Nick Pettit

Nick is a designer, public speaker, and teacher at Treehouse. He is also a co-host of The Treehouse Show. Twitter: @nickrp

Comments

14 comments on “Don’t Be a Pixel Perfectionist

  1. Very meaningful post !!! I am working as a front end coder from last 3.5 years and focused only on 3 things (html, css, js) but now I’ve to move on find another vision for expand my career opportunities.

  2. All in all I agree with most of your post. However, I do feel there are reasons to become pixel perfect when it comes to coherency and meaning in a design.
    A block of text is only readable and coherent when there is a clear relation between font size and leading. When margins between headings and paragraphs are relevant and clear and define a relationship.
    I believe these things really do come down to pixel pushing and will only look and “feel” right when they’re exactly in the right spot.

    • Oh, absolutely. Designers deal in pixels and percentages all day long. :)

      What I’m getting at is the temptation to adjust the blur radius on a text shadow for the 5th time. There’s the tendency (I’m guilty of it as well) to equate tweaking a lot of things rapidly with doing work. Some of that is OK, but there comes a point where you have to cut yourself off and say, “Looks great!” and move on. It’s hard to know when that is.

      • Amen!

        I give it three adjustments and then move on, even if it still looks awful. Come back to it later when you can focus on the flow around it.

        Well, at least I try to do that lol

  3. 100% agree with this. I’ve worked in a few digital agencies in which the development process involved creating “comps” or pixel perfect mockups of what you’re developing. You’re definitely right about it being inspired by print media.

  4. I personally disagree with all of this, particularly coming from a corporation promoting learning within the web industry.

    As designers and web developers, we should be open to seeking absolutely every possibility and travelling down as many different avenues as possible. It’s the diversity that makes the web such a special place.

    There are far too many bog standard websites, which don’t do much. I don’t feel it’s good to promote a lackadaisical attitude when it comes to visual.

    Sure, the web is different to print, but the web IS the new print. It’s carried in everyone’s pockets all around the world, why should it be any different?

    Any skilled tradesman will tell you to do a job proper first time round, and it prevents a lot of messing around later down the line.

    There’s a fine line between driving a entrepreneurial sale, running a business and being a passionate webbie. I suppose it’s down to you to decide which side of the fence you sit on.

    • I feel like you missed the message. He even reiterated it in a comment below. He’s not saying be okay with putting out sub standard work, he is saying at some point you have to back off making those baby changes which most people won’t notice and just get it out there. If a text shadow really needs 1 extra pixel it can be changed later and the pursuit of perfection shouldn’t consume hours and hours of times over making that one pixel perfect.

      • Oh, no, I appreciate that; just the title threw me. “Don’t be a pixel perfectionist” is the opposite of what I strive for in my work. I understand that too getting it out there is important, but I do believe it always depends on which side of the fence you sit on. Business owners want them live asap to start generating income. Web designers want to take their time to improve their portfolio. I agree – it’s finding the balance, but I don’t think pixel perfectionism is the issue.

  5. I’m definitely guilty of this, it’s hard to step away sometimes. But when you’re adjusting 1 element by 1 pixel for the 10th time in half an hour it’s really time to move on!