On the subject of "Pixel-perfect PSD to HTML/CSS"

16 January 2014 | View on GitHub | Comments | 4 minutes read


I read an article on the subject of implementing a PSD design of a website perfectly in HTML/CSS, and without wanting to spend my time writing a lengthy response in the comment form of a blog for it to disappear in to the depths of a blog that I don't visit very regularly, I figured I'd write my thoughts up as a blog post.

The gist of the article goes like this:

I hired a freelance developer at a low rate and expected them to implement my PSD exactly as I made it look in Photoshop, but they couldn't handle that. I'm so outraged with the lack of attention to detail of front-end developers.

The blame isn't always in the hands of the front-end developer

There are so many things that could have factored in to this bad experience, starting with the PSD itself:

There are always differences in the environment used by the designer, and the developer:

There are always going to be technological reasons that a HTML/CSS implementation of a PSD might look a bit different to the original PSD:

You can't honestly expect one static design to look pixel perfect on all devices or in all browsers. Have you heard of responsive design? Do you know what kind of screens the people viewing the page you've designed will be using? Do you have any idea if the fancy blending effects you're applying liberally to your layers are reproducible with CSS effects alone (or if they're not, are your layers organised in a sane way so that they can be sliced?).

How can developers work better with the designers?

  1. Be upfront about the feasibility of implementing components of the design accurately, and use your domain knowledge to inform the designer.
  2. If you notice any inconsistently styled components, clarify with the designer that the inconsistencies are intentional and not just an oversight.
  3. If you're using a version control system (such as GitHub), make sure that you're committing pieces that are complete, or make sure that the person reviewing your implementation of the design is aware of the state of the implementation to save them carrying out feedback too early.
  4. Use a DRY methodology such as SMACSS
  5. Use a CSS preprocessor such as SASS

How can designers make the job of implementing a design easier/better?

  1. The Photoshop Etiquette — read it, learn it, abide by it.
  2. Use PSD Grade to check the quality of your PSD against some common quality pitfalls.
  3. Familiarise yourself with the technology you're designing for. If you intend for the design to be responsive, consider how it will look at various breakpoints. See: 50 Useful Responsive Web Design Tools For Designers
  4. If you're designing for a content management system, know the possible types/sizes of data that could be in any part of the design — such as lengths of text, different configurations of pages, image sizes, etc.
  5. Have a realistic expectation of how the page will look. Your fonts aren't going to look like they do in Photoshop when implemented, "18pt" in Photoshop is not the same as "18pt" in the browser. See: Photoshop/Browser Font Rendering
  6. Provide a layer with measurements for all aspects of the design, it will take a lot longer to implement if we're having to measure the distance between pixels when implementing the design.
  7. If you've used any imagery in your design, provide the original assets along with the PSDs of your design.

Recent posts

Featured posts

About the author

Max Glenister is a front-end developer from Oxford. He writes mostly about front-end development and technology. If you want to know more, you can read more about Max on his , or follow him on Twitter.

Notice any issues in this post? You can fix it on GitHub or let me know.





Advert