Dzone icon Reddit icon
Facebook icon RSS Icon Borrow my code


Feel free to borrow any code you like on this site for modification and use on your site. For support implementing just leave a comment for Cd&. You will also find Cd& providing answers and solutions on codingforums, Experts-Exchange, Digital Point, and other progressive Q/A sites where support is available. If there is a snippet you need for your web site, send a request to Cd&, and it might end up being made available on the site.

If you use code from a link would be appreciated.

If you have code on your site that might help other developers, you could add a Borrow button and join the movement to make good open source code easily accessible to all developers.

Four Dimensional Web Development Revisited

Author: COBOLdinosaur

This article is an update of a piece published by COBOLdinosaur on Experts Round table in 2006

This article is for all those developers still stuck in the 20th century with 2-dimensional, table-based layouts. A web page is 4-dimensional. Creating flat print media-like pages does a disservice to the users; under-utilizes modern browsers; and swindles whomever is paying for the development.

The motivation for this mini-tutorial comes from my experiences as an Expert on a number of sites where I have encountered some backward Luddites who think CSS3 and modern standards driven development is too hard to learn; the work of the devil; just layout with DIV and SPAN; or some other ridiculous mis-conception.

So let's get the table nonsense out of the way. Tables are for the presentation of tabular data. PERIOD! Using tables for layout is like trying to build a skyscraper with wooden beams and two by fours... it's going to come apart, and it is going to be slower loading. With today's rich content of high resolution graphics, video, external feeds, and special effects; the old 20th century methods just don't cut it anymore. Today's web pages need to be fluid; capable of supporting a huge range of resolutions; and built with dynamic re-rendering in mind. Table layouts just don't have the necessary properties to give the flexible dynamic structure that is needed.

If you see something you want to try, there are links at the end of this article that will download the css and script files; nicely formatted and documented.

I cannot count the number of times I have heard: "The best way to layout forms is with tables". Okay do this simple form layout with a table: A Simple Form

So, what's with the code in that page?

Okay, its a simple layout. The same thing can be done a number of ways (if you want to write the code). Fair enough, let's go to something a little more challenging and use multiple fieldsets with a cascaded presentation. Try this with a table layout: Something a little more complex

There is not much additional code. Of course the two new fieldsets had to be added, but other than that it is pretty light weight. A couple of more entries in the stylesheet. The legend tags now have an onclick event to fire the transitions. A small amount of scripting for the transitions. Yes, I said a small amount of script. This much:

function setTop(target)
   if (!doingCascade) return;
   if (target.className=='topclass')

function cascade()
   for (i=0;i<FS.length;i++)

All in all not much code for what we have. How much code to do it with a table? Do you even want to try it with a table? Hmmm... a pretty useful and practical layout; but tough without CSS.

I think I just heard somebody out there mention jquery. Of course you can do it with jquery then instead of adding 300 or 400 bytes to the page you get to bloat it up with 25-30k for the minified library and if you are real lucky you will find a plugin that adds another 30k. Now you only have to write 5 lines of code instead of 25. So saving 3 minutes of coding time is more than enough justification for tripling the page footprint and loading time?

On to the 4thDimension

The third dimension of the page is now obvious, and the first hint of dimension 4. There is now a dynamic to the form; the page is not the same all the time. The user can change the page at will. That fourth dimension of movement over time. With a modern browser we could use drag and drop or slow CSS transitions to do the effects, but I'm keeping it simple so we don't get sidetracked by special effects.

The legend tags now have a distinctive cursor... a few key strokes in the stylesheet. The click event brings the selected set of inputs right out to the user with one click, and all it took was a simple swap of className. The javascript has a cute little trick of using unique classNames that match ids to make resetting default values a no-brainer. Yes I know you can do that with jquery (until you run into an incompatible plugin).

The code is very simple. A single argument is passed from the event. The action is on the container and using this.parentNode passes all the properties of the container into the function. The legend does not need to know who the parent is, or anything about it. The DOM node collection and CSS are made for each other.

The CSS sets the default rendering for the fieldsets, legends and inputs within the fieldsets, and manages the positioning with a handful of coded lines. The required scripting is dead simple, but does a lot. First the script tests to see if the clicked element is already on top. When it is it returns it to its default position with a classname swap using its own id; otherwise... the script grabs all the fieldset nodes using the DOM method getElementsByTagName() and a quick loop resets all fieldsets to defaults. Then the target gets put on top with a classname swap.

Simple. Clean. Very little coding.

This is a design for the user; not the developers ego. The user has some control of the layout. Now let's give the user a lot more control. Let's really go 4 dimensional by adding multiple transitions that respond to the user. Let's give the user a choice of what layout they want.

If you are still stuck with tables or table-like div based grid layouts; you might as well leave. You have no chance with the rest of this unless you are ready to do a lot of coding to make your tables do this: User Selected Choice

One click by the user changes presentation. These are just positional changes. Any attribute can be modified this way. Every user can have their own unique setup. They can get the content the way THEY want it. Setups can be saved to cookies or in user profiles on the server, so the user has their own version of a site customized for them, by them. Did you notice the text gets covered over and treated as unimportant?

