How to achieve pixel perfect templates?
Jul 21
Not every web developer wants to have pixel perfect designs. But for some, it’s very important to respect the designs they got from the designer. Personally, I find it very important to render the designs properly, it’s a matter of doing your job well or not.
I’ll give you my hints on how to achieve pixel perfect templates and tools to get there.
A small technique I developed, is that I simply put a div with a jpeg of the design I got from the designer over my template, fading it a bit so I can see my template underneath. This way I’m sure that everything will be where it should be. I also add a bit of javascript so when I click on it, it closes so I can still access GUI things such as links or inputs. I really love this technique because this way I can be sure the designs will be perfect on every browsers since it’s CSS/JavaScript based.
Last week I also came accros a Firefox plugin named Pixel Perfect. It basically does the same thing as I described above, only in a pretty Firefox plugin. Main drawback? Not cross browser, but it’s still worth it as it is so easy to setup.
I plan on releasing a JavaScript alternative to this plugin to make it cross browser, stay tuned !
Have your own tips? Share them!
#1 Jul 25 at 03:07
I’m really terrible at this, I create a wonderful design in photoshop, and by the time It’s all finished and working online, it doesn’t look anything like the original design.
Mainly because of laziness, I get really pissed off when I get a design looking great in firefox, then open up IE and it just looks completely different, I end up just compromising and losing the plot of the design completely.
I’ve come up with a very nice design recently however which I do plan on making work in every browser possible, mainly because it’s a for a pretty big project I’m working on.
I’d love to see an article on how to go about turning your design into a cross browser compatible design.
I tend just to lose interest very quickly if something stuffs up (which is more often than not), so any tips from other developers are always handy!
#2 Jul 25 at 07:38
@Joel Thanks for your comment.
It’s really easy to loose interest in big scale projects. But I do have some tricks to keep it motivating. The main one is just to keep it simple and clean.
I found that when I worked on big scale project, I lost interest faster because I was either getting lost in my code or it was taking too long to achieve what I wanted to do.
I plan on blogging about the tricks I have to be more productive an keeping my stuff clean. Should come in the next weeks!
#3 Aug 01 at 10:26
beside other tools & techniques i use the great web developer plugin for firefox. for pixel perfect designs i use the ruler tool (misc -> display ruler) and the outline block level elements-tool (outline -> outline block level elements).
keep up the good worx
wusl
#4 Aug 04 at 05:28
[...] have recently come across the following post, and thought i would make a note of it here more as a source of reference to me than anything [...]
#5 Sep 10 at 21:45
[...] - bookmarked by 3 members originally found by gerard3123 on 2008-08-20 How to achieve pixel perfect templates? http://www.no-margin-for-errors.com/2008/07/21/how-to-achieve-pixel-perfect-templates/ - [...]