Veerle's blog

Designing a web-page is one thing but converting into a web-page is something totally different. Today I want to share my experience on how I start this job. I can imagine that for an experienced web designer most steps will be obvious and crystal clear but for the less experienced ones there are a lot of question marks.

And of course I’m not talking tables this time, “tables are out” ;-)  Yes, we’re talking CSS! For me CSS is the way to go from now on. You don’t only get nice clear and standard code, you also get a much lighter page and lets not forget the improvements if you need to update or apply changes. With tables it is a hell of a job, sometimes it means starting all over. With CSS it means more flexibility. But how do you start? Well here are some structured tips to start you off…

Analyze and define the areas / boxes / ID containers

First I analyze my design. How do I slice it up? With slicing I sure don’t mean table slices, I mean boxes or areas that will be converted into ID containers. Think in terms of a header, a navigation, a left or right bar and the middle area where you got your content. Draw them if needed on a paper and give them names.

After you define the big areas as described above. Next step is dividing each big area into smaller areas. These will be the nested boxes or containers.

Defining the background

Almost while you define your areas or boxes you have to think about how you will convert your background. First question you have to ask yourself is: “Which kind of background do you use? Is it a “flat” colored background, a pattern or does it contain an illustration or picture ?“ Depending on the kind of background you either decide to use a background color defined through the style-sheet or you save your pattern or background illustration or picture and refer to it through your style-sheet.

Just remember that each box or area can have its own background. In most cases you have several backgrounds. You have your “body” background and you have backgrounds where needed for some of your boxes.

Save for web

Now that you defined your areas you can start exporting and save your images to gif, jpeg or png. Nothing much tell about this phase, since it depends too much on the design itself.

Building your boxes with CSS

Now that we have saved all images we need to build up our web-page, we can define our boxes by CSS code. Give your boxes an obvious name, so you know what is what. Use comment code so you can find your way. This is very important since your list of CSS code can get very long. Start in a structured way. Start by defining the body tag, then the ID containers or boxes and then the text styles.

When you are in trouble try the trick with the border, or even better… a reader of my blog Jeff Minard suggested to use this : “outline: 1px solid #color; -moz-outline: 1px solid #color;“ (the last part is especially for Mozilla). This is better since a border adds 1 pixel of space around the box and if it has to fit right to the pixel then a border is not such a perfect idea. Thank you Jeff, this is very useful.

Not sure if I did forget something here but that is basically how I work all the time. If anybody can contribute to even better ideas or ways of working please don’t hesitate to share it ;-)