How to code Six Revisions’ layout better than Six Revisions

Last week, I taught you how to slice Six Revisions’ layout in 12 easy steps. Today I’ll show you how to code their layout better than them!

There are many blogs out there that I really like: Smashing Magazine, Freelance Switch, Think Vitamin, Designm.ag, Nettuts, etc. Six Revision is one of them. Unfortunately, sometimes their articles is not as good as they should be. (Not only for Six Revisions.)

I mean, they have the money, they have the fame… but they should give me money and fame and concentrate on writing content of the highest quality. Hence I decided to write a “better than” series to show how to take some of their articles from good to great. That’s my way to pay tribute to these blogs I love.

Before you begin

You can read how to design Six Revisions’ layout, and how to slice it. Or simply download the sliced pics we need in order to do this tutorial.

You can also read the article we are going make better: Minimal and Modern Layout: PSD to XHTML/CSS Conversion or already check the final result.

What is “better” for me?

It’s not about how the tutorial is well-written, or full of good-looking pictures. It’s about code quality, standard compliance, best practices, work-flow, and tricks you should use to work more efficiently.

Download My Simple Framework:

In order to work quicker and better, download My Simple Framework and unzip it. (If you want, take one or two minutes to get familiar with it.)

It should look like this inside:

Today we will code in XHTML, so open the XHTML folder. Here is what you should see:

Why is it better?

It is better than Six Revisions’ tutorial for many reasons. In short, My Simple Framework (MSF), will take care of many issues that Six Revisions’ tutorial forgot or neglected. (Other frameworks such as 960.gs, Blueprint, etc. are good too.)

For example, MSF provides a powerful build in CSS reset and many useful default values, but Six Revisions use an old and “not so good” CSS reset:

Another example: Six Revisions wrote NOTHING about typography. But typography, it’s rhythm, it’s flow, the font choice, etc. are an important part of any design and should be taken in account when building a layout. MSF features a beautiful typography, with many size and baseline grids.

More: MSF provides a xml:lang attribute, an IE special stylesheet, a print stylesheet, etc. Six Revisions’ tutorial lacks all these.

Creating the layout

1. First let’s take a look at what we want to create. Here is the structure of our web template:

You don’t need to code anything yet. A mere copy-paste will be enough to create a good basic layout. But (sadly) whereas the usual width for layouts is 960px, this one is 850px large… (what for? I wonder…)

2. Open “css/layout/960px fixed layouts/” and copy head-nav-2col(1-2)-2col(2)-960px.css

3. Go back to the “css” folder and replace layout.css with this file (delete layout.css, paste head-nav-2col(1-2)-2col(2)-960px.css, rename it layout.css):

4. You can already take a look at your website and open index.php with your favorite web browser (I’m sure it’s Firefox!). Here is what you should have:

Not bad for a mere copy-paste, right? Now, we simply need to merge the header and the navigation section, and to give their width to our layout elements.

5. Open up index.php in your favorite code editor; I’ll be using Notepad++ for this tutorial (for bigger projects, I like Aptana Studio). Find the following code:

Delete the navigation sections so that only the header remains:

6. Now, open layout.css. In order to give the proper width to all your layouts elements (columns, header, wrappers, etc.), you can use the search and replace function (ctrl+f):

• search for: 960px, replace with 890px;
• search for: 240px, replace with 300px;
• search for: 720px, replace with 620px;

Here is the result:

Why is it better?

First of all, this layout can be done in seconds if you know what you want to do. I mean 1 copy-paste, delete 2 sections of text, and do 3 search and replace can be done in less than 50 seconds.

Then, a big flow of Six Revisions markup is that the content appears AFTER the sidebar. It’s not (really) good for SEO and accessibility. With my method, your content (level-2 > column-5) appears before the sidebar (level-2 > column-6).

One more crucial thing: It’s an organized workflow! You can’t slice a part, code some CSS, slice another thing again, write some XHTML, slice again, code again, and so on. That’s just wrong! If you don’t want to fail like an amateur, please use some kind of plan, for instance: Design / Slice / Layout (XHTML) / Layout (CSS) / Content (XHTML) / Content (CSS) / Features (jQuery) / etc.

(I only stress the important things because it would be too long if I wanted to write everything that is better).

Adding the background

7. Make sure that you have all the required sliced files. (You can also download the whole “layout” folder again).

Put all these pictures in “images/layout/” like this:

8. In layout.css, delete the default backgrounds:

9. Then starting with the body. We are going to add all the backgrounds (please note that when required, we will add the proper height/margin/padding too):

10. For the column-2, we must add a 370px height to protect the background:

11. Here, the 60px padding-top provides enough space to display the horizontal bar:

