Review: Professional grade xhtml coding service on demand with PSD2HTML

This article was published in The Blogherald as part of a series of articles I was commissioned to write for them.

So here’s the scenario: you’ve finished hacking away at a week’s worth of design work. You probably estimated that you have around 2-3 websites that are ready for coding. Unfortunately their deadlines are at the very least one day apart from each other - and you still have projects in the pipeline, clients to meet or new projects to review. You need to get those designs coded, but you know you won’t get them done in time.

Stuff like this happens. In fact, this is a familiar scenario I’ve encountered myself more than once. It’s hard managing projects especially when you’re the same guy who does them and no amount of organization can really bulletproof you from design and project management being the inexact science that it is (but this is an entirely different story altogether).

During those tight weeks when I need stuff to be coded and I can’t possibly do them all by myself, I usually ask help from my colleagues - fellow webdesigners or programmers who’s quality of work I trust. Unfortunately people can be less than dependable at times and there are instances where I just can’t find anyone to help me - which brings me to today’s review: PSD2HTML.

PSD2HTML is a paid online service that offers professional grade xhtml coding/templating services straight from your design mockup. Basically the idea is that you send them a copy of your design mock in the usual common design file formats (psd, ai, png etc) or even existing html markup (that isn’t standards compliant xhtml) and after 8 hours they’ll send back to you your design coded in semantic, cross-browser, standards compliant xhtml.

They have several packages depending on the type of coding job you’re looking for are priced as follows:

* Basic Package - $117
- W3C Valid XHTML 1.0 Transitional
- Table-less CSS markup.
- Compatible with IE, Firefox.

* Professional Package - $153
- W3C Valid XHTML 1.0 Transitional Table-less CSS markup.
- Compatible with IE, Firefox, Opera and Safari
- W3C Valid Shorthand & Optimized CSS.

* Hi-End Package - $211
- Brings the markup to the highest level.
- W3C Valid XHTML 1.0 Strict Table-less CSS markup under SEO Semantic Coding
- Complete Presentational Separation techniques.
- Special attention to Load Speed optimization.

The Process:
For the purpose of this review I submitted a design mock (of my site) which I’ve already coded myself - just to have something to compare their code to and give some baseline for gauging the quality. After completing the order form for their basic package and uploading my mock (in psd format) I was sent an automated email informing me of my login information to their queueing system.

Support:
Their response to my ticket was very speedy and thorough. They sent me questions regarding on certain CSS related issues and other clarifications on how I would like my design to be implemented - which was also surprisingly cool because these were the same concerns that I had when coding the same design. That says a lot about their attention to detail. More importantly, it also indicates that they tailor-fit their coding approach to each design that gets submitted rather than use indifferent cookie cutter approaches. After a few quick exchanges of clarifications, they informed me that my markup will be available within 8 hours. For this particular test, they sent my markup 3 hours after the last email, which was undeniably fast.

Quality:
The emailed markup consisted of 2 folders (one for images and one for stylesheets), one html page and 2 CSS files (one for IE and one other browsers). Inspecting the markup shows that they’ve done it a very good job in keeping it clean and very semantic. Navigation are link-lists, paragraphs are where they’re needed, proper heading structure and very minimal but apt use of containers such as divs and spans. The overall document structure is very cleanly defined. Apart from a few (personal) differences in choice of html elements for certain parts of the page (I use definition lists in some of my parts) their markup remains very closely similar to how I coded my version. The CSS files are very well organized, and while not optimized for file-size (CSS shorthand comes with the “Professional Package”) it’s still clean and minimal. Having IE hacks on a separate css is also a plus. Considering that this is a service done in mass scale, - the quality of code is really topnotch.

The images are also optimized and they use a variety of image optimization techniques - choosing the right image type depending on the complexity of the graphics involved. I’m personally impressed on the technique they employed slicing up my design - although drastically different from my original approach (I used a lot of alpha transparent 32-bit png files), they faithfully reproduces the layout and look without unnecessary bulk.

Cross-Browser Compatibility:

Here we have screenshots from IE6, IE7 and Firefox.

Internet Explorer 7:

Internet Explorer 6:

Firefox 2.0.0.12:

As you can see PSD2HTML did a good job in making sure the layout was consistent across both Firefox and both versions of Internet Explorer which is very impressive and delivers exactly what was promised in their basic package. Now, let’s see if this consistency extends to other browsers not covered by the basic package.

Here we have screenshots of the same page viewed in Safari and Opera:

Safari:

Opera:

Amazingly, the layout remains intact even in Safari and Opera. However, do note that they do not guarantee cross browser compatibility for the basic package other than IE and Firefox. It may just be that for this design there are very little or no issues in their implementation even on other browsers. But I will say this - more often than not, good xhtml and css practice ensure cross browser compatibility even without browser specific hacks, which says a lot about the quality of the markup that they delivered.

Everything considered, PSD2HTML is a topnotch service for those of us designers who need help in coding our designs but also demand the same high standards we employ in our own work. For the price - the quality and care they put in their code is remarkable. Even with the basic package which we’ve tried, you really get your money’s worth. I’d surely have no second-thoughts on using their services.