An announcement bar is fantastic feature for a nonprofit website that balances getting attention for timely content while not being disruptive.
February 15th, 2023
By Seth Giammanco
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.
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 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.
Here is an example of an announcement bar shown at the top of embracerace.org. This is a persistent element that appears on all pages.
Here is another example. This is from scienceliteracyfoundation.org.
The next example is more robust. It includes an image, button, and a much larger treatment.
This is an example of a more robust treatment. This appears on coastguardfoundation.org.
There are several benefits of an announcement bar.
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.
Dynamic organizations often have a need to shout out about timely happenings.
The announcement bar is a small super power for your website and communication’s team to get the word out.
An effective treatment should address the following:
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.
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 example of how an announcement bar’s content may be managed in a content management system. This example is using Craft CMS.
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.
Sign up for our occasional newsletter highlighting recent articles to the Mightier Blog, Minds on Design Lab news, and other resources.
Minds On Design Lab is a strategic design studio with digital expertise. We’re passionate about elevating small and mighty teams in the social sector. We connect people to mission through beautifully designed branding, web, and print.