12. For the sidebar, we are going to layer to background images in order to use the sliding-door technique. Hence, we need to delete the margin of the inside div. Moreover our slice is not pixel-perfect so we are going to “move” our background a bit:

Why is it better?

With this method, the sidebar height can increase without breaking the layout. If you used Six Revisions’ layout and put too much content, very bad things would happen:

Oh! And I forgot another (small) better thing. A width of 890 pixels is better than 850 pixels for this layout because that allows consistent margins around the content. (And consistent things are sweet).

Adding Content

Up to now, our website is only an ugly creature with no meaning. It’s time to turn it in a talkative little princess: let’s add the content.

13. When you add the content, you should always keep in mind how you are going to style it later in your CSS file(s). You should also be careful and use the proper XHTML tags for each element you write.

14. That being said, we can edit our index.php file again. First we are going to add the site title and the navigation menu. Find the header section and write this:

And in layout, change #header>.inside to:

Why is it better?

Because we don’t use any image for the logo (I can’t see any good reason to use an image for a text with no gradient…). And we’ll be able to style the logo through CSS only later, with a small trick :)

Our solution is better too, that’s only a detail, because we didn’t specify a class for the unordered list. (You can target this list with CSS only, there is no need to add a class here. Moreover a “ID” would be more suited in this situation).

Last thing, adding a class to the last list item is just wrong. Please use the CSS selectors… don’t add unsightly crap to the markup!

15. Now add the content and the sidebar markup:

And:

16. We can finish with the footer (I’m leaving Six Revisions’ copyright without adding mine because I’m a nice fellow):

Why is it better?

Well… again we are using a little less markup (and, if you read the recommendations of W3C, that’s definitely a habit you have to take as soon as possible).

However, I must admit that generic column names such as “column-5″ are less semantic than “sidebar” and “content”. (But, sometimes you can’t make everything perfect.)

One other benefit of building your website like I’m showing you is that you (somehow) follow the rules of progressive enhancement. It means that you add layers of technology one by one and make sure that everything is as accessible as possible.

Here is what you should have:

Styling content

Time to have FUN! I love styling everything with CSS and I’m sure you’ll love it too :)

17. Open typography.css with your code editor. First, we need to choose a decent sans-serif font stack for the headlines. Find and change the following code in the CSS file:

18. Now we want to display our logo in two colors, make it change on hover, and give it a fixed size to protect the layout from browser resizing. Add the following code, right after the previous bunch of code:

This code features two neat tricks. The first one is to use line-height to vertically center some text (I like this trick). The second one is to put the “hover” property on the h1 tag, and NOT on the link itself. That way, you can create a bicolor link which react as a normal link!

19. Last thing to finish the header is to style the navigation. It’s often a mess (IE just won’t do what I ask him to).

Here is the CSS code:

Why is it better?

List elements are floated instead of the anchors tags (<a>). The whole code is way cleaner and uses up to date CSS properties. The text-shadow property adds a little softness to the links (uncomment it and see if you like).

20. Now that our header is appealing, we can concentrate on the content.

Change the body text color:

Then find:

Change to:

21. The lists are a total mess in Six Revisions’ tutorial, and I would be ashamed – as a web designer – if I dared to use something like that on a paid project. So, we are going to do better. Find the “Navigation & Lists” section and add the following code:

Why is it better?

The list background-image stays on the first line of the list, as it should. Moreover there is enough padding.

If you used Six Revisions’ layout and put too much content, very bad things would happen (again):

22. We are almost done! Stay strong :)

We can now style the sidebar. Add the following code:

Why is it better?

It’s always good to avoid using pictures when you can. One less picture is one less request to the server, and it’s easier to change pure CSS styles than redesign pictures with Photoshop. (And even if we used a :last-child selector, old browser will still display the list nicely.)

23. The footer is easy to style if we switch to the layout.css file. Find the footer styling and change it to:

24. Last, yes last of the last, make sure everything is perfect. Delete the remaining default text (“Level-1 > Column-2″), write the meta tags, etc.

Here is the final result. Enjoy!

If you want you can download the files here.

What now?

I hope you learnt many new things about workflow, clean markup, standard compliance and best practices in general.

When we read professional web designers’ articles and tutorials, we may find ourselves very small and unskilled. But they do mistakes too ^__^ (hopefully I’m not a pro yet). So, be confident!

Writing this tutorial took me 8 long hours (I mean the code took me 45min, but writing the tutorial itself was way harder… I wish English were my native tongue, really!). But I had fun.

Next time, I’ll write an article “better than” Smashing Magazine. So, be sure to grab the RSS and don’t miss it!

What do you think of this tutorial? Is it useful to you or do you think it is a waste of time? Any idea to make it better?

Please tell me!!!

Thank you.