Welcome Guest!
Search
My Sites
Navigation Links
Copyright
All music on benbarden.com is free to share for non-commercial use only. Please see the music pages for more information.
All other content: Copyright © 2009 Ben Barden.
All Rights Reserved.
Sidebars: where do you put yours?
< Jargon Buster: Ping | Unsorted Posts | The pitfalls of not finding a niche >
If you're reading this in a feed reader, have a look at my home page as I've just updated the layout.There are lots of different layouts that you can try for your website or blog. Here are a few examples.
1. One sidebar.
You can put the sidebar on the left or the right, with the content filling the rest of the page. The last design I used for my home page used a single right sidebar. It's a simple design that can be very effective. One example is the ALA design (ALA = A List Apart), though ironically the aforementioned site now uses a different design. I guess we all move on!Even if you're very choosy with what you put in your sidebar (as I am), it's all too easy to fill it up. The information that appears "above the fold" (i.e. visible without having to scroll down) should be the most important things, but what if you have a lot of things to include? Can you fit it all in?
2. Symmetrical sidebars.
This layout includes one sidebar on the left, one on the right, and the content in the middle. This is referred to by glish.com as "the holy grail". With relatively narrow sidebars I think this is a great layout to choose, but in some cases I feel a bit "boxed in" as the content area is a bit too narrow.There's always a danger of having too little room for your content if you use more than one sidebar, but with the upper area of the page being in high demand, what choice do you have?
3. Double sidebars.
This is the method I'm using now. It keeps both sidebars together, either on the left or the right (usually the right), with the content filling the remaining space.Not so long ago, I left a few comments on people's blogs suggesting that they could combine their double sidebars into one long sidebar to reclaim some width in their content section.
The problem with doing that is a lot of your sidebar content will end up being halfway down the page. Subscription links, advertisements and assorted links may benefit from being at the top - and it's not easy to fit it all into a single sidebar.
I see this method being used a lot and I think it works really well. Note that my site changes to a single sidebar when you go to view a post, though - I think this achieves a good balance.
4. Triple sidebars.
I'm not a huge fan of this method, but it can be used to good effect. Over at this girl's weblog, you'll see what I consider to be a great use of this layout.The main drawback is that your content ends up looking like a sidebar. But with a little bit of thought (mostly via font sizes) you can get a really good look with this method.
What's the best method?
Mostly, it depends on what you have to put in your sidebar. If you can live with one sidebar for now, it gives you more space for your posts. However, if you find yourself adding more and more to your sidebar and you've already tried to reduce your clutter, you could consider adding another sidebar.Of course this doesn't tell you how to add sidebars. This is one case where I think it's better to look for existing layouts for the system you use and go from there. Most layouts will already be available - they can then be customised with your own images and colours. This is far easier than building a layout from scratch.
If you use Majestic or you want to give it a try in future, we have layouts with one left sidebar, one right sidebar, and symmetrical sidebars. These are built-in - just choose them from the list and away you go.
Over to you...
What layout do you use?What do you like about it?
What don't you like?
Would you prefer one of the layouts listed above?
Related Content
Comments on Sidebars: where do you put yours?
My current preference is for 2 sidebars together on the right. I think it looks better than one on each side. I tried having a theme to each sidebar, one for blog stuff the other for the "about me" stuff and ads etc, but I've now got content mixed around somewhat, mostly to even up the sidebar length.
I've been doing the sidebar wars. Have not come to a real conclusion yet. One looks better. Two seem to be getting necessary and yet I wonder if I just need to do something about my packrat tendencies really. So, still not sure which is working for me. I'm back to the double sidebar right now.
I always struggle to settle on a design, but in the end I've gone for symmetrical sidebars.
It can feel a little boxed in, but it just needs some experimentation with widths, which is what I'm trying at the moment.
I do like the 3 sidebar example above, which feels remarkably spacious, despite the fact it's actually got a smaller text width than my blog...
But essentially a lot of it isn't down to the amount of sidebars, but how much is crammed into them. Sites running adverts are always more prone to feeling cramped and overloaded, and suffer with load times, because there is so much more on the page.
It's hard to get the balance right, but I guess it depends on your reason for blogging, and how important the feeling of space is...
I think you hit the key in the last paragraph. Declutter! It does depend how much stuff you want to put in, but I think there's good reasons for getting rid of as much stuff as possible.
I tend to ignore sidebars if they have too much stuff in them.
Skelliewag.org is a good example of 2 sidebars, yet not cluttered.
Welcome to Dan & kristarella. Thanks for joining. :)
It seems like this is a subject that we change our minds about. I think this is true of quite a few things relating to design. Is it that we get sick of our existing design or is it that a site can outgrow a design?
Actually, this has given me an idea for a new post.
To be awkward I like two right columns and a flexible left column with the whole page having minimum and maximum widths - so that they are not too wide on my widescreen monitors.
I have not been able to get this sort of layout to work with all browsers though so don't think it is possible just yet.
I have two sidebars, both on the right.
Ok, 2 points I want to make. First, if you can, make sure your content comes first, before the sidebar, in the HTML (HyperText Markup Language) source. You can "View source" in Internet Explorer, or "View Page Source" in Firefox. Search engines (like Google) read only text, so it's better to let them read your content first than subject them to filtering the sidebar HTML.
If you want the sandwiched look or a left sidebar, you can use CSS (Cascading Style Sheets) to position the sidebar so the HTML still has content first, sidebar text second. Get a web developer to help you. Oh man, I'm introducing jargon faster than I can explain them...
Second, it depends on your audience. If you've got Google Analytics (Ben wrote a great article on this), check out the screen resolution part. I cater mainly to tech people, and the screen resolutions can be huge. I've got visitors with 1920 by 1200 pixel screen resolutions. Just thinking about it is increasing my myopia...
Based on that information, you can decide what kind of layout best suits your site. Of course, you must also like it. :)
thanks for the compliment ben.
Sue, I haven't tried setting maximum width and height values due to the issues in some browsers. It's a shame really. It could be quite a handy thing to have.
Good tips there Vincent! And Kara, thanks for stopping by. :)
beetle-blog.blogspot.com/ has a new layout with 3 columns done well. Not cluttered looking. I'm going to see what I can do along those lines.
I find sidebars such a hard one. So hard to decide what to put where, what not to put anywhere and so on. *sigh*
I've not seen 3 sidebars before. That was quite interesting to look at. And it does actually work on that blog.
I tend to agree about a left AND right sidebar. You need to be very careful not to end up with a "boxed in" feeling. It can be done but the balance is crucial.