Those were the fine words used by John of Addicted to New. John is a developer and released this great tutorial roughly 3 months ago.
He took his readers through the development process of a project with one of his buddies. (I think) As you know, other than design process of coming up with a template, even before programming begins there’s a need to skeletize the layout.
The tutorial isn’t very long and has been broken into various pieces for anyone to follow.
In the beginning of it, John thoroughly explains with images of how he visually dissects the layout given to him. He drew a few white boxes even just to explain how anyone can accomplish a certain gradient background effect. That was neat.
John also explained one of the basic understandings of turning a website template into a website online. He mentioned things like this about the header graphic.
The header will need a background image from the top of the page to just above the navigation and another for the logo. The reason I separate the logo from the header is the size of the header. It is a large graphic and will need a high compression rate to tame the file size. If the logo is compressed the same amount as the rest of the header, it will be of noticebly crappy quality. Because the logo is a major part in any brand, it needs to be crisp.
The only time you don’t need really to do this is when you aren’t using designer type text for your header or the logo and text are on top of solid background color.
John’s tutorial, How To Nail a Sexy Layout is a very good guide to anyone just picking up website design or development. Every beginner should learn how to dissect or plan their strategy of attack before charging into the spears of war.
Other than John’s tutorials, you could try viewing the ones at Veerle’s blog. Her stuff is simply excellent and she just released a new header tutorial that’s suitable for fluid layouts. Other tutorials by Veerle that you should look out for:
- A CSS Styled Table
- Designing a CSS Based Template Part I (goes all the way to VIII)
Enjoy! :)