I caught a little flack for something I said here a couple of days ago, about how a gigantic pet peeve of mine is the endless, utterly endless lists of links you see on most blog pages, down the left side and down the right side and across the top and across the bottom, pointing me to every damn page at that website individually, plus all their friends' sites, and the sites they read everyday, and the list of crap at Amazon they wish someone would buy for them, and what kind of mood they're in, and what CD they're listening to, and what a videogame icon of them might look like, just on and on and on and on and on. Jesus, people, Jesus. I heard back from a couple of people who argued that these long lists of clickable links were the entire point of having a blog, the thing that separated them from doing a zine or newspaper column; or that the beauty of the web is that you don't have to worry about extra cost associated with extra content, so why not make them long?

I'm not saying that you can't have quite a bit of information as side material at your blog page; I mean, jeez, look at my page to see why I could never argue that. What I'm saying, though, is two-fold: 1) people should learn to get a lot smarter about what exactly they include; and 2) man, these blog pages really need to be designed better, and especially the premade templates that come with the accounts. To illustrate my point, I'm going to walk you through the design of my sidebar, explain what thinking went into each step, and display screenshots along the way.

So let's start with just the way sidebars are graphically designed, a step a lot of people could put into use quickly and start getting immediate dramatic results. To start I have stripped away all the design elements and left just the plain text, which is what you're seeing here, shrunken down to give your eye a better aspect of the box-like structures we're creating. Man, look at all that side material on your left! I'll get into how I chose what went in there a little later down, but for now let's just acknowledge that it's more text than some bloggers actually publish as entries on a given day. Since the primary focus of your blog page should always, always be the entries themselves (else why are you maintaining a blog?), how do we shift the focus away from the sidebar as much as possible, while giving it a natural order and look that will help people quickly find information?

Let's start with what a lot of premade templates do, which is to surround each box of text with a colored square, clearly differentiating it from the entries (which is what you're looking at in this illustration). A good, solid first step, but we have so many still to go. Look how bunched in all that information looks in those tiny squares; how is anyone going to find the information they need? When in doubt, do a little roleplaying: pretend you're an old college buddy who just stumbled across your site accidentally at the end of one workday, and wants to very quickly copy down your email address before he leaves the office, so he can send you a note from home that night. How easy is it going to be for him to quickly scan your entire page and find that specific piece of information? Ask yourself that throughout the entire design process; you'd be surprised how efficiently it drives forward good templates.

So before anything else, let's give ourselves some breathing room, which you're seeing illustrated here. The solution is simple enough; simply go into the section of your CSS classification where these boundaries are defined, and lengthen them. This can be accomplished a number of ways in CSS, so you'll have to look for the way your particular template designer did it: some people use the { margin: } attribute to accomplish it while others use { padding; }; some people put it in the layout portion of their classification (typically ID definitions, signified by a "#" in CSS) while some put it in the content portion (typically class definitions, signified by a "."). What you're looking at here is a sidebar width of exactly 400 pixels; the entry, on the other hand, is defined in relative terms to the edge of the browser, so that the browser can be of any width and still display that nice little white space on the right-hand side you're seeing, and have that white space be the same percentage of the overall browser width (10 percent, to be precise), no matter how wide the browser.

I figure that the smallest monitors on the market anymore are 600 pixels wide, and you have to be on a pretty old computer for that; most decent to new ones have at least 800-pixel monitors, and more often these days like 1200 or more. Giving my sidebar an absolute width like 400 pixels gives me a nice solid measurement in which to base the designs within the box, a measurement that will never change; this precise control is always of more use in smaller areas of your page, where a lot more weirdo tiny design things are going on. But since the sidebar is only 400 pixels wide, I know that that will give me at least 200 pixels for the actual entry on the absolutely oldest computer out there, and a really nice reading area for anyone on a computer made from 1997 to now. Usability, people, usability; it's easy to make a site for fellow 1600-pixel-mammoth-monitor owners, when you're one yourself, but how is that site going to look for a poor artist still on a Mac Centris and a 600-pixel monitor (er, like me, for example)?

To clean up the sidebar any further, we will have to know a little more CSS and start doing things in a more exact way. Like, look how the sidebar text in the previous example ran all the way from the left edge to the right edge of its colored box; why don't we indent that text some, and also move the colored box away from the entry a bit as well? That's what you're seeing in this illustration here. This accomplishes two things at once; it physically sets the sidebar off even further from the entry (which, remember, should be your primary focus); and it gives the eye a little room to breathe when reading the sidebar entries. We as humans need to have not only text grouped for us to help us quickly make sense of it, but also a certain amount of blank space around the text, to help our eye jump from the end of one line to the beginning of the next as we're reading it. This I believe is the cardinal sin of most premade blog templates, and an easy one to correct as I've shown; just this part of the tutorial alone will help immensely with making your blog easier to read. The code below is the minimum amount of attributes you'll need in your CSS code to make this effect work, with the measurements based on what you're seeing in these screenshots; you can add any other attributes in there as well, and of course change any of the names or measurements to better reflect your own site.

