August 29, 2011

How to Add an Announcement Bar to Your Website (to Call Attention to Something Important)

Since launching my effort to make my first feature film, I started running a thin horizontal banner at the top of the site to let visitors know that my campaign is ongoing. A lot of filmmakers have blogs these days (present company included, obviously), and so I thought I might post about how to add an announcement bar to your own website. Typically you'll want to run an announcement bar when something special is happening for a limited time: you might be doing a fundraising campaign of your own, you might have a newly released DVD, or you might be running a discount on a product you're selling. If you're curious about how to add a similar bar to your own blog, website, or portfolio, here are a couple of good ways of doing so.

First, some folks are going to wonder, "why not just post a big announcement to your homepage?" Because traffic to your homepage is not all of your traffic. Anyone who comes directly to an internal page or post on your site -- from Twitter, Facebook, an email, etc. -- is not seeing your homepage. You can customize on which pages your announcement bar appears, but most importantly you can make it appear on all pages and try to reach the people who aren't coming directly to your site's home. At the same time, because it's only about 30 vertical pixels, it's very unintrusive. Okay, let's look at two options:

Hello Bar

I'm using Hello Bar to serve up the one you see at the top of this site. Previously I employed the bar to try to drum up support for the Japanese tsunami relief effort, and a thin banner across the top of a page can get you a few extra eyeballs on a link. When I say "a few," however, I mean it. Check out the stats to date:

Yup, out of 100,000 impressions in the course of a week, only 0.3% of people click through to the campaign. So don't expect an announcement bar to make or break your campaign! But every little bit counts in a Kickstarter campaign.

The basic functionality of Hello Bar is free, but if you upgrade to the Pro plan (which starts at $5/month and goes up based on number of clicks) you can do A/B split testing. Those are the colored lines in the chart above that spike at different rates on the right; basically, what you do is create a few different versions of the bar, with different blurbs and different designs, and then you see which one gets the most clicks. ((At the time I'm posting this, I've just started running a couple of new Hello Bar variants, which don't have enough views to be statistically relevant yet. On split tests that have been running for several days, one variation is usually clearly better than the other; the best technique is to switch to the best version, and then start running new variants of that one.)) Once you've figured out which one works best, you can stick with it, knowing that you're getting the highest percentage of clickthroughs (you know, a "whopping" 0.3% instead of only 0.1% or something). Of course, as with anything, the numbers don't tell the full story; it might be that if you make the bar bright red and SHOUT IN ALL CAPS that you'll get the most clickthroughts -- but those people might be pissed off at you for searing their retinas. I tried to choose a color that's part of my site's color palette, but if you come back to the site and it's a different color, you'll know what I'm doing: experimenting.

Okay, so if you want to install your own Hello Bar, how do you do it? See this post for instructions on how to install the bar on your Wordpress, Drupal, tumblr, Joomla, Squarespace, or Blogger web site. Wordpress also has a plugin if you're afraid of editing your theme files.

To answer a potential question -- "why wouldn't I just hard code the bar into my theme?" -- the idea behind the Hello Bar is that you install some code once, and then you use a separate interface to turn it on or off and change campaigns/copywriting/themes without having to ever re-edit any code. I also turned to Hello because of the advanced split testing and statistics interface. As I said, the basic version is free and the Pro account is cheap unless you're doing millions of page views a day (in which case, congratulations!).

attentionGrabber

The strangely-cased plugin attentionGrabber is a handy $12 Wordpress add-on that offers similar functionality to the Hello Bar, and offers a bit more customization in addition to some basic social media integration. I like the looks of the plugin a lot, but haven't experimented with it because it doesn't offer the kind of analytics that HelloBar does ("Hi, my name is Koo, and I'm a statsaholic"). According to the developer, more advanced statistics are coming in the next version. It's very nicely designed and has a nice tutorial video as well:

If you're not going to spring for the Pro version of Hello Bar, attentionGrabber seems like a great knockoff alternative as long as you're on Wordpress.

So there are two ways of adding an announcement bar to your own website. Too many times I've gone to a film's website and, while on the trailer page, had no idea that it was [currently playing in theaters, newly available on DVD, premiering on VOD]. The last thing we want to do as filmmakers is bury the lead. Happy announcing!

Your Comment

10 Comments

Hey Koo,

thanks for this article. Seems to be perfect timing as I'm starting my own site at the moment. No content just yet, I'm currently working on the basics. This is definitely something I may add on in the near future though. Thanks again.

August 29, 2011

0
Reply

"The strangely-cased plugin " ??? At one time this was cool. You didn't name you company Cash Cow, it was cashCow. Way to common at one time.

Maybe this just another case of everything old is new again.

The "Hello Bar" is one of those thing that you see but don't see. If you hadn't of pointed it out, I'd have never really seen it - just another piece of visual garbage. Maybe it needs to be larger (double/triple thickness) to stand out.

August 29, 2011

0
Reply
c.d.embrey

Thanks for sharing your experience with the Hello Bar...
I actually invested in the PopUpDomination lightbox after seeing it on your site, so I'm always looking out for nice-looking solutions for a (somewhat) unsavory issue.
Just as an addendum...for anyone using the WP Thesis Theme, they have a "feature box," which offers similar (though less subtle) functionality:

http://diythemes.com/thesis/feature-box-conversions/

August 30, 2011

2
Reply

if I wasn't truly, truly broke at the moment I would love to help. Hope you make the full amount and my very best wishes for a successful venture. Thanks for the info on kickback! Having written a pilot script for a feature film based on my novel, I appreciate what you're doing. In the unlikely event of me winning the euroLotto rollover on Tuesday I'll make a big contribution. Many thanks for your website. You are obviously on the ball and I appreciate it. "Break a leg!" (English stage term for good luck!) – Bob

September 3, 2011

1
Reply
Bob Romanoff

Thanks Bob!

September 3, 2011

1
Reply
avatar
Ryan Koo
Founder
Writer/Director

Thanks Koo! I too am a stats-aholic. That's why I'm not a big fan of other solutions, but I admit with a little thought I'm sure I could put some simple tags in there and get some good reports via Google Analytics. Thank you for sharing your results! I always love to see the outcomes of other people's tests!

February 15, 2012

0
Reply

I wonder if you wouldn't mind adding WOAHbar to this list? WOAHbar is a 100% FREE alternative to Hello Bar. I have even made it available to work on mobile devices!

Visit: http://haatch.com.WOAHbar for demo and FREE source files & Documentation download

Thanks -Haatch

August 25, 2012

1
Reply

Checkout My Site www.infoscreen.tk for Hello BAR.

January 5, 2013

1
Reply

I've used a bunch of these different plugins before but have noticed a ton of extra load time. Plus I'm not a fan of having to link back (free version of HelloBar), rather keep that traffic on my site.

If you have the ability, coding your own bar up is the way to go. Can make it look however you want, or exactly like one of the options described (ex. http://www.prolivery.com/)

If you like the tracking component, all the same stats, A/B testing, CTR, etc. can be tracked within Google Analytics. All you site data in one place. Plus having the ability to show different bars on different pages. (ex. http://www.pacificbridge.com/ different bars on homepage compared to publications page).

Obviously not everyone has the time or knowledge of how to do this, but I'd definitely recommend it.

April 7, 2013

-1
Reply

WOAHbar now has it's own web address: http://woahbar.com I have also updated the source code and documentation for easier use. Check it out!

August 17, 2014

0
Reply