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

How to Create Mobile-Friendly Popups that Will Convert Visitors Without Annoying Them
Nina De la Cruz
Nina De la Cruz Jul 17, 2020 — 8 min read
💥 Join 5K subscribers

If you’re using popups on your website, they should be optimized for mobile. That goes without saying.

Yet, on many websites, mobile popups ruin the entire experience by jumping at you at the wrong moment, blocking the content, or being non-responsive.

Other times, website owners want to avoid ruining the experience by choosing not to use popups on mobile at all.

Big mistake.

Let’s take email subscription popups as an example.

Most mobile users might not be ready to make a purchase during their first visit. But if you get them to join your mailing list, you’ll be able to reconnect in their inbox and convert them later.

If your website doesn’t have mobile-friendly popups, you are missing lots of conversion opportunities.

In this article, we’ll show you how to create mobile popups for your website in Getsitecontrol popup builder. You’ll also see popup examples other businesses are using to engage with their mobile audience. And by the end of reading, you’ll have enough knowledge to recreate those examples by yourself!

But before we dive right in, let’s talk about the elephant in the room 🐘

Is it true that Google hates mobile popups?

The short answer is no.

You might have heard that back in 2018 Google rolled out an ad blocker and started penalizing websites using intrusive interstitials on mobile.

Although interstitials are essentially ‘popups’, the update was targeting annoying ads. Specifically, those interstitials that would pop up and take more than 30% of the screen space, unexpectedly play sound, or appear as soon as you land on the page even before you get to see the content. Ugh!

Moreover, Google clarified that they were targeting “promotional content displayed on the web as the result of a commercial transaction with a third party”, a.k.a. ads.

Your average email subscription popup doesn’t fit the description of an intrusive interstitial. No need to worry about hurting your website’s SEO!

However, what we’ve all learned from this ad-blocking update, is that we should rethink the way we try to engage with the mobile audience because their experience becomes a shaping factor for websites’ health.

Now that we’ve sorted that out, let’s get to practice.

So, how do you create a mobile popup?

To get started, you’ll need a website popup builder, such as Getsitecontrol.

With Getsitecontrol, you have three options:

  1. Create a single popup for both desktop and mobile audiences

  2. Create a popup that will only display on desktop devices

  3. Create a popup that will only display on mobile devices

The first option suggests that while designing your popup, you’re using both desktop and mobile preview modes to ensure it looks great on any device.

How to create mobile-friendly popups in Getsitecontrol

The mobile version automatically adapts its size and layout to mobile screens to provide the best experience. If you want, you can adjust the size and spacing, replace and remove the image or change its position on the popup.

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.

Buffy uses mobile popups to encourage visitors to join their mailing list

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

The desktop version of the Buffy’s email popup

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.

Casper uses a sticky bar to collect emails 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 added a slide-in to promote a call to action on the mobile version of their website

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.

Steve Madden website includes a CTA panel that expands into a subscription form

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.

Creating a mobile-only popup in Getsitecontrol: first steps

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.

Customizing a copy for a mobile popup in Getsitecontrol

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

You can remove or replace images on mobile popups in Getsitecontrol

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.

Getsitecontrol audience targeting setting for a mobile-only popup

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.

Select the conditions that will trigger a mobile popup to display

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.

Popup activation stage in Getsitecontrol dashboard

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.

Tips for your marketing strategy