Is Your Blog Beautiful? Part II – Sidebar

By March 14, 2011Blog Design, Blogging

This is the second post in my series “Is Your Blog Beautiful?”.   The first post was on Headers and Navigation and also had some general thoughts on a beautiful blog.  Today we shall attack the sidebar.

Is your blog beautiful?You may not think that looks are very important.  They say Content is King.  I will be the one to burst your bubble just a bit.  Unless you are writing just for yourself and don’t hope to grow your readership and perhaps even find opportunities for monetization, you are wrong. If content is King, Design is Queen…and she holds some major power.  You have only a few seconds to draw a new reader in.  Even the fastest reader cannot digest your brilliant words in a matter of seconds, so they do like most and judge a book by its cover.

Readers want to look at something nice.  Companies want their ad to be placed on a good looking, organized site.  We want our blogs to be a reflection of ourselves and/or our topics.  You don’t have to design for others.  Your look can and should be all you.   It just needs to have a cohesive feel, be simple to navigate and easy to read.

Your blog is all about content, but all this other stuff you want people to see has to go somewhere.  Your options include inside the header, in your sidebar(s), in your footer or even floating on your background.  Today, we’re talking about where most people put stuff…the sidebar.

The Sidebar or Sidebars

The sidebar pulls us in and invites us to insert a million widgets broadcasting a bajillion different things.   Shop here, read this, follow me, here’s where I’ve been and on and on.  It is also so tempting to throw in as many affiliate links as possible, hoping for a few bucks here and there.  Proceed with caution.  That space is not so big and it gets crowded very quickly.  Having said that, I like looking at sidebars and have found some that effectively merge design with all the practical requirements.

In sidebars:  size matters.

It does not matter if you have 1 or 2 sidebars but beware sidebars that are larger than your content.

This is simple and while I am sure there is some blog somewhere that can pull this off,  I have not found it.  Your sidebar(s) should not be wider than your content.  If your content area is 400 pixels and you have two 250 pixel wide sidebars, the focus is on the wrong thing and your blog looks unbalanced.  I find it incredibly hard to read very narrow content areas so please leave some room.

Once you have decided on the overall width of your site, consider making the sidebars no more than 40% of your page area width if the sidebars are on one side and no more than 50% of your page area if your content is between the sidebars.  Also, and I will talk more about this in my content post,  please have a content area of at least (very minimum) 400 pixels wide.  When you get smaller than that things start to look funny.

Gigi from A Kludgy Mom kindly let me fiddle with her site to show you what I mean.  I changed her sidebars to be 550 pixels combined and reduced her content to 350 pixels wide.  See how the focus is in the wrong place?  If this were a real example, those sidebars would be packed chock full of stuff distracting from your words.

Kludgy Mom Altered Sidebars

Gigi’s blog was not harmed in this experiment.  She actually continues to have a content area of 513 pixels and a combined sidebar area of 412 pixels on her beautiful blog.

Just take a look at your blog or ask a friend to help you.  Where is the focus?

Make your sidebars large enough to read what is in them.

I know, this knife cuts both ways.  If you think of your sidebar as advertising things that you care about, whether or not this is actual ads or your buttons and social media links, then think in terms of real advertising.  The IAB (Interactive Advertising Bureau) regularly reviews and updates core standard ad sizes for online use.   The smallest standard size in terms of width is 160 pixels.  For bloggers, the square 125 x 125 pixel button is still popular.  If professional advertising firms believe they need a certain minimum width for an effective ad, shouldn’t you give the same space on your blog for what you want to promote?

I would recommend sidebars be a minimum of 150 pixels wide if you have only one and a minimum of 135 pixels wide if you have two.  This takes into consideration the bloggers’ beloved square and leaves some room for padding around the image or content.  If you do have a very narrow single sidebar and want to use square buttons, you could always just make them slightly larger to fill the space.  I just think a single narrow sidebar with a huge content area gets lost in the shuffle.

Give your stuff some space!

Don’t cramp your style.  After coming up with a design and a plan you can ruin the look of your blog by piling your sidebar so full of stuff that nothing can be seen but clutter.  Keep it simple.  Choose what you want to display first and above the fold (what people see before they scroll) and then prioritize your wants through the very bottom of your available space.  If there is not room for something without removing all padding or making it tiny, move it down.

Space is nice.  It lets the eye focus on each object you choose to show individually.   I like to see a few pixels between images and between one line of text and the next.  It’s just easier to read that way.  I like to see the same space between “categories” on the sidebar.  Whether it is simply space or a dotted line (like you see here) it is a good idea to visually divide separate areas.

Put your important stuff first and make it look good.

