erraticwisdom

Categories

View the Archives »

Article

Tutorial: Coding a Layout

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

29 Comments

  1. stdmedia

    Jan 28, 19:31

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

  2. Nathan Smith

    Jan 28, 22:13

    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.

  3. Matt Jones

    Jan 28, 22:49

    Very nice and well thought out. We all have our own ways of coding layouts but they are all somewhat similar.

  4. Bas Wit

    Jan 29, 00:28

    Good article, these simple tutorials help me a lot!

  5. Rene

    Jan 29, 01:41

    This was very helpfully for me.

  6. Conny Lo

    Jan 29, 03:05

    Great Tutorial, I love it!
    Can you explain the “the negative text-indent method”?

  7. Rene

    Jan 29, 03:10

    @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

  8. schnuck

    Jan 29, 06:28

    thank you for this article!

  9. tripdragon

    Jan 29, 07:32

    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!

  10. schnuck

    Jan 29, 07:38

    addendum: should the main_content not be 420px instead of the 220px as seen in the larger image?

  11. James Mitchell

    Jan 29, 07:51

    Good tutorial. Thanks!

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

  12. Thame

    Jan 29, 08:04

    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.

  13. Neil

    Jan 29, 09:54

    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.

  14. Julio Nobrega

    Jan 29, 11:01

    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.

  15. Dustin Brown

    Jan 29, 11:19

    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?

  16. Carl

    Jan 29, 12:56

    Where did you ever you get the idea to call a handful of screenshots and lines of text a tutorial….

  17. Nathan Smith

    Jan 29, 14:04

    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.

  18. Tony

    Jan 29, 14:20

    Naming it footer is the same as naming the header ‘header’. The name ‘header’ implies that it sits at the head of the page.

  19. Matthew Price

    Jan 29, 15:20

    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!

  20. supa

    Jan 29, 18:47

    -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.

  21. Tyroga

    Jan 29, 19:03

    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.

  22. Jrad

    Jan 29, 20:47

    Thanks! I’m going to make something like this for my site. thanks a lot.
    -jRad

  23. Conny Lo

    Jan 31, 13:00

    @Rene, @Thame -> Thank you, again more stuff to look for, CSS is endless!

  24. MsrFR

    Feb 1, 03:13

    Very good!
    But just a correction: after adding full size I don’t have 700px but 690px !!
    Maybe I’m wrong.

    Thanks!

  25. Julio Nobrega

    Feb 1, 06:22

    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? :)

  26. Mihael

    Feb 5, 04:34

    “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;

  27. Thame

    Feb 5, 05:19

    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.

  28. Phyllis

    Feb 22, 20:44

    I don’t really understand :(

  29. Thame

    Feb 23, 13:30

    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.

Comment

About & Contact

I am a seventeen year old freshman at the University at Buffalo majoring in Biomedical Sciences. If you have any questions about this website or would like to work with me on a web design project, feel free to contact me

Read More »

Flickr

Affiliates