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.
- Anybody can ask a question
- Anybody can answer
- The best answers are voted up and rise to the top
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.
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.
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: