Building a Website From Scratch | Part 1 – Slice and Dice

Building a website is a complex endeaver.  It requires a pretty broad skillset that doesn’t come without practice.  To really do it right, you need to have a good eye for graphic design, have a firm understanding of how to structure the files into a coherent sitemap, and have the ability to read and write code in several different flavors.  And that’s just for starters.  Websites can be as simple as a single, static page or as complex as a full-blown, data driven, ajaxified web application.  It’s really up to you and the needs of whoever the site is for, if it’s not for you.

My goal here is to give you the tools you need start with a twinkle in your eye and finish with a solid, interactive website.  Since I’m not a graphic artist, I’m going to leave the graphic design work up to you.  We will start by assuming that you have already created the sweetest design the world has ever known…  From that point, we can start getting into developer land by taking that graphic design and translating it into a web page.  From there we will further elaborate on it until we arrive at a respectable finished product.

To illustrate what we will be doing, I’ve designed what could possibly be one of the worst looking website designs I’ve ever encountered.  Well, I’ve actually seen worse, but this one is pretty bad.  Don’t believe me?

I did this so I wouldn’t have to worry that anyone steals my design and make millions with it.  What this design does have is all the pieces we will need to help you learn how to do the make a website out of your design.

Let’s do this!

The first step is to take your spankin’ new graphic design and cut it all to pieces.  You see, when someone visits your website, they have to wait for every single byte of data that your site has to download before they can see it in it’s entirety.  Since the goal is to minimize download time, we need to minimize the amount of data that they will have to download.  A good website design keeps things stream-lined.  What I mean by that, is it is designed in such a way that the design can be cut into much smaller pieces and assembled to give the illusion of one whole piece.

To help make this a little more clear, let’s look at my graphic design:

If you look at the top of the design, you can see the light blue title bar that spans across the top with a logo on it’s left side.  Below that, there is the menu bar with the main content area taking up the rest of the space.  Each of these three important parts is designed with a specific goal in mind: to be repeatable.  Look again and you will see what I mean.  Ignore the logo for a moment.  The light blue title bar has the bottom two corners rounded and the rest of the space is taken up by a repeating design.  What we can do to make that more efficient to download, is to slice it into three parts: the left side, the right side, and a one-pixel wide sliver that we will repeat across the remaining width of the header.  When I say slice, I mean to take the original design and pull out the three parts that I mentioned into individual images, leaving three separate images (slices) created from the one big one.

The details of how you actually slice up your design are up to you, probably dictated by what application you are working with.  I use Photoshop, but that’s me.  However you do it, I’ve found the easiest whay to slice properly is to zoom way in and make sure that you are grabbing the right size slice.  Too small of a slice and you will be able to notice a definite separation between your side graphics and the repeatable zones.  Too big of a slice is just a waste of data to have to download.  If you don’t get it right the first time, don’t worry too much about it.  You’ll notice soon enough whether your slices blend well together or not.  If they don’t, just make the necessary adjustments to the sliced images and adjust the code accordingly.

There are some things that you should keep in mind when slicing up your design.  You’ll need to decide how the pieces will fit back together again.  With my design, I plan on making four conceptual blocks that will stack on top of each other: the header on the top, the menu bar in the middle,  the body underneath the menu bar and a footer on the bottom.  Knowing this will help me decide how to slice the pieces up.  For the header and the menu bar, the combined slices will each make up a uniform row.  So, I want each slice in a row to be the same height, allowing the whole row will be the same height.   When I get the bare header in place, I plan on positioning the logo in front of it.  So, the logo will have to be sliced on it’s own.

Since the goal is to minimize the amount of image data to download, you’ll want to remove as much text from the graphic design as you are reasonably able to before slicing it up.  With the design we are working with, the only text that will be incorporated into the images is the text that is on the logo.  That is because that text has special effects applied to it that are not possible to display without keeping it in the image.  The rest of the text that you see on the design will be incorporated as part of the html markup that each page will serve.

When all things are said and done, you might be surprised at how little of the overall design you actually need to use to make the web layout complete.  Here’s a representation of the slices I will be using for this series:

Before we go any further, a quick note about transparent .png files.  As you may know, .png files support transparency.  That’s really cool and all, but here’s something you maybe didn’t know: Internet Explorer 6 doesn’t support transparency.  You may be asking: so what?  Well, I guess it is up to you whether you worry about IE6 users or not.  There are still a lot of them out there, even with IE7 pushed down with automatic Windows updates.  My opinion is that it’s about time for them to upgrade to the latest version of IE or, better yet, Firefox.  They are both free and are helping move the future of web development in the right direction.  That being said, I still usually avoid transparent images as much as I am able to, without compromising the design.  In places where the background is unchanging, just leave the background in there rather than having a transparent background and avoid the possiblity of a poorly rendered view provided by IE6.

Well, I think that’s about all I need to say about the slicing phase.  I talked about how the original design will need to be broken up, or sliced, into several smaller pieces to minimized the amout of image data that will need to be downloaded to view your site.  I talked about looking for repeatable zones as a way of streamlining the download process.  I also mentioned that text should be removed from the images whenever possible and added to the html markup.  I even made you aware of the pitfalls of working with .png images with transparency.  It is your homework to take your killer design and slice it up to prepare it for it’s web debut.  In the next part of this series, we will talk about some of the principles that you will need to take those sliced images and run with them.

Here’s the sliced images from my design if you want to play along without creating your own: