LearnTips for Designing More Noticeable Website Sidebars

Jake Rocheleau
writes on October 22, 2013

Share with your friends


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.

web design ledger homepage advertisements sidebar

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.

hongkiat homepage blog sidebar facebook social box

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.

10words blog sidebar archives listing screenshot

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.

joystiq blog homepage podcast design sidebar ui

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.

wpbeginner sidebar icons inner landing pages design

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.

nova crystallis sidebar polling questions feedback webdesign

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.

crazyegg the egg blog fixed sidebar advertisement

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.


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.

13 Responses to “Tips for Designing More Noticeable Website Sidebars”

  1. As with any new (or newly discovered) technology, the impact of the end product is largely in the hands of the user.
    The better you understand how a quality security plan works and the equipment that ought to go into your small business, the safer your
    home will undoubtedly be. Are you going to be using
    a smart phone or tablet.

  2. The issues are likely to continue as no app, mobile or otherwise, is perfect, yet the basic functionality will only become more i – Pod Touch friendly.

    Having trust issues with other people can be very limiting to your own path
    to happiness. After accepting this condition, there is
    no further explanation as to what happens to the
    login information, for how long it will remain on record or even who has extended access to it.

  3. スーパーコピー商品、ブランドコピ ー財布、偽物バッグコピー財布コピーN 級品、ブ ランドスーパーコピー商 品、グッチ財布コピー,ミュウミュウ 財布激安。ブランドスーパーコ ピー銀座、ランドスーパーコピー財布。ブラ ンドスーパーコピー代引き、ブランドスーパーコピー専門店、ご購入する度、ご安心とご満足の届けることを旨にしておりますよろしくお願いします ありがとうございます http://www.ooowatch.com/tokei/vuitton/index.html

  4. 激安 ブランドスーパーコピー新しいものを販売しています。ルイルイヴィトンコピー、グッチコピー、シャネルコピー、ブランドコピー、ブランドスコピー、ブランドコピー時計などルイヴィトンコピー 激安 ブランド、スーパーコピー、代引き対応、レプリカ、安心通販ルイヴィトン偽物、シャネル偽物、グッチ偽物、エルメス偽物、クロエ偽物、カルティエコピー、オメガコピー、IWCコピー楽天ヴィトンコピー屋 http://www.bagkakaku.com/louisvuitton_bag_5.html

  5. 人気スーパーコピーブランド時計激安通販専門店私達は長年の実体商店の販売経験を持って、先進とプロの技術を持って、高品質のスーパーコピー時計づくりに 取り組んでいます。最高品質のロレックス時計コピー、カルティエ時計コピー、IWC時計コピー、ブライトリング時計コピー、パネライ時計コピー激安販売中商品の数量は多い、品質はよい。海外直営店直接買い付け!★ 2015年注文割引開催中,全部の商品割引10% ★ 在庫情報随時更新! ★ 実物写真、付属品を完備する。 ★ 100%を厳守する。 ★ 送料は無料です(日本全国)!★ お客さんたちも大好評です★ 経営方針: 品質を重視、納期も厳守、信用第一!税関の没収する商品は再度無料にして発送します http://www.brandiwc.com/brand-23-copy-0.html

  6. 弊社は海外安心と信頼のプラダ 時計 コピーです。2015 新作が満載!皆様を歓迎して当店をご光臨賜ります。ロレックス時計コピー,パネライ時計コピー,ウブロ時計コピー ,ブライトリング時計コピー,IWC時計コピー,フランクミュラー時 計コピー,ショパール時計コピー,フェラーリ時計コピー,グラハム 時計コピー,ハリー ウィンストン時計コピー等。サイトは世界一流ブランド コピー 専門店です。ぜひ一度当店の商品をお試しください。驚きと満足を保証致します。ご利用をお待ちしております。 http://www.ooobrand.com/bags/hermes/index.html

  7. プラダ スーパーコピー,プラダ 財布 コピー,プラダ 新作 財布ブランド財布コピー,ブランド スーパーコピー 財布,プラダ スーパーコピー 財布,シャネル財布コピー,グッチ スーパーコピー 財布,エルメス スーパーコピー 財布,ルイヴィトン長財布コピー,スーパーコピー財布,エルメスコピー財布,各種のブランドはかばんをコピーします偽物ブランド,激安偽物,ブランド財布コピー,エルメス財布コピー,ブランドのコピーブランド財布,ルイ?ヴィトンブランド財布コピー,偽ブランドグッチ財布,D&G,コピー財布偽物,偽物時計コピー,時計,ボッテガベルト,,靴,その他のバッグコピー,ブランド財布激安,ブランド激安販売,偽ブランド激安市場,通販送料無料專門店 ルイヴィトンコピー 児玉店,当店ルイヴィトン コピー 財布、ルイヴィトン コピー バッグ 全MAX80%OFF!期間限定SALE。最短即日発送。送料無料ルイヴィトン コピー,ルイヴィトン コピー 財布,ルイヴィトン コピー バッグ http://www.gginza.com/wallet/chanel/index.html

  8. BVLGARI(バッグ?財布?小物)CHLOE(バッグ?財布、小物)偽物ブランド,激安,コピー?ルイヴィトンバッグ,偽物?ルイヴィトン財布,コピーバッグ,ブランドバッグ,偽物バッグ,偽物シャネルバッグ,偽物エルメスバッグ,偽物グッチバッグ,偽物財布,コピー財布,時計の專門店 http://www.gowatchs.com/brand-203.html

  9. スーパーコピー時計専売店当店は海外安心と信頼のスーパーコピーブライトリング、代引き店です.正規品と同等品質のシャネル コピー代引き,品質が秀逸,値段が激安!ブライトリングコピー,代引きなどの商品や情報が満載!全商品写真は100%実物撮影です! お客様の満足度は業界No.1です!スーパーコピー時計,時計コピー ,ブランド時計コピー販売(n級品)店舗 ブランド腕時計(ロレックス,ブライトリング,タグホイヤー,オメガ,ガガミラノなど)の最新 情報やイベントを紹介する正規販売店と腕時計コピーの専門サイトです。当店はロレックスやパテックフィリップなどの新品スーパーコピー時計の販売と。 http://www.brandiwc.com/brand-4-copy-0.html

  10. 業界最高峰のブランドコピー 激安、コピーブランド、スーパーコピーブランド(N級品)通販専門店!ブランドコピー,コピーブランド,スーパーコピーブランド,ブランドコピー 激安,偽物ブランド、偽物のバッグ、腕時計、財布など激安で買える!全部のスーパーコピー販売品物のなかで私達のブランド激安が一番有名です http://www.newkakaku.net/co.htm

  11. 最も美しいスーパーコピー,超格安ブランド時計コピー激安通販専門店!ブランド品に憧れて、予算オーバーし、諦めなければならないことがありましたか。スーパーコピー品が一番いいチョイスだ思います。少しのお金でも、世界中一番人気を持つブランド品、貴族しか買えない贅沢品がゲットできます。素敵な外観と実用性に優れたブランド コピー バッグ,,スーパーコピー財布,スーパーコピー 代引き,エルメス コピー,ルイヴィトン 財布、ルイヴィトン バッグ、ベルトなどの逸品はお客様に提供します。誰でもブランド品を手に入れられるのは弊社の経営理念です。当店の最大目標はお客様が安心してお買い物が出来き、お客様の頼りになるお店を目指す事ことです。お洒落な貴方はきっとこのチャンスを見逃しなくよ! http://www.ooobrand.com/bags/hermes/index.html

  12. プラダ スーパーコピー,プラダ 財布 コピー,プラダ 新作 財布ブランド財布コピー,ブランド スーパーコピー 財布,プラダ スーパーコピー 財布,シャネル財布コピー,グッチ スーパーコピー 財布,エルメス スーパーコピー 財布,ルイヴィトン長財布コピー,スーパーコピー財布,エルメスコピー財布,各種のブランドはかばんをコピーします偽物ブランド,激安偽物,ブランド財布コピー,エルメス財布コピー,ブランドのコピーブランド財布,ルイ?ヴィトンブランド財布コピー,偽ブランドグッチ財布,D&G,コピー財布偽物,偽物時計コピー,時計,ボッテガベルト,,靴,その他のバッグコピー,ブランド財布激安,ブランド激安販売,偽ブランド激安市場,通販送料無料專門店 ルイヴィトンコピー 児玉店,当店ルイヴィトン コピー 財布、ルイヴィトン コピー バッグ 全MAX80%OFF!期間限定SALE。最短即日発送。送料無料ルイヴィトン コピー,ルイヴィトン コピー 財布,ルイヴィトン コピー バッグ http://www.gowatchs.com/brand-203.html

  13. ブランドコピー時計大人気を海外激安通販専門店ロレックス、ブルガリ、フランク ミュラー、シャネル、カルティエ、オメガ、IWC、ルイヴィトン、オーデマ ピゲ、ブライトリング、グッチ、エルメス、パネライ、パテックフィリップ偽物(コピー商品)のブランドの腕時計の販売、通販。 http://www.bestevance.com/iwc/index.htm

Leave a Reply

Learning to code can be fun!

Get started today with a free trial and discover why thousands of students are choosing Treehouse to learn about web development, design, and business.

Learn more