How to Make a Mobile Popup (+Best Practices)

Want to know how to create a mobile popup?

This guide will show you how to do that the right way: fully complaint with Google's requirements and friendly to the user experience on your website.

In this post:

• What is a mobile popup?

• How to make a mobile popup

• Mobile popups: best practices

What is a mobile popup?

A mobile popup is an overlay box that appears on mobile websites to convert visitors. Mobile popups must comply with some UX requirements, including allowing visitors to access the website without closing them and occupying a screen space of about 30%.

How to create a mobile popup

Follow these steps to make a mobile-friendly popup:

1. Choose a template

2. Customize the template

3. Add the discount code

4. Adjust the display settings

5. Save and publish

For this mobile popup tutorial, we'll use Wisepops popup builder, rated 4.9 stars on Shopify.

Get a free account to begin:

No cc needed, unlimited free trial.

Step 1: Choose a template

Once in Wisepops dashboard, go to Create Campaign to see the templates.

Choose Popups format and Coupons & Offers as the use case. Please note that mobile-ready templates will have "mobile" in their titles:

Next—

Feel free to choose any mobile template in the template gallery. I'll go with this one:

Step 2: Customize the template

Use the menu on the left to add your website's colors and text (just click the element to open the customization settings):

Use the Preview in the top right corner to see how the popup looks on mobile.

This video will help you find all the customization options you need:

Step 3: Add the discount code

Go to Step 2 (inside the Wisepops editor) and customize the window that will open once the visitor signs up.

There, apply your design in one click (using the button highlighted below) and add the discount code:

Step 4: Adjust the display settings

This simply means optimizing your popup to be shown on mobile devices. Go to Display Rules > Audience.

There, you'll see the device setting; choose Display on mobiles (if you selected the same template as in this tutorial, this option will be enabled by default):

Step 5: Save and publish

Hit Preview (in the right top corner of your window) to see how your mobile popup will look like to your visitors:

Once you're finished designing the mobile popup, click Done editing. Wisepops will take you to the campaign overview window, where you need to choose Publish.

That's it, your mobile popup is now live!

Mobile popups: best practices

Here's what to keep in mind when designing mobile popups:

And now let's break down these best practices for mobile popups.

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” (so this is a welcome popup, basically):

If you want to know more about the topic, I suggest you read our guide to email popups or see this collection of email popup examples.

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

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 a few 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. You can also display it when your visitors are about to leave your website using mobile exit intent detection.

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.

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:

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.

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.

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

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.

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.

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”):

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

See this guide for more detailed tips: Popup message messages

Mobile popups: 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.”
Mobile popups are part of this experience. It’s time you work on making them better (while building your email list efficiently).