Mailchimp Top Bar improvements for small screens

Just now, we released version 1.2.6 of our free Mailchimp Top Bar add-on.

Mailchimp Top Bar adds a quick and easy way for your visitors to subscribe to a Mailchimp list of your choice, by showing a horizontal bar at the top or bottom of your site. A sure way to increase your email sign-ups at a crazy rate while making sure not to scare off your precious visitors.

In this release, we mainly focused on improving the experience for your visitors on small screens and on sites with a dark background.

Better contrast for toggle icon

We've restyled the toggle icon so it uses the same text and background color as the bar itself. Before, we used a grey-colored (and customizable) icon on a transparent background. However, this made it hard to spot the toggle icon on dark backgrounds and it did definitely not pass the WCAG contrast guidelines.

See for yourself - much better right?

Stacked icon on small screens

When the bar is shown on a small screen where the icon does not fit inside the bar (next to the form fields), it will now stack on top or below of the bar depending on your bar position.

This change will make it much easier to close the bar on small screens, where the icon might previously have overlapped crucial form elements.

If the screen is wide enough to show the toggle icon next to the form fields, the icon will be moved inside the bar to preserve screen space (as shown in the first screenshot in this post).

Are you happy with this release?

Let us know in the comments, we love kind words! :)