How to Add an Announcement Bar to the Top of Your Website

Do you have an announcement or hot piece of news to break across your website? Want to get it in front of as many of your reader’s as possible without making changes to your web design?

Then it sounds like you are here for The Announcement Bar, the most eye-catching element in all of web design! Learn how to use and customize the above HTML and CSS code snippet below.

How to Design an Effective Announcement Bar

It’s no secret that an element that sits at the very top of your page with bright colors will get noticed, but what further steps can we take to make this area more effective?

First, it is important to reserve this element only for when you have an announcement to make. By overusing this element and even using matching brand colors, you risk making your user’s blind to its importance.

Like any news story your announcement is bound to become old and known. Keep an expiry date in mind based on user engagement and your own website’s news cycle, and remove the announcement when it is no longer fresh.

Within the Announcement Bar it is important to keep your text short and simple with a clear call-to-action. This can be a simple link or button that displays right after the announcement text.

In terms of spacing, your announcement shouldn’t take up a whole lot of space. In precise terms, keep the height no more than 100px—ideally around 50px-60px—and don’t stack content on top of each other.

Thanks to the placement, colors, and an important attention trigger we will look at below, this element doesn’t need much to pack a punch.

Show “New!” Content With a Badge

So far we have solidified the importance of your announcement with bold colors and priority placement.

However, there is one minor detail we can add to make your text even more exciting to read before it is even read!

A badge!

We look at notifications on our devices everyday, and no doubt our eyes are drawn to those little badges that speak to the deepest part of the pleasure centers in our brains.

Your announcements can benefit from this simple attention trigger by prefacing your text with a “New” badge.

Before any words of your text are read, the design of your announcement bar and the Badge have already triggered the following in your visitors minds:

1. Something important is happening here
2. It is new and never before seen
3. I can read this easily…

Furthermore, when something is new that must also mean there is something old. A subtle “New” indicator breaths a little life into your website and shows that your website may be worth further browsing.

To help your breaking news endeavor, a badge has been included in the code snippet example at the top of this article.