If you are writing a blog and desire subscribers, let people know how to follow you right up front.  This may be done in a header or floating but it is most commonly seen on the sidebar.  If you have a lot of followers, it may be a good idea to put this information right there.  I said it before…there is some sort of “magic” number in blogging that brings more followers.  If you show that you are above 1,000 or so followers, some people assume your blog is good stuff and will be more likely to join the ranks of your fans.  This is not bragging it just makes sense.  I don’t have a giant following yet (yes, you may feel free to follow me ad help a gal out), so I just found buttons I think are good looking and then drew one for email since it wasn’t included.  You can find awesome social media icons through google but I really like the ones I saw here.  The real key is to make it easy for people to follow you on your different social networks.  One note:  test all your links.  I have been to more than one site where the images linked to the wrong place or even someone else’s blog.

Check out Rachel’s blog, A Southern Fairytale.  Her header and tagline tell us exactly what her site  is about and then her sidebar tells readers right away how we can stay updated with all her awesomeness.  You can easily subscribe by email or click on any of those cute little kitchen gadgets to subscribe to her RSS feed, follow @sthrnfairytale on twitter, send her an email or subscribe to her YouTube page.  She also shows us that more than 1900 other people follow her, so we will not be alone in our love for her.   There is no clutter at all.  Just lovely.

Southern Fairytale Top

As a note, if your biggest thing is photography, put a photo or a slide show right up top too.  If you are a food blogger, you could consider a slide show of your recipes.  A crafter…show us your projects.  A reader is interested in what you love…show them what you’ve got and your sidebar has suddenly become interesting and oh so clickable.

The awesome Heather and Whitney write Rookie Moms, a blog that gives parents all sorts of ideas for things to do with even the littlest babies to keep our brains from atrophy and keep our offspring happy.  The niche here is obvious.  New parents or caregivers looking for things to do.  This is so popular and these girls are so great they wrote a book too!  Anyway, their niche is going to bring readers but what they want is for people to immediately be able to see what their site offers.  So, the first thing in their sidebar is a choice of links to baby activities by age.  Directly below that one can sign up for their email newsletter.  If you have little ones and see all those activities of course you want the newsletter!

Rookie Moms Header Nav

 Include categories in your sidebar – not just the dropdown (if you have not already done so in your navigation).

You want readers to see what your blog has to offer right away.  If you have not already thought about what your main categories are as I previously suggested, now would be a great time to do so.  You really want no more than 10 or so parent categories (travel blogs may be the exception) and anything else should be a sub-category or a tag.  This will help you in writing and in the reader’s ability to find the area they are interested in.  I rarely pull down a drop down list of categories.  When I do, I usually see a list of 20-30 for a newer blog and 50 or more for older blogs.  Clean up your categories and the reader will not even have to use a drop down, you can show them what you write about.

Kimba’s adorable blog A Soft Place to Land shows us her main categories in a style that matches her site perfectly.  Believe me, it makes me click on those categories, many of which I never would find through a drop down menu.  She also has a nice example of how to display social media icons vertically instead of horizontally.

A Soft Place to Land

Including categories is great for any blogger but is especially awesome if you blog in a niche such as food, DIY, photography etc.  Let people find what they are looking for fast!

A great example of a “mom” blog that does this is Ilana’s Mommy Shorts.  I love her left sidebar.  It makes me curious and I always end up clicking on one of those categories.  It is also very good looking and shows that a little color goes a long way!

Mommy Shorts

In good design, please align.

I don’t need to give you examples of this.  You look down a sidebar and one button is align right, one is center, text is align left and so on and so forth all the way down the page.  Pick an alignment and go with it.   For your sidebar titles I prefer center or left but as long as they are all the same it really does not matter.  As far as sidebar content, centered images look best in relation to the rest of the page but if you have left aligned or right aligned that is fine as long as they are all the same.  Your eye should be able to follow a line down.

Part of the problem here comes from inserting the code from other people’s sites into your own.  Many of these come with formatting and sometimes this includes alignment.  Here’s a secret…they want you to link to them.  You are being nice to do so.  You are allowed to make the image the right size for your site and to change the alignment for your site as long as it is not a paid ad or a contractual agreement to post a certain size.

For example, I have joined a number of networking and opportunity groups.  I really like all of these groups but to have more than a few badges at 125 pixel squares or larger would be a lot.  All of these badges came in differing sizes and alignments.  Some had margins, some did not.  I gave all of the images the same dimensions and then added a 3 pixel horizontal margin on each side.  I also reduced the size of the images to 65 pixels.  While I know they are small, these are not advertisers paying for a certain size ad.   I want to show my allegiance but I do not want to take up half my sidebar to do it.  When I add another badge, I will re-format these images to fit 3 x2 and each will get slightly larger and still fill the box nicely.

Mommy Words Groups

One really helpful thing is to create a post in draft form and edit your widgets in it.  This way you can use the WYSIWYG tools provided by WordPress and Blogger and remove all the existing formatting and isnert your own.  You can fiddle with sizes and margins and then you can have all of your text widgets saved in a draft post.  It works really well.  You simply pop over to the html tab when you like what you see and copy the html into your text widget.

Don’t forget the look of your sidebar headlines.

