Website sidebars are a common design in most layouts. This commonly holds page elements which are not detrimental to the content, but include other means of traversing the website. These elements may include category listings, recent user profiles, a search bar, even badges for social networking profiles.
But what exactly makes your sidebar unique in comparison to the rest of your webpage? I want to go over some possible ideas for designing creative yet intuitive sidebars. Each website has different needs from visitors, so the purpose of your sideline-content will not be the same on every project, but understanding how users interpret sidebars can help to gauge how you should structure your own designs.
Representative Advertising
I couldn’t possibly ignore the idea of running advertising in the sidebar area. It’s perfect because the ads do not interfere directly with the site, yet they can still be above-the-fold and organized nicely. With that said it is important to remember Internet users are getting smarter. They know what to expect and outdated ads are losing their appeal quickly.
That certainly doesn’t mean online advertising is a dead market. You need to find products & services which appeal towards your audience. And possibly even more important, you need to ensure the advertisement itself looks good. Why should people click to find out about this awesome thing? This is often out of your hands but whenever possible try to use the highest quality of advertisements.
The site Web Design Ledger follows a great example of sticking to relatable advertisements. Many of these services would help freelancers, studios, and other creative professionals. But notice the ad images are also colorful and not too bad on the eyes. Nothing feels out of place and that’s an important feeling to strive towards. After a while you might begin earning enough to cover web hosting and other similar costs.
Online Social Elements
Social media is also crucial to brand identity. This has changed in recent years as most online companies feel the need to have their own Twitter and Facebook pages. Visitors like to follow updates and it’s a good way to get out news in a public manner.
To spice up your sidebar design you may think about including some badges or social widgets. The Facebook like box is rather easy to install and it showcases a network for your brand. If you can increase the number of likes to your page it might impress new visitors who have never heard about your site before.
You’ll notice the same example found on Hongkiat which includes a list of FB profiles and a list of recent activity. Twitter does have similar widgets that you can build from your own profile settings panel. And remember that these are only two social networks out of dozens you may be interested in using.
The best part about any of these networks is having access to their developer API. Websites like Pinterest, Tumblr, Github, and even Reddit allow developers to pull out specific information to display in a sidebar widget. Visitors who are familiar with these networks might dig a bit deeper and find a greater online presence for your brand.
Short Bits of Content
If there’s anything I’ve observed about Internet users it’s that we like things fast. Sidebar content should not be as detailed as the main page content. But it also doesn’t usually represent the core navigation, either. Sidebar content is based on split-decisions made by the user at-a-glance.
Use this to your advantage by including lists of articles, categories, archives, even specialty landing pages. You never know what a reader might be interested to browse through. It’s even better if you can design a widget to dynamically switch or collapse between lists. Then you pack more content into a single area without taking up much room.
The design on 10Words has a fantastic yet simple interface. You can access longer archives and a list of categories with the full post number. The custom typography blends nicely, and it makes the sidebar appear more prominent to the layout itself.
Don’t think that you are limited solely to article headlines. WordPress also offers post thumbnails which you can display to catch the reader’s eyes. Linking to a small image gives immediate context to the article link, which provides greater incentive for the visitor to click.
Unique Landing Pages
Don’t feel like you are stuck using the same type of content given in a default WordPress installation. If your website has a product or service to offer, you might try designing a sidebar banner and link to that page. The sidebar design from Joystiq links to their podcast along with a quotable section from a recent article.
The purpose is to get visitors browsing deeper into your website learning more about you and what you can offer. Not every blog is just a blog. Sometimes you can offer more than just written articles. YouTube channels, e-commerce shops, and definitely podcasts are just a few great examples.
Another one of my favorite sidebars can be found on WPBeginner. Using small icons along with descriptive labels they link to various inner pages explaining details about the site, such as the blueprint page which details all their backend services and plugins. Be creative with your content and don’t be afraid to try something new.
Gathering User Feedback
Not every website is geared towards user feedback. But feedback can add a sense of community into a website, and it lets visitors feel that their voice can be heard. Example feedback may come in the form of a survey, contact form, even polls to vote for new features or asking for opinions.
The blog design on Nova Crystallis has a community poll based on generic gaming questions. These may sometimes focus on website improvements or feedback. But just having some type of interactive element on the page can bring together a small yet adamant community of passionate readers. Never underestimate the amount of useful data you could obtain by linking to a web survey in your sidebar.
Fixed Scrolling Elements
I don’t think this technique can work on every website but it is worth mentioning. Sometimes you will have pages with a lot more content than your sidebar has. In this case the sidebar area will appear empty once the visitor scrolls down far enough. Consider keeping an item fixed after the sidebar ends, utilizing that otherwise empty space.
The sidebar on The Crazy Egg has everything seated properly until you scroll beyond the very last advertisement. It will stay fixed right at the top of the screen and move down with you along the page. Once you get up to the original position again it will drop back into place so you can view the other sidebar elements without obstruction.
Instead of running a fixed advertisement you might also consider a fixed newsletter subscription form. Or maybe a fixed social box with links out to your online profiles. There are plenty of ideas to run through A/B testing but the idea is to never leave your sidebar empty. It keeps the layout full and might hook visitors once they are finished reading lower in the page.
Closing
The purpose of a sidebar will vary between each website, but objectively a sidebar is created for secondary content which may be appealing to visitors. This shouldn’t be a distraction from the main content, but it should have something that gets people’s attention and curiosity. Noticeable sidebars are about unique and beneficial content. With this in mind it becomes much easier to design an interface around this content and test your results.
The post Tips for Designing More Noticeable Website Sidebars appeared first on Treehouse Blog.