Design Mobile Popups

Lisa Fockens Updated by Lisa Fockens

Why should you design mobile-only popups?

It might seem like you are doubling up your workload but there are many benefits to creating separate popups for your mobile sites. We value end-customer experience, and we're sure you do too. Mobile-only popups improve the customer experience in many ways, including the following:

Read on to learn how to master mobile-only popups for your customers and, ultimately, your business!

Technique #1: Use one of our mobile-friendly templates

  • Create a new campaign with our Campaign Assistant
  • Select your goal and preferred popup type
  • On the template page, scroll down a little and select one of our mobile-ready templates

Technique #2: Design your mobile-friendly popup

If you have already designed a desktop campaign and don't want to start over for mobile, follow these steps:

Set your popup to display on phones

  • Duplicate your original popup using the three dots in the far right column in the dashboard
  • Open the duplicate campaign
  • In the left menu, click "Display" and go to the "Audience" tab
  • Next to Device, select "Display on mobiles"

Adjust the size of your popup

Now we have to adjust the size of the popup.

To adjust the size:

  • Click "Popup" in the left menu
  • Go to the "Style" tab
  • In the top menu, select "Size"
We recommend 320 (width) x 160 (height) to make sure it displays on most mobile phones.

Adjust the copy to fit the new popup size

We recommend removing images first. They often take a lot of space and can have a big impact on the loading time for your mobile users.

Then edit your copy and font size. Don't forget to edit your call-to-action button. Remove any unnecessary copy from the popup.

Here's an example:

Adjust the position of the popup 

While displaying a popup in the middle of the screen is fine on desktop, the standard on mobile is to display it at the bottom of the screen.

To do so, click "Position" and select the bottom position:

Best practices

Make sure your popup is easy to close on a mobile device

Don't hesitate to increase the size of the closing X to make it easier to tap.

Activate the tab

The tab provides an additional option to display non-invasive calls to action on mobile devices. You can read more about the tab here.

Add a delay

Google guidelines only apply to the landing page (after clicking on a search result), so we recommend adding a page view delay:

Don't forget to save and rename your new campaign.

You're done!

Not seeing your popup on your website? Try these tips.

How did we do?

Write Your Own CSS Rules into Your Popups

Create a Spin-to-Win Campaign

Contact