Over 90% of the global internet population go online using a mobile device. They’re using smartphones to shop, chat with friends, and get answers on-the-go.
So, you need to meet them with a responsive site, and lead capture strategies that work across all devices.
Mobile popups are a perfect way to do this.
In this post, we’ll share how you can capture more of the mobile traffic coming to your site. We’ll also share some mobile popup examples to draw inspiration from, and templates to create your own.
What is a mobile popup?
A mobile popup is an overlay box that appears when a person browses your website on a mobile device. It can ask for certain information from your visitors (such as their email address or phone number) for you to send personalized marketing messages to, or simply point or guide them to another part of your site.
Mobile popup best practices
Outside of general popup design principles, there are a handful of best practices that apply specifically to mobile popups.
- Resize text. Headlines and text may look great on a desktop popup, but appear oversized on the smaller screen of a mobile device.
- Limit images. Similarly, supporting images may fit into the typical desktop viewport, but again take up too much space on mobile.
- Space out buttons. The last thing you want is for buttons to be so close together on mobile that people can't press the one they want with their thumb/finger.
- Show the value prop. Make sure the main value prop of whatever you're offering in the mobile popup shows at first glance—you don't want visitors to have to scroll or move around to figure out what's being offered.
- Preview on mobile. It's important that you preview any popup on both desktop and mobile before setting anything live to ensure the experience aligns with your goals. Otherwise, this could skew conversion data without you even realizing.
- Make sure the next step is optimized, too. Think about the thank you page or the entire experience you're trying to create with the popup—does it work on mobile from head-to-toe?
In a nutshell, you simply want to make sure everything looks good and works well on mobile. Don't just check the popup's desktop version and leave it at that.
ConvertFlow's builder allows you to switch between the desktop and mobile version of a popup (or any CTA you're working on) and even hide and show specific elements on desktop or mobile:
You can also target popups to specifically only appear on either desktop or mobile, if you'd prefer to have totally different designs for the two devices.
Click here to test it out with a free account
Ok, we know what a mobile popup is and how best to make them work. Now, let’s take a look at six examples of ecommerce and B2B brands using them on their website.
1. Glossier’s email marketing mobile popup
As we’ve briefly touched on, you can use mobile popup boxes to capture your visitors’ email addresses. This example on Glossier’s mobile site does exactly that:
It’s a small mobile popup box that appears at the bottom of the screen. It sticks to the page as people scroll through the home page.
This makes sure the popup is visible to all visitors—without compromising on user experience. Visitors can still see the entire page behind the popup box.
2. House of Wise’s popup discount
Here’s a great example of how mobile popups can be used to give discount codes to customers. House of Wise has a $10 coupon that they’re offering through a popup that appears a few seconds after visiting their website:
It’s not just the offer that makes this appealing, though.
The retailer also makes it clear that anyone who enters their information in the mobile popup will be added to their email marketing list. That’s essential for keeping subscribers happy.
3. Mylk Plus’ mobile popup code
Mylk Plus does a similar thing with its mobile popup. It asks visitors to enter their email address in return for a 10% discount code sent to their inbox:
Again, subscribers know what they’re entering into—meaning less chance of reporting their emails as “spam” because they were unaware they were joining a mailing list.
4. Zapier’s mobile popup survey
Zapier is a great example of how B2B brands can use mobile popups to collect information.
However, in this case, they’re not using the popup to collect email addresses or phone numbers. They’re asking visitors to tell them how they arrived on the page:
This is a goldmine of data for marketers. You can use the responses to configure personalized website experiences—pointing each person in the direction of content they’re most likely to be interested in.
It's also interest how they use a two-step system. The popup first appears at the bottom in a non-invasive manner, before opening up into its full form once someone clicks on it 🙌
5. Blk & Bold’s mobile popup
Blk & Bold uses their mobile popup to gather information about their customers—data they can use to market to them in the future:
However, what’s interesting about this mobile popup example is that they’re asking for more information than the standard email address.
Blk & Bold asks visitors to share their product preferences when signing up to get the 15% offer. This info can then be used in email marketing and future on-site retargeting campaigns to recommend products they’re most interested in.
6. Social Media Examiner’s mobile popup
Unlike the other mobile popup examples we’ve shared so far, this one from Social Media Examiner takes up the entire page. The stark, contrasting colors mean it captures the attention of anyone visiting:
What’s interesting to note about this example, too, is that it appears when reading their blog.
Unlike the discount codes that appear on a mobile version of the site’s home page, this one offers content in return for an email address. It best suits the intent of someone browsing a blog post: they want information. Their mobile popup offers to give them more.
Now we know what a good mobile popup looks like, you might be questioning how you can create one for the people already browsing your mobile website.
The good news? Inside the ConvertFlow library, you’ll find 40+ popup templates.
Each is already mobile-friendly, responsively designed, and completely customizable. You can either:
- Edit the mobile and desktop version of the same popup in ConvertFlow's builder;
- Create two different popup CTAs with two totally separate offers: one targeting desktop users, and the other only appearing on mobile.
Either way, ConvertFlow makes it easy to create the mobile popup needed for your site.
Here are a few mobile popup templates to get you started: