Exactly How: To make pixel perfect HTML/CSS from PNG/PSD?

[akrimony]

Hi,

I am a UI developer for Accenture in India and my job is to convert designs - PSD/PNG - in XHTML and CSS. I've been doing it and the client was receiving it nicely until another client who wanted exact pixel perfection in the HTML/CSS coded. How can I achieve that? So that each padding, margin is just perfect bas in the design? Is there a proper process for it?

What I generally do is, I measure the basic widths, heights of blocks and then code them. I tend to ignore paddings and margins for each and every little piece of content.

How do I go about doing it?

Any help is appreciated.

Thanks,

[ralph.m]

The only way to get a pixel perfect web page is to post an image of the page from Photoshop and forget about HTML and CSS.

Of course, that's not possible, so you have to put up with the rendering differences of the various browsers. Really, this is a question of education. A client who wants pixel perfection needs to be taught that this is not what the web is about. Content needs to be allowed to appear differently on browsers in a wide range of circumstances, from different viewport sizes to people who have different default settings like increased font sizes. I would not continue with a client that didn't get that message quickly.

[Stevie D]

As Ralph says, you're on a fool's errand if you're trying to get pixel perfection. There are a number of reasons for that:

1. Different browsers on different OSs sometimes interpret the same code in minutely different ways. It's rarely a big deal, but it can make a small difference. Sometimes those small differences can add up to a bigger difference – eg a paragraph of text that wraps an extra word onto the line below can then need an extra line, which can knock a pixel-perfect design right out.

2. People have different sized screens and browser windows. That is true for people using traditional desktop/laptop monitors, and is increasingly true as mobiles and tablets become more popular. You don't know how big your reader's viewport is going to be, but what you want to achieve is (a) a site that isn't too wide to be easy to read, (b) a site that makes the best use of the available width, and (c) isn't wider than the viewport. You can achieve all three of those with a flexible or responsive design, but not if you're going for a pixel-perfect facsimile. All that does is mean that people with different sized viewports get a suboptimal experience – usually that the site is too wide for their window/screen so some of the content is missing off the side and they have to scroll sideways to get to it. And that isn't good.

3. Pixel perfect designs need fixed size text. That messes up people who need to change their text size in order to read it properly, because whether they do it by changing the default size or by zooming, it's going to break your page design.

Remember, a website is create for people to read and use. If those people can't read and use it easily, it has failed. As long as it doesn't look horribly broken, they really don't care what it looks like. They won't know if the design is slightly different from what you see, and they won't care. Worrying about pixel perfection is pointless, and often damaging.

[ralph.m]

This is also a good reason not to design websites in Photoshop ... a program that is foreign in nature and purpose to web design. Rather than presenting the client a pretty picture that has nothing to do with a real website, look at the organization of content first, then arrange that content appropriately, and only at the end look at decoration ... which you can easily do in the browser itself.

[deeve007]

What would you design websites in then?

I think Photoshop is the best tool. Even with the advent of responsive design, screens are still pixel based, as is Photoshop. I've lost count of the number of times a design created in Illustrator or InDesign by non web designers had to be redone in Photoshop before being ready for development.

But it should definitely be communicated to the client that the concept design they are seeing will be the guide for how the final website will appear, a close to exact guide for the full desktop version, a style guide for smaller screen versions.

I think my process, once I get my head around the best way to implement responsive, is to create a full desktop design concept, and once that's signed off a mockup showing what it will look like at iPhone screen size. And from that the client should understand what the end result will be, and I'll know what I'm building.

[ralph.m]

What would you design websites in then?

In a program designed for websites.

http://24ways.org/2009/make-your-mockup-in-markup

[akrimony]

Thanks for your replies.

I second with ralph and stevie. Pixel perfection is impossible if one wants a usable website. But unfortunately the clients are not that educated. They just seem to expect an exact replica of the photoshop document that their designer has made.

I guess I'll just point the client to this thread if he's unhappy! :-D

[ralph.m]

But unfortunately the clients are not that educated.

That's your job, I'm afraid. Just as, if you sold cars and the customer wanted one that flies, you'd have to explain that this isn't what cars do. Tough luck if they are disappointed.

[Paul O'B]

Hi,
I've been doing it and the client was receiving it nicely until another client who wanted exact pixel perfection in the HTML/CSS coded. How can I achieve that? So that each padding, margin is just perfect bas in the design? Is there a proper process for it?

You can do it to a degree but browsers will vary where text length varies between browsers and systems especially in fixed width layouts. Assuming you have taken care of all the margin/padding defaults and coded the thing correctly in the first place then often there is little you can do for browsers differences apart from hacking each browser which soon becomes a nightmare to maintain. Older versions of IE always needed this approach but thankfully we are getting past that point now.

I'm not a designer so I always work from a finished PSD usually handed to me at the last minute for coding so I can't use the browser first approach. I code 3 or 4 psd template conversions a week (usually basic fixed width corporate sites) and I manage to get them more or less exact allowing for differences already mentioned. The way I check that it matches with the PSD is to take a screenshot of the browser window and to overlay the section on the PSD to make sure it matches. You can easily see where adjustments need to be made that way. You can even use a background image of the design in the browser window as a guide for testing or something like this (which unfortunately is not working in the latest Firefox/Firebug).

However, the important point is to know when designs won't work and what is actually feasible. Margins and padding are pretty easy to get right especially if the design is consistent but details where the designer just stretches text in photoshop to fit or just adds a few more words to make things start on the same line are not feasible. You should be able to spot these flaws from the start and advise the client beforehand.

Pixel perfection is not possible but you can get pretty close so as not to worry about it. I do have clients who want every pixel accounted for but the skill is knowing when this is possible and when it isn't. If you have content on the same line and each piece of text is 2 or 3 pixels out it looks really bad and should be fixed. Remember also that browsers have rounding errors and the odd pixel will always escape you no matter what you do.

Having said all that it seems the landscape is changing and designs need to work on different devices these days so it may be that the days of standard psd to html are numbered as clients request layouts that can adapt to various devices automatically. The clients will still want pixel perfection but you will need to know when that is possible and when it is not.

[ralph.m]

One thing that always horrifies me is how different fonts look from one system to another. Which is another way of saying that they look gorgeous on the Mac and a jagged, pixelated mess on Windows. You will never have a site looking the same on all devices, no matter how hard you try.

[akrimony]

Pixel perfect is great. I found a similar add-on for chrome: https://chrome.google.com/webstore/d...efdhjekcoceebi

[TomB]

All of the arguments for not using photoshop assume one thing: Designers know HTML/CSS. Where I work, I do the HTML/CSS/PHP after being given a PSD design that's been signed off by the client. The designers do not know HTML/CSS. They know how to... design!

[ralph.m]

They know how to... design!

Usually not for the web, though.