erraticwisdom: Tutorial: Coding a Layout

Post

So, you’ve designed your next site but you’re having a little trouble turning your lovely PSD into a coded layout. This tutorial should help you learn how to analyze either a new template, or even your current layout to find the best way to code it.

(_Click image for a larger version_)

Here is a basic design composition. The problem now becomes turning it into code while maintaining the style and structure that was decided upon as well as making sure that the site is accessible across browsers/platforms and is as light and elegant as possible.

(_Click image for a larger version_)

The first thing I do once I receive a finalized composition is attack it with a pencil. Analyze every detail of the layout and write down what you think will work. Begin by marking up the widths and basic structure of the site and then move to the details such as the typeface and font-size.

The full PNG of the layout above as well as the font used can be downloaded here
(_Note: You can remove the red markings by making the “Code Overlay” layer invisible._)

Now that we have a good idea of where we’re going, let’s get started.

The first task is to set up your files; luckily, Dreamweaver takes care of that part for me. I usually keep my CSS right in the header when I’m getting started so that I can set up the markup and styles side by side.

I’ve decided how I will be applying the drop shadow – a background on the body will be the easiest and won’t require any extra markup.

By applying the CSS for the background image as well as the “page” div, we now have the basic structure we’re looking for.


body {
        margin: 30px 0 0 0; padding: 0;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 0.9em;
        background: url(images/body_bg.png) center top no-repeat;
}
#page {
        width: 619px;
        margin: 0 auto;
        padding: 30px 40px;
        border: 1px solid #eee;
}

*Take a look at Step 1*

It is best to complete the structure of the layout before moving on to details such as the logo. Setting up the sidebar and main column before moving on makes it easier to locate and fix any problems.

With a few more CSS rules defining the sidebar, main column and footer, the layout is complete. The only step now is to fill in the details.


#sidebar {
        width: 180px;
        padding: 0 20px 0 0;
        float: left;
}
#main_column {
        width: 390px;
        padding: 0 0 0 20px;
        float: left;
}
#footer {
        clear: left;
}

*Take a look at Step 2*

After adding the logo using the negative text-indent method (as well as an overflow: hidden to cut the Firefox dotted border short) and floating an unordered list to create the navigation, the coding is almost complete. Once the CSS has gotten to a point where it is no longer efficient to keep in the markup, move it to a separate stylesheet.

*Take a look at Step 3*

With a little more basic tweaking of colors and headline styles, the design is complete. It may seem like I skipped a great deal between steps 3 and 4, but all of the changes were simply modifying the default styles to match our design.

*Take a look at Step 4*

The most important thing to remember when coding a template is to follow the logical path of coding and testing the basic structure first and then moving to the details later.

The template, images and code are all free for your use and can be downloaded here. Good luck with your own work.

digg this story

Post Meta

At: 08:13:00 PM
On: January 29
In: Web feature
By: Tom Fadial

Comments

Good article, nicely written I think I/others will easily be able to use this technique.
stdmedia

Jan 29, 08:31 PM #
Great article. One suggestion though: I’d put “clear: both;” in the footer. For me, it’s force of habit, because then if you ever decide to float your columns to the right (to reverse the order of appearance on screen), you don’t need to change anything in your footer. It’s just a trivial point though. Good writeup.
Nathan Smith

Jan 29, 11:13 PM #
Very nice and well thought out. We all have our own ways of coding layouts but they are all somewhat similar.
Matt Jones

Jan 29, 11:49 PM #
Good article, these simple tutorials help me a lot!
Bas Wit

Jan 30, 01:28 AM #
This was very helpfully for me.
Rene

Jan 30, 02:41 AM #
Great Tutorial, I love it!
Can you explain the “the negative text-indent method”?
Conny Lo

Jan 30, 04:05 AM #
@Conny Lo

This means that the text of the headline will be out of the visible area, in this case a width of 241px and a height: 37px.

More information: http://phark.typepad.com/phark/2003/08/accessible_imag.html
Rene

Jan 30, 04:10 AM #
thank you for this article!
schnuck

Jan 30, 07:28 AM #
Very nice but toooo simple. How a about a system to see who to set up the images in photoshop. Like for one dont design with blender styles and transparency, or you will suffer,
And how one goas about masking off area of imagery, or titleing texturesa for boxes of text that slide liquid style :D Now THAT would be a tutorial!
tripdragon

Jan 30, 08:32 AM #
addendum: should the main_content not be 420px instead of the 220px as seen in the larger image?
schnuck

Jan 30, 08:38 AM #
Good tutorial. Thanks!

I am with Nathan regarding the clear: both; in the footer.
James Mitchell

Jan 30, 08:51 AM #
Nathan & James: I usually don’t clear what is not necessary because it helps me remember how the layout is structured. clear: left tells me that I floated both columns to the left.

Conny Lo: Rene answered your question right, but here is a live link to the Mike’s image replacement method.

tripdragon: Maybe I’ll do that next :D

schnuck: You got me, I’ll fix it as soon as I get a chance.
Thame

Jan 30, 09:04 AM #
While the css is good, I don’t agree with the methodology you employ. Why begin immediately with css? Those just learning how to use css for positioning should first learn how to correctly code semantic html, the framework upon which css uses. It would be better to instruct people to create their html first, then create the css afterwards.
Neil

Jan 30, 10:54 AM #
Isn’t naming your blocks “footer” the same as naming your styles “red_title”?

I mean, the advice is to name the css classes independently of its style. You shouldn’t use “red_title” even if it’s for your h1 with color:red.

Naming a block “footer” implies that we’re going to show it below everything else, and it’s the same mistake as a “red_title” class, but for layouts.

I think it’s better to describe the block content instead of its position.
Julio Nobrega

