How to Quickly Design a Sidebar in an Easy and Strategic Way
A sidebar has one of two purposes. First, it is an opportunity to provide more value to your visitors. Second, it helps your visitors move more intuitively through your site and access your most important content faster and easier. If you think of your sidebar in this way, then you will create a better user experience for everyone who visits your site.
The fundamental principle in designing your sidebars is to always think of the user. Make sure that you’re adding elements that are useful for the user rather than adding in everything you see on other pages for the sake of not having white space on your site. I’ve done this, filled my sidebars with links and photos that provide no value. White space makes it seem as if nothings happening on your site, especially when it’s new.
It looks dull, okay. Still, putting the wrong things in this precious space is worse. Ultimately, you’re better off having white space than displaying a call to action that does nothing for your users. Or worse, takes them off your site never to be seen again.
Let’s Get Back to Goals
Just as with the homepage and any other part of your strategic website the priority is your goals.
What do you want the items in the sidebar to do for your business?
Typically, a sidebar has things like an email list opt-in, social awareness, announcements, notices, affiliate and revenue streams to name a few.
What’s your priority? Do you want to grow your social account? Do you want to use the sidebar for affiliate and revenue? What about trust building? Putting up a picture of the blog site owner and a little bit about that person behind the scenes can help with that.
Design Aesthetics and Limited Attention
It’s also important not to clutter your sidebar with too many calls to action. Ask yourself, does everything in the sidebar support my business goals? The more you have, the fewer people will pay attention. Be very strategic to what you put here. Every person has a limited amount of attention they’re giving their attention to the blog post or the video or whatever the main content is on the page and any calls to action on this sidebar will be secondary even more so if you have four, five or six different calls to actions and competing messages.
The most common ways to use a sidebar
- Promote other pages on or off your site
- Promote other activities and calls to action such as opt-in, register and buy now, listen to a podcast, take a poll, etc.
When Sidebars Make Sense (and Don’t)
Before you decide on what is going to go on your sidebar, you have to determine if a sidebar makes sense on your blog and web pages individually. For example, seeing a sidebar on a checkout page is way too distracting for the shopping experience. A sidebar on a blog serves to enhance and support the blog experience. Depending on what is on your blog, this may or may not be the case. Here are a few things to consider when making this decision.
Will the sidebar distract from the content on the page?
Typically for a front page where you want only one call to action and complete attention to that center focus, this may not be a good idea. A sales page, landing page, squeeze page or any page that is created to serve one specific purpose are other examples where a sidebar will probably be a distraction rather than being helpful.
Is there something that you want in front of your audience on every page?
If you have an opt-in in the footer, do you need it in the sidebar as well? If opt-in for your mailing list is a primary goal of your business, this may be the case. Not so much if you have an informational website that doesn’t necessarily catch leads.
Does the sidebar need maintenance and upkeep on a regular basis?
Another thing to consider is the maintenance of the sidebar. Not all information on the sidebar needs regular upkeep but if your content does, how will you handle that?
- Does your sidebar need regular updates?
- Will you be using this area for ad space or to deliver regular messages and promotions to your audience?
- Who will be responsible for updating this area?
- Has it been put on a schedule?
You don’t want to have all the promotions and messaging cluttering the sidebar, it will deliver a message that the website is not maintained regularly and that may off put some users. Hey, we’re fickle.
Is the sidebar element redundant?
Things like tag clouds, recent posts, meta, archives and the like only serve to duplicate functionality that is more than likely available somewhere else on the page. However, I don’t want to discourage you from looking at all the options to determine whether the element will benefit your users or distract them.
- Blog Archives
A blog archive gives quick access to all of the articles on your blog. This information can be redundant. However, if you have users on your site that prefer this way of using your site or you have content on your site that you prefer users to read chronologically this may be a good option for you.
- Recent Posts
Recent posts, like blog archives, are just a matter of looking at your blogroll and are probably not necessary.
- Featured and Popular Posts
Featured posts and popular posts are helpful to have if you want to put your best foot forward. Perhaps you want users to read specific things before they wander off to other areas of your blog. I would consider this being intentional with your users even though it is redundant.
There is no right or wrong element to put in your sidebar. The idea here is to get intentional for your specific audience. Put features in the sidebar that are the most helpful for your users. Put elements in the sidebar that guide your audience in the best way possible. Doing this will help users have the best experience on your site.
On what pages should you include a sidebar?
Do you need a sidebar in the shop, on the blog, the main page, the about page, shopping page and also in the cart? I hope not. Take a look at each one of these pages and decide what, if anything, should be on your sidebar for each.
The Shop Page
If your user is in the shop, you don’t want to plaster the page with calls to action that will take them away from the shop? Recent blog posts are great but not while I’m shopping, please. A shops sidebar should enhance the shopping experience. Recently viewed items, a quick view of the cart, product categories and filters are all things that make everything more comfortable for the user. If you’re experiencing a lot of abandoned carts you may want to add an opt-in on that page or you have something that does not compete but compliments what you’re offering in the shop.
The Blog Page
On the blog, it wouldn’t make sense to have a cart and recently viewed products. When users are on the blog, they’re not in a shopping mindset. You want to stay in the mindset of your user. If visitors are on the blog, they’re still doing research. They’re still trying to figure out if they trust you enough to go over to the shop.
Although a reminder that they have something in the cart is great, maybe a small icon at the top of the page is sufficient. However, in the blog sidebar, you want to add things that will enhance trust. More help and support content rather than sales content.
Front Page
On the front page restrict your calls to action to the absolute bare minimum. With that said, a sidebar on your main page is dependent on what type of business you are. For example, it’s typical to see an online magazine with sidebar navigation segmented into categories, new stories and maybe an archive. These navigation setups are helpful in the sidebar in this case.
A small shop that sells merchandise online or a small business that may offer courses or other digital products, on the other hand, should give users one thing at a time. A step by step approach may work for bloggers that make a living from affiliate sales as well. Segmenting blog readers by experience levels or other factors could help you get more strategic and focused in your affiliate marketing.
In any of these cases, you probably don’t want to put your primary CTA right next to a distracting sidebar.
About Page
You may or may not want to put a sidebar on your about page this is going to be a personal preference for you. The about page is something people look at when they’re already interested in you and your products. A sidebar might be okay here if you’re using it to highlight other information on the page and not distract from it.
Contact Page
Putting a sidebar on the contact page is only a deterrent from the one thing you want them to do, and that is to submit the contact form.
What to Ask Yourself to Ensure a Strategic Sidebar
For each of these, think about the primary subject of the page. Have the primary call to action in mind for that page. Will the elements you put in your sidebar enhance what’s on the page or distract from it?
Use these as guidelines for deciding whether or not you should use a sidebar in the first place. If you do use a sidebar, these questions will help identify what should go on that sidebar for that specific page.
There are plug-ins if you’re using a platform like WordPress that will allow you to make custom sidebars and custom footers for specific pages. Look into that if you want to get intentional about what you’re putting in front of your user. Here are a few I found that have excellent ratings just by doing a quick plugins search on WordPress. I have not tried any of them, so I urge you to do your homework on the company, the product and check out the reviews.
- Custom Sidebars – Dynamic Widget Area Manager By WPMU Dev
- Multiple Sidebars By
- Multiple Sidebar Generator By D
Things to Consider Including in Your Sidebar
Things you can consider including are:
- Trust elements like a photo and brief bio
- Link to the about page
- Announcements for your business, your blog or your shop
- An opt-in
- A search feature
Things you should not include on your sidebar
- Anything you have a dedicated landing page for
That’s all I’ve got for don’ts. Every page is different. Every website is different. Nothing is entirely off the table. Some users appreciate a tag cloud. If that’s your primary audience, give them a tag cloud.
However, a link to a high-ticket sales pages shouldn’t go here. Instead, use the sidebar as a point of entry. This suggestion is way beyond the scope of sidebars and web design because it assumes I know about your customers so take it at face value. If you’re selling thousand-dollar courses or high-ticket services, don’t get too far ahead of your customer. Instead, use a “find out more” button where they can opt-in for more information about the course. This way you can send them to a funnel rather than having them click on a link to a squeeze page from the sidebar and then losing them. Remember when you’re dating you propose a date, not a marriage.
If I know anything about relationships, business or otherwise it’s this. When you begin a relationship, you don’t ask someone to marry you during a casual conversation.
Final Note
The more you get to know how your users are interacting with your site the better you will become at optimizing it to give them the best experience possible. There are many tools available that will provide you with insight. From heatmaps to page recordings and browser analytics. Use these tools to help identify what people do on your pages and adjust your sidebar accordingly.
What’s Next?
If you need help setting goals for your website design here’s a post on setting website goals. For more on strategic web design check out this post that goes over front page design in more detail.
We love talking about branding and web design, but I also like to plan. I design graphics freebies and business planners for the users of this blog too! Don’t forget to check out all the free downloadable resources available throughout the blog. Download away! Check out some of our business planning downloads including the Instagram Planner, PowerPoint Moodboards, and the Blog Post Planner.
In the PrettyWebz shop, you can get freebies like social media overlays, blog headers, social media icons and themed digital papers and many other free and premium graphics. Visit the PrettyWebz shop to check them out.
Get more free graphics by signing up for the PrettyWebz newsletter down in the footer and never miss out on a freebie again!
Every resource we offer on the blog and in the shop is put together in a convenient package for you and deliver to your inbox every single month!
If you liked this post, I would love it if you pin this image!
