The A-Z of design with SBI 3 column Block Builder

I have written plenty of articles on web design, in the past. And also made plenty of posts on the same subject, in the SBI forums. But this is probably my longest, and most detailed explanation of some of the things you can actually do with a very limited template structure (and yes, the current Block Builder IS somewhat limited, as far as design flexibility goes).

But don't let limitations hold you back - work with them and not against them, and you can have a design that is the equal of the best of them. Really!

What you need is vision. The ability to see in your minds eye what the finished design will look like. Now, I can't teach you that. But what I can teach, is some of the tricks and techniques that will allow you to take that vision and turn it into reality.

This was written before the new Block Builder was released. So I'm not sure at this stage how relevant this information will be to the new BB. However, I use no complicated tricks that won't transfer from one system to another. Which hopefully means that any of the techniques used here, will still be applicable. And good design principles will never go out of fashion.

Who this article is intended for

Anyone that works with the 3 column block builder, or intends to do so. Either just for your own personal website/s, or creating designs for paying customers.

So, I'm going to give you every detail that went into constructing our example website, www.history-of-the-titanic.com

How to go from this.....

to this....

Thank you to Diane, owner of www.history-of-the-titanic.com for allowing me to use her design as the example site on these pages.

The Block Builder template structure

Before you can do any advanced design work with BB, you have to have a decent understanding of how the templates are structured, and what dimensions you need to stick to. All of the templates are similar, but they are all different as well. I bet that doesn't make much sense right now. But it will.

I have used many of the templates available, and probably the best of them are to be found in the "Learning and Education" section of the Look and Feel Selector. The reason for that, is most of them will allow you to separate the body background from the content background.

That could be achieved with css if you used a different template, but why do that if you don't need to? Below, is the template that I use the most often, as it has the nav buttons starting at a lower level than most (190px from the top of the page). There are quite a few templates available in the Learning and Education section, so you will need to look at all of them, to find this particular one.

And here is how that particular template is structured. It might look like a jumble of colored strips, but in fact this shows the dimensions that we need to work with.

The eagle eyed amongst you, will have done some quick math, and come up with the figure of 915px(130+550+235=915). But the content is placed within an extra table which is 550px. The table row that contains it is what is 595px in width (yes, I know. Nested tables). That effectively gives the content an extra 45px of padding. It also means that the figures add up correctly. 130+595+235=960px.

The left navigation links

You might wonder: why have I started the explanation of each area with the left nav? Surely it makes sense to work down from the top. Explain the header first. Actually, we need to look at the left links first, as they are the only part of the page that has a fixed position.

This is something that I can't agree with being done...it makes no sense to me, and the only thing it achieves is to add difficulty and confusion with modifying the templates. Now, if you needed the source code to appear in a different place than the actual links, I would understand. But that's not what happens.

Still, that's just how it is, and we have to deal with it.

What happens when we add a header to the template, is that no matter how tall it is, the links don't move in relation to that height. So if you don't create a header of the correct height for your particular template, the links might be too high or too low, compared to the rest of the page.

Just remember that with this particular template, the top of the first link starts at 190px from the top of the page. Not 191px or 189px, but 190px exactly. Which is not to say that your header has to be that height,and we will see why later!

The header

As the left links are fixed at 190px from the top of your page, then generally the header will want to be a little less than that. Perhaps 180 or 185px in height. I have emphasized the word generally, as there are always exceptions to the rule.

But we will look at those exceptions in the proper place, which is the discussion of how the example design was created. For now, assume that a header will be 190px or less in height. The width for the 3 column template, is of course 960px.

The left column

The left nav buttons are 130px in width. This is the same width as the left column. Some templates have a slightly different width, but I am only going to discuss this particular one.

In the diagram above, you will see that the left column area (that is represented by the green) is slightly wider than the black buttons. In actual fact, the widths are exactly the same, the extra width was only added to show the various areas clearly.

The content column

Look to the structure diagram...while the content cell of the template table is quite wide (550px), the actual usable area that content appears in, is 520px. This may not be the exact figure for other templates.

The content will start 170px from the left edge of the template, as shown by the red strip. It will finish 270px from the right edge, as shown by the other red strip.

Now, as the entire template is 960px in width, and 170+270=440, that gives you the figure of 520px. Easy eh?

The right column

With the standard 2 column BB, you had a total width of 725px. The 3rd column is tacked onto this width, and was made to extend the template to the same width as one of the standard SBI css templates....960px.

That means the column needed to be 235px wide (725+235=960).

This has the effect of making the page look a little unbalanced, IMO. It accentuates the narrowness of the left column. But creating it at this width meant that all of the css 3 column headers could be used, so it was undoubtly the best option available. And we can do some things to minimize that effect.

The next page will deal with getting yourself prepared to create a design, by making a template to use in your work.