Preparing Your Website for COVID-19 : Alert Bar

COVID-19 is drastically changing the ways businesses operate, pushing them to adopt new ways of taking care of their customers and employees. Even after the pandemic is over, the impact of the virus will fundamentally change the way we think about communicating, providing services, and using digital tools and channels.

Regardless of your industry, communicating with your audience in a timely manner has never been more important. Over the years, we’ve developed a library of simple yet highly effective tools for transforming your website into a crisis communications resource – and we’re sharing them with you to help fight COVID-19.

This will be a series of articles with each installment focusing on a separate tool and teaching you how to implement it. In Part 1, we’ll show you how to add an alert bar to promote breaking news, updates, instructions, and other key information to your customers during a crisis situation.

Adding an Alert Bar to the Top of Your Website

Alert bars – also known as sticky bars, floating bars, notification bars, or hello bars – are a flexible, easy-to-use tool that span the whole width of a webpage. Adding an alert bar is a perfect way to capture your visitors’ attention and keep audiences about your COVID-19 response strategy. A few tips on the usability of alert bars:

• Place the alert bar on top of the page where it will always be visible
• Make sure the color of the alert bar is different than your website’s main colors so that it immediately stands out
• Once an emergency is over, turn off your alert bar so it provides a disruptive presence when used in the future

While ideal for communicating your COVID-19 news and updates, alert bars can also be used for a variety of non-emergency applications, including:

• Changes to hours of operation or contact info
• Service changes for transportation authorities
• Limited-time sales promotions or offers
• Scheduled website maintenance

Regardless of your message, an alert bar is incredibly effective because it grabs a visitor’s attention without interfering with the rest of your website content.

This tutorial walks you through how to build out and customize an alert bar on your website. Below are the HTML and CSS required.

HTML

Add the HTML snippet to your templates or webpage, preferably at the top above any navigation or header so that it has prominent positioning.

<div class="covid-alert">
    CORONAVIRUS (COVID-19) ALERTS: <a href="#">Click here for the latest information</a>
</div>

CSS

Customize the background color and text/link colors by modifying the hexidecimal colors.

body {
    margin: 0px;
    min-height: 75px;
    overflow: hidden;
}

.covid-alert {
    background: #cc0202;
    color: #fff;
    width: 100%;
    padding: 15px;
    font-size: 16px;
    text-align: center;
    font-weight: bold;
    font-family: Inter, sans-serif;
}

.covid-alert a {
    color: #fff;
    text-decoration: underline;
    font-weight: 400;
}

Result

Thank you for reading, and let’s connect!

Thank you for reading my blog, feel free to subscribe to my email newsletter, and ask questions and give your valuable suggestions.