Avoid any mobile interstitials which “make content less accessible to a user.” In other words, you should resist displaying interstitials 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.”

These rules apply only to the landing page, for users coming from a search engine.

What’s interesting is that Google’s guidelines still allow a lot of options. After all, you’re free to do whatever comes after the landing page. Plus, you can still display mobile popups on the landing page as long as they don’t make the content less accessible.

Does this mean you should simply wait until the second page is loaded to display your annoying mobile interstitial? Certainly not!

Reason #2: UX matters too

Mobile UX is a complex topic. 10 years after the first iPhone was released, opening a new era for mobile devices (we won’t go as far as considering that Blackberry was selling smartphones), UI designers and CRO experts are still struggling with user experience on mobiles.

And conversion rates on mobiles remain lower than on desktops and tablets.

In this context, you need to keep your mobile navigation clear and simple. And unfortunately, responsive popups are just not up to the challenge.

Why?

Because it’s difficult to make sure they won’t hide any important content on the page.

Plus, users will probably have a hard time inputting their email in a popup which was designed with desktop in mind.

And finally, because most of the time, responsive popups are responsive up to a point. In other words, chances are their design won’t look optimal on a phone.

Need proof? Look at this campaign on Ralph Lauren’s website.

The design is broken. The popup hides the website content. And it’s displayed right away when you land on Ralph Lauren’s website (exactly what Google asks webmasters not to do)

Let’s do a quick recap before diving into the last part of this article:

In a world where mobile represents 50% of the traffic, you have to capture email addresses on mobiles

And building your email list on mobile requires more than responsive popups.

All set? Let’s see now how you could collect emails on mobile without annoying your visitors.

Part 3: How you can collect emails on mobile and keep your visitors happy

Step 1: Pick the right incentive

This is probably one of the only sections where what you applied on desktop can work on mobile as well.

For mobile visitors as for desktop devices, you need to provide a good reason for your customers to subscribe to your newsletter.

This reason can be the promise to receive great content. Plain and simple.

You can also use a coupon. Like Carbon38 who offers 15% off to new subscribers:

It can also be a surprise. Beyond Yoga simply mentions a “welcome gift”.

Now that you’ve picked a proper incentive, let’s dive into the format and position of your popup.

Step 2: Choose the appropriate format and position

As we discussed earlier in this article, mobile popups must follow strict rules when it comes to position and format.

I will walk you through 3 ways you can use them to enrich your contact list without crossing any SEO or UX red line. I ordered them from the easiest to implement to the hardest.

I’ll also share the result of an ABC test of these 3 options in the last part of this section to help you pick the best strategy.

Strategy 1: display a full-screen modal on the second page

Remember what Google said? Don’t hide any content on the landing page. If you want to adapt your popups to the new SEO rules, the quickest method is to wait for the second page to display your big interstitial.

Pro: it’s 100% compliant with Google guidelines

Con: not sure your visitors will appreciate being interrupted during their navigation.

Strategy 2: use a smaller bottom popup

You could also use a smaller popup. This would make sure important content doesn’t get hidden. And it won’t get in the way of your users.

This popup on Onitsuka Tiger is a good example:

Pros: It’s 100% OK for Google. It’s also clean in terms of UX. And you can display it on landing, which means that it will reach a large audience.

Con: it might be challenging for users to subscribe as the email fields are very small.

Strategy 3: use a call-to-action displayed on every page to trigger your popups

The last strategy you can use to capture emails on mobile with popups is CTA-triggered popups. In this scenario, the user is presented with a reasonably-sized call-to-action which appears on every page of the website. When clicked, it triggers a real popup.

Phase 1: the user clicks the “Sign up” CTA

Phase 2: she subscribes

Cons: not all popup solutions allow you to design this kind of popup.

Pros: It’s very user-friendly and 100% SEO-compliant. Plus, having the option to display a big popup means users will have more space to input their email. Finally, by displaying it on every page of the website, you dramatically increase the chances that your user will click it and subscribe.

The results of an ABC test

We were wondering what strategy would produce the best results. So earlier this year, we ran a test with Skechers, comparing the 3 methods:

A popup displayed on landing (Landing popup)

A popup displayed on the second page (2nd page popup)

A popup triggered on click (CTA popup)

And the winner was the CTA popup, collecting +48% more emails than the second best-performing version!

Of course, these results don’t apply to all websites. But they’re proof that good UX can generate good results.

Step 3: Prepare a visible design

By now, you should have picked a format and a position for your popup.

We have enough information to start thinking about the design of your popup itself.

Tip 1: choose a visible background

Most of the time, mobile popups are smaller than their desktop counterparts. So you need something to help them stand out. And your popup background can help.

See the difference between these 2 campaigns? By using a coloured background which contrasts with the rest of the website, Zumiez makes their opt-in popup unmissable.

This is practically the first thing you see on their website.

A popup with a contrasted background on Zumiez

A more classic popup on Flight Club

Tip 2: select a colourful call-to-action

The same goes for your CTA. It should stand out from the popup itself.

Look at this example from Murray’s. The CTA is red and highly visible. You can’t miss it!

In short, it means that you should use clear and concise wording to avoid wasting your visitors’ time.

See this example on UnderArmour? They just kept what’s essential to a mobile user: a strong incentive to subscribe:

.

Their desktop popup (which includes “Everything here is built to make you better”):

Its mobile equivalent:

The same goes for your call-to-actions. We recommend using short and actionable words such as “Submit”, “Sign me up”, “Send” instead of the long wordings you can find on desktop (“Join the list today”, “Send me my discount”, etc.)

Formats and position ✅

Design ✅

Wording ✅

You’re good to go!

Wrap-up

As Jeff Bezos once said: “we [should] see our customers as invited guests to a party, and we are the hosts. It’s our job every day to make every important aspect of the customer experience a little bit better.” Popups are part of this experience. It’s time you work on making them better (while building your email list efficiently).