PSD to HTML/CSS: Part 1

In the introduction to this series (Thatcham Historical Society Refresh Series) I gave an overview of what this was all about, documenting the redesign and coding of an existing website. In this article I will look at the initial stages, the preparation, for converting the new design, a PSD file, into HTML and CSS code.

There are varying commercial services available to do this stage for you, however, Thatcham Historical Society have few funds available for this, I am a developer in any case, love getting my hands dirty, and love a challenge.

So where to start?

I start by printing the design out, getting a pencil and separating the design down into regions. I know, old school, but it works well for me. Note I did not say open up an editor and start typing code. The biggest thing I have learnt in my career is PLAN. So I plan as best I can, there may well be changes later to improve Search Engine Optimization (SEO) for example, but I want to get a good base code to start with.

Taking the design, the sections I came up with are (numbers in brackets refer to section in the graphic below):

  • Main Body
    • (0) Header
    • (1) Main
      • (3) Navigation
      • (4) Main Content
        • (5) Content
          • (7) Mission
          • (8) Node(s)
        • (6) Sidebar
          • (9) Top Sidebar
          • (10) Block(s)
    • (2) Footer

Regions for website markup.

I am going to ignore SEO for the moment, I will explain a few bits as I work through the code, and will come back to it in a later article. For the moment I want to keep things simple so that everyone can follow. So I am going to code the sections shown above and in the order shown above.

So now we can open up an editor, right?

Wrong. Well you can, and then you can add all the code, doctypes, etc. Personally I just head on over to Project Deploy (http://projectdeploy.org/) by @oscargodson. So let’s walk through what this is and how to use it.

Project Deploy

Project Deploy creates the basic files for you with the code already inserted. This saves a lot of time, and if you are like me, time wasted due to typos. So head on over to Project Deploy and you will get a web form page where you select the options you require.

For this tutorial the options selected are:

  • XHTML 1.0 Strict;
  • CSS (yes, With Resets);
  • jQuery Library (Minified and Gzipped);
  • jQuery Plugins (Thickbox); and
  • Misc. Options (Image Directory).

Project Deploy Settings

Once selected, hit download, or just click here. Once downloaded, you can extract the files and view the basic site by double clicking index.html. You will notice there is no content, but all the files, their contents have been created and in a structured directory system.

In the next part of this series we will start the actual coding/conversion process.