This article will be more than a straight forward review of PSD2HTML. We’ll be considering the basic idea of these type of services and considering when, and for who, they are appropriate. Honesty will be foremost, and I hope that you will gain a real insight into using a PSD to XHTML tool.

PSD to XHTML Services

PSD2HTML are one of the first companies to provide this service (you can see their original press release), but there are a huge number of competitors in the area today and a Google search for “psd to html” brings back over half a million results. Here is a table summarizing the main players in the industry (a more in depth list can be found at Most Sliced):

We’ll be focusing on PSD2HTML, taking you through the process and showing you the final resulting design.

The Process

The ordering process at the site is very simple. There are several options available, starting with either a basic or professional package. We opted for the professional, as semantic, search engine friendly coding was a must have. Other optional additions are:

• Flexible width
• Stretching the header and footer
• Rollovers and dynamic menus
• sIFR flash replacement
• Commented CSS and XHTML code
• Load speed optimization
• Integration with CMS software (e.g. WordPress, MT, Drupal, Blogger, CubeCart)

After submitting the order, we were contacted at the start of the following working day with a request to clarify some of the features in the submitted PSD file. By the end of that day, some 7 hours later, the markup was provided through their online ticket system. The speed of the turn around was incredibly impressive – it would take even an experienced designer far longer than 6 hours to code a relatively complex site such as the one we submitted. If you need results quickly, this service would seem to be a great resource.

Speed isn’t the only factor, however. We’re going to show you, in full, the code created by PSD2HTML for the new layout.

The Results

This is the original 13 Styles design:

And this is a screenshot of the new version which we created in Photoshop:

You can see the full website through the following link. It is essentially the exact code which we received back from PSD2HTML, and will still require customization before being integrated into the real 13 Styles site.

View the design

Please feel free to take a look and judge the quality for yourself. We found it to be great – well laid out with the correct separation of content and presentation and semantic coding. We aren’t incredibly easy to impress, but this was certainly not a rushed, second rate effort. The process takes web design to a level of ‘mass production’, and high standards can be achieved through having a huge catalog of code examples and snippets to work from.

Do We Recommend Them?

The service was fast, efficient, inexpensive and of an outstanding quality. PSD2HTML would definitely be worth considering if you:

• Are short on time
• Are a skilled designer, but not a coder
• Require high quality, semantic and valid code
• Want to have a personal, well trained contact creating the design

It can be argued that design does not come from the ability to write code, but rather the ability to create an intuitive user experience which is simple to operate and gives the desired message. Using a service such as this ensures that you are free to focus on these aspects without being bogged down in small issues such as cross browser compatibility.

PSD2HTML impressed us in every area when coding the 13 Styles site, and we would not hesitate to recommend using their service. Be careful, though, that you don’t lose the passion for crafting your own HTML and CSS.

PSD2HTML by psd2html.com

Setting up Moo.fx

First of all, you need to download this Javascript package from the Moo.fx site. Make sure that this is included in the head of each page.

The HTML

You can download a copy of the HTML for the page to take a look and see how the effect is achieved.

The CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54

body {
	color: #222;
	font: 62.5% verdana, arial, helvetica, sans-serif;
	margin: 5px 0 0;
	padding: 0;
	text-align: center;
}
h3 {
	background: #000;
	margin: 5px 0 0;
	padding: 1px 0;
	height: 17px;
	width: 600px;
	cursor: pointer;
	font-size: 0.99em;
}
h3 a:link, h3 a:visited {
	color: #fff;
 
	padding: 2px 8px 1px;
	-moz-outline-style: none;
	display: block;
	height: 14px;
	width: 330px;
	text-decoration: none;
}
#container {
 
	width: 666px;
	text-align: left;
	margin: 0 auto;
}
#header {
	text-align: center;
}
#content {
	padding: 0 10px 25px 33px;
}
p {
	margin: 0 0 1px;
	padding: 5px;
	line-height: 15px;
}
div.wrapper {
	background-color: #EBEBEB;
}
#content div {
	margin: 0;
	padding: 0;
	height: 1%;
}
.stretcher {
	background: none !important;
}

Put it all together

Make sure you reference Moo.fx and the style sheet in the head of your HTML document, and you should be ready to go! Adding new sections to the layout is as simple as adding a new heading and following the structure which is already there.

Essentially, designing and writing HTML code in a semantic way is as simple as keeping your HTML concerned with the content of the page and not the layout. Some of the simple steps below will help you to ensure that you stay semantically pleasing to search engines, spiders and visitors:

Title tag

Ensure that your page title tag is descriptive and meaningful. Ensure that it changes for each page of your site to reflect the content on that page.

Headings

It’s possible to define your page’s headings with div and span tags, but that doesn’t convey any meaning that it is a heading. Using h1 to h6 tags to differentiate and style the headings on your page is much better.

Tables and Forms

By default, tables and forms are not very semantic and can be very general. They also lack accessibility for those using non-standard browsers. For tables, ensure that you use the thead tag to explain the columns of your table. For forms, adhere to using the label tag to describe what each input, checkbox etc is there for.

Images

It seems like it gets said over and over again, but use alt attributes for all your images to ensure that they are described within the page content – both for the benefit of search engines and disabled users.

Seems straight forward… but why?

Using semantic code won’t make your website look any different and it won’t directly benefit your readers in any way. One direct effect you may see is that search engines spider your website in a more correct and effective way.

Also, semantic coding is paving the way for the future. New devices, software and applications will be around in the next 5, 10, 100 years that still use the content on the web to power them. Semantics set the standard which future systems will adhere to and interpret, so future proof yourself!

Why use web standards?

It is undoubtedly the case that designing with standards in mind takes extra time and expertise, but there are several arguments to support it all being worth the effort. Here are five solid reasons to justify the need for standards.

1. Make your job easier

Trying to pick your way through a mess of poorly written code is no fun – planning ahead and using well written, standards based code will save you masses of time in the long run. Writing semantic code (using the right tags for the right job) will also mean that updating your site in the future is a breeze. This is especially important if you are creating a site and passing it on to someone else to manage and update – they need to be able to understand how you’ve crafted the site.

2. Increase your audience

There’s no point having a website if no-one visits it. Designing with standards improves accessibility, and makes it easier for people with disabilities (for example, using a braille interpreter) to navigate through your site. Often your website will also look much better for people using older computers and web browsers – not everyone has the cutting edge computer you have.

3. Improve your search engine ranking

Getting your website listed well in search engines is the holy grail, and something companies spend millions of dollars on. One of the best methods to succeed in this arena is through a well-structured semantic website. This means using heading (<h1>) tags where appropriate and generally structuring your code consistently.

4. Stay professional

As the popularity of standards based coding increases and more web developers start to take it on board, it’s vital that you stay ahead of the curve and keep up with current trends. In order to attract clients as a web designer it’s a service you’ll need to offer. You can market standards as a way to improve search engine ranking and reach more customers.

5. Why not?

Coding with standards has so many advantages, and the only down-side is that it takes a little longer than using an ad-hoc, slap it all together method. The only major changes you need to make involve coding semantically, and passing your site through a CSS and XHTML validator before handing it back to the client. Not a huge set back! For more help and information, read our tutorials on web standards.