Your web visitors have a lot on their minds, so they skim through most of your well-written content. So how do you ensure that your announcements, don’t-miss-it sales, and new products are still visible and top-of-mind on your site?That’s where sticky bars come in handy. They stay on screen as your web visitors interact with your pages, and they offer an appealing way to keep your message top of mind. Ampry keeps your on-site campaign running with continuous A/B testing for sticky bars, pop-ups, and other optimizations that get people to click.
What Should I Put in My Sticky Bar?
A sticky bar (also called a floating bar) is a horizontal bar that moves down your web page as your web visitors scroll. It’s a web conversion tool that you can easily personalize to ensure that your high-converting message is displayed prominently and non-intrusively. Sticky bars can be used for any web content, such as sticky footers or social media buttons. You can put important messages, promotional offers, or discounts on your sticky bars. They have an advantage over pop-ups: they don’t interrupt your users’ browsing experience because they continuously display on web pages. Elements you can put on your sticky bar include:
- A logo. Web visitors expect to see a logo that links to your homepage. It should fit perfectly in a 50-pixel tall sticky bar, offer clear branding for your website users, and offer visitors to easily access your home page.
- A navigation menu. You can benefit from adding a navigation menu in the top left corner, where website visitors expect to find a navigation experience.
- A search bar. Web visitors also expect a website to have a search bar that they can access by clicking the navigation menu or on the top right of their screens.
Consider adding contact details, important messages, and calls-to-action on your sticky bar. It’s especially vital to have a sticky call-to-action button that moves down as a visitor scrolls through your pages. This way, when they decide to engage, the button is easily accessible and convenient to use.You could also put pages, tools, and frequently used parts of your website. All these elements will improve your web visitors’ ease of navigation. But use sticky elements sparingly. Too many sticky elements cause clutter, making web visitors more likely to close your footer and miss high-earning video ads.
Sizes on Desktop Vs. Mobile
Screen size significantly affects all aspects of design, especially navigation. For instance, desktops have large screens, which means more opportunities to add more elements to sticky bars. In addition, desktops can support fixed sticky bars, while mobile devices are typically limited to pull-out sticky bars.Mobile applications must conserve screen space. On an average phone, sticky elements average this size:
- A 50-pixel tall footer sticky ad occupies about 7% of the screen.
- A sticky video player with no video wrapper occupies about 17% of the screen (272 x 153 pixels).
- This leaves room for one more 50-pixel tall sticky element—and this is where prioritization comes in handy.
So when creating a sticky bar on mobile, the best practice is to limit it to 100 pixels tall and ensure it appears on scroll up and disappears on scroll down. This way, it won’t interrupt your website visitors as they’re reading through your web content.
A/B Testing Sticky Bars for Both Desktop and Mobile
A/B testing tests a variation of a web page element. This identifies any adverse effects the changes may have on conversion rates. However, if that variation successfully increases positive engagement and improves conversion rates by a significant percentage, it also shows that the idea behind the change is successful. When A/B testing your sticky bars for both mobile and desktop, it’s crucial to determine what works best. Change the font size, color, and even the sticky bar location to see what yields better results. Optimize everything you can, one element at a time. Further, it’s crucial to remember that what works for another website may not be a perfect fit for your target audience. So, you should also A/B test completely different sticky headers to tailor your online experience. There’s no single solution that works for every brand, so experiment and be flexible.
Sticky Bars Best Practices
If you’re looking to implement a sticky bar on your website, ensure you reap maximum benefits from it by following these strategies:
1. Don’t Use iFrames
Don’t be tempted by what might seem like a simple implementation. If you need your site to look good and work well on different devices and across multiple browsers, iFrames aren’t ideal because they’ll cause SEO and security issues.
2. Half-Hide the Search Function
If you want to use a fixed sticky bar, keep everything as simple as possible so it still offers your web visitors the safety net they require without being too irritating. So, try hiding your search input field and just use the magnifying glass icon.
3. Collapsing Menus
Some website users probably don’t need the sticky navigation bar, so you could make your sticky menus collapsible to give them that option. This may be useful, especially on mobile devices because they have smaller screen sizes, and you should maximize your use of mobile devices’ limited screen space.
4. Eye-Catching Color Combos
An eye-popping color scheme is the easiest way to make your sticky bars prominent and unmissable. Bright and off-the-wall colors can stop your web users in their tracks. For instance, bright and bold colors can make your messages and promotional offers stand out. However, the colors you use on your sticky bars don’t need to be bright or bold. Because even a stark contrast of dark versus light colors can help your sticky bars stand out.
5. Personalization
Personalization makes a substantial difference in conversion rate optimization. It has the power to capture your web visitors’ attention and ultimately entice them to sign up to make a purchase or sign up to your email list. However, web visitors are unique. Resonate with them by personalizing the sticky bar they see based on variables, such as age, location, gender, and any other data you have collected. In that case, you’ll be connecting with them as individuals, and they’ll notice a difference.
Final Thoughts
Many brands aren’t harnessing sticky bars as much as they should. It’s surprising considering the significant difference it could make in marketing campaigns, primarily when used alongside other traditional marketing strategies. Sticky bars might not be as visible as pop-ups, but they also contribute immensely to your conversions. They act as subtle reminders that follow web users everywhere they go on your site without being overly intrusive. The best practices include reducing the size of your sticky bars, personalizing your sticky bars to make your prospects act quickly, adding the necessary sticky elements, and A/B testing various elements to determine what works best. For more help optimizing your website, save your seat with Ampry’s CRO experts today!