Pop-ups on a Phone

The same overlay, a different experience

On a desktop a pop-up occupies part of a large screen. The page remains visible around it, the close button is easy to hit with a pointer, and the interruption is mild.

On a phone the same overlay covers everything. The page is gone, the close control is often the smallest element on the screen, and the visitor cannot see what they came for.

Nothing about the pop-up changed. The proportion of the screen it occupies went from a fraction to all of it.

The ranking problem

Google has treated this as a quality issue since January 2017, when it began discounting pages where content is obscured by an intrusive overlay for visitors arriving from search on mobile.

The guidance names three patterns specifically: an overlay covering the main content immediately on arrival, a standalone interstitial the visitor must dismiss before reaching the page, and a layout where the top of the page is an advertisement and the content sits below it.

It also names exceptions, which are worth knowing because they are frequently the ones businesses actually need.

Legally required notices, such as cookie or age confirmations, are not treated the same way, nor are login dialogs for content that genuinely requires one, nor small banners occupying a reasonable strip of the screen.

What visitors do

The ranking question is secondary to the behavioural one.

Somebody who searched, clicked, and was immediately presented with a demand for their email address has been asked for something before receiving anything.

A proportion of those people press back rather than working out how to dismiss it, and a back press from a search result is the clearest possible signal that the page did not deliver.

The ones who stay are often the ones who cannot find the close button, which is not a favourable first impression either.

The close button decides everything

If you keep only one rule from this, keep this one.

The control that dismisses an overlay should be large, obvious, and in a place a thumb can reach.

A small light-grey cross in a top corner, over a busy background, on a large phone, is a control that a meaningful share of visitors will fail to hit on the first attempt.

Somebody who taps twice without closing it concludes the difficulty is deliberate, which converts a mild annoyance into an impression of the business.

Making it a clear labelled control rather than an icon, and giving it a generous tappable area, costs nothing and removes the worst outcome.

When they are defensible

• After meaningful scrolling, so the reader got something first.
• On a second or later page in the visit.
• On leaving intent, where the platform supports it.
• Once per visitor, remembered, not on every page.
• Small, occupying a strip rather than the screen.

The common thread is that the visitor has already received something. An overlay after somebody has read most of a page is asking a reader; an overlay on arrival is stopping a stranger.

The banner alternative

For most small businesses a fixed strip along the bottom of the screen does the same job without any of the cost.

It is visible continuously, it does not cover the content, it does not require dismissing, and it sits in the easiest part of the screen to reach.

It is also outside the intrusive pattern entirely, since it uses a reasonable amount of space and leaves the page readable.

Conversion from a persistent banner is usually lower per impression than from an overlay and considerably better per visitor, because it does not send anybody back to the search results.

A worked example

A retailer ran an overlay offering a discount for a newsletter signup, appearing two seconds after any page loaded, on all devices.

It collected a reasonable number of addresses and everybody considered it successful.

Looking at mobile specifically told a different story. The proportion of mobile visitors leaving within a few seconds of arriving from search was substantially higher than on desktop, and higher than it had been before the overlay was introduced.

They changed it to appear after a visitor had scrolled through most of a page, and only once per person.

Signups fell by roughly a fifth. Immediate exits from mobile search visits fell back to their earlier level, and pages viewed per mobile session rose.

Over the quarter, orders from mobile increased, which was worth more than the addresses they stopped collecting.

Cookie notices are the one everybody has

Not optional in many jurisdictions, and therefore the overlay most sites carry.

They are treated differently by search engines for that reason, which removes the ranking concern and none of the usability one.

The practical guidance is the same as for any overlay: keep it to a strip rather than a full screen where the law allows, make the controls large enough to tap, and make accepting and declining equally easy to find.

A consent notice covering an entire phone screen with a small decline link buried below a large accept button is a poor experience, and in some jurisdictions the imbalance is itself a compliance question. That is a general observation rather than legal advice.

What the overlay is competing with

A question worth asking before adding one at all.

An overlay interrupts the page in order to make an offer. On a small business site, the page it interrupts is usually trying to get somebody to call or enquire.

So the newsletter signup is not competing with nothing. It is competing with the enquiry, and it wins the visitor's attention at exactly the moment they were deciding.

Where the site's purpose is a phone call, an overlay asking for an email address is frequently taking the more valuable action and replacing it with a less valuable one.

The counter-case

Overlays work, which is why they persist, and the blanket advice to remove them is not right either.

For a shop with a genuine list-building strategy, a well-timed overlay can be among the more effective things on the site, and the numbers usually support keeping it in some form.

Some notices also have to be unmissable: a genuine change to trading hours, a service outage, or a safety notice is a case where interrupting is the correct behaviour.

The distinction is what happens to somebody who dismisses it. A visitor who closes an overlay and continues comfortably has been interrupted. A visitor who cannot find the close control, or who meets it again on the next page, has been obstructed.

The rules

1. Never on arrival from a search result.
2. Trigger on scroll depth or on leaving.
3. Show it once per visitor and remember.
4. Make the close control large, labelled, and reachable.
5. Prefer a bottom strip over a full overlay.
6. Check what it is competing with on that page.
7. Measure mobile separately before and after.

Step seven is the one that settles the argument internally, because the desktop numbers will usually look fine.

What a visitor sees first is covered in what loads first and why it matters.

Frequently asked questions

West Coast Media Solutions Inc. provides web design, web development, hosting, digital marketing, and business consulting to organisations across Canada, drawing on more than twenty-five years in the field.