The easiest method of designing a website

Been a few days since I last 'blogged' here mainly because I have been busy with some other things including a new website which is soon debuting, anyways I thought I would post a quick blog on how I usually do layouts. I will say now I do code, I hate using a program like photoshop to just slice up the image and generate code.

Dimensions

First I work out the dimensions I want to use, such as the overall width, the left nav width, the center and the right. I usually draw it in an image editing program, just a plain background with squares to see how it will look when its layed out.

Design

Next using an image editing program I draw the layout how I want it to look as a whole to see what I expect overall.

Cutting

Next I cut the layout up into smaller chunks, discarding what I would see as irrelevant content (such as the background if I am using a single color for the background and spacer images).

Create a tabled layout

When I have the images I open a html editor (sometimes notepad) and design a template page, I use tables and keep all of the content in the table tags (such as width), I know I have stated before css is a better option but that comes later. Once the layouts done I open it in internet explorer to see it looks as I expect, I then open it in firefox and fix the coding so it uses code firefox will acknowledge.

CSS

Now I take the template and integrate a style sheet to the design. I then test it again in all browsers.

Develop the pages

When everythings working I create all the pages for it, if I use a database (which I always do) I add the code to take the information from the database and add test entries just to test the layout.


Anyways thats all for today have fun and happy coding.

Sites to check out:

Rampant Designs Baby Seal Productions Stick Guy The Club BSP Blog Stick Guy Blog