Design to Development

Est. Reading Time: 2 minute

If you’re a developer or have ever messed around with html and style sheets you will know that getting it to look the way you desire isn’t always the easiest job. What’s worse is when you finally get it perfect just to find things are much different in other browsers. Personally I use a variety of tools when developing and quite a few specifically for cross browser testing and ensuring an exact design to development match. These tools include:

General Browser Testing:


This website will allow you to run a variety of browsers as if they were installed on your computer. This is by far the best overall browser testing tool I have run across.

IE Tester

For general testing in Internet Explorer I often use IE Tester as a quick check to ensure all development is coming along as it should in Internet Explorer 6, 7 and 8. I also like the Dev Tools offered in this software that allows me to get a closer look at the code.

Specifically for Matching Design to Development:

Pixel Perfect

This is one of my favorites, it is a Firefox add-on that allows you to overlay the design image on top of the developed HTML to match it up Pixel Perfect.

Microsoft Expression Web 3 SuperPreview

For internet explorer I use the trial version of Microsoft Expression Web 3 SuperPreview. It allows you to overlay the design image on top of the developed HTML like the Pixel Perfect Firefox add-on.