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

Final wrap, and a few bits and pieces

Well, if you have stuck through the last 6 pages, you are doing great. It's difficult to know exactly who will find this useful, and who won't.

I might get the odd email telling me that I haven't explained something well enough, or that it's too complex. But in all honesty, this wasn't created for people that are at a beginners level with css.

And some designers might get offended at comments I've made, about the lack of creativity that I've seen in some Block Builder designs. But if you are a professional designer, and think that slapping a 960x135px header into a template is good enough to qualify as a "3 column block builder site redesign"..... well, 'nuff said about that, I think.

Nope, this was written for people that have at least a reasonable knowledge of css, and want to push the boundaries a little bit. There is nothing wrong with a dead simple design at all. Look at this page for example...single column, with a very simple header. It doesn't get any simpler than that. But it does what I want it to do, which is present the content with very little in the way of distractions. And many sites will need that. But don't create your designs that way because it's the only way you know.... create them that way because it's the best choice for that site.

I've seen designers churn out endless cookie cutter sites for their customers. Each one is the same as the one before, the only thing they change is the content and a few images in the header. How boring. Yawn.

People want something different, something better, something unique, original and with a bit of flair. A design should have that "certain something" that you just can't put your finger on. You can't explain it, but you know it when you see it.

A good site design can go almost unnoticed. It just quietly does it's job of presenting the content.

A great design on the other hand, lifts the content to a higher level. The whole becomes greater than the sum of the parts.

Some additional tips

Add a paragraph tag: When you create the content for your third column, the css will go in first. Put a <p> tag straight after the closing style tag. Ths will duplicate what Block Builder will do when the column is built. If you don't do this, you will find all of your third column content is about 20px lower than you expect (or whatever your line height is set to). Don't forget to remove it before uploading though.

Careful with spaces in your css: If you have any carriage returns in your css, then Block Builder will insert a <p> tag for you. And that is one quick way to stop the css from working.

Some design concepts that are unusual for a BB site:

Most people would be hard pressed to recognize this as a Block Builder site. But it is, and there are a few concepts that make it slightly unusual compared to the run of the mill BB.

You can see those things for yourself in the screenshot. The earth over the top of the page, transparent side columns, the faded effect with transparencies surrounding the content area.

In case you are wondering how I created the effect around the main content column, here's how to do it. First, I made a mid blue rectangle. I then faded that down so the clouds would show through. I then placed another rectangle over the top of it, which I colored white. This was left opaque, but the rectangle was feathered, to give the same effect as a gradient around the edge.

Pretty simple when you know how, eh?

Why I really hate inline styling

Im sure that the new Block Builder won't suffer from the same poor design features as the current one. I don't know who created the design for this one, and I don't want to criticize whoever it was. I'm sure most of the things that bug me were done for a reason (even if that reason was a bad one;-) ). But it's very hard to look at how user unfriendly it is, and not see all the little things that could have been done to make it so much more versatile and easy to use.

Case in point, is the inflexible AP div for the navigation. Granted, nobody can be expected to know someone like myself might want to modify this. But that isn't the point. What is the point, is the fact that as soon as you put inline styling into the template structure, you lose all flexibility.

If layer1 styling had of been placed in the head section (the same way much of the other page styling was done) then that would be fine. The id could be overwritten, added to or modified, simply by copying the id into the 3rd column css and doing whatever you like with it. Moving the links downwards for example.

But the styling was placed inline, not in the head section of the template.

Furthermore, the styling wasn't even applied to layer1 it was applied to the div insead. Making it impossible to get at, and alter properties and values. Grrrrr.

In actual fact, that entire div is unnecessary. The nav doesn't need to be positioned, it doesn't need a width specified (that has already been done in the table data cell above) and it doesn't need a z-index or be positioned 190px from the top. If you removed that entire div tag, along with it's closing div, what would happen?

Would the template become unstable, have some undesired or unexpected side effects? Nope, all that would happen is that the nav buttons would be allowed to move freely, depending on the height of the header. No more searching for a template that matches the height you need. No more overlapping nav buttons. No more me cursing the person that decided to do things this way. All good things, in fact.

So that is the reason for my dislike of inline styling. It takes away any flexibilty that you might of had.

Okay, that might just about do. Apart from the little grizzles I have such as the one just above, I enjoy working with the Block Builder. It definitely has limitations. And there are some things in the design of it that seem to have been done just to annoy me ;-) But overall, it's quite fun to work with, and once you understand the structure, it's not that difficult to create a fantastic looking design with it.

Hopefully, this article has given you some ideas for designs of your own. And if not, I hope you enjoyed the read anyway.

All the best, AJ

Remember, form+function=beauty.

Oh, and one little postscript!

I was meaning to show one technique to you, and clean forgot about it, until now. Ooops. But better late than never eh? And that was how to give something a bit more of a 3 dimensional look. You really can't see the detail in the small image, so click on it to open a full sized image in a new window.

I do enjoy doing a design that is bright, colorful, and makes you feel good just looking at it. And this one is certainly colorful. But it's a decorating site, what would you expect? I like the stucco effect on the body background. Especially with having it fixed so the page scrolls over it, insead of with it.

And the 3D is also evident in the way the content area was treated.

Simple to do, but a great effect. Just create a rectangle for the content area. Then that is punched out of the main template to create a hole. The main template can then have a drop shadow added, and a white rectangle is placed back below it, to go underneath the hole. Not an effect to overdo, but one to bring out now and again when the time is right ;-)

Who the hell said all Block Builder websites are ugly and boring? If anyone ever tells you that, grab their ear and drag them to this article and see if they change their mind.