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!


3 thoughts on “Presenting a lot of content without killing children or small animals

  1. 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.

    This is precisely why I abandoned some of the layouts I created by hand for my website over the years: it was absurd to have to make the content conform to the layout, rather than the other way around. Of course, it also served to reinforce that some people are incredibly talented at making HTML templates for websites, and I should probably use theirs as starting points rather than attempting (and failing) to reinvent the wheel :P

    • Thank ye much! Hey, feel free to use this one too.

      Man, that day was real pain. Even after this post, I still couldn’t go to bed right away because that argument was still running through my mind. And It’s not that I don’t see their point of view; it’s a bit counter-intuitive sometimes when adding more content and there are many different ways to approach a layout, but a lot of times it doesn’t even start with the HTML.

      It’s like in programming… More code doesn’t necessarily mean an app can handle more data.
      You always reuse functions and classes and even if the data your app consumes is large, you can feed through all of it if quickly you break it up into chunks and execute in parallel.

      Parallel instances of classes each with functions crunching away…
      Parallel sections on page with columns arranging the content.

      After the big picture is in mind, the rest can fall into place a lot easier. HTML and CSS usually comes last.

      I wish I could say things went easier after that, but… here’s a hint… it’s 12:50AM right now and I’m using tables on a 8 year old template ;)

  2. Pingback: Fluid, variable width columns in CSS « This page intentionally left ugly

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s