Subscribe in a readerBookmark This
Stackenblochen
Chris Missal, July 23, 2007
On a ridiculous showing of Late Night with Conan O'Brien, Conan introduced us to a fake German show in which contestants must stack blocks perfectly in a short amount of time in order to win. You can use similar building blocks when prototyping the design of web pages. By thinking of everything on your pages as a block, even if it is an inline element, you can create a solid, versatile site. This can be done by using as few style tags as necessary.
In the image on the left, you will several different blocks all contained inside one outer block. This is how you win Stackenblochen, I mean, how you can align the sections on your pages.
My favorite way to approach this is by designing on paper first, then creating the code. The great thing about doing as such is that you can create one small section at a time. These can be PHP includes, or .Net User Controls. After the initial design of the page, whether it be on paper or some other medium, you want to create the placeholders for these sections.
I like to use the DIV tag. These tags can be placed and styled using CSS. Notice the top block in the page. This could be a header section and the block below it on the far left could be your navigation. DIV tags do not have any visual style by default, but if you add a different color border and some test text for each DIV while you're tweaking the style to get it to appear where you want, the process can go much quicker. Make your header display a solid red border. Give your navigation bar on the left a dotted green border. You'll be able to see which box is which and move them around and apply margins and padding much easier early on and avoid having to apply any "hacks" later in the design process.
I've dealt with code that produces a grid of images and text that it retrieves from a database. It appeared to be designed with good intentions in that it wasn't put into a table, but it only showed up properly in IE. It started as a complete mess because there were so many classes and styles all mixed together. I couldn't change one class without screwing up another. What I ended up doing was to ouput the response as plain DIV tags, containing only a single class and no inline styles. By doing this I can use an imported style sheet to explicitly define which style belongs to which type and level/sublevel of those DIV classes.
Often times I will see code that seems to go all out in trying to format page styles when the same can be achieved with a lot less code. I always try to remember the acronym KISS, or Keep It Simple, Stupid. How does this related to stacking blocks? Well, when you're fetching data from an external source, you end up with a list, grid, or series of objects to keep it simple. Most often, you're going to want to display this data in some sort of sane matter. Try to create one CSS class that will format one of these instances. You can then use this same class over and over for each bit of data in that list.
In the example above, you'll see three blocks that are all the same size, these could easily be articles, stories, or some records from a database. Just get one, put it in a DIV with your custom class and move on.
If you haven't dealt much with block level elements and the attributes clear and float you might find yourself a little overwhelmed, but let me tell you now, it is worth it and you'll come to love them. After all, you don't want your website to be declared "Nein Stachenblocken"
This article contains external links that are not affiliated with DumpsterDoggy.com.