Take the 2-minute tour ×
Programmers Stack Exchange is a question and answer site for professional programmers interested in conceptual questions about software development. It's 100% free, no registration required.

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.

share|improve this question
2  
Publisher? Yikes. –  NickC Mar 8 '11 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 Mar 8 '11 at 20:49
    
Don't understand what this question has to do with programmers, though.. –  Lucius Mar 8 '11 at 20:57

4 Answers 4

up vote 1 down vote accepted

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.

share|improve this answer
    
Is pixel-perfect CSS really impossible? –  Alison Mar 8 '11 at 17:58
    
Yes, the designer is inexperienced. –  Bogdan0x400 Mar 8 '11 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. –  MainMa Mar 8 '11 at 18:46
    
@Bogdan0x400: then it doesn't matter. Unless your customer wants an exact copy of the original design. –  MainMa Mar 8 '11 at 18:47
    
fair point re: file uploads –  Alison Mar 8 '11 at 19:24

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.
share|improve this answer

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!

share|improve this answer

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.

share|improve this answer
    
+1 for ask the client... before worrying any more! –  Alison Mar 8 '11 at 17:57

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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