Before you start slicing

Posted on 20 November, 2009

In the past few years I experienced the problem that I had to reinvent the wheel on every website. This post will help you starting to slice your website design in a consistent way and use it again on future projects.

To start, I have a basic folder for slicing a website. So every time I am going to slice a new design I just copy this folder, rename it and start immediately. Occasionally I adjust this folder because of new techniques and stuff. This is important, because using for example outdated JS files can be very frustrating for you or the programmer on the project. I am not teaching HTML and CSS here, I expect you to know basic HTML and CSS!

Folders

First, lets create some folders to organize all the assets. It is very important to put the same extensions in the same folder. For instance, put all your CSS files in a folder called “css”. This is the folder structure that I use for my projects:

css, for all your CSS files;
img, includes all imageworks for you design like backgrounds, icons etc.;
inc, extra HTML files for inclusion are located in this folder;
js, javascript files;
media, this is for photos en videos in the content;
swf, and if you use flash files, put them in here.

Be consistent. Do not capatilize the folders, this could give you problems in programming. You can adjust your folders to whatever you like, but create a structure that makes sense. Get rid of folders you don’t use. No flash means no “swf” folder.

The folders that I use most as a front-end developer are “css” and “img”, but I think that will be the same for you. If you are a programmer you might want to add a folder like “functions” or something similar.

The basic HTML

Secondly, HTML files in different projects have a lot in common. Why not make a standard template for these files as well? The first HTML file is index.html, on most servers it will be loaded as the default page. Put a doctype at the top of this HTML document, so the webserver will handle your html on every project the same.

The head contains the title, meta tags and links to the stylesheets. I’m requesting two stylesheets, one for the screen and one for printing. After the stylesheets I include the javascript files. All the programmers I work with are using jQuery and for IE6 I’m using a very nice PNG Fix, DD_BelatedPNG.js.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
	<title>Website Title</title>

	<meta name="description" content="" />
	<meta name="keywords" content="" />
	<meta name="language" content="en" />
	<meta name="robots" content="index, follow" />
	<meta name="author" content="Studio Wolf, www.studiowolf.nl" />
	<meta http-equiv="Content-type" content="text/html; charset=utf-8" />

	<link rel="shortcut icon" href="img/favicon.png" />
	<link rel="stylesheet" href="css/master.css" type="text/css" media="screen" />
	<link rel="stylesheet" href="css/blueprint/print.css" type="text/css" media="print" />
	<!--[if lt IE 7]><link rel="stylesheet" href="css/blueprint/ie.css" type="text/css" media="screen, projection" /><![endif]-->

	<script type="text/javascript" src="js/swfobject.js"></script>
	<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
	<!--[if IE 6]><script type="text/javascript" src="js/DD_belatedPNG.js"></script><![endif]-->
</head>

If you can’t get your website to work good enough in Internet Explorer, create a seperate stylesheet for it. This line will only be used on versions of Internet Explorer lower than version 7:

<!--[if lt IE 7]><link rel="stylesheet" href="css/blueprint/ie.css" type="text/css" media="screen, projection" /><![endif]-->

In my standard HTML document template I already stated the most common HTML elements. There is almost always a header, navigation or a place for content. If not, simply remove them. When I close an element I comment it to know which one is closed. When you are working with big HTML files you can get confused about when closing which element.

Also try to prepare for HTML5, I gave my elements classes like header and nav. In HTML5 the <div class=”header”> will be replaced by <header> and <div class=”nav”> will be simply <nav>.

<body>

  <div class="container">

    <div class="header">
      Header
    </div><!-- End Header -->

    <div class="nav">
      Navigation
    </div><!-- End Nav -->

    <div class="section">
      Section
      <div class="article">
        Article
      </div><!-- End Article -->
    </div><!-- End Section -->

    <div class="aside">
      Aside
    </div><!-- End Aside -->

    <div class="footer">
      Footer
    </div><!-- End Footer -->

  </div><!-- End Container -->

</body>

Seperate your CSS

I am using a CSS framework, called Blueprint, for my grid and stylesheets. With Blueprint you work faster and it prevents you from reinventing the same code over and over again.

In the <head> I call out master.css, in this CSS file I am importing several other CSS files:

reset, to set all the browsers (especially Internet Explorer) to one consistent standard;
layout, includes the basic interface elements and where they are positioned;
elements, all other elements like hyperlinks, headers, lists, tables etc;
colors, if you want to change colors sometimes, set your colors apart (I don’t use it often);
forms, for all forms and buttons.

Imagine that you only use one stylesheet on a large website project. I would really lose my focus. With multiple stylesheets I know exactly where to find the tag where I am looking for. This advantage is not only for you, but as well for others who are working on the same project as you do.

Helpful resources

I hope this post can help you to organize your design process, you can download my folder structure and the basic files to start make a start.

About Aljan Scholtens

Dutch brand/interface/web designer and entrepreneur. He has been freelancer for 3 years, working for several web development agencies. Currently working on his own design agency Studio Wolf and his internet concept agency Creaden.