Design Time: CSS Timeline Part 1

You have a client, they have money, a goal begins to emerge. Before long you are headlong 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 finalized results now pay up”?

A project can start on a few different levels, either taking an existing design and creating a reality, or creating the concept from scratch, and then taking the concept into a reality. This here will only deal wiht the former as it’s all about how to get the look from Photoshop* and putting it successfully to Firefox, IE, Safari, etc.

As most designers know it is easy to slice as design and prep it for the fun part, which is laying it out. I say fun because every design seems to teach me something new about cross-platform/cross-browser success. Most people who have done this a few times will start out with a good building block, I recommend Eric Meyers’ CSS Reset as a starting point. This technique tends to cut down the time it takes to tweak issues you will more than likely run into with standards development (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 pencil to sketch the page out and begin to label my base layout elements.

I usually begin with building blocks like:

• wrapper
• container
• masthead
• content
• navigation
• footer

But of course you will have to elaborate on those most times dependent on the design. But a good block like this works normally for my design needs. Next segment will actually entail code that I use for a basic building block!

Check back soon  as I will post some sample files in the next segment!