Design, UI, UX, Inspiration, Website Examples

18 Website Announcement Examples & Methods To Notify Your Visitors

By Sandra Boicheva
August 27th, 2024

In this article, we’ll show you 18 website announcement examples along with different methods to announce a discount, limited offer, important news, and more.

When website visitors land on your online store, they might wonder about shipping policies, hunt for discount codes, or get excited about free shipping offers. This is where website announcements come in to give quick answers and limited offers.

Website announcement bars, also called notification bars, are perfect for giving these answers right away. They usually come in the form of a sticky bar that shows up at the top or bottom of a webpage. This small and simple tool does a great job of sharing important messages, promotions, alerts, or announcements with visitors.

These bars work like digital signs, pointing out important info or guiding visitors to specific content. Usually, they come with bright colors, short messages, and clickable buttons. The goal is to catch visitors’ eyes and get them to take action, like signing up for a newsletter or checking out a special offer.

Now that you know what a website notification bar is and how it works, let’s dive into some examples. See how major brands use them to capture attention and guide visitors through their online stores.

1. Adidas Announcement Bar with Drop-Down

https://htmlburger.com/blog/wp-content/uploads/2024/08/Website-Announcement-Examples-Adidas-Announcements-Bar-with-Drop-Down-Menu.mp4?_=1

In this first example, the Adidas store has the Extra 30% off Kids wear announcement as a sticky top bar. The unusual here is that instead of redirecting you to a new page, the bar has a drop-down menu where you can view the offer in detail, the discount code, and multiple links to the kids’ attire section of the website. As a best practice, the drop-down opens a full-page menu with a solid color background, to mute all distractions from the homepage.

2. Artlogo Special Offer Countdown Announcement

Artlogo is popular for its amazing custom signature creation. Of course, for a studio that takes pride in their design skills, the branding is also strong and consistent throughout their entire website. Even when announcing offers, the announcement bar has a specific color scheme and brand elements instead of the classic single-color bar with small-size text. Here we have a dynamic Summer Sale countdown announcement bar right above the top navigation that doesn’t hide any elements of the website, isn’t sticky and doesn’t need a close button.

3. Jenna Kutcher Announcement Banner Discount Code

Another way to add an announcement to your website is with a banner you can place on top or on one of the two sides of your homepage. In this case, Jenna Kutcher’s announcement banner is placed at the top of the hero section on her homepage to promote her design skills with a discount code. The banner is also consistent with the overall design in terms of a color scheme, fonts, and imagery.

4. Kohl’s Multiple Announcements Bar

https://htmlburger.com/blog/wp-content/uploads/2024/08/Website-Announcement-Examples-Kohls-Announcements-Bar.mp4?_=2

Kohl manages to place three different announcements in one place without making it a slider. In its original full-view desktop resolution, the site shows announcements for free shipping with a $49 purchase; Fast and free store pickup; and extra discounts during the customer appreciation event. Since these announcements are placed by priority, when you change the resolution or view it from different devices, you will see fewer of the original three offers. On a mobile phone, you will see just the ” free shipping with a $49″ announcement.

5. Wish Garden Herbs Multi-Format Announcements

In this example, Wish Garden Herbs use three different methods to announce promotions and offers. First, on the homepage, they place two top bars above the navigation and hero for their free domestic shopping and July sale.

Second, when you scroll, a modal window pops up to announce specific items that you can purchase with a discount for a limited time. This announcement is much harder to ignore as it takes the central part of your screen and is much bigger, showing the items with images and details.

And last, another modal popup up with another offer where you can choose 2 free drinks from a list if you meet the specific requirement.

6. Awwwards Conference 2024 Animated Announcement Bar

https://htmlburger.com/blog/wp-content/uploads/2024/08/Website-Announcement-Examples-Awwwards-Conferences-2024-Announcement-Bar.mp4?_=3

Like any other year, Awwwards proudly announces its annual conferences in a top bar with a smooth animation that is hard to ignore. It bolds the topic ” Awwwards Conferences 2024″ followed by the locations and a smiling emoji. As usual, it’s never about how big the announcement element is, but

