What can you do to promote timely content on your website? How does your website help you get attention to a new resource, campaign, or event? There are many ways a website can do this. You might be able to feature a piece of content on your homepage, in a pop-up, or sidebar. However, do you have have a way to make a persistent announcement that appears on all pages? A feature that balances getting attention while not being disruptive? Every nonprofit website should have such a feature. This article explores such a feature, the Announcement Bar. We detail different variations of it, and include examples. We also share how we include it in our content management system of choice.

Introducing the Announcement Bar!

An Announcement Bar is a feature that shows up on the top of a page and most often on all pages of a site. It can be as simple as a bar with one line of text that links to another page. Sometimes they are a little more robust with images and buttons.

Announcement bar examples

Announcement bars can take many shapes and sizes. Here are two examples that follow a simpler convention of a small bar across the top of the page.

The next example is more robust. It includes an image, button, and a much larger treatment.

What are the benefits of an announcement bar?

There are several benefits of an announcement bar.

1. Increased visibility: A persistent announcement bar placed at the top of the website increases the potential it will be seen by all visitors, regardless of the page they are on.
2. Improved communication: It provides opportunity to communicate important information to visitors.
3. Increased engagement: A strategic location and design can help increase engagement around your announcement.
4. Better user experience: An announcement bar should be designed to blend in with the look of the website while still standing out enough to be noticed. This can help provide a better user experience by avoiding more intrusive methods of pop-ups or banners.

Your website may have many channels to highlight timely information. You have a news or blog-like channel or a way to feature content on your homepage. The announcement bar compliments these options with a persistent communication in a key location on all pages.

What types of content can you use an announcement bar for?

Dynamic organizations often have a need to shout out about timely happenings.

1. Upcoming events or fundraising campaigns
2. Urgent news or updates related to the organization
3. Changes to services or policies
4. Calls to action, such as volunteering or donating
5. Highlight a new resource or article

The announcement bar is a small super power for your website and communication’s team to get the word out.

What are the qualities of an effective announcement bar?

An effective treatment should address the following:

1. Visibility: The announcement bar should be highly visible and located in a prominent position on a page. This is generally at the top of the website. It needs to be easily seen by all visitors.
2. Concise: The message should be concise and to the point, using only a few words to convey the information.
3. Relevant: The message should be relevant to the visitors and provide valuable information.
4. Attention-Grabbing: The announcement bar should use colors, fonts, and design elements that grab the attention of visitors. It should stand out from the rest of the website just enough.
5. Consistent: The style and design should also be consistent with the rest of the website. It needs to fit in with the overall look and feel.
6. Non-Intrusive: The announcement bar should not interfere with the user's browsing experience.
7. Actionable: The announcement bar should include a clear call to action that encourages visitors to take a specific action. This could be to visit a specific page, sign up for a newsletter, or register for an event for example.

The announcement bar vs a pop-up

Another common element used to grab attention on a website is a pop-up. These can be very effective. They take over the screen and demand a visitors attention. A pop-up prevents access to navigate to other areas of the site until closed. It is an example of an intrusive element.

This said there are times when that level of intrusion may be strategically merited. It's not what we would recommend for more frequent announcements. A site that continuously uses pop-ups runs a risk of creating a negative brand experience.

The announcement bar and its less intrusive nature can help. It can serve the more frequent announcements with less worry about a negative user experience. And if you use a pop-up you can do so for those less frequent major announcements.

How do we design and build announcement bars?

We explore the type of content and opportunities an announcement bar will showcase. Then, consider the simpler approach vs a more robust approach. Weigh the pros and cons of each with organization needs, content, and audience in mind. The more robust treatment provides opportunity for an image, a little more text, and often a button to catch the eye with. It also takes up more real estate. Seeing on all pages in such a way could feel a little bit intrusive to an active site visitor. The smaller treatment uses less space and gets out of the way of an active visitor. It is in a prime location but may not be as attention catching as the robust option.

Once we hone in on a solution we design and build it into the website. Our content management system of choice is Craft CMS. How we build it using Craft's tools may be different than something like Wordpress. This said, the concept would likely apply to most CMSs.

In Craft, we set up control of an announcement bar in the “Globals” area of the control panel. This area is for content that is often site wide or does not live on a specific page entry. Content for headers, footers, and an announcement bar are great examples of the type of content that makes sense for Globals.

We like to add a toggle to show or hide the announcement and we code our templates to respect the Hide or Show setting. Then we create fields that match the content and style of the bar designed. The following screenshot is an example for a more robust “call to action” style announcement bar.

An announcement bar for timely content

We have been adding announcement bars to existing client partner websites and include them in our plans for new website builds for a while now. It is a great way to highlight those timely communications to your website visitors. We appreciate balancing standing out while not being intrusive and as such is good for regular highlights. If you don't have such a feature on your site, we'd definitely recommend adding it.