And then a simplified version of your HTML document might look something like this:

But why stop there - why not just go ahead and bring the left edges of those colored boxes all the way to the edge of the page? This is the beginning of what designers call "iconifying" an object (or at least what I call it); when you start designing an object on your web page so that visually it resembles something that your reader already understands metaphorically. Having just the left edge of the box touch the very outer wall of the browser immediately gives the box more of the look of a tab, something we all understand; it also reinforces the "side" idea of a sidebox, not to mention the sliding supplemental information we now often see at the bottom of our television screens during shows. With a little creative code, you could even get these to actually fly in and out of the page, using dHTML, JavaScript or another language designed for dynamic effects. This will immensely help your reader erase that side information from their consciousness, as they get absorbed into your entry just like you want them to. But since the boxes are starting to mimic the appearance now of supplementary informational signs we already understand, our mind knows that we can always return to that spot on the page to go track down something specific. That's the entire point, after all, of a sidebar existing in the first place. The secret to achieving this is simple; just make sure that your "body" CSS classification is set to a margin of 0, a padding of 0 and a border of 0. That way any layout portions of your page nestled within those "body" opening and closing tags will take on those measurements as well, unless you specifically tell that portion of your layout to override the measurements (as we did here for the right-hand side of the box, for example, but not for the left).

And as a final step towards iconification, why not add a title bar to the top of each box as well? This now gives you a supplementary informational graphic at your site worthy of an airport or hotel, environments most of your readers are familiar with as well. And when your own sidebar reminds them this much of other sidebar items in their lives, it helps their brain with ignoring this sidebar when they're not seeking a specific piece of information; in effect it helps make your sidebar invisible to your reader while they're reading your entries, and not always competing with your entries for your visitor's attention, which of course is the entire goal of this tutorial.

Along with altering its physical look, another great way to make your sidebar more useful for your visitor is simply to organize its contents in a smart way, and to give some extra thought about what supplementary material you're including in the first place. The beauty of this optimization is that no tech skills are involved whatsoever; it's simply a matter of thinking smartly, and pretending for a moment that you are a visitor to your blog instead of the blog's creator. In fact, why don't you do that right now, before reading more? Pull up your blog and take a look at it for a moment as if you were a visitor, randomly arriving for the very first time without knowing anything about you. Now imagine the pieces of information at a blog that such a first-time visitor might typically be looking for, that brought them to your blog in the first place; your email address, your RSS feed, a link to your archives, a way to search for a specific entry. Can they find the information they're looking for in under five seconds? Under ten? If it's thirty seconds or longer, do you really think that new visitor is going to sit there for that long and actually try to hunt down the information they're looking for? What are they going to now think of you after spending those 30 seconds hunting for something that should've taken five seconds to find?

One of the biggest mistakes I see on blog pages, in fact, is the mistaken assumption by the author that every piece of information in their sidebar is of equal importance, and should therefore all be presented in the same visual and organizational style. I mean, you've seen them yourself, I'm sure - the blogs with 30 little colored boxes running endlessly down the side, each of them the same exact shape and color, with the links presented in no particular order at all, making their contact information stand out no more to a visitor than the online poll they recently took concerning which "Buffy" character they most resemble. Instead, I encourage bloggers to think of their sidebar information as falling into one of three areas of importance:

Primary: The information most likely to be sought by a majority of your readers. Some information, for example, falls into primary importance no matter what the blog: contact information, a way to access the older material at that blog, etc. In other cases this changes from person to person; to a professional photographer, for example, a link to their Flickr account would be of primary importance, but to a high-schooler who just keeps candid photos of their friends there, it wouldn't.

Secondary: Information necessary for your website, but which isn't necessarily the must-have information the majority of your readers might be looking for. Examples might include your copyright information, your Creative Commons license, options for emailing that entry or commenting on it, tech info on who is hosting your site, and what software you're using to automate it, etc.

Tertiary: Information designed primarily to give your visitor a better sense of who you are; in other words, the fun, useless crap you see littering the sides of most personal blogs. A list of your friends, your Amazon wish list, your "what mood I'm in" button, the cute little cartoon icon of you - all of this is tertiary information when it comes to your blog.

The first thing, then, is to sit down and decide how all the information at your particular blog falls into this particular scheme. What is it that you do with your blog, exactly? Is it a supplement to a real-world profession? If so, then your professional information is of course going to jump to primary importance, and you probably won't want much tertiary information at all. Are you an artist? Some information that might be tertiary for others might then become secondary for you, or even primary - a list of links to poetry you've written, or information on what school you attended. If you're maintaining a blog primarily to amuse your friends, then it'd be the social-networking elements that suddenly become of more importance - your IM addresses, your Dodgeball and MySpace links. There is no wrong conclusion to this process, and the answers will change from person to person; the important thing is actually sitting down and envisioning your blog from the mindset of your visitor, and understanding who that person might typically be and what they might typically be looking for. At the end of this process, then, you should have a list of items usually found in a sidebar, now sorted into three categories.