Let's look at how little code we had to add to get that dynamic customizable effect:

Wait a minute; we have a page with three dynamically selectable layouts and we don't have to do major surgery on the HTML or the CSS... Hmmm maybe this standards compliance stuff might have some merit. Could get to the pub or golf course a little earlier. What can be offered to the user as options is virtually unlimited.

BUT... the developer loses control, don't they?

Of course they do. Whose browser is it?

Survival of the Fittest

Web sites must have traffic to survive. Users do not come to a site to be impressed by 400k of graphics,animations and fancy borders. They don't come to marvel at the impeccable layout, that the developer spent weeks getting every pixel in place. They don't care about code quality, layout, or technical issues. If they return it will not be for any of those things.

Visitors come for content. Visitors return when they find what they want; it is easy to access and use; and it does not mess up their browser. If the page is slow loading; they do not find what they want right away; or what they find is not the quality they want... then they are gone, and not likely to ever be back. It does not matter how much time you put in on layout; if you do not give the user what they want...bye bye.

Make the site hard to use; lose traffic. Make it rigid and force your ego onto the page; lose traffic. Cross-browser issues? Accessibility issues? Cross-resolution issues? Overuse of graphics? They all lose traffic.

The browser belongs to the user. They know what they are comfortable with. They know what looks GOOD to them. It does not matter what you think is great looking or ugly. The users will decide your success; not the handful of fellow developers who compliment the color scheme. Your site may look great; but a pound of graphics, borders and special effects for every ounce of content, does not do a thing for the users.

The practical reality is that web sites sell product, promote ideas or positions, provide recreation, or present content. They generate revenue with some form of content presentation.

I can hear the noise out there right now. "Letting users change the layout, and letting stuff just float around ruins my layout, covers stuff up, and moves things to the wrong place. My great layout gets messed up if I don't lock everything down." SO WHAT! The user decides what they want to look at. They put it where it is easiest for them to work with it. They change font sizes to what is easy for them. They change colors to what is pleasing to them. They are not looking at anything but the content they are working with. Everything else is just clutter.

There are thousands of sites designed so that the message they send is: "We are a magazine page and the site only has a small amount of content". At the top is a banner using 30% of the canvas, another 10-15% goes for a nav bar.Then on the left side is a menu with 5 or 6 entries that uses 25% of width all the way to the bottom, and over on the right another 25% width column that may or may not contain anything useful. The net result is that above the fold there is only 30% or less of the canvas available for the content, and even below the fold there is only 50% available. Of course if the site is really into the latest trends and gimmicks, the 30% content area above the fold is taken up with a slide show of boring crap or promotional material that does not give the user any help finding what they want. The whole page is a waste of bandwidth unless the user finds something that interests them in about 8 seconds.

Question that typical 3-column layout (most 2-column are almost as bad) and what you hear is total utter nonsense about all this bloat and clutter being necessary so the site is easy to navigate. For the home page; maybe. For content pages; visitors are NOT THERE TO NAVIGATE. Why does the page layout say "the primary purpose of this page is navigation"? Get rid of the garbage. They don't need nav while they are looking at content. All they need is a simple link or button that says "show menu" Or a row of buttons with links to the main sections of the site. Let the nav sit in a hidden layer and when they need it throw it up over the content, because if they are navigating it does not matter what gets covered up or moved around. Give them content pages that are mostly content. How about a hidden sitemap?

Click the blue button for an In Your Face Menu

If there is a bunch small pieces put them in layers on one page instead of hammering the server loading tiny pages with small but important bits of content. It can be done with panels,overlays, and hidden layers. So with all the stuff on that page how big is it? the HTML comes in around 20K with the CSS, Javascript and graphics it weighs in just under 40k. Less than what most templates use for the CSS. Less than a lot of single purpose jquery plugins. Most sites that use jquery for a themed dropdown menu and slide show are around 250k to400k before they put any content on the page. Then of course there are lots of single graphics that come in a three or four times the size of our demonstration page. The really dumb part of all that is that most of the bloated crap won't validate, so they can suddenly quit working because of a new browser version, new os version, or new plugin.

There are 4 dimensions to web pages - use them!

Code used in this article is available for Download

If you found this article helpful you might also be interested in:

Comment by: GilbertBates 2012-07-31 12:01:40

I like the way you lay the forms on top of each other, but I was wondering if you you could drag them instead of just popping them up in a different position. It is not so much for forms. I was thinking of starting a forum, and I thought it would be cool if you could resize comments and move them around on the screen. Is that possible?


Comment by: COBOLdinosaur 2012-08-01 14:09:09

Yes it is possible, but it takes quite a bit of scripting. I have a snippet that keeps track of the cursor position, that I will add to the site when I have time to clean it up. I'll let you know when it is up.

What software are you going to use for your forum?

100% standards compliant code is 100% correct
100% of the time

Comment by: user4574 2012-08-13 15:27:07

Isn't this a sort of forum?

Got an idea for an article? Author Guidelines

To comment on this article LOGIN or REGISTER FOR FREE
Want to talk about this page? Send a comment to Cd&
Not a member of COBOLdinosaur yet? FREE REGISTRATION HERE