More than one way to skin a cat… and a webpage

This is a multi-series blog posts regarding one of many ways to take a graphic design and convert it into HTML. This is the current method that I tend to use when doing fairly basic website designs.

Please note, that there are several different ways to do this and their are advantages and disadvantages to each approach; not all of which are technical in nature, such as maintainability, cost of skilled labor when dealing with highly complex CSS methods versus more typical CSS/HTML use, SEO, etc. Many individuals/companies have turned towards developing very strong CSS based designs while others have remained in table-based layout. For the purpose of this post, we will be approaching slicing graphic designs using CSS but from a more “boxed” approach.

The term “boxed” that I am using, simply refers to the majority of the design being segregated out into box regions. I will try and demonstrate this with screenshots.

The design

Let’s begin by starting with our graphic design. The following is a very simply design I started for a friend of mine who sells motorcycle parts. This design was never finalized, so it will work perfectly for our demonstrative purposes and we can continue to build upon it in future posts.

Ok don’t laugh too hard at my attempt at graphic design, I’m not a graphic designer and this is not a production site (but I gave it a shot right?).

Conceptualizing Regions

Now when I view this, I tend to break everything apart into boxed regions. First, major regions starting vertically. For this particular design, I view it as 5 regions which are as follows:

• Header (logo, search box)
• Navigation, (navigation, login link)
• Intro Content (intro/promo text, supporting image)
• Tabbed Content (what’s hot, browse catalog, search products)
• Footer (footer links, text logo)

It is perfectly acceptable to do more or less specific regions. For example, I could have made the tab and the content in the tabs seperate regions, or make the header and navigation a region, Intro and Tabbed Content a section, and footer.

Let’s visually demonstrate the region’s we’ve chosen for this example:

Now, keep in mind, these are not slices. These are for conceptualizing only. We don’t want to slice this in this manner for several reasons; we don’t want to mix images which should be optimized as .gif versus .jpg, we don’t want to use graphics when we can use text, etc.

HTML Conversion

Now that I pretty much know how i want to begin grouping everything, I am going to work top-down to begin converting this design into HTML. I want to stay within each region and work from left to right using a CSS to create a tableless design.

Here is the HTML for the regions that we’ve just seperated:

<div id="header"></div>
<div id="navigation"></div>
<div id="promocontent"></div>
<div id="tabbedcontent"></div>
<div id="footer"></div>

Ok, we’ll expand on this quite a bit in upcoming sections so stay tuned to find out more about conceptualizing, slicing, and building basic html from graphic design mockups.

Teaser

In the next section we will be covering how to build out each section (header, navigation, promocontent, tabbedcontent, and footer) based on the current design.