Design to code services are becoming very popular lately, and many designers are choosing to outsource the conversion part of web design projects. Those designers who do like to code may take advantage of this online movement, by taking on some design to code conversion jobs designer-to-designer, or design-to-developer. In other instances, web designers that do their own code are looking to build their own web designs from scratch quickly and more efficiently.
Whatever your situation, there are best practices that can make the PSD to XHTML conversion quick and painless. In some cases, it can even be rewarding and challenging to figure out the most efficient and cross-browser friendly way of doing things. In this post, we’ll look at some top techniques and best practices for converting a Photoshop PSD into cross-browser compatible XHTML and CSS.
Organizing the PSD
Many design to code companies take in well-organized PSD’s, or flattened images. Either format can be sliced into code fairly easily, but either format takes some different practices. PSD’s with organized layers is usually preferred so the developer can build from the bottom up.
Notice how the PSD example below is split up into five main sections: Header, Posts, Sidebar, and Backgrounds. The Background layer also includes additional imagery, and the main idea is that design and structural elements are separated from content areas.
Within each layer group, each layer is descriptive and in a correct order. In this example, the bottom-most layer (Background) is at the very bottom, and it builds up from there: the sidebar background, the sidebar’s corresponding imagery, the main background, and a decorative border that goes around the main areas. This should be kept as organized as possible, although sometimes certain layers will have to be over/under others for design purposes.
Working with a Flattened Image
Photoshop does have a slicing tool and this is what most developers use to get by when the PSD has been flattened into an image. Even without flattening, developers may still use the slicing tool to pick out images in an organized way. However, with a flattened image, there is no alternative just in case it would be easier to grab just the background, or just some text, for example.
Note: The slice tool can be found in Photoshop by clicking and holding down the Crop tool in the toolbar.
Slicing a PSD rather than thinking through it and having access to some separate images can make a developer use more images than necessary. This can slow down load speed and hurt SEO for the resulting web page. However, slicing can still be used effectively today, whether picking out a few select images, or using it for a flattened PSD. Check out Chris Spooner’s tutorial on slicing a web design for an example of a great technique: Coding Up a Web Design Concept into HTML & CSS.
Benefits of an Organized PSD
Slicing, if having to be used to code an entire design can be confusing and inefficient. It may seem faster and more organized at first, but coding from scratch in a more organized way, with as little imagery as possible, is ideal. Below are some more benefits of starting off with a set of organized and separate layers, rather than one big flattened image.
- Always know typography details within the design. When flattening a PSD, the text becomes rasterized, and the coder (you or the outsourced developer) cannot tell what font was used, font size, line height, kerning/letter-spacing, etc. For a flattened image, a lot of guessing and trial and error has to be implemented to get the content right. With an organized PSD, one can just go to that layer and reference all of that information in Photoshop’s Character panel.
- Transparent images can be grabbed. In a flattened PSD, logos, images, headers, and more have to be sliced out with their exact background intact. If we could access all these separate things alone, then we could just save them as transparent images, and not worry about the exact portion of background they’ll be on. This is extremely beneficial for backgrounds like in our example that are not solid patterns or colors.
- For more complex designs, background images can get confusing; especially for this grunge design. With all the layers separated, we can hide all the content layers and find a group of layers that could work well as a large background. Some ideas would have to be altered for the design’s vertical change in length, but otherwise we can definitely group the large textured background with the grunge building and horizontal bar at the top.
Grab Templates & Get Set Up
Use a quick Google search to grab XHTML and CSS templates, or use your own templates that you’ve created in the past. A great website to find a valid XHTML 1.0 Strict template is here: Conforming XHTML 1.0 Strict Template.
Some developers also use CSS templates that include some commonly predefined elements, such as div ID’s (header, sidebar, content, etc.), and general styling (p, blockquotes, lists, etc.). For an example of some simple templates and a how-to on creating your own, check out Quick CSS Tips for Fast Development.
The next step is to put these templates into whatever editor of your choice (Notepad++ or Textmate are usually the top options) and save them accordingly. Saving the files is a good time to set up the directory for the coded design. A common structure to begin with is the index.html file, an images/ folder, and a styles/ folder. Some developers choose to put their CSS stylesheet in their root directly, which is of course perfectly fine. If you know you’re going to have multiple CSS files though, let’s say, for certain jQuery plugins, then a folder would be best.
If putting the stylesheet in a directory rather than in the root folder, then be sure to modify links to and from it accordingly. When linking to the stylesheet in the index page, or any other page, modify the url:
<style href="styles/style.css" rel="stylesheet" type="text/css" />
Likewise, if linking to something like images from the stylesheet, you’ll have to go up a directory:
background: #fff url('../images/background.jpg');
Keep It Simple, Stupid
As for dealing with all other conversion problems, follow the KISS method: Keep It Simple, Stupid. For best efficiency with the final outcome and for the fastest development, keep code clean, organized, and simple. If things begin to look too complicated, chances are they are too complicated. Re-examine your method of doing things for a quicker, easier way.
Things to keep simple include:
- Images – Use as little as possible, but of course don’t sacrifice design to the newest CSS techniques just because you can.
- Margins & Padding – If margins and padding are getting a bit too confusing with the way things are lining up and adjusting, put a border around the elements your working with to see where you’re going wrong. Examine the box-model and see the most practical way of organizing the HTML elements with the border still there.
- Shorthand – Use CSS shorthand as much as possible for less typing time and better load times.
- Div Layers – Use as few
divsas possible to organize the content. Make use of a variety of HTML tags to get the job done, not a thousand div layers with thousands of classes and ID’s.
To many designers, design to code can be confusing. Hopefully a look at some of these ways of thinking around it and ways to organize can help. It really isn’t all that hard, but rather just another web development skill to learn and become efficient at. Feel free to share your own tips and best practices when coding a PSD website design into XHTML and CSS.
While working through the design, always be sure to be validating both your XHTML and CSS to ensure compatibility. By doing this through the process, one can check for common errors through their coding process, and fix them during the process in the future. By converting designs to code more often, the quicker and more efficient the final results will become.