Pixel perfect - designing a site from a PSD

I think, essentially, the idea of "pixel perfect" websites is a terribly flawed and broken one. With the countless browsers, devices, resolutions, and pixel densities that exist in the world today, it's a fool's errand to attempt to achieve anything close to pixel perfect replication and, given the nature of today's responsive designs, it almost defies the very essence of what modern website development is meant to be.

That being said, there are a number of ways to get "close enough" in popular browsers and on popular platforms. Any decent search engine can provide results for tools and tutorials with a simple query, so I would start there. Some tips I've picked up along the way:

• Your best chance starts with your imaging program. Set up a grid, say 32px x 32px, or any size for that matter. If your PSD doesn't start with a grid, your website will be a mess when trying to match it.
• Use SVG images where possible, especially on things that resize.
• When you move to a browser to build the site out, use a semi-transparent grid image of the same cell dimensions as a background image. You can add in a "ruler" along the edges, or even darken some lines for "rule of thirds" or whatever you want, but the main thing here is being able to align and size to the same 'grid' your PSD was designed on.
• Make sure to use well-structured, clean HTML. Follow best practices and use divs, sections, etc. in the way they were intended. Sometimes weird behavior just surfaces because the HTML is a bit messy or a div was used in the wrong place. Trying to fix these "issues" often results in messier code, additional CSS rules, or breaking something else.
• Your first pass should be more about the basic structure (colors, line-height, margins, font-size, etc.) than anything. Get a good grasp on these values and make sure to note them somewhere for later reference, trust me, you'll probably need them. Everything will get out of whack once you start messing around with line-height, fonts, and stuff like that later down the line, so it's good to establish them early on and understand them within the context of your project.
• Accept that your CSS is going to get nasty. The more you try to fix little things, the more convoluted and ugly your CSS will get. This becomes exponentially worse when you're aiming for additional browsers, screen sizes and so on, each of which that have their own little quirks.
• Expanding on the last point, the more rounding you do with your CSS values the harder it gets to stay close to "pixel perfect" on-screen, so avoid it when possible. You'd be surprised what rounding 1.3333333{...} to 1.333 can do sometimes. It's usually better to define it with a CSS calc or other alternative way and let the browser define it internally in its own way.

I think the biggest tip I can give on this topic is simply to accept close enough. It's virtually impossible to achieve "pixel perfect" results in more than a fraction of the possible displays that exist in today's internet. You'll have to pick and choose your battles. In the end, what it comes down to the most is the UX. Will your site-goers really care if this paragraph is a few pixels to the side of your original design? Does this font-size really need to be exactly 1.2em, even though it causes slightly weird word-wrap in certain places?

Somewhere along the line, "pixel perfect" slipped its way from printed material and (I think, wrongfully) into the world of the web. Maybe back in the earlier days of website development, this would be something aimed for. Heck, it would even be a lot easier to do, given the limited options available. Nowadays, it's sort of a remnant of a darker time in web development.. and one that I'm glad we've (mostly) moved past.

Great insight! Thank you!

What is a SVG image? I've heard of that but I cannot see anything in PSD to make one? Is it similar to a JPG?

When design pixel perfect layouts, do you suggest designing the mobile viewport of things?(I've noticed that it makes things easier in the long run)

Accessibility question, when making the site WCAG 2.0 AA standards compliant, is it necessary to create the divs at percentages at all times so when the user rearranges the font size that the text gets bigger and doesn't dislodge the overall layout?