Jan 30, 12:01 PM #
Thes is very helpful, I’m just getting started with CSS. Perhaps I missed something, but it seems to me that the width values in Step 1 aren’t matching up with what is written in red on the layout. Is this because you’re compensating for something the browser does or was it just an executive design decision you made when coding it?
Dustin Brown

Jan 30, 12:19 PM #
Where did you ever you get the idea to call a handful of screenshots and lines of text a tutorial….
Carl

Jan 30, 01:56 PM #
Julio: I don’t think that’s the same mistake. Location on-screen doesn’t fluctuate nearly as much as color schemes. Besides, even the CSS legends like SimpleBits.com use div id="footer". Fact of the matter is, you have to name it something, so it might as well be easy to remember.
Nathan Smith

Jan 30, 03:04 PM #
Naming it footer is the same as naming the header ‘header’. The name ‘header’ implies that it sits at the head of the page.
Tony

Jan 30, 03:20 PM #
O man, going from PSD to CSS is always the hardest part for me. I dread doing it, but this is a good tutorial for making the leap. Thanks!
Matthew Price

Jan 30, 04:20 PM #
-Sweet tutorial. This is exactly the way I’ve been doing mine, and it just makes everything so clear in my head.
-Neil, I think the assumption here is that the coder knows semantic markup already.
supa

Jan 30, 07:47 PM #
I disagree with a couple of comments here…

1. CSS is just as important as HTML if not more so these days, you really shouldn’t have one without the other so learning fundamentals of HTML BEFORE CSS is not a good idea… they should be learnt together.

2. Header, Footer etc are all standard type ids for these sections and even if you remove the CSS they should, ideally, still appear in that order so the naming of these sections as such is not the same as calling a tag red_title.

All in it’s not a bad tut at all. It’s good to see people giving back as this does.
Tyroga

Jan 30, 08:03 PM #
Thanks! I’m going to make something like this for my site. thanks a lot.
-jRad
Jrad

Jan 30, 09:47 PM #
@Rene, @Thame -> Thank you, again more stuff to look for, CSS is endless!
Conny Lo

Feb 1, 02:00 PM #
Very good!
But just a correction: after adding full size I don’t have 700px but 690px !!
Maybe I’m wrong.

Thanks!
MsrFR

Feb 2, 04:13 AM #
Back to re-comment on the CSS naming.

The CSS is promise is to separate content from layout. The same argument that people do about red_title applies to footer. Don’t tie the CSS class names to the presentation.

You will only “get” this when the menu has to be moved from the top to the right side of the viewport. Or when the company info, currently at the bottom of the page, has to be eliminated completely because your page is going to be displayed on a cellphone.

Also, skinning a web page, with different CSS files depending on user preferences, for example, drive us to the same red_title problem. When your alternative layout involves re-positioning of elements, the “footer” and “header” class names don’t have the same meaning.

It’s not a huge problem, if a problem at all for most people. But I see a double standard here, and a tutorial which tell us about the good things of CSS should also teach that CSS can change layouts easily. And if CSS can decouple content from presentation/position, why make the same color/size mistake?

What others do, even gurus or successfull people, really doesn’t matter. Everyone makes mistakes, and I see this as one. I have my own share of guilty, I’ve used “header” and “footer” too. I just think that it’s better not to use these names, and nowadays I try to avoid them.

It’s just better practice, you know? :)
Julio Nobrega

Feb 2, 07:22 AM #
“as well as an overflow: hidden to cut the Firefox dotted border short)”...in step 3

owerflow works fine.. but dotted border is still there… to fix that you shoul ad => outline: none;
Mihael

Feb 6, 05:34 AM #
Mihael: I actually like the dotted border so I try to keep it there. The only problem I have with it is when it extends past the container’s dimensions.
Thame

Feb 6, 06:19 AM #
I don’t really understand :(
Phyllis

Feb 23, 09:44 PM #
If there is any particular region that is troubling you, feel free to contact me or drop another comment to see if I can help you out.

Otherwise, I will be writing a more in-depth article as soon as I have more time.
Thame

Feb 24, 02:30 PM #
Great tutorial.Thanks for taking the time to write this up Thame.Keep it coming .
Best Ghana Website Designers

Jun 24, 11:17 AM #
Check out Doug Bowman’s presentation about common structure http://webstock.org.nz/recordings.php. He talks about headers and footers and naming convensions for web page patterns etc. In my opinion there are structural names and functional names…these are not presentational names. So #sidebar to me does not necessarily mean that it is on the side…it has a meaning of related, secondary, or additional.
bart

Aug 3, 06:08 PM #
It’s good for people who have had some experience. Being a first timer I hardly understood any of it.
Rhys

Sep 3, 02:58 AM #
Great Tutorial, I love it!
Can you explain the “the negative text-indent method”?
Andy

Nov 15, 05:36 PM #
Great, Author!
Danila

Dec 3, 05:14 PM #
it is simple but some not how can i convert psd file to html
<a href=“http://www.cicekclub.com” title=“çiçek”>çiçek siparişi</a>
cicekclub

Jan 24, 07:17 AM #
Great, great and great, this tutorial have save my life. i just can say “I love u” thanks for this great tutorial, hope u never stop making the kind of great resources
Adnhack

Apr 22, 06:32 PM #
Well first of all thank you for a great tutorial…
Mainly not overwhelming people with details…
That was a big problem with others I’ve looked at.
...It brought some things to light for me.

Actually I’m impressed with the whole thing and not just for the tute… its a box model in its finest… “Indented” execution

You do one thing then move on to the next…
Brilliance is in the simplicity…

Still I strugle with replacing images though. Any wisdom on that, really hate to dirty it all up with that ugly TABLE tag {teeth screeching sound}.
zerofirefox

Sep 7, 02:06 PM #