I mean the titles.  I hope you have them.  Again, it lets the eye quickly find what the reader is looking for.  I have seen so many sites where the headline is tiny and in non bold font that matches the content but is tiny compared to the images and / or text in the sidebar. Why not make them match the style of your site headlines or at least be slightly larger that standard text?  Whether you use google web fonts or a font that comes with your theme or code in an additional font as I did, it is a nice touch. 

I do have one note on fonts.  All browsers are not created equal.  That is why when you see the code for fonts there is a list of fonts from which the browser can choose.  One of these should be a standard font like Times New Roman or Arial or Helvetica that every browser, no matter how old school, can understand. 

For instance, my css for my sidebar headlines (and my post titles) is as follows.   font-family: ‘Museo 300′,’Georgia’,’Arial’,sans-serif;.  Notice how my special font Museo is followed by normal fonts.  My first choice, Georgia, matches the font of my content font.  The next are simply last choices, although looking at it I might switch it up to Verdana just because I am not a fan of Arial.  For me, Apple’s Safari browser hates me, so if you are using this you may notice that my sidebar headings are not exactly the same as my post titles.  I don’t know why, but I have learned to live with it and wait for it to change.  The point is, make sure to check your site in every browser and at least try to make those headlines pretty and noticeable.

Don’t go widget (gadget) crazy…include what matters.

The sidebar often gets filled up with every widget out there.  Choose wisely and code where you can instead of using a plugin.  Your site will load faster, you will be less likely to have issues with your site while upgrading your platform or one of your 40 plugins and your sidebar will just be cleaner.  In the end you should include what you really want there as well as any ads that are supporting your site.  I would say that if you are using Google Adsense or one of those ad programs where you cannot choose how it is formatted or what is advertised, I would place it below the fold and maybe even after all your other sidebar needs have been met.  They simply are not the most good looking things out there and every once in awhile an ad shows that you are just not a fan of.  You might as well not have this at the very top of your site.

If your sidebar includes widgets that play music or have pop-ups that come up when I click on your site, I will probably not stay for long.  While I want sites to look good, I do come for the content, and this is simply distracting.  A sidebar should not try to steal the show.

Give advertisers a nice place.  I mean, they are paying you.

If you do have a successful blog with lots of advertisers, know that the area above the fold is most valuable.  You can have 6 or more ads up here without destroying the look or taking up your entire sidebar.  I really like what Heather from Theta Mom did with her ads at the top of her site.  She created a Marketplace for women in business and then gave those businesses top space on her site.  The businesses are special and she says so in the headline.  These are “Marketplace Sponsors of Theta Mom.  Supporting Women in Business.”  She draws the reader in a makes them curious about those awesome companies. While there is not a lot of sace between the images, she has given them a group and made them fit her sidebar perfectly. 

Notice that Heather moved her subscription icons to he header in her re-design.  If you have advertisers, this can save a lot of space at the top.    Her other advertisers are further down the page, displayed in the same manner.  Heather did a great job making the practical look good!

Theta Mom Site Top

Your sidebar should only be as long as your blog’s content.

You know you have been on a site where the sidebar goes on long past where the content ends.  This is more of a design pet peeve…but it just looks bad.  Try opening up your shortest post (a Wordless Wednesday or just a couple hundred words) and scroll down.  This is the available space for your sidebar.  If you go beyond this your content area will just be a huge empty space.  Trim your widgets or re-organize.  Consider moving your blogroll or awards to a separate page.  Think about designing a  fat footer for your site (more on footers in this series).  You may want to give your sidebars a little space and reduce your content area slightly.  This is where you are really tweaking your design to both get everything you want and maintain a good design.  Sometimes you can’t have the cake and eat the whole thing too. 

If you’ve got it…flaunt it.

If you worked your tush off on a ebook, have a fabulous meme, a killer post series, write for another awesome site, have been featured on mega sites or just have something totally cool you did then by all means show it off in the sidebar!  It is much better than hiding this inside some random category or separate page.  Just format your buttons or links or badges to look good on your site and promote away!

The Sidebar List:

  1. In sidebars, size matters.  It does not matter if you have 1 or 2 sidebars but beware sidebars that are larger than your content.
  2. Give your stuff some space.
  3. Put your important stuff first (like subscription options) and make it look good.
  4. Include Categories in Your Sidebar – Not just the dropdown (If you have not already done so in your navigation).
  5. In good design, please align.
  6. Don’t forget the look of your sidebar headlines.
  7. Don’t go Widget (Gadget) Crazy…Include what Matters.
  8. Give advertisers a nice place.  I mean, they are paying you.
  9. Your sidebat should only be as long as your blog’s content.
  10. If you’ve got it, flaunt it.

So let’s get to rocking our sidebars.  Pretty soon we’ll all have some gorgeous blogs to show off! If you haven’t checked out the first post in this series please do.  It’s on Header and Navigation Design.

Have kudos or questions? Want to add something or respectfully disagree?  Post away in the comments and feel free to join the Mommy Words Blog Frog Community where we discuss blogging, design, parenting and so much more!

Join the discussion 49 Comments

Leave a Reply

CommentLuv badge