Fluid, variable width columns in CSS

A little while ago, I made an addendum to one of my themes trying to prove a point that displaying a lot of content is possible without major HTML and CSS surgery.

But in retrospect, the approach I took, creating a separate “segment” class and having separate “content” and “sidebar” classes, seems a bit silly. It clearly violated the DRY principle since I was overlooking one important fact…

“Content” and “Sidebar” are basically columns of different width

Once I finally realized this fundamental aspect of layout presentation, then all else fell into place. Now there is no need for a “full” class since any content that doesn’t belong to a column automatically takes up the full width.  The rest of the content can be displayed by using percentages relative to the full width of the container.

The Content and Sidebar sections can now be realized by applying a 2/3rds width and 1/3rd width columns respectively and other percentages can be used to mix and match columns on any page segment.

Previously, there was also an “extras” div that was inherited from the Mod Portal theme from which this all was derived. Now this too was eliminated by using three 1/3rd width columns in a separate “body” segment.

You can see the final result of the changes and it is proportionally lighter in CSS and HTML than with the previous iteration. I also added a login/registration form since that was also originally part of Mod Portal, increased the font sizes in the navigation bar, changed some of the colors for clarity and added comments in both the HTML and CSS.

Advertisement

Presenting a lot of content without killing children or small animals

Three things that will help almost anyone* publish a lot of content on one page without causing aneurysms in, by far, one of the shortest posts I’ve done in a while.

Abstracts are your friend

You can call them summaries, blurbs, excerpts or abstracts, but it all does the same thing. I’m visiting a site to see if it’s interesting and the only way to know for sure is I get a good summary of it in under 30 seconds. So go ahead and flood the front page if you must, but you need to summarize!

You’ll be amazed at how much content you can get away with publishing on one page with just excerpts, and we’re talking 10 articles or more along with a sidebar with links and even more content beneath.

Make the content look like it’s not a lot and you can still get the message across and entice visitors to stay longer.

Whitespace! Whitespace! Whitespace!

If you need to push a lot of “stuff” to chew on the front page, give your visitor something to drink to help it all go down. It’s nice to think your visitors can read content the same way a barcode scanner works at the super market, but this is the real world and we’re all slow and impatient humans.

Too much content in a small space makes it just that much harder to understand or follow. I’ve lost count how many times I’ve had to say this, but we don’t read online the way we read old media. Scanning get’s the gist through and if the content is interesting enough, they’ll stay and read more.

More content ≠more HTML and CSS

I’ve had to create entire frontends for clients and one familiar excuse for putting it off and keeping old, broken, templates that some project managers think the more content you have to display, the more HTML and CSS needs to be worked into the new layout.

I call BS, good sir! It was because I got this excuse again that I finally decided to write about it.

Unless you’re designing a rich UI application or something with WebParts (blegh!) or publishing pages and pages of code (*cough*), there’s no reason more content should disproportionately add to the download size and complexity of the theme. More content should be just more content. If formatted properly, there’s no reason it would mess up the rest of what’s on the page.

Case in point, I just hacked in more content to my Simply theme with small changes to the CSS and minimal changes to the HTML scaffolding. You can see what it looked like before adding more content on its original post.

That change took less than 5 minutes and it shows everything I’ve written here so far. That’s 10 articles with the 2 most recent featured with 1 welcome banner, 1 sidebar, 2 link lists using said sidebar and one of 3 extra columns on the bottom, along with an about page and tag cloud. That’s a lot of content (granted without JavaScript) in HTML all under 10K in download size less images and with plenty of room to add more.

*And now, since it’s 1AM right now and I just finished my futile explanation via email to my boss on why the layout we’re using is rubbish (since they chose to ignore all of the above) and completed this post… I’m going to bed!