Sunday, January 4, 2009

Cleaning Sidebar Clutter

This post explains how I made the "buttons" in my sidebar and got rid of all the clutter over there.

Changes That I Wanted
Initially, I didn't really notice the clutter in my sidebar. But, I noticed it on other blogs that I read and it irritated me. I didn't like that I couldn't find things without scrolling up and down and just thought the whole thing looked messy and crowded. Then, when I took this standard back to my blog, I realized I was just as guilty.

Also, I wanted to add the bloglist gadget with the thumbnails (for reasons below.) I felt that I couldn't add that until I had taken away some clutter.

Inspiration for Change
I recently added a slideshow and I've had several people comment to me how much they like it and how effective they think it is. That planted a seed.

I should also state that what I did is not original with me. Several people have used the same idea. Perhaps I have taken it the farthest, but Casey Klahn has "buttons" in his sidebar and Kasie Sallee has buttons along the top of her blog. I'm sure there are others as well, but those two leaped to mind.

Changes I Made
  • Got rid of archives and category list - This felt a little radical at first. However, I realized these two gadgets bring the most clutter to the sidebar and I almost never use them. I never search through a blog by date and usually not by category either. These gadgets, although standard, aren't all that useful - particularly for the more established blogs that I would likely search (the archives and categories are just too numerous). As well, for any series or categories that prove particularly popular, I can make a button - hence my "book reviews" and "on blogging" buttons.
  • Made buttons to link to things - this makes the sidebar nicer to look at and also puts the words of the blog posts in focus.
  • Went for White - Although I liked my previous template with it's greys and "boxing in" of the blog - it just felt a little clunky. I decided that if everything was white, then colorful images would stick out.
How I Made the Changes
  • Got rid of archives and category list - In the blogger "Layout" Tab, "Page Elements" page, just edit the gadget (archives or categories) and remove it. If no one ever clicks on it, why have it?
  • "Buttons" - This is as easy as putting in a "Picture" gadget in your sidebar. Make an image the size that you want for your buttons in an image editor. In blogger, add a picture gadget, upload the image and fill in the url box to where you want the button to lead people.
  • Side note on picture gadgets - I did not give my picture gadgets a title (Casey Klahn does - that's the only difference between his and mine). That decision makes mine read more like a menu than Casey's, but it does mean that all of my image gadgets are labeled "Picture" in the blogger page elements page. This is slightly annoying, as you have to know which one you want to edit - it's not as easy as knowing the name. But, as I don't really edit these all that often I'm willing to pay that price. I really like the effect - more than I dislike this small inconvenience.
Use of URLS - some of the buttons took an extra step. I explain below.
  • Profile button - I got rid of the profile gadget, but I just made an "about me" button and attached the url to my profile to it.
  • Monthly Newsletter - Previously, I had the standard subscribe gadget for my monthly newsletter. However, that is just some HTML and Javascript (from google groups). I just pasted that into a post, posted it, and then I had a URL for it so I could make a button out of it. Thanks to Nithya for pointing out that I could make the date old.
  • Category buttons - those are just a matter of copying the "search/label" urls that are used on categories. (If you look at the urls for my book reviews and on blogging buttons you'll see that they are nearly the same apart from the specific search label.)
  • Contact Info - Again, I put the image with my email address into a post. Then used the post url to link to the button.
Blog Thumbnail Gadget
I wanted to add this because I know that I benefit from it's use on other blogs. When I have an eye-catching image at the top of my posts, I always get more clicks from other blogs. People see that thumbnail and click through to my blog. Since I have been benefitting from it, I wanted to extend the same favor to those blogs that I enjoy.

In the next month I plan to update my website and sales blog, to give a consistency to all my "sites." I haven't done those yet as I am thinking of restructuring things a bit, I'm trying to streamline my "updating" process. I'd like to make website updates as easy as possible. I'll let you know if I come up with any insights there.

On a final note, I do think that these changes have been successful - I have more clicks than usual on my sidebar offerings. :D That feels good.


Robyn said...

You are star, Rose taking the time to do this for us. Many, many thanks. I will certainly credit you when I tidy up my sidebar. Yours is looking very streamlined now.

I see you are considering three columns. Where I have seen people using that format it does seem to detract from the actual text of the blog.

S.G. Chipman said...

Something you should always do when using image elements as navigation - provide an alt attribute with a descriptive value on the img element. This ensures that those links have some context when images are disabled or not available.

<img src="aboutme2.jpg" alt="Learn More about Rose!" />

Should the image fail to load or if images are disabled in the browser that text will appear in its place. Assistive technologies like screen readers will also read that alt attribute text.

Rose Welty said...

Robyn, you are very welcome. Thanks for your thoughts on 3 columns too. I have never seen a blogger blog with 3 columns, only WP ones. I'll keep your thoughts in mind.

Steve, I agree with you. I don't think I can do that in blogger though. Well, I can add a title or a caption (text under the image), but that will break up the images with text. But, I will think about a workaround.

Ann said...

This all looks great Rose! I commented on your post the other day but that must have become lost in googleland. I like the cleaner look and definitely the white background works so much better. The blog roll thing is cool too - I just added that to my blog also.

Jo Castillo said...

Thanks Rose. I have been wondering about the category and archives button. You can always search in the window at the top easier, right. Thanks, I will use that idea! You are great to post about it.

I looked in the html for my photo on my last post and there is a spot for alt, the quote marks are there, just add your words in between the quotes. I had never checked that. Thanks, Mr. Chipman. I do it on my website and will now do it on my blog.

Katherine Tyrrell said...

The blog design looks much nicer! Well done

Thanks also for all the information about how you made the changes - really helpful.

Re archives and labels - I know they're a bit of a nuisance but just to let you know I use them all the time on other people's blogs........ I'm guessing you didn't factor that one in?

You can get archives down to one line if you change it to a dropdown format.

Check out my post about Blogger labels and why they are important.

Loriann Signori said...

Rose, Thank you so much for taking the time to share such clear, concise information. Your blog looks great! I am cleaning up my blog right now.

Rose Welty said...

Ann - thanks! I like the new photo too.

Jo - thanks. The sidebar stuff is dynamically generated though, I'm not sure I have access to those tags. But, yes, in a post you can fill in the "alt" for an image. That was a great video link on your blog btw.

Katherine - thanks. I'm fairly sure that you are not the average user though, :D. I'll keep it in mind.

Loriann - thanks for stopping by and introducing yourself. Glad to meet you, enjoyed my peek around your blog.

Jana Bouc said...

Great post and your blog looks really terrific. I love WordPress but it looks like maybe only Blogger blogs show up as thumbnails on the Recent Comments and Blogrolls. Do you know why some show up as pictures as some don't? It's such an attractive way to display blogrolls. I hope WP will add such a gadget.

Rose Welty said...

Jana, thanks!

I do think that the images only come through from blogger blogs, not WP blogs. I think it's because the thumbnails probably come from picasa, which is owned by google. (And all the photos that you upload to blogger go automatically to picasa.

I did look around to verify that because I am thinking of starting (or rather moving) one of my blogs to WP. That did stop me from considering messing with this blog!

Belinda Lindhardt said...

Great post Rose, these are much of the changes and thoughts i was going to put into my tasks in January :)
thanks for posting this :)

Cathy Gatland said...

Your blog looks really great, Rose - clean and attractive - thanks for sharing how. What I'd love to know is how you get your text to run across the whole width of the page - I've searched for how to do that but come up with zilch. Hope it's not html, which is still a mystery to me and something I feel I'll break if I mess with it! (I'm catching up on posts I've missed while away on holiday - sorry to get my comment in so late here!)