A popup castle on a mobile device.

How to Optimize Your Popups on Mobile Sites (3 Key Tips)

Not too long ago, mobile browsing finally overtook desktop browsing. This changing online landscape means optimizing your site for mobile usage is more important than ever. Naturally, this includes your popups.

It’s possible to use popups effectively on mobile devices, but it does require some unique considerations. For example, Google recently put some new popup penalties into effect. Therefore, you’ll need to carefully tailor your popups so that they adhere to those standards.

In this article, we’re going to discuss the impact of mobile usage on popups and your lead generation efforts. We’ll touch on the SEO rules for popups on mobile pages, the best practices for implementing them, and how Popup Maker’s flexibility helps you optimize your popups correctly. Let’s get started!

What You’ll Need to Consider When Creating Mobile Popups

In 2016, mobile internet usage surpassed desktop usage for the first time. This provides new opportunities for most website owners, but it also means that every area of your site needs to be responsive and tailored for mobile devices. Of course, your popups are no exception to this rule.

There are a number of unique considerations when creating mobile popups. The most pressing, of course, is screen size. Mobile devices are almost uniformly smaller than desktops, making screen real estate much more valuable. You’ll also need to take into account the difference in interface. What works with a keyboard and mouse might not be at all suitable for a touchscreen UI.

[clickToTweet tweet=”…there are a number of unique considerations when creating mobile popups. The most pressing, of course, is screen size…'” quote=”‘…there are a number of unique considerations when creating mobile popups. The most pressing is, of course, screen size…”]

Getting your mobile popups just right is very important, as Google will penalize mobile sites with obstructive or poorly implemented elements. In fact, we’ve discussed these policies before. Not adhering to them can be damaging to your site’s Search Engine Optimization (SEO), making it less visible in search results.

There’s a good reason Google implemented these standards. It wants to stop sites from using intrusive popups and obscuring content. This does not mean that you can’t use popups on mobile sites at all. However, you’ll need to take steps when designing your own popups to ensure that they adhere to these standards.

Taking the time to do this will not only boost your SEO but also improve your visitors’ user experience. Thankfully, the standards are both clearly defined and relatively easy to implement.

How to Optimize Your Popups on Mobile Sites (3 Key Tips)

When creating mobile popups that adhere to Google’s standards, there are certain considerations you’ll need to keep in mind. We’ll look at the three most important factors right now.

1. Keep Popups Unobstructive and Limit Screen Space

One of the main points outlined in Google’s standards is that popups should not obscure the content of your site. It’s also important that a popup doesn’t take up too much screen space:

Examples of poor mobile popups as per Google's standards.

This is to avoid frustrating users who may not be able to see the content they expected when clicking through to the site. Not only are these examples obstructive, but they can also confuse visitors who may not realize they’re looking at a popup and not the actual page.

Instead of full-screen popups, Google recommends using banners, as they don’t hide your content and don’t take up too much space. The following example shows Google’s recommendation:

An example from Google, showing a banner popup on a mobile device.

The best strategy is to create different popups specifically tailored for desktop and mobile devices. With the Popup Maker plugin, you can do this by using the Advanced Targeting Conditions extension, which enables you to create responsive popups. You can use a number of device-specific conditions to create popups that only trigger when the site is viewed on particular devices.

What’s more, this extension also enables you to restrict popups depending on the size of the screen, giving you full control over their appearance. This way, you can match their design to the required standards for each type of device.

2. Make It Easy For Users to Dismiss Popups

Popups should also be easy to dismiss. It should be immediately obvious to users what they need to do in order to close a popup. This is true regardless of device, but it’s especially important for mobile popups. Since you have less space to work with, you need to make the dismissal option easy to see and use:

Illustration showing close buttons on three mobile popups.

The easiest way to do this is by defining a popup’s close settings and considering the size of the closing element. This option will usually need to be bigger on mobile devices, in order to be more clearly visible. You should also consider the popup’s background, and make sure the close option contrasts clearly against both the popup and the main content of your site.

The best way to make sure this technique is implemented effectively is to test your popups on as many devices as you can. For each one, ensure that the option to dismiss your popups is always clear.

3. Use Popups for Login Dialogs and Necessary Information

Our final piece of advice is to consider is how you use popups on mobile sites. It’s worth noting that popups containing necessary steps or information are exempt from Google’s rules. Some examples include login dialog and age verification popups.

You also don’t need to worry about popups that contain information you are legally obligated to provide, such as messages regarding cookie usage:

Two examples of mobile popups that provide information and age verification.

To Google, these types of popups are not seen as intrusive. In fact, they are often required for the seamless running of a site. Using popups to design these elements actually helps the user, by enabling them to complete the necessary steps without requiring them to leave the page. For that reason, it’s worth strongly considering the use of popups for these specific applications.


Mobile internet usage has grown massively in just a few years, and the trend is likely to continue. That’s why you need to make sure that every aspect of your site and marketing is optimized for mobile devices. Not only will this make your users’ experience more pleasant, but it will also help improve your SEO rankings and lead generation efforts.

In this article, we’ve touched on some of the ways you can optimize your popups for mobile devices. You’ll want to:

  1. Keep your popups nonobstructive, and limit the amount of screen space they use.
  2. Make it easy to close or dismiss popups.
  3. Use popups to create login and age verifications dialogs, and to provide necessary information.

Do you have any questions about creating popups for mobile devices? Let us know in the comments section below!

Featured image: FunkyFocus.

John is a blogging addict, WordPress fanatic, and a staff writer for WordCandy.co.


  1. Hector Mercado on October 1, 2018 at 10:30 am

    I don’t see a demo, I can figure out what I get from your Plugins???

    • Daniel Iser on October 2, 2018 at 4:12 am

      We have a complete demo available at htts://demo.wppopupmaker.com. Hope that helps.

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.