Making Accurate Specifications

My team creates layouts using Photoshop and create specifications visually. Our developers have an issue when we specify 10px they implement 10px but from bounding box to bounding box and not edge to edge. How can we accurately get specifications from edge to edge so it can be implemented accurately? For example, various fonts have different font metrics so the bounding box is not consistent. Ultimately, the developers create interfaces which are not completely accurate and distances are off by a few pixels sometimes.

Hi @SunnaH.
Well the developers have the visual spec so in my humble opinion there is no excuse, they have to get it looking exactly as it is in the design… Things that greatly help developers achieve this is having a layered Photoshop with elements such as text that retain property values such as font sizes and colours, not a rasterised version where they cannot gather any info from. Also make your devs use a pixel ruler, that way they can measure the distances exactly in the Photoshop file and in the browser’s viewport.

Hope that helps

Thanks. I guess our developers are trying to find a shortcut and decrease work :slight_smile:

Interesting read:

I think that is pretty hard as CSS rules and visual styles are very interdependent on other styles being set… You have a lot of other properties like paddings and margins, relative, fixed and absolute positions etc… so in the end it will most probably be a different value than in the design in order to match it. I think but maybe someone else has better ideas…

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.