At this point I encourage bloggers to jump immediately to their tertiary list and start looking for the things they can cut, no matter how painful it might seem to you at first. The web, unfortunately, is turning out to have the same temptation as it grows older as it did when it was brand-new; namely, the temptation to include every single option at a website that one can, simply because one can. When you take this attitude, you're insulting not only your visitor but yourself; you are declaring, "My blog entries aren't interesting enough to make you want to visit on your own, so I'm filling the page with a bunch of supplementary crap too, in the hopes that it will give you at least one interesting thing to do while you're here." Hey, if you're feeling that way about your blog, why are you going to the trouble of maintaining a blog in the first place? Be proud of what you're putting up at your website, and assume that it's worthy of demanding the majority of your visitor's attention while they're there. A "sidebar" is exactly that, a bar of information on the side, not a place to display information that directly competes with your entries for your reader's attention. A little whimsical information at a personal site is of course just fine, as far as I'm concerned; I have the Jason Pettus Instant Locator™, for example, perhaps the most unnecessary invention now in the history of MovableType. A little of this, though, goes a long way.

At this point, then, you should have a much more managable list of supplementary material you wish to include at your blog, still sorted into three categories of importance. (And bear in mind that some information might not fit that neatly into one of just three options; you might think of some as "secondary plus" or "primary minus," for example.) When it comes time for the last step in this process, then, of actually putting the information up at your blog, the easiest thing to do is to simply group them physically on the page based on their predetermined importance. Have you decided to display your email, IM and social-network accounts? Group them all in one colored box instead of a bunch of separate little ones; slap a "contact" label to the top of the box, and make sure that box shows up near the top of the page. The information in your sidebar, in fact, should always be displayed in the order of "primary," "secondary," and "tertiary," because this is the way we read here in English-based countries; we start at the top left corner of a page, and we move rightward and then downward to the end. When we move our primary information somehow to the top of the page (via sidebar as we've been discussing, or even a horizontal menu for the absolutely most important things), what we're doing is taking the information the majority of our readers are likely looking for, and moving it to the place on the page they automatically start at anyway. This will increase both the functionality and the usability of your blog dramatically, without having to get rid of the whimsical little details about your life that are the secret little pleasure for you of updating your blog in the first place.

Of course, let's not forget that rules are made to sometimes be broken as well, including by the author of this tutorial. My Instant Locator, for example, may be of only tertiary importance to the vast majority of my readers, but instantly becomes the most important thing on the page for a local friend who's checking it right before they leave work, to see if I'm in their neighborhood; it's the only reason they've come to the page, in fact, and likely they're not going to look at a single other element at all. Despite it being in my tertiary list, then, I've bumped it up to nearly the top of the page, to accomodate those readers for whom it is of primary importance. Also, as you can plainly see in version 11.0 of my site, there is a secondary item in my sidebar that obviously takes visual preference over the primary ones above it - my website's archives, to be precise, otherwise known as the Jason Pettus Online Repository of Life Experiences™. The problem in my case is that I will eventually have a much larger database of archived material than the typical blogger, once the import process is done - not only hundreds of thousands of words' worth of old blog entries, but also hundreds of photographs, hundreds of old poems, essays and short stories from when I was a professional writer, and dozens of multimedia files, all created during the last seven years of me maintaining various websites all over the internet.

Because of such a large amount of archived material, in my case I need to present a much more detailed way for readers to interact with that material - by searching for a term, sorting it all by date, sorting it all by subject, seeing a list of the newest entries posted, seeing a list of the newest multimedia files posted, seeing a personal list of subjects I recommend, and of course a link to simply go access them all at once. This produces a sidebar box that, frankly, is much longer than I want it to be; but since all the options there deal with the same database of archived material, and since such a large amount of options can so quickly become confusing to the average reader, I wanted a way of signaling to them that all of those options deal with the same database. And the best way to do that, in my opinion, is to simply include them all as one enclosed visual box, to really drive the point home in a concrete way. But since there's so much information in that one box, I have to visually do some modifications to it that make it stand out - give it a different background color than the other sidebar boxes, stretch its margins to accomodate all that text, etc. And so that's why you see something in my sidebar that I consider of only secondary importance, even though it competes with the primary items for my reader's attention.

Like I said, there are no hard and fast rules to any of this, which of course is what makes web design such an intriguing and fun subject (in my opinion, anyway). I can guarantee, though, that if you implement the steps outlined in these tutorials, and especially if you are using one of the premade templates that your blog's host provided, you will dramatically improve both the functionality and look of your web page, and give your readers a much more pleasant experience when visiting. You don't have to be a hardcore programmer, or a CSS guru, to accomplish these things; mostly it's just a matter of smart thinking, as well as teaching yourself just the very basics about tweaking computer code. Your readers will be glad you did.