An Ultimate Guide to Creating Mobile Popups (Friendly and High-converting)

Today, we exist in a fundamentally mobile world. More than 2.71 billion people own a smartphone, making it an exciting time for the mobile eCommerce industry to flourish and exponentially grow. 

But, what are you doing to capture the richness of mobile visitors? 

Mobile popups are designed primarily for capturing mobile visitors as leads. But if you’re reading this, you’re unsure how you can use mobile popups to capitalize on the huge mobile opportunity.

How do you exactly convert mobile visitors successfully using mobile popups?

This guide will help you navigate the do’s and don’ts in creating mobile-friendly popups. You’ll also understand the essential strategies to transform your mobile popups that drive visitors into conversion.

To get you started quickly, we’ve also included some real-life examples that you can steal away.

By the end of this guide, you’ll be equipped with the right knowledge on what your customers want from mobile popups and how you can make their mobile experience a lot better. 

What are mobile interstitials? Why pay attention to them?

If you haven’t heard of intrusive mobile interstitials, let’s try to understand them first as they play a crucial role in making sure that you’re creating friendly and high-converting popups without offending Google. 

Last 2017, Google released a new mobile algorithm that would start down-ranking pages with intrusive mobile interstitials. Essentially, intrusive interstitials are popup ads. They tend to obstruct most or all of the page. This leads to poor visitor experience because mobile devices have often smaller screens. 

As a rule of thumb, you should avoid mobile interstitials which make content less accessible to customers. Here are some examples of interstitials to avoid: 

• A mobile popup that covers or obstructs the main content, either right after a visitor navigates to a page from the search results, or while they are looking through the page.
• A standalone mobile interstitial that the visitor has to close first prior to accessing the main content.
• The above-the-fold layout of the page appears identical to a standalone mobile interstitial, but the original content has been inlined underneath the fold.

Here’s a sample intrusive popup from Nordstrom that covers the main content, immediately after the visitor navigates to a page from the search results. 

By comparison, here are some practices that won’t be affected by this algorithm: 

• Interstitials for legal obligations, such as cookie usage or age verification.
• Login dialogs on sites where content is not publicly indexable.
• Banners with a reasonable amount of screen space and are easily dismissible. 

Mango’s agreeing to cookie use is an example of a popup categorized by Google as a necessary part of a website.

How to create mobile-friendly popups that convert

To boost your conversions, here are the best practices to create highly optimized mobile popups: 

1. Present mobile popups on 2nd/3rd-page load

Timing is a crucial aspect of creating both a visitor-friendly and highly converting mobile popup. People hate to be interrupted, especially when viewing content they want to read. If your mobile popups appear immediately when visitors enter your site, this can really disrupt their mobile experience. 

Google penalizes “showing a popup that covers the main content, either immediately after the visitor navigates to a page from the search results.” If you don’t give people enough time to even read or view the content they’ve clicked, they’ll definitely get annoyed if they see a mobile popup first.

A better approach to this issue is to make sure that you only show the mobile popup when you determine that your visitors are actually interested in the content they’re viewing. A best practice is to only show a mobile popup to a visitor who is already on their 2nd or 3rd page. Someone going to a second or third page signals enough level of interest and won’t be bothered by a casual mobile popup because the person is already hooked. 

Joybird only displays their mobile popup when a visitor is on the second page. This adheres to Google’s interstitials policy while at the same time preventing visitors to get easily annoyed.

Aside from that, you can also get the right timing by triggering your mobile popups according to certain conditions, such as the following: 

• Percentage of the page visitors have to scroll
• When visitors are about to abandon the site without any action
• Only on a certain page
• After a specific time of inactivity

2. Differentiate your mobile visitors

Two crucial elements to successful mobile popups are segmentation and differentiation. You want to be able to differentiate the mobile shopping experience of your visitors depending on the segment they are in. You cannot display the same mobile popup over and over to all your mobile visitors. This prevents you to convert them successfully because they won’t be resonating to your message. 

Every mobile traffic falls under a specific segment. Thus, they will respond to different types of content. You cannot display the same content to all your traffic. Instead, your contents should be adaptive according to your visitors’ profiles, interests, or intentions. 

Below are some segmentation profiles that you can consider when displaying your mobile popups: 

• New site visitors
• Returning visitors who haven’t purchased anything
• Returning visitors who have abandoned their carts
• Existing customers with low purchase history
• Loyal customers or frequent buyers
• Referrals from external sources like social, ads, etc. 
• People from a particular geographical location 

Depending on their identified segment, you can use a dynamic text replacement, a real-time personalization tool that allows you to customize any aspect of your content such as call-to-action or copy to target their segment.

For example, Sephora segments all their new visitors and then targets them with a mobile popup that welcomes them with a fun and engaging greeting. 

3. Hook your audience with the right incentive

Different people are lured by different mobile popup offers. Just like dynamically changing your contents, your offers or incentives must be dynamic as well. This will ensure the likelihood that your mobile visitors will act on your offer immediately. 

Choosing the right incentive can be done by simply knowing what are the possible interests of your visitors. Like what we’ve said earlier, it’s also crucial that you understand your visitors’ profile so you can segment them accordingly. Depending on what bucket they’re in, you can now present the relevant incentives that will resonate to their segment.  

A perfect example is how Carbon88 incentivizes their new subscribers by offering them with an enticing 15% discount on their first purchase. 

4. Format and position your popups appropriately

Formatting and positioning your popups are also essential in creating a highly converting mobile popup. A full-screen modal is a common practice. But, remember Google is penalizing any standalone mobile interstitial that visitors have to dismiss first before accessing the main content? You can still opt for a full-screen mobile popup but remember to present it on the 2nd or 3rd page where the visitor has shown enough interest with your site. 

A better alternative strategy to this is to display a smaller mobile popup at the bottom of the page. This way, you’re not obstructing your visitors from seeing the main content. Thus, adhering to Google’s guideline on intrusive interstitials. 

For instance, Olay displayed their mobile popup with just mere one-fourth of the whole screen size. The mobile pop-up was also positioned at the bottom of the page. 

5. Design your mobile popup CTA for conversion

Your mobile popup has a goal. You placed it for the reason that you want people to take action on whatever you are offering or trying to drive them to do. For that reason, your CTA button must be as direct and clear as possible. 

Otherwise, if your visitors are confused about what to do next, you’re just pushing them away. This will ruin all your chances for conversion. You want your CTA to take them to the next step. 

Speaking of clarity, the one, single goal of any popup is to get visitors to take action. Do you want them to subscribe to your email list? Maybe get the discount coupon? Whatever it is, you CTA must guide them accordingly. 

Aside from the words your use with your CTA, it’s vital that you design it to stand out. One of the best practices to make your CTA prominent is to apply contrast. It means that it must be different from the rest of the mobile popup itself and should also be opposite from the main page. 

To promote their app, BeautyMNL created a mobile popup with a CTA copy “Take me to the app”. The CTA button was also designed with a bright red color to make sure it stood out.

6. Gamify your mobile popups

Gamification is an exciting and engaging activity that you can incorporate to your mobile popups. The simple rule is just to put game elements into how you display your popup offers. The element of surprise will attract shoppers to join. Thus, getting more people to convert. 

There are many ways you can create a gamified mobile popup. For instance, you can simply create a spin-to-win game into your mobile popup. You can list your freebies, discounts, and other prizes as a giveaway. 

Aside from regular mobile popups, Sitekit can also help you create and design your very own gamified mobile popup. It has a readily customizable spin-to-win game for your next mobile popup offer. 

7. Pair your mobile popups with a cause

Did you know that 55 percent of worldwide online consumers are willing to shell out more money to businesses with corporate social responsibility? This genuine devotion to uplift the community can be translated into purpose marketing. And, you can incorporate this to your next mobile popup strategy. 

Purpose marketing in mobile popups is pretty straightforward. Instead of incentivizing your customers for their purchase, your popup offer will be paired with a charitable cause. So, for every customer purchase, a corresponding donation to a charity or institution will be given. 

This helps you attract customers who are actively looking for ways to help their community and to improve the quality of life of others. While doing this, you are building a positive brand image for your store at the same time. 

A perfect example is the “Stand for Tomorrow” campaign of Toms. They allow visitors to pick their stand on certain initiatives such as equality, giving shoes, ending gun violence, etc. For every Toms purchase, they will donate to the customer’s respective charity of choice.

8. Apply exit intent technology

In a cart abandonment study conducted by Barilliance, mobile has the highest cart abandonment rates, with 85.65% of customers leaving their carts without a sale. This is in contrast to the shopping cart abandonment rate of tablets (80.74%) and desktops (73.07%). 

This huge number of mobile visitors bouncing away without successfully converting should alarm you. Once your visitors leave your site, it could be very challenging for you to drive them back to your site again. 

Instead of waiting for them to come back, why not create a strategy to prevent them from leaving? An exit intent technology applied to your mobile popup will automatically help you detect when a visitor is about to leave your site without completing a purchase. 

When it detects an abandoning visitor, an exit intent popup offer will be displayed momentarily. This will catch the attention of the visitors and entice him/her to grab the offer before exiting your mobile site. 

To help fight cart abandonment, Elf Cosmetics has employed an exit intent technology into its mobile popup offer, enticing abandoning visitors with free shipping and a free gift. 

9. Make your words count

Because mobile devices have smaller screens, having a very lengthy copy could be a potential conversion killer. With smaller screens, you don’t have much space for long sentences. This makes it harder for your visitors to read them. 

But, aside from readability, the most pressing issue with having a lengthy copy in your mobile popup is because of the shorter attention span of mobile visitors. According to the latest mobile report from Monetate, the average page view for mobile visitors is at 6.17 seconds. This is lower than desktop visitors’ 8.57 seconds average page view.

What this means to you is to make sure your mobile popup copy is shorter compared to other devices. Use clear and concise words to avoid your visitors’ time reading your copy. This will also help you keep them focused for conversion. 

For example, Glamourbox has a very straightforward copy in their mobile popup to prevent visitors from getting distracted and drifting away. 

Your guide to high-converting mobile popups

Mobile popups might be small in size but optimizing them can make a huge difference. They are highly popular because of their effectiveness for lead capturing. With the increasing global number of mobile visitors, you don’t want to miss out on capturing more leads to turn into paying customers in the future. 

To make your mobile popups more visitor-friendly and high-converting, the best practice is to understand what potential blockers will negatively affect your mobile performance such as intrusive interstitials. 

It is also crucial to differentiate the mobile experience of your visitors depending on their profile, interests, and motivation. From there, you can time, design, and format your mobile popups more effectively. Plus, you can provide offers and write contents that are relevant and relatable to your audience.