Review: Professional grade xhtml coding service on demand with PSD2HTML

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.

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.

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)

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:

The Site Guy - Safari

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.

photoFlow – The Sleek and Easy Path to Flash-based Photo Navigation

It’s no secret that creating sleek and usable interfaces in flash is a big pain in the head. Whether your the average run-of-the-mill blogger who wants to add a little bit of flashy animated navigation or a seasoned web designer working on a tight deadline – creating flash navigation from scratch is almost a death sentence. Unless you really know the inner-workings of animation design, designing visually stunning animation in flash seems far from achievable (or at least not without effort).

Fortunately, there are a number of readily available flash components that you can avail and can make the job of creating professional animated interfaces really easy and fun while achieve quality results. Today we look at one of such components – Flashloaded‘s photoFlow.

photoFlow is a flash component that showcases photos in 3d stack effect, complete with realistic physics-based flipping animation and reflection. This is similar to an already loved interface prevalent in iTunes and OSX Leopard. For this review I was able to play around with Actionscript 2.0 version of the component. Here are some of the key features of photoFlow:

  • Easily update images using the Component Inspector, ActionScript or an XML file
  • Adjustable flip speed, spacing between stacked images and image size
  • Customizable perspective view and reflections
  • Option to flip images as a slideshow
  • Add links/hyperlinks to each image
  • ActionScript events to perform an action when an image has loaded, is selected, etc…
  • Images can be external or included in the library
  • Mouse wheel image flipping (Windows only)
  • Optionally display a name for each image
  • Option to set the number of images to preload
  • Option to automatically scale images to fit or to fill the defined size
  • Zoom in on selected image or on all images on mouse over
  • photoFlow can open on a pre-defined image
  • Customizable background color and opacity
  • Option to start flipping from left-to-right or right-to-left
  • Supports sound effects for image flipping
  • Built-in preloader
  • Light weight (weighs only 18kb with the scrollbar)

Setting up photoFlow was really straightforward and easy. It took me less than 30 minutes to get an actual working photoFlow interface after installing it through Adobe’s Extenson Manager. photoFlow comes with very thorough and easy to understand instructions that walks you through a basic setup to explaining more elaborate integration points through actionscript events.

One roadblock that I ran to while setting it up was that I forgot that I had the actionscript 2.0 version and proceeded to make an Actionscript 3 project – in which case I couldn’t find the photoFlow component in the Components panel. So it’s important to double check whether you have the Actionscript 2 or 3 version of photoFlow before you make a new flash project.

Aside from that everything was a breeze in using the component. There are a lot of settings to play around with. You can even opt to either manually load files through the component options or load via xml for more advanced users. Skinning is also no problem as you can customize the look of your photoFlow component. Animation and transition of photos can be tweaked to your liking including perspective and depth of the reflection.

All in all photoFlow is one topnotch flash component. Easy to setup, install and tweak – photoFlow is an excellent tool for those who want to setup quick but elegant photo galleries for portfolios, photo albums and even as navigation for a product catalog. photoFlow would definitely cut your time in figuring out how to do stuff and just get you right to creating and designing. It’s something I definitely would consider next time I had to make a flash-based interface.

photoFlow costs $59.95 for the ActionScript 2 version, and $79.95 for the AS2 and AS3 version. Licensees of the AS2 version can upgrade for $20.

Asst. Editor’s Note: this is a sponsored post written on request by Flashloaded.