Design Time: CSS Timeline Part 1

You have a client, they have money, a goal begins to emerge. Before long you are head­long into a design project. What are the steps to take, how do you get from point “Okay, we have a deal” to point “Here’s the final­ized results now pay up”?

A project can start on a few dif­fer­ent lev­els, either tak­ing an exist­ing design and cre­at­ing a real­ity, or cre­at­ing the con­cept from scratch, and then tak­ing the con­cept into a real­ity. This here will only deal wiht the for­mer as it’s all about how to get the look from Pho­to­shop* and putting it suc­cess­fully to Fire­fox, IE, Safari, etc.

As most design­ers know it is easy to slice as design and prep it for the fun part, which is lay­ing it out. I say fun because every design seems to teach me some­thing new about cross-platform/cross-browser suc­cess. Most peo­ple who have done this a few times will start out with a good build­ing block, I rec­om­mend Eric Mey­ers’ CSS Reset as a start­ing point. This tech­nique tends to cut down the time it takes to tweak issues you will more than likely run into with stan­dards devel­op­ment (Thank you Eric!).

So with that out of the way, what’s the best way to start? I tend to reach for a trusty pad and pen­cil to sketch the page out and begin to label my base lay­out elements.

I usu­ally begin with build­ing blocks like:

• wrap­per
• con­tainer
• mast­head
• con­tent
• nav­i­ga­tion
• footer

But of course you will have to elab­o­rate on those most times depen­dent on the design. But a good block like this works nor­mally for my design needs. Next seg­ment will actu­ally entail code that I use for a basic build­ing block!

Check back soon  as I will post some sam­ple files in the next segment!