November 19, 2014

What Size Should Your Social Icons Be To Fit Your Sidebar?



You started a blog or website, even got as far as to tweak the layout in such a way that you are really happy with its looks, but you trip over the installation of your social media icons. Sounds familiar? Well, believe it or not, but I've been there myself in the past.

When I found out how to install them on Blogger in such a way that they were actually clickable and lined up in the sidebar (tutorial: http://www.thedutchladydesigns.com/2014/05/how-to-make-social-media-icons-work-on-blogger.html) I still struggled with the size of the icons.

On Etsy you can buy the most beautiful social icons for your website and blog, but these icons come in various sizes. How do you know which size is right for your sidebar? Well, that's what I'm going to explain to you today and we will need a little math for that, so let's go!

1 - DETERMINE THE WIDTH OF YOUR SIDEBAR
When you decide to put the icons in your sidebar, or any area of choice on your website, you need to determine first what the width is of that area if you want to display your icons in a row.
The width of your sidebar area can be found in the coding of your blog or website and will be displayed in pixels. Most sidebars are somewhere between 200 (narrow) and 360 (pretty wide) pixels wide. If you are not able to find this number yourself in the coding you can ask your designer (if your blog or website was designed especially for you). In all other cases you will have to estimate what your sidebar width is and take things from there.

To determine the width of your sidebar you have to pay attention to any kind of border or padding around your sidebar too. Take a look at the sidebar of The Dutch Lady Designs. I has a grey colored border around it and inside that border you can see that the content of the sidebar is not stretched from one border to another, there is a little space between the border and the content. That is called padding.

The following are snippets of code from my website with which I want to demonstrate how the width of the sidebar is determined in the coding:

.column-right-inner aside{
width: 300px;
border: solid  #e8e3dc 15px;

.widget.Text .widget-content {
text-align: justify;
padding-right: 20px;
padding-left: 20px;

The purple coding shows the width of the inside of the right sidebar, which is 300 pixels, it also shows that there is a 15 pixels wide border around the sidebar. The blue coding is all about the content of this sidebar. You can see that I've given the content area of the sidebar a padding of 20 pixels on the left and the right side.

Now we have to do a little math: while my sidebar is actually 300 pixels wide, I gave it a padding of 20 pixels on both sides. That means that only 260 pixels are left for content (300-20-20 = 260). So any icons I want to put up in my sidebar will be placed over a width of 260 pixels. Now that we have found out the exact width of the area we want to display the icons on, it's time to determine the size of the icons.

2 - DETERMINE THE SIZE OF YOUR SOCIAL ICONS
After you've found out what the actual content width of your sidebar is, it is time to determine how big your icons have to be to fit in a row on this sidebar. In this example I will work with the size of my own sidebar, which is 260 pixels for displaying content.

But before we do a little math to find out how big your icons need to be, you need to know how many icons you want to display in one row on your sidebar. My website obviously has 6 social icons, but maybe you need more or less.

In my case, I needed to display 6 icons over a width of 260 pixels. So I divided 260 by 6, which is 43.33 pixels. Because you will always need a little bit of space between the icons, your icons should be smaller in size than that 43.33 pixels. Mine are exactly 42 pixels wide each, but to be really sure that they will all fit in a row you could save 5 pixels for space around each icon, which would lead to an icon of 38 pixels (43.33 - 5 = 38.33).

Now let's do the math for the situation of 5 icons in a row. Divide 260 by 5, which is 52 pixels exactly. To leave a little room between the icons I would go for icons that are no bigger than 50 pixels, and a little smaller, between 45 and 50 pixels would probably even be better.

Of course, in case of an even number of icons, you can spread them out over 2 rows under each other. Then you can make your icons bigger. In my case, if I wanted to spread my 6 icons over 2 rows, I would need to divide 260 by 3, which is 86.66 pixels for one icon. To leave some space in between the icons I would probably need an icon of 80 pixels wide in that case.

I hope this explanation makes some sense. I know that math isn't every one's best side, but with these issues it comes in handy.

Now that you know what size your icons should be to fit your sidebar you can buy a set of beautiful icons from a designer you love. It is important of course that the designer states the size of the icons, don't go buying icons just because you like them without knowing how big they are!




FOR SOME BLOGS & WEBSITES THIS METHOD DOESN'T WORK
If you have a website or blog that is hosted on another platform than Blogger you might have a design that let's you upload social icon images in any size. The coding of the design then takes care of resizing the icon into a fixed size.

The advantage of such a blog design is that you don't have to worry about the coding to make your icons work. All you have to do is upload a nice icon image and the program will take care of the rest.

There is a little downside to this as well though, which I found out last week when I got an email from someone who had bought a set of my social icons and thought they displayed too small on her site. I was a bit surprised when she mentioned she had used the biggest icons of the set, the ones that where 100x100 pixels. They should normally display pretty big. When viewing her site I found out what the problem was. She had such a site where you upload the image and the program squeezes it into a fixed size. So while uploading a big icon of 100x100 pixels the website only showed the icons in a 40x40 size. The only way to change this is to ask the designer of the layout to alter the coding in a way that the icons will display bigger.

HELP, I REALLY DON'T KNOW MY SIDEBAR WIDTH!
If you really have a hard time finding out your sidebar width, let me know in the comments below with a link to your website. I will try to find it out for you!

Share if you like:

No comments

Post a Comment

© The Dutch Lady Designs | All rights reserved.
Blogger Theme Created by pipdig