Trends

How to Design Pop-Ups That Google Won’t Hate

We’ve all seen them, and we’ve all dismissed them more times than many of us care to recall. Pop-ups are annoying. But, they remain a reality of the internet because they work! So, where’s the sweet spot? How do you build effective pop-ups that won’t annoy users, and Google won’t hate? We found out.

Users aren’t the only ones who hate pop-ups – Google does too, especially on mobile devices. If you’ve ever opened a site on your phone and tried to close a pop-up that just won’t go away, you’ll know what I’m talking about.

So, last year the search giant announced it was cracking down on “intrusive interstitials” on mobile devices – aka pop-ups that provide “a poorer experience to users than other pages where content is immediately accessible.”

Google rolled out its anti-mobile pop-up algorithm update on January 10, 2017. If you’re wondering why I’m telling you about it 12 months later, it’s because I recently wanted to add a mobile pop-up to my own site and couldn’t find any useful resources. So I thought I’d put it together myself. I hope you find it useful.

What is an Intrusive Interstitial?

When you’re accessing sites on your phone, it can be frustrating when you open a site and you’re presented with a big ol’ pop-up that covers the whole screen.

As Google puts it: “Intrusive mobile pop-ups] can frustrate users because they are unable to easily access the content that they were expecting when they tapped on the search result.”

Google is user-focused and usability is usually at the heart of its algorithmic changes. While the changes regarding interstitials caused issues for businesses that rely on advertisements as a primary source of revenue, the signal change is a win for the user.

Google has provided three examples of pop-ups that make web pages more difficult for users to access, and which site owners should avoid:

  1. Pop-ups that cover the main content, either immediately after the user navigates to a page from the search results or while they are looking through the page.
  2. Pop-ups that display a standalone interstitial that the user has to click to close before accessing the main content.
  3. A layout where the above-the-fold portion of the page looks similar to a standalone pop-up, but the original content has been inlined beneath the fold.

Google has provided three examples of intrusive interstitials. If you use one of these techniques, expect your site to lose organic traffic.

In the wild, there are still a lot of websites that are defying Google’s crackdown on interstitials, like Harvard Business Review:

In order to read the publication’s articles, the pop-up forces you to dismiss the notice.

If you’re a designer or developer who missed Google’s announcement and are still using old-fashioned pop-ups that obscure the user’s view of your website, it’s time to ditch those tactics.

And if you’re a site owner who relies on ad revenue generated by interstitials, now you know why your traffic is down – and why it’s time to find another source of revenue.

So What is a Good Mobile Pop-Up?

By contrast, here are some examples of mobile interstitials that aren’t affected by the new signal in Google’s ranking algorithm:

  1. Pop-ups that are required for a legal obligation, such as for cookie usage or age verification.
  2. Login dialogs on websites where content is not publicly indexable, i.e. private content such as email or content that is behind a paywall.
  3. Pop-ups and banners that use a reasonable amount of screen space and are easily dismissible i.e. app install banners provided by Safari and Chrome.

Three examples of good mobile pop-ups that don’t negatively impact the user experience.

In the third example, it’s not 100% clear what a “reasonable” amount of screen space is, though going off the image provided designers and developers can make assumptions.

Online magazine Atlas Obscura uses a small pop-up on the mobile version of its site to collect email address. This interstitial fits the definition Google has laid out in its third example, but might even be slightly too big.

Atlas Obscura’s mobile pop-up.

FiveThirtyEight, on the other hand, plays it very safe. The statistical analysis news site displays a very small dismissible pop-up at the bottom of its news pages.

News site FiveThirtyEight displays a small pop-up for collecting emails.

Likewise, Wired also plays it safe, displaying a small dismissible interstitial at the bottom of its mobile site.

Wired displays a small pop-up at the bottom of the page for mobile devices.

Why You Shouldn’t Ditch Pop-Ups Altogether

Pop-ups, when done badly, are annoying and interfere with the user experience. In fact:

  • 70% of people say they get annoyed by irrelevant pop-up ads, and
  • Annoying ads are the number one reason why people would block a site.

Yet, when done right, pop-ups can be ridiculously effective and have been proven to work time and time again for lots of different reasons:

  • To encourage people to join an email newsletter
  • To highlight sales information, i.e. Free shipping for Valentine’s Day!
  • To showcase new products, i.e. Shop our new 2018 summer collection!
  • To ask visitors a question in order to gather insights, i.e. Would you like more payment options? Help us decide. Vote now!
  • To encourage visitors to download a lead magnet, i.e. Download our free ebook!

Here are some examples of websites that have found success with pop-ups:

  • WP Beginner increased its email opt-ins by a whopping 600% when it implemented a pop-up with exit intent
  • Visual Web Optimizer had a 50% boost in signups when it switched from just having a call-to-action button on its homepage to having a pop-up with a free trial offer
  • After launching a new site design, blogger and author Chris Penn removed the pop-up on his site and embedded it on the page instead. His subscriptions fell off a cliff and the pop-up is back.
  • Social media scientist Dan Zarella studied the bounce rate on his site with and without a pop-up. He found that the only big difference was the number of email subscribers, which doubled with the pop-up.

This quote from the Conversion Conference Blog sums up pop-ups nicely:

“[They’re] a lot like Justin Bieber: You either love ‘em, or hate ‘em, but lately you see ‘em everywhere – because they still pull in big crowds.”

Pop-Up Plugins That Meet Google’s Guidelines

Ready to start using pop-ups (that are unobtrusive!)? Here are some great plugins available on our plugin marketplace that follow Google’s mobile interstitial guidelines.

Ninja Popups is by far the most popular pop-up plugin with 30,000+ sales. With this plugin you can easily create gorgeous looking pop-ups that hook up to all the popular email services, including MailChimp, GetResponse, InfusionSoft, ConvertKit and more. There are 70+ stunning popups themes to get you started, and on mobile you can choose how you want your pop-ups to display (or not display) so that your site complies with Google’s mobile rules.

With over 200 templates ready to use and a visual constructor, Layered Popups is a fully featured popups plugin that leaves no stone unturned. As far as mobile pop-ups go, this plugin lets you create different pop-ups for the mobile and desktop versions of your site, or simply disable onload pop-ups for mobile devices.

ConvertPlus offers more than 100+ beautifully designed pop-up templates, which you can customize for mobile devices. This plugin provides a number of different options to help users meet Google’s mobile guidelines and enhance the user experience, including enabling and disabling pop-ups on mobile, and tracking cookies to avoid showing pop-ups to the same user more than once.

With its powerful visual editor, stunning pop-up templates and myriad of other features, MasterPopups is a fantastic option if you’re looking to add a pop-up to your site. What I find particularly impressive is how this plugin allows users to customize mobile pop-ups so they meet Google’s guidelines. Like other plugins, this one lets you set cookies and disable pop-ups on mobile.

Wrapping Up

I hope you’ve found this guide useful and you’ll dig it out the next time you design a pop-up for your site. Don’t forget mobile users! No one likes to see big, ugly pop-ups when they’re scrolling through pages on their phone. With the pop-up plugins listed above, you can create stunning pop-ups that follow Google’s guidelines, are helpful for users, and allow you to collect emails

For more pop-up plugin options, check out our plugin marketplace.

Recommended


About the Author Raelene Morey

Raelene Morey is the Chief Bird at Words By Birds, a digital writing agency that helps busy WordPress businesses create better content. Formerly managing editor at WPMU DEV. Computer science grad turned newspaper journalist turned web writer. When she’s not taming browser tabs she likes brunching and bushwalking.