Home  /  All  /  5 Ways To Make Popups Look Great On A Mobile Device (For Your Responsive Website)

5 Ways To Make Popups Look Great On A Mobile Device (For Your Responsive…

Mobile popups

Our world has officially gone mobile. Analyzing the share of digital minutes spent by users in the US on different devices, smartphones accounted for 62 percent followed by desktops at 29 percent and tablets at 9 percent share.

Propelling the move towards a mobile era Google has announced to roll out it’s mobile-first indexing as a default for all websites starting July 1st, 2019. All these factors have made the incorporation of responsive design practices when developing websites and web apps a must for all.

Capitalizing on the huge amount of mobile traffic influx that occurs when users land on your mobile optimized website requires clever crafting of a pop-up strategy. One that compels the users to convert and enter your sales pipeline without negatively affecting the user experience or worse, the SEO rankings in Google.

Important considerations before implementing mobile popups

Google gives the highest importance to seamless user experience and has thus issued strict guidelines when it comes to the incorporation of popups on mobile websites. It considers popups in the form of interstitial advertisements as intrusive and obstructive to the overall user experience while browsing on mobile.

It has thus outlined stringent norms for improving the mobile search experience. These involve penalizing web pages that show the obstructive popups upon the landing pages (one where the users end up after clicking on the Google search results).


Here’s what you need to ensure while designing pop-ups so that the website’s search rankings aren’t affected by it.

  • The popups should not cover the main content of the webpage while the user is browsing
  • The popup should be in the form of a standalone interstitial that user has to dismiss to get to the main content
  • Above the fold portion of the page layout should not comprise solely of the popup making the user scroll down to access the content.

Using popups to boost mobile conversions

Despite the fact that Google doesn’t favor mobile popups and the user opinion about popups is negative, their importance and ability to drive website conversions for your business is undeniable.

If done correctly, popups have the potential to drive user signups and generate revenue favorably. Whether you are designing an eCommerce website or a B2B SaaS website, designing effective popups that compel the users to click on them is critical from a business point of view.

Here are 5 ways you can make popups on your responsive website look great on a mobile device without negatively affecting the search rankings.

1. Design the popup for mobile

Responsive design does not mean that the same popup that displays on the desktop would also work for mobile devices. The amount of screen space available in case of mobile phones is significantly lesser so having the same set of popups would end up invariably cluttering up the user interface thus diminishing the user experience.

Also, popups displayed of desktop websites are not subject to Google penalty so you could display full page popups that cover the content and it wouldn’t hamper your webpage rankings. A similar strategy in mobile when ensuring the responsive design would.

Designing different popups for web and mobile versions of your website gives you an upper hand on design and provides the leeway to Google’s guidelines.

2. Mind the touch target

Designing the popups for web and mobile is fundamentally different due to the difference in screen sizes and the kind of user interaction that exists in both cases. While the input fields in case of the web can be smaller to accommodate mouse clicks, the same need to be large enough to incorporate touch targets.

A smaller touch target gives rise to the “fat finger syndrome”. The user instead of converting might just end up abandoning your website if he is not able to complete his desired action on the mobile devices.

As a rule of thumb, every clickable button on your mobile website needs to be a minimum of 44×30 px. Mobile devices are not the user’s preferred input medium. If you are asking for email signups, make sure that the input field is large enough for the users to click on with the tap of a finger and the input form has a flow that offers the lowest friction to the user.

3. Keep the popup size limited

A banner popup at the bottom of the screen that does not cover the main content of the webpage is a popular strategy to incorporate popups on the landing page. Since it does not cover the main website content that lies above the fold, it does not violate Google’s specifications.

It is also less obstructive for the users than a full page modal popup. The only challenge with incorporating this popup strategy is that you are left with a limited amount of space available to you in order to provide enough value for your customers to convert.

Since the popup is smaller, it may evade user attention. Additionally, the smaller input fields may pose a challenge to the users who want to subscribe to your list.

4. Do not bombard the user with popups

Popups that display as soon as the user lands on your webpage are an instant turnoff. Incorporate them in such a way that they either fire up later during the user’s browsing journey, once he has had the chance to consume the content first. Don’t let the popup display immediately or within seconds of the visitor arriving.

Another viable strategy is to display the popup on the second page that the user visits. This way, there is no violation of Google’s guidelines and since the user has had enough time to consume content that is valuable, the chances of conversion are also higher.

5. Understand the intent and provide value

The popups that offer value result in the user voluntarily clicking on it. Such popups imbibe themselves within the user’s journey though your mobile website and result in a seamless user experience as well.

Understanding the psychology of the user and deciphering the intent with which the user is visiting the webpage provides you the leads you need to draft a compelling value proposition. A call to action button is then incorporated on the landing page instead of a popup. On clicking upon the CTA, the popup displays.

Unlike other types of popups which the users click out of frustration (in order to close them) or accidentally click them due to their placement, CTA popups are better integrated. Since the users are voluntarily clicking upon it, enhanced user experience is guaranteed.

No matter what strategy you choose, designing the popups and the entire mobile website as a whole needs to be done keeping in mind the overall user experience. Understanding the visitor’s psychology and addressing their needs is the key to business success and increased conversions.

Rahul Varshneya is the co-founder and President of Arkenea. Rahul has been featured as a technology thought leader in numerous media channels such as Bloomberg TV, Forbes, HuffPost, Inc, among others.