One of Firefox’s great Add-ons, Pixel Perfect, is CodeMyConcept’s quality sign for every PSD to HTML conversion and/or implementation. Here is a little something we put together for you about our Pixel Perfect quality system.

Let’s start with Pixel Perfect‘s definition: this add-on allows web developers to easily overlay a web composition over the developed html. This Firefox add-on was created just for designers that need to make sure what’s displayed in the browser matches the PSD design and that the integrity of the designs is maintained.

One of the things you should always keep in mind are the web safe fonts. For those of you who don’t have an idea of what this is: web safe fonts are the fonts nearly universally available on any computer. That is why when any user, regardless of their device preferences, goes to the website they have the same experience as anyone else in the world.

This is what web standards are all about, please make sure the designer you are paying for you PSD design is working with web safe fonts. And if you are making your own, here are some of the fonts you can use:

• Arial
• Arial Black
• Cambria
• Century Gothic
• Comic Sans MS
• Georgia
• Impact
• Times New Roman
• Verdana

PSD to HTML

Our coders first of all got through a completely push up and mind exhausting month of the heaviest projects ever, this training is just for survivors!

They are taught about the rendering process for each software Safari, Opera, Chrome, Firefox and Explorer (no more Explorer 6, let’s help get it to 1%), it is not the same for all of them so as a client you could specify which one would be in use even though we must give you the files completely synchronized with the main five browsers.

They practice the creation of clean, flexible code for making easy any process after them; use jQuery if it is needed and the finalized website must look exactly like the PSD design, making sure font sizes and line heights are respected.

For our other process like PSD to Magento, PSD to Worpdress, PSD to Drupal and PSD to Joomla they must recheck the codes in order to edit the changes or put the pages together in order to be sent to customers to final check out.

Another very important subject is the difference between Photoshop Render and other browser renders, even though we work with HTML5 (this new version makes it easier for you to read and organize your code, and makes it easier to organize your content), with the last one you won’t achieve a 100% copy of the PSD design, why is that?

One answer is because of web safe fonts: when a designer does not use them the coder must replace them what means the design would look a little weird just because of the font, or it won’t fit the page the same way it was previewed.

Another answer is the limitations still existing in the code world about going all creative on them, but it’s getting there we hope. We dream of an era where codes would be asking designers to give them more creative ideas.

Hope we help you understand more of this wonderful area.

That’s all folks!