The Site Guy.

Blog

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:
The Site Guy - Windows Internet Explorer

Internet Explorer 6:
The Site Guy - IE 6 (Microsoft Internet Explorer)

Firefox 2.0.0.12:
The Site Guy - Firefox

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:
The Site Guy - Safari

Opera:
The Site Guy - 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.

Brian09/08/2011 4:32AM

PSD2HTML seems like a great company.  Very expensive though

Aditya10/15/2011 2:44AM

Great post man…. i really admire your blog/site. its so clean and organized yet its so rich. thats why you won; your really good.

Seo Consultant Specialist10/15/2011 2:45AM

Nice article::!!

Rapid02/10/2012 12:53AM

Rapid Convert is also a good option for conversion psd2html and other coding conversions service.Add this too into your list.http://www.rapidconvert.com/ .

MARIA02/10/2012 9:10AM

Wow…must’ve taken you hours. I steichwd several templates on mine because I felt the margines were too wide. I have google reader which just updated, I preferred the older version though. I usually don’t read partisan blogs but sometimes I might.

Bilel02/10/2012 9:32AM

nice work guys. very cool. I just wdrneoing how can i add a sub-menu. any help?

Ghany02/10/2012 9:35AM

A fnierd told me about movable type, I wonder if the templates are any better. I may try blogger again, to see if this time, text will show up in my posts.

Khalid02/10/2012 10:47PM

Hi Leo, I’m glad you like mlfriaom.  Some mail clients will accept the body of the message passed in.  I’m not sure what that will take to implement.  I’m focusing on Modify Headers at the moment, so please be patient until I get to it.

Santhosh02/11/2012 12:59AM

I uluslay use classes because they allow me to add some visual hints that the link will open in a new window via css. But your approach with jQuery is really cool, guess I could use it with a class name, like such:$( ‘.outgoing’ ).attr( ‘target’, ‘_blank’ );I’m more of a prototype guy

Ledeya02/11/2012 4:18AM

fuarrkkkk this proesn spams every build a webpage vid..Fuck off you fat fuckk..Gl with ur 2020 goals of getting shredded.

Crystal02/11/2012 10:25AM

Hey very nice site!! Man .. Excellent .. Amazing .. I will bkmaoork your website and take the feeds also‚ĶI’m happy to find so many useful information here in the post, we need work out more techniques in this regard, thanks for sharing. . . . . .

Allan02/23/2012 4:44AM

It’s clearly an advantage to have an outsourcing option for psd—> html / cms. If you’re trying to produce the concept for a page while doing design drafts, considering wording and also which programming limitations you may encounter, you’re gonna get stuck at nowhere. By outsourcing you can do what you’re good at and just that. It makes everyone more effective.

BR Allan

Shaw psd to html expert02/18/2014 5:17PM

hmm nice services i tried it

Hit Me Back Yo!

Please keep the comments clean and on topic. Use the formatting buttons instead of trying to enter HTML markup.

Siteguy in the hizzouse

I am Marco, the Site Guy.

User Interface and Web Design slut. Standards whore. CSS & XHTML Junkie.

I am currently a freelance user interface and web designer based in Makati City, Philippines.