KISS – Keep It Simple Stupid – Slicing the Layout

We designed a simple, sleek template in Photoshop that we named KISS (Keep It Simple Stupid). This template was created with several factors involved. First, we wanted most of our important content to appear “above the fold”. Second,we wanted an off-balance look to add uniqueness to our website. Third, we wanted to highlight our content but not distract our visitors with clutter. And most importantly, we wanted to do it all with simplicity and effectiveness. Thus, I mentioned the use of the CSS Framework 960 Grid System. Now we get to the fun stuff: slicing our layout and throwing it into HTML and CSS. First, let me reiterate some points. Above the Fold is the terminology referred to the visible portion of a website without the use of scrolling. All internet browsers have different “viewports”. These viewports typically go from 800 pixels wide to over 1,000 (this does not include the larger flat panel monitors). Heights, however, are pretty standard with most browsers offering viewports approximately 700 pixels tall (this, of course, is smaller with the addition of toolbars). It is within the viewport we make our magic work for us. It is “above the fold” where we must attract our audience else lose them. Probably forever.

Second, with this layout we have a great option of providing some branding. Most websites do this with a nice logo and color scheme. We did so by selecting a clean complimentary color palette to go along with the “logo” we chose: lips. We also, though, added another element to our branding. By creating an offsetting layout we are going with an idea we hope the visitor finds attractive but at the same time allows them to pay better attention to our content. We do this even further by providing contrast between brief areas of information surrounded by “white space”. We’re not cluttered with ads, navigational menus and meaningless imagery. We provide to our user immediately what they are seeking: information.

Lastly, by using the 960 Grid System we will find it very easy to implement such a layout using very little CSS and HTML. In fact, when finished, our basic CSS file for this layout will be under 100 lines and our basic HTML file will also be under 100 lines. That’s just not possible using normal methods of implementing CSS. Doing this is rather easy though it will take some adjusting. The 960 Grid System is set up automatically to provide vertical alignment – a nice even flow from top to bottom is very attractive for website visitors. You will find, however, that moving horizontally and positioning your elements is tricky. In the end you will still be able to match your Photoshop layout to your final HTML file.

Let’s start by slicing our imagery. If you haven’t downloaded the Photoshop file you can do so at Box.net (no registration required). Open this file in Adobe Fireworks (I use CS3 but following this should be quite easy for any version of Fireworks). Our original layout contains a lot of coloring, bordering, a couple of gradients, a couple of images and a search box. However, when finished we will end up with 11 images totalling 54.9 kilobytes. I saved my imagery in PNG format. If you choose to save your imagery in GIF format you will likely save an extra 75% in file size. To start my slicing, I first select the Slice Tool (K):

I like to work my way from layer to layer, back to front. I chose to start with the gradient background. Because we are going with a fixed width of 960 pixels using our 960 GS I chose to make the gradient one long image…1 pixel high by 960 pixels wide. We could chop the gradient into two images; a left gradient and a right gradient and leave out the white in the middle. Our images would be smaller in file size. However, because this is our first introduction into using the 960 GS and repeating images vertically can be a bit more complicated, I figured this would be the easiest way. Whatever savings are available aren’t much compared to the time being saved.

Using your Slice Tool, start at 0,0 x,y which should be the top left of your gradient. Click and drag your Slice Tool across the top right to 960,0 x,y. Make sure your slice is only 1 pixel tall. You can do this when you release the Slice Tool by going to the Properties Panel. Next, go to the Web Layer Folder in your Layers Panel. You should see a layer named “Slice”. Rename this layer “background”. Then go to the Properties Panel; beneath where it says Slice in the top left of the Panel you’ll see a text box. Give this Slice the name background. Under Type in the Properties Panel make sure you have selected Image. And if you choose to export to GIF format, select GIF WebSnap 256 in the drop-down box below that.

Next, we can focus on our two images – the lips and the rose. What you want to do is: with your Slice Tool, draw around each of these images so that it barely covers the entire image. Following the same procedure for our background Slice, rename the Layer and the Slice logo and logo2 for the lips image and the rose image, respectively.

Lastly we’ll draw Slices around the four corners of our secondary content section and our footer section. Let’s start with the top-left corner of the secondary content section which is the blue section to the right of the rose. We want to keep this image as small as possible. Because our corners are rounded we’ll have to get enough width and height on our corner to cover the full rounded corner. Zoom into this corner so that you can get a better view of what you’re doing. Be sure to start flush with both the top of your rounded corner and the left side so as to avoid unnecessary white space that will reveal our background color later on.

With my example, I chose to stretch the Slice to an even 5 pixels high by 5 pixels wide. I chose to do this because inside this section, I want my content padded 5 pixels. With our method of construction in the CSS and HTML files, we won’t have to worry about explicitly setting padding elements. You’ll notice I gave this Layer and Slice the name “content2_top_left_corner”. Repeat this step for each of the four corners in the secondary content section and the footer. When you are finished we’ll start exporting the slices. We’ll do this in one easy step by first selecting all of our Slice Layers under the Web Layer Folder. Let me note that we are doing this because none of our slices overlay each other. If we did have a situation where our slices overlaid, we would have to mark one invisible. Else we’d be slicing both images. Keep that in mind should you come across that situation on your next project.

With all of your Slice Layers selected right-click on any of the selected Slices (not the Slice Layers) and click “Export Selected Slice”. In your Export Dialog Box make sure you have selected to Export Images Only. Choose where you want the images to be saved and click Save. You have just finished slicing your layout. This was a very simple, very easy layout to do and took only a short period of time. Now the real fun begins.  In the next article I will show you how to install this layout using the 960 Grid System.  You should download your 960 CSS files. When you unzip your file, go to 960_download/code/css/. You’ll see three files and a folder: 960.css, reset.css, text.css and the directory “uncompressed”. Inside the “uncompressed” directory are the same CSS files, only smaller. Select whichever you prefer, but select all three (960.css, reset.css, and text.css). Move those files into your CSS directory of your website. Now, create your index.html file or wherever you choose to construct your template. I have created a directory called “tutorials-kiss”. My website structure is as follows:

• /tutorials-kiss
  • index.html
  • /css/
    • 960.css
    • reset.css
    • text.css
    • style.css
  • /img/
    • all of my slices

Look for this next article to be posted later today.