How to design mobile popups that convert (and don’t hurt your SEO)

Let’s picture the scene.

It’s Sunday afternoon. You’re relaxing on your sofa, ready to do some shopping online from your mobile phone.

You land on a website… only to be bombarded right away with a popup asking for your email address.

Could mobile popups be more annoying? Probably not!

Could they be smarter? Sure thing!

Let’s see how you can use them on your website to build your email list without putting your visitors off.

Part 1: Why you should care about mobile popups

Why are we discussing mobile popups in the first place? Shouldn’t they be avoided at all cost? Let’s see why the answer to this question is a resounding NO.

Reason #1: Mobile is too big to be ignored

As marketers, we are also users and customers. In other words, we’re not so different from the rest of the population (I know, it’s hard to accept).

Looking at the kind of disastrous experiences we described above, we be might be tempted to throw out the baby with the bathwater and avoid mobile interstitials altogether.

Not so fast.

According to StatCounter, Mobile devices now account for as much as 50% of the total web traffic.

Research and markets estimates mobile commerce share of online retail will exceed 50% by 2021.
Why insist on these figures?

Because they mean you can’t just abandon email capture on mobile. You would be missing out on half of your visitors, hence a huge opportunity .

Reason #2: Mobile visitors are more likely to go away forever

Mobile visitors are less likely to convert. To be precise, they’re only half as likely to purchase as desktop visitors are.

Asking these visitors for their contact information will offer you a way to retarget them later by email and get them to convert.

If you’re not trying anything to build a relationship during their first visit, you might never see them again. This is not an option.

Reason #3: You don’t have to use dumb popups

Until recently, most mobile popups were bad.

So bad that Google had to take action at some point (we’ll detail this point later in the article).

But this doesn’t mean they are all annoying. They can be smart and non-intrusive.

From “bad” popups to “smart” popups.
On the left, CheapMonday’s popup, on the right Fast Company’s popup.

Reason #4: popups are the best way to build an email list

What should I write to convince you popups are the best thing ever invented to capture emails?

Well, nothing, because someone has already done the job for me.

Part 2: The responsive popup temptation and why you shouldn’t fall for it.

Well, you’re now convinced that mobile popups should be part of your marketing plan (at least I’m hoping so).

And you’re thinking it could be as easy as just making sure your opt-in popups are responsive and adapt to smaller screens.

STOP RIGHT THERE.

Responsive popups are not the solution. Let’s see why.

Reason #1: Google’s interstitial penalty

In a world where its market share can reach 88% (this is Google’s global MS of the online search market), it’s quite obvious to state that when Google share directions, webmasters just follow them.

So when Google released a new algorithm penalizing intrusive mobile interstitials in January 2017, everyone paid attention.

What did the new guidelines say exactly?

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”.

If you want to know more about the topic, I suggest you read our guide to email popups.

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” CTAPhase 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 ZumiezA 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!

Tip 3: Add actionable closing options

Have you ever heard of the fat finger syndrome?

It’s what happens when you accidentally trigger an action you didn’t intend to while browsing on your mobile. Or when the link/button you’re trying to click is too small so it’s difficult to click it.

One of the main frustrations for visitors when it comes to mobile popups is the difficulty to close them.

To avoid this problem, there’s one rule of thumb (pun intended): make everything bigger than it would be on desktop. UXM recommends a minimum size of 44 x 30 px for mobile buttons for example.

We also recommend adding a “dismiss” link to complement your closing X. Usually, they’re larger and easier to click on mobile.

Here’s a good example on LiveChatInc.

Tip 4: Limit visuals

As space is scarce and the bandwidth of your visitor might be limited, we recommend limiting the use of visuals.

Let’s take Carbon38.com.

Here’s their desktop popup. The picture on the right alone weighs 749 ko.

So on mobile devices, they stripped out the picture:

As you can’t use visuals to support your message, you need a strong message…

Speaking of messages, let’s see what words can help you convert these mobile visitors into subscribers.

Step 4: Choose the right words

If we had one motto for mobile popups copy, it would be: “Choose your words carefully”.

Why so?

First, because you don’t have much space. Or at least you often don’t have enough space for long sentences.

Second, because on mobile the attention span is shorter. Need proof?

Desktop visitors see 40% more pages than Smartphone visitors according to Monetate’s latest mobile report.

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).