Mister Bleigh

I saw a post on 9rules the other day entitled from psd to code my way and thought that sounded like a good idea for a post. Every designer seems to have their own process to go from the image in front of them to the final code, and I think there is something to be learned from hearing about others processes. This is how it works for me.

Step One: Write the Markup

I’m not sure how many designers do this, but I don’t create a single image or style or implement a single piece of the design until I have my (near) final XHTML document. My first step is to open up the PSD, open up a TextMate window next to it, and start writing the code. I write out every last piece of the design in completely semantic XHTML using standard classes and ids that I use on almost all sites I code.

By making the XHTML before I do anything else, I make sure that the markup is as semantic as possible: I’m not sacrificing anything at this point to ‘make the design work’ and so the code that comes out is clean, simple, and well-formed. As I go along I validate the XHTML to make sure I’m not doing anything like forgetting to close meta tags or the like.

The only thing I always do that isn’t strictly semantically necessary at this stage is put a #wrapper div around the whole thing since I know I’m going to need it to fix my width and stick my footer (see Exploring Footers on A List Apart). There are also a number of tricks that I use over and over (a text-indented out h1#logo for the logo, etc.) that I write into the code that make semantic sense and help with the styling later.

Step Two (Optional): Reset that CSS

At this stage, I’m ready to start styling with CSS. My first act is to include Eric Meyer’s Reset Reloaded CSS to get me to a completely blank slate from which I can build my style rules. This isn’t strictly necessary, but helps level out the browser defaults difference.

Step Three: Setup and Repeating Parts

I actually don’t have a separate “slice up the PSD into images” and “code the CSS for the site” stage. I find it goes much more quickly and I create much cleaner styling when I code a section at a time and generate the images as necessary by hiding, slicing, and selectively saving when I need a part of the image. The first thing I do in this stage is to set up my general page dimensions, fonts, etc. I make my link and heading styles, get the font sized the way I want it in general, and fix the width of the content.

The next thing I usually do is tackle the header. It is finally at this point that I will actually do something in Photoshop: first I slice out the logo and save it as such, making a note of the dimensions. Then I will take any menu styling and convert the corresponding layer into a Smart Object. I do this so that I can open it in its own document to make its images using the Sliding Doors Technique. I use sliding doors for almost every menu system I have ever coded, and its usefulness is not restricted to tab-based navigation.

I usually put my CSS in a <style> tag in the document itself while I’m writing it from scratch. This allows me to keep a single document open to make all the changes I need, and it’s a simple matter to cut and paste it into a separate file when I’m finished. This also helps with using TextMate’s live preview. I do all of my initial style checking in Firefox/Safari, and relegate compatibility to a later step.

Once I’ve finished the header, I move on to any other pieces that will be replicated throughout all pages of the site. I usually slice up one or two images at a time as I’m writing the styles, giving me a chance to look at the dimensions as I’m doing so and keeping it all to a “only what’s necessary” point. I also make it a point to name my images for the elements they will be backgrounding, as it makes it extremely easy to write the style rules (oh, I’m setting the background image for #footer? It must be footer_bg.png that I need).

Step Four: Styling Each Page

Once I’ve pulled out all of my repeatable parts and styled them, I will cut and paste that code block into my stylesheets directory and start a new style block on the page to style the page-specific elements. Once I finish that, I will pull it out into a stylesheet named for the page, and do so for as many pages as have designs and need styling.

Step Five: Browser Compatibility

This whole time I’ve been working in the Web Preview in TextMate (which runs on WebKit like Safari), so now it’s time to test in other browsers. I pull up Firefox and expect it to look more or less the same with maybe a tweak here and there. I then fire up my VMWare Fusion image to run Internet Explorer 6. This step can be anything from a slight headache to a major catastrophe, depending on how complex the style of the page had to be. If it’s the former, I will usually try to just use a few CSS hacks (html > body is a personal favorite of mine for targeting IE6) to get the style into line. If it’s more serious than that, I will use a heavier solution.

So now I’ve coded up my page into valid XHTML, extracted the CSS and images that I need to make it work, and I’m ready to ship it off! The process can get a bit tedious, but this is what I’ve settled into after coding countless sites and works the most quickly for me.