I am working on a web site. The client has drawn it in Microsoft Publisher, and I am using this drawing as a working graphical design. The problem is that there are a lot of places on the web site where a text block's margin differs in few pixels, or an image is few pixels far from where it is in the drawing. I wonder if the drawn design really should match the web site pixel-to-pixel, or is it a common practice to have some things differ in few pixels? I wouldn't really want to spend any time correcting those small errors. This is boring and looks like a time waste.

  • 2
    Publisher? Yikes.
    – Nicole
    Commented Mar 8, 2011 at 19:07
  • 2
    If the original design is done in Publisher, there is a good chance that your modified version can end up being better than the original.. :)
    – Lucius
    Commented Mar 8, 2011 at 20:49
  • Don't understand what this question has to do with programmers, though..
    – Lucius
    Commented Mar 8, 2011 at 20:57

4 Answers 4


In many cases, there is no way to obtain the exact design through HTML/CSS. Fonts may be different, things may be impossible to do or extremely expensive to implement, etc.

There are also things an inexperienced designer may not think about. For example, if she designs a list of products, she may name those products "Product 1", "Product 2", etc., and limit the width of the area to 100 pixels. When implementing such design with the names like "Western Digital Caviar Blue SATA Revision 3.0 - 750 GB - 32 MB", well, there will be a problem with the 100 pixels limitation.

Working a lot with designers who don't understand anything about web design, I always need to explain those sorts of things to customers who don't understand why the web page is not exactly the same as the Photoshop image.

An only solution: work with experienced web designers who know perfectly well how to make designs which may be exactly implemented with HTML/CSS. Or make pages which will be slightly different from the Photoshop image.

Your problem, on the other hand, seems different. Instead of talking about non-implementable elements, you are refusing to adjust margins and things like that, i.e. to avoid achieving the work you're paid for. For me, this is not professional.

If I give so somebody a design made by an experienced designer, if the margin of a zone is 3 pixels, it must be 3 pixels in every browser. Not 4. Not 2. The explanation is very easy: you can't just imagine random sizes of zones, margins, etc. You can't have a margin of 10 pixels and another margin of 12 pixels on the same page: if you stick with n×5, you can have margins of 0, 5, 10, 15 etc., but not 16 or 3.

That's why it is important to keep exactly the same metrics as defined by the designer. Unless the designer is inexperienced and have done something ugly, without even bothering about sizes.

  • Is pixel-perfect CSS really impossible?
    – Armand
    Commented Mar 8, 2011 at 17:58
  • Yes, the designer is inexperienced. Commented Mar 8, 2011 at 18:07
  • @Alison: I don't have a better example, but everything related to forms (especially file upload) is impossible to redesign in most browsers (unless you use JavaScript hacks at your own risk). Also, in many cases, making a perfect copy of a design would either be very expensive, or go against standards and performance, requiring lots of layered images, sometimes JavaScript, etc. Commented Mar 8, 2011 at 18:46
  • @Bogdan0x400: then it doesn't matter. Unless your customer wants an exact copy of the original design. Commented Mar 8, 2011 at 18:47
  • fair point re: file uploads
    – Armand
    Commented Mar 8, 2011 at 19:24

That depends on the client. Some clients want pixel-precise reimplementations of their designs, some expect you to interpret the drawn design barely as a sketch and a base for your work.

If the design is not really pixel-precise on its own, I wouldn't bother (it is more likely you would end up being criticized that the objects are not properly aligned).

And if you are in doubt, don't be afraid to ask the client.

  • 1
    +1 for ask the client... before worrying any more!
    – Armand
    Commented Mar 8, 2011 at 17:57

You will definitely need to confer with the client on such an issue. You may wish to convey to the client that when working on a platform like the web where there are so many different browsers available which all render the design code differently it may be useful to get the design as close as possible but not stress about it being exact. Keep in mind to that there will be significant time spent in cross browser testing and adjustments. On a web platform its really not worth (in most cases) the time it takes to be pixel exact!


Fit and finish is part of branding, which is very important to both you and your client. You need to clarify a couple things:

  • Does the pixel difference look better in the design or the implementation? If the implementation looks inferior, you need to fix it. It affects both the client and the end user's opinion of your project.
  • Is the pixel difference specific to one browser? IE 7 and previous have different default spacing and alignment than the more modern standards compliant browsers. You can probably fix the alignment problems in the old IE browsers with one conditional stylesheet (this is common practice).
  • Make sure you review any style differences with your customer.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.