7. Kiss My Keto Orders Queue Announcement

Aside from the epic brand name, Kiss My Keto also knows how to make an announcement. Below the logo and main navigation, you can see a red bar with important info about the state of the orders over red background that’s hard to miss.

8. Radio Rock Ragusa Souvenirs Announcement

https://htmlburger.com/blog/wp-content/uploads/2024/08/Website-Announcement-Examples-Radio-Rock-Ragusa-Merch-Available-Soon-Announcement-Section.mp4?_=4

Another way to include less urgent announcements is just to put them in a separate section on the homepage below the fold. In this case, Radio Rock Ragusa announce the upcoming merch with fun animated typographic elements.

9. Create Her Empire Free Class Announcement Bar

Create Her Empire mixes two of the announcement methods we have seen so far. The creator announces her free classes and limited seats in a removable top announcement bar, however, the design matches the banners from previous examples with all the branding details such as matching color schemes and typography and a photo of the educator.

10. Lewis Howes Event Audio Announcement

Lewis Howes is a motivational speaker and as such, uses his website to motivate further with multiple videos, featured podcast episodes, and, of course, announcements. The moment you land on his homepage, you notice the first announcement as part of the main navigation bar with a CTA button.

When you scroll below the fold, you can see a bigger, more detailed banner of the same announcement. in case you missed it the first time. Additionally, there’s also a sticky bottom bar with an audio player with a voice-recorded announcement and the option to share it to your social media.

11. Tushy Multiple Announcements Bar

https://htmlburger.com/blog/wp-content/uploads/2024/08/Website-Announcement-Examples-Tushy-Announcements-Top-Bar-Slider.mp4?_=5

This one is a classic. Tushy has two different announcements to make but instead of squishing them one next to another, it just uses the bar as a slider.

12. Copyhackers Subscription Bar

Sometimes you don’t have anything to announce, but you can still use an announcement bar to show visitors something important. For this example, Copyhackers simply uses the element to convert users into newsletter subscribers.

13. Misty Fiesta Greetings Videos Discount Sticky Top Bar

Another classic example of an announcement bar comes from the wholesome fellas from Misty Fiesta. It offers 10% off the first order over a contrasting dark blue background that stands out from the clean white website.

The bar redirects to a page that gives more details about the offer and the discount code.

14. Golfstories Webflow Announcement Bar

The position is also something to consider when you want to add an announcement bar to your homepage. In this example for a Webflow banner, the announcement is under the main navigation instead of sticking to the very top of the page.

15. Approve Me Bottom Announcement Bar

Here’s another cool method to make an announcement. You can include it on the bottom of the page where visitors can see it after they’re done scrolling. This works especially well if your homepage is relatively short. In this example, Approve Me made a very nice design where the announcement bar overlaps with the live chat icon.

16. Acer Promo Announcement Top Bar

Acer gives a very tempting limited offer for users to get Star Wars Outlaws for free by purchasing any Intel Core 14th Gen product. The announcement bar leads you straight to the eCommerce store with already filtered products that match this requirement.

17. American Eagle Announcement Bar Slider

American Eagle is another example of an eCommerce website that uses more than one method to announce offers. It has the usual top announcement bar with three different offers in a slider.

And it also uses a popup modal to announce a limited-time deal with a live countdown once you start scrolling the homepage.

18. Targeted Visitors Discount Sticky Top Bar

In this last example, Targeted uses a big generous sticky top announcement bar that follows you everywhere when you scroll the homepage. It also has the option to dismiss it if you’re not interested.

Alrighty, folks, that’s a wrap!

Website announcement bars are an easy and effective way to keep your visitors informed and engaged. They help you share important messages, promote special offers, and guide visitors to important parts of your site. As seen in the examples, many brands use these bars to improve user experience and encourage action. Try adding an announcement bar to your website and see how it can boost your communication and visitor interaction.

Hey, before you go, don’t forget to check out our other awesome articles on UI/UX design! We’ve got loads of tips and inspiration to help you create stunning designs that will blow your mind.

Popular Posts