How Wide Should a Sidebar Be? and What Do You Put on It?


Web Design - Sidebar

Websites use sidebars mainly to help visitors navigate through the website more easily. These sidebars usually contain links to the major sections of a website or provide the visitors with the information they might need as they navigate through the site.

If the sidebar is an additional navigation system of a website, it can also be referred to as something of a navigation bar. In this article, we’re going to go over exactly how wide your sidebars should be and what to add to them…

But first, here’s the quick answer, this will at least get you going. For the more advanced users, we’ll dive into some superb ways you can use the sidebar to maximize visitor retention – and sales.

How wide should a sidebar be? The sidebar is most often a percentage of the web page width. The text content within it is denoted as a number of characters or a specific pixel width. For a single sidebar layout, the width is 20% – 40% of the website width. For a two sidebar layout, the width is 25% per sidebar – totaling 50%.

A sidebar if designed properly can be a highly helpful tool for ensuring that visitors to your websites remain there for longer periods and are able to find more relevant content easily.

Unfortunately, though, most website owners don’t put as much effort as they could into designing the sidebar and instead view it as more of a place where they can randomly insert various links, widgets or information about the website.

Designing the Sidebar 

But if you want your website to be a well-designed and optimized one, then it’s crucial for the designer to consider various factors, so that’s what we’re going to outline below…

First, consider the number of sidebars you want …or need, the dimensions of each in terms of width and height, and the respective order of each element that be encompassed by the sidebar, etc. 

Overlooking the design of your sidebar could eventually result in fewer page views, fewer ad clicks, and fewer sales of your products or services.

If you haven’t monetized your website and aren’t expecting any sort of income, and instead merely want to share the content with the viewers, even then it’s essential to have a well-designed sidebar. They’ll provide your visitors with a smoother and more efficient navigation experience through your website.

There are lots of ways you can set out your website, usually determined by which theme you get, so make sure you get a theme that offers all the options you need. Or, for the more technically minded, you can make these adjustments within the theme files yourself, but I’d only recommend that if you really know what you’re doing.

In terms of sidebar size, there are two popular choices. Here’s a diagram of the layout widths in pixels and characters for the two popular types…

Most websites have an additional feature, whereby the interface or layout of these sidebars varies depending on whether the person is viewing the website on a desktop computer, mobile or some other device.

The theme I use here on Blogginkarma is the most super fast and responsive theme I’ve ever used. having tried literally hundreds of themes, If you like it, then I’d highly recommend this one, you can get this Acabado theme here. It’s simple, clean – the fastest theme ever! – which is becoming more important these days! And has the perfect features for a blog, especially if you’re starting your Affiliate marketing blog,

So, the ideal practice should be to test each size layout once you’ve made changes and when making any sort of alterations to the content of a sidebar.

In fact, I’d go a step further and say it’s good to get into this “checking” practice for any kind of theme changes you make – as you don’t always know what kind of adverse effects it might be having on your site overall!

Width of a Sidebar

Ideally, the width of the sidebar should be smaller in comparison to the main content area. This certain approach is quite sensitive due to the obvious fact that the main content of your website is normally the most vital element.

A narrower content area with unnecessarily wide sidebars would end up distracting the viewer’s attention away from the main content and onto the sidebars only. 

For a single sidebar on your web page, the ideal width would be somewhere between 20% and 40% of the total page’s width.

However, if you require more than one sidebar, then it’s generally recommended to keep the total width of all sidebars limited to 50% of the total page’s width.  For example, if two sidebars have a width of 20% each, then the third sidebar should not have a width of more than 10%. 

For constructing a single sidebar, you can even consider the Golden Ratio approach, according to which the width of the sidebar should be about 38% of the width of the main content area.

Readability Width of Web Pages

There is another factor why the width of the sidebar is important, and that’s because it affects the width of the main content area.

For readability purposes, it actually matters how wide your main content area is, the eyes lose focus on the next line if the text is too wide, and yet the eyes are worked too hard if they are constantly flicking to the next line when faced with shorter text – over a long period of reading. This is why books are always a similar width.

The width of the main text area is also dependent on the size of the font. Fonts, along with text area width is mainly “responsive” on most themes today. But how you initially set up your text width and font size still matters.

The ideal main content area – according to freshconsulting is said to be around 700 pixels wide. Which equates to around 65-85 characters.

I mention this point because, of course, the number and size of your sidebars will directly impact the width of the main text area. Good readability is a factor (albeit a minor one) for keeping visitors on your site – so it matters!

Providing an opt-in area on the sidebar for people to sign up for your newsletter, your club or your special offers mail is a great idea.



What Should You Put in a Sidebar?

Unlike the main content area, the main purpose of the sidebar is not to provide additional content to the viewers to spend lots of time reading. Instead, a sidebar mainly helps visitors acclimatize to your website and navigate it more easily – an additional helpful “tool” if you will.

Additionally, a sidebar is also a great place to add any extra information such as contact information or social media links that aren’t directly related to your website’s content theme – but are still extremely important.

There are a plethora of things you can include in your sidebar, but here are some of the popular choices for sidebar content…

A Brief Intro

A sidebar is a terrific place to introduce yourself to the visitors. This is an excellent way to convey your passion for the subject and establish yourself as an expert on it. You can also add a picture here to further personalize your website.

Affiliate Declaration

Particularly if you’re working through an affiliate scheme like Amazon, you’ll need to declare your affiliation. This is a good place to do it! Keep it short and to the point, but make sure you cover yourself regarding your affiliate commission links.

Contact Information 

Adding your contact information is usually reserved for the footer of your site, but a link to contact you on your site’s sidebar can be useful for web designers and bloggers who make use of their web pages to bring in money or business.

If your site happens to be a sales tool, then it’s crucial to make it as convenient as possible for the visitors to approach you. Plus, Google likes to see this information too!

Links to Any Other Websites or Blogs You Own

Your sidebar is an ideal place where you can further promote some of your other websites, blogs, and even online businesses.

List of Article Categories

In order to make it easier for visitors to access older content on your website, it’s often an idea to create classes and categories to archive your posts. Incorporate links to these categories in the sidebar – or even just the important ones…

Links to Popular Posts

By using a sidebar, you can easily display the links to some of your most popular posts, the ones which got the most traffic or those that received a large number of comments. The chances are high that any new visitors will also be interested in those posts.  

Links to Recent Posts

Make it easier for the viewers to gain access to some of your recent posts or updates by incorporating the links to those posts in your web page’s sidebar. This is a remarkable way to further increase your page views and make the viewers stay on your website for a longer time.

Email Opt-in, or RSS Subscription

If your line of business makes use of RSS feeds, then you could ensure that your readers can easily subscribe to your blog either through a feed reader or emails by placing your RSS subscription options at someplace prominent on your sidebar.

Social Media Links

Successful bloggers use sidebars as a way to draw significant attention to their various social media handles. For instance, you may want to incorporate links to your Facebook, Instagram, LinkedIn or other social media profiles in your blog’s sidebar. You can also include your Twitter activity in the sidebar too.

Advertisements

One major use for sidebars is to showcase advertisements because they’ll be displayed parallel to the main content area of your site. Your sidebar can carry a number of advertisements including Google adsense, Amazon Associate ads and more. Some ad networks even provide a sticky ad that follows the reader down the page.

It isn’t wise to overload the sidebar with ads, but it is essential to take advantage of the income-producing opportunities that the sidebar offers by incorporating a few ads on it.

That’s probably enough, I generally shy away from adding old blog posts and categories, people will surf your site plenty if they like it, and there are other good info and sales opportunities you can add in there anyhow!

So Finally…

Now you’ve got the basics of how wide the sidebar should be and what to add, try some tests, see what works for your visitors, you’ll get an idea of what is popular and what isn’t. Add your most popular product or service and see if sales increase. You’ll be surprised how a few minor changes can make a big difference!

If you’re ready to start your Affiliate Marketing journey, then you definitely need to check out my resource page, I’ve done them all and this affiliate marketing service is the best I’ve come across.



John Kilmerstone

I'm an Aussie living in Japan who enjoys traveling, photography and blogging. Please visit this website and explore the wonderful world of blogging. Discover how to turn your passions and pastimes into an online business.

Recent Content