How to Create Mobile-Friendly Popups that Will Convert Visitors Without Annoying Them

If you want to create a popup that will only display on desktop devices, you can do it using targeting settings. Once you finish with the copy and the appearance, all you need is to set the rule to only display popups if a website visitor is using desktop.

Similarly, when you create a popup specifically for the mobile audience and set the corresponding targeting rules, it will only be visible to mobile visitors of your website.

Creating a mobile-only popup is a good idea when:

• The desktop version includes too much copy or too many fields

• Targeting rules you chose for desktop, don’t apply to mobile

• You want to display a different CTA to the mobile audience

• You’re using a separate subdomain for the mobile website

• You’re promoting mobile-related content, e.g. mobile app

In a couple of paragraphs, we’ll show you how to set popup targeting rules and make sure it is only displayed to the right audience.

But first, you might want to check some common practices for creating mobile popups 👇

Here are the best practices for designing a mobile popup

As a rule of thumb, you want mobile popups to create a minimum distraction and provide maximum value.

Here is how you can achieve it:

• Display mobile popups after visitors spend a few seconds on a page, or upon click

• Minimize the number of fields visitors need to fill out (ideally, you want just one!)

• Pay attention to popup sizing and aim at keeping it around 30% of the screen space

• Emphasize the incentive to subscribe: offer a discount or any other lead magnet

With that in mind, let’s see how other businesses are using these practices.

Three examples of mobile-friendly popups in action (that you'll be able to recreate)

Based on the webpage position, you can broadly divide mobile popups into 4 categories: modal popups, slide-ins, sticky bars, and fullscreens.

This is how they look on real websites.

Buffy – modal email subscription popup

Buffy is an online company that delivers bedding sets, comforters, and pillows. When you visit their website on mobile, you’re greeted with a popup offering a discount in exchange for a subscription.

On the desktop version of their website, you’ll notice the same subscription form with a slightly different design and an image.

Buffy did a great job optimizing their popup for mobile, keeping it minimalistic, and emphasizing the discount offered in exchange for a subscription.

Casper – sticky bar at the top of the page

Casper is a company that sells mattresses with a 100-day risk-free trial period.

Purchasing a mattress is usually not a quick decision you can make while browsing the website from your phone. That’s why getting their mobile visitors to share their emails is crucial for Casper. And this is what their signup form looks like on mobile.

Notice that Casper added scarcity to their offer. Not only you are incentivized to subscribe by the discount, but you also will try to make the purchase decision faster because that discount actually expires. Brilliant! 👏

Allure – call to action on a slide-in

As a middle ground between a modal popup and a sticky bar, consider using slide-ins like Allure, a beauty box subscription company. Their call to action slides in from the bottom of the page and invites you to join their club.

Allure is also a great example of a company that doesn’t shy away from using multiple calls to action. When you browse their website, you’ll notice CTA sticky bars, modal popups, and slide-ins with the copy that often varies depending on the page content. This is a great approach helping you understand what triggers your audience and further improve conversion rates.

Steve Madden – signup form expanded upon click

Steve Madden is a company producing designer shoes and accessories. They also use mobile-friendly popups to build their email list. However, their approach is slightly different.

The call to action featuring 20% OFF appears in the bottom left corner of the page on a small panel. Once you click it, a fullscreen subscription form pops up.

Paired with a generous offer, panels on mobile can be a great, non-intrusive solution. They stay in sight while visitors are navigating the website and don’t get accidentally closed.

How to create a mobile popup in Getsitecontrol

Now for the fun part. Let’s see how you can add mobile popups to your own website.

For the purpose of this tutorial, we’ll show you how to create an email subscription form. However, Getsitecontrol also allows you to create call-to-action popups, free shipping bars, notification banners, online surveys, and feedback forms – all in the same convenient popup builder.

Step 1. Connect Getsitecontrol to your website

First, you need to create a Getsitecontrol account and connect it to your website.

If you’re using WordPress, there is no need to integrate the app manually. Just install the dedicated plugin from the WordPress plugin directory, and it will do all the heavy lifting for you.

For other website platforms, you’ll need to paste a small code snippet to the code of your website right before the closing </body> tag. Don’t worry! Even if you’ve never dealt with your website code before, it won’t take much time or effort. Getsitecontrol provides detailed instructions for each platform. Find yours on the list and follow the step-by-step tutorial.

Step 2. Choose the type of mobile popup you want to create

To get started, click on the +Create widget button and then select the task you want to fulfill with the help of a popup. The dropdown menu in the top left corner allows you to use templates for email subscription forms, contact forms, surveys, and notification banners.

At this point, you’ll also need to pick the desired position for the popup. You can choose a modal popup, a fullscreen, a slide-in, a sticky bar, or a panel.

Note that you need to switch to the mobile view using the corresponding button at the bottom of the preview window. This way, you’ll be able to see the popup the way it will appear on mobile devices.

When you finish, click Continue. On the next screens, you’ll be able to customize the copy, fields, colors, and the image on the popup.

Step 3. Customize your call to action

The Content tab allows you to edit the copy on your mobile popup, add, remove, or modify fields, and create additional buttons.

For example, for the popup above, we’ve changed the title from “Subscribe!” to “Get 20% OFF Your Purchase”. This call to action will be more efficient because it is focused on the value visitors get from joining your mailing list.

Step 4. Customize the way your mobile popup looks

Once you’re done with the copy, open the Appearance tab.

If you want to replace the image, Getsitecontrol offers several options. You can:

• Select a high-quality image from the built-in Unsplash gallery

• Import images and GIFs from the web, including Instagram

• Upload any creative from your computer

Apart from the images, the Appearance tab provides a feature set for fine-tuning the style of your mobile popup. Use the Theme button to change the colors and the font or – if you have the required knowledge – go ahead and open the CSS editor to customize the look on a deeper level.

Step 5. Set popup display conditions

On the Targeting tab, you can specify who should see the popup you’ve just created.

By default, your popup will be displayed to all visitors as soon as they land on your website, regardless of their device and behavior. If you only want to target the mobile audience, you need to create a simple condition that will trigger the popup to display.

Find the Show widget to visitors if filter, select Device and Device type. Next, set the rule “Show widget to visitors if device is mobile”. If you want to include visitors from tablets, add a second filter using the AND operator.

Finally, instead of displaying your mobile popup the moment visitors land on your website, you might want to delay it for a few seconds. To do that, add the corresponding condition in the Start to display the widget menu.

The Targeting tab allows you to further tweak the displaying conditions and make sure you don’t annoy your visitors with pop-up forms they have already filled out. For example, make sure to find the Stop to display the widget option and select “forever after a user submitted it”.

Step 6. Activate your mobile popup

Congratulations, you’ve just created a perfect mobile-friendly popup for your website!

To make it go live, click the Save & close button in the top right corner and activate it on your website.

Once you do that, mobile visitors of your website will see the popup under the conditions you’ve selected.

Use mobile-friendly popups to convert visitors while they are on the move

Half of the Internet traffic is coming from mobile. Their experience on your website is important and it is in your best interests to keep them engaged.

By using Getsitecontrol and the practices outlined in this post, you’ll be able to create perfect mobile-friendly email signup forms, calls to action, surveys, and feedback forms. All of that – without having to hire a developer!

Go ahead and try it for yourself.