Conversion Rate Optimization

Mobile Design Best Practices for Pop-Ups

May 16, 2023
Jace Farran

Whether you use pop-ups to grow your list or recommend products, follow these design best practices to give your mobile visitors the best experience possible.

While your website’s traffic may vary, the majority of total website visits across the web are mobile. If you’re not already, it’s time to optimize your site for mobile users—and that includes your website’s pop-ups, lightboxes, sidebars, and banners.

Whether you use pop-ups to capture emails, grow your SMS list, or even recommend products, follow these best practices to give your mobile visitors the best experience possible.

Optimizing Pop-Ups for Mobile

If you show wide or full-screen lightboxes on your site, make your design responsive and scalable for desktop computers, but for mobile devices (less than 500px), try rethinking your aspect ratio from 16:9 to 9:16.

mobile pop up dimensions
While a 16:9 or 1:1 pop-up may scale for mobile, it's best to use pop-ups specifically designed for mobile devices.

After all, just because your design can scale down for mobile, doesn’t mean it should. Since most people use their phones in portrait, or vertical, mode, your mobile pop-ups should account for that.

For instance, the pop-up example below displays horizontally on larger devices, with the image to the left of the form fields. When a user visits on mobile, the image changes, instead displaying on top of the form.

responsive mobile pop-up design that's wide on desktop and tall on mobile
This pop-up design is wide on desktop, while the mobile version uses a taller design.

Mobile Pop-Up Dimensions

What mobile pop-up dimensions should you use? Depends on your audience! Well, your audience’s phones, at least. Like desktops, screen resolutions on mobile vary across devices.

But to be safe, 375x667 is a good size to stay under, as quite a few mobile phones use that resolution on the web.

mobile popup with a quiz question
Just as your visitors' preferences will differ, not all mobile visitors have the same screen size. This pop-up quiz is designed for mobile, using large buttons with plenty of space in between.

To be even safer, you could give yourself some margin on the left and right by designing to 360px wide.

Mobile-Compliant Pop-Ups

Google has strict rules for mobile interstitials, so to avoid potential penalties in search rankings, make sure your pop-ups comply. 

According to Google, when a user lands on your site via search, pop-ups shouldn’t cover the main content. This gives you 2 options: show a pop-up teaser or delay your pop-up until the second pageview.

two examples of mobile pop-ups that comply with google mobile interstitial guidelines

Option 1: Show a Pop-Up Teaser

A pop-up teaser is a small, unobtrusive teaser that covers a minimal part of the screen. Since it doesn't get in the way of your content, it falls within Google guidelines. For best results, keep your copy short and images to a minimum.

Option 2: Show a Full Pop-Up on the Second Pageview

Instead of showing a pop-up immediately after a search visitor arrives on your site, you can avoid running afoul of Google guidelines by delaying pop-up displays until the second pageview of a user’s site session. You can go all out on the design here, as long as it’s not on the first page a searcher lands on.

With Digioh’s conditions editor, you can easily set conditions that keep your site Google-compliant and target visitors with the right widgets. You can even create conditions to show visitors from direct traffic and search different pop-ups.

Bigger Targets for Smaller Screens

It’s important to ensure your mobile form, fields, and buttons are easy to tap on a touch screen without hitting the wrong one. Fields and buttons that are too small or close together are difficult to tap accurately.

mobile pop-up form best practices

In the example above, the form on the left is small and close together, making it difficult to accurately tap the correct field. But the form on the right has large inputs and buttons that are easy to tap with your fingers.

Less is More

With limited real estate on mobile screens, avoid long paragraphs of copy. Keep text to a minimum and only include what’s essential to your message.

The same goes for images—sometimes you can skip images altogether and let your copy shine.

Less is also… less work

Browsing on mobile can be a little bit awkward. Consider shortening your form and only asking for essential information.

If possible, use a shorter form to convert more users on mobile.

If you don’t absolutely need their full name, address, Twitter account, shoe size, blood type, or favorite ice cream flavor—don’t ask. (But if you do want to ask additional questions, you can always try a multi-step pop-up form.)

Form Input Text Should Be 16px or Larger

Ever noticed that your phone automatically zooms into the form when you try to complete a small form on mobile? This typically happens on iOS devices when the form field inputs are too small. It can be helpful, but it can also be disorienting.

To avoid that awkward zoom when you type in a form on iOS devices, set the font on the field inputs to be 16px or larger.

pop-up that zooms into the form when a user is on mobile

Do that, and your design will stay intact.

Mind Your Margins

Be mindful of your text and form elements being too close to the edge of the screen. It’s good to leave room to account for different screen sizes, especially since some devices have curved edges that can cut into your design.

pop-up design with padding and margins that make the design more readable
While the text in the pop-up on the left is cramped, the form design on the right uses comfortable spacing.

Plus, it’s usually easier to read text that has some room to breathe.

Don’t Hide the "Close Pop-Up" Button

To avoid causing frustration for your site visitors, close buttons should be large enough to tap easily and far enough away from other inputs so visitors don’t accidentally close your pop-up. 

mobile pop-up with a clear close button

And of course, if they’re too close to the edge of the screen, they may get cut off on small screen sizes, leaving no way to close the box. That’s a good way to get someone to leave your site and never return.

Use Fancy Fonts Sparingly

Legibility is key on small screens. Use fancy fonts sparingly, especially on small screens. 

example of mobile design best practices for fonts
The pop-up on the right ditches the small script for a more readable font.

Consider simplifying the design for mobile if you’re using a lot of scripts or unique fonts. You can sometimes get away with using a fancy font for larger text, but stick to basic, easy-to-read fonts for smaller text.

Test, Test, Test

Every browser and screen size is a little bit different, and forms render differently across different devices, so it’s really important to test your designs.

But simply resizing your window only gives a rough idea of what the design will look like on a phone. Your safest bet is to grab your phone and look at your design. To test mobile lightboxes across multiple devices, ask the people in your network who might have common devices, like the latest iPhone mini or Samsung. And when all else fails, services like Browserstack let you test multiple devices.

Design for Mobile with Digioh

To provide the best mobile experience, it’s not wise to just scale down your desktop design and call it a day. With Digioh, you can easily add a breakpoint or target mobile users with specific pop-ups, giving you complete control of your designs across every device.

Jace Farran
Head of Demand Gen
Jace Farran is Digioh's Head of Demand Gen with an extensive background in web design. He has direct experience in eCommerce, publishing, and agency settings, working in a wide range of areas, including email marketing, content, and social media marketing. Jace is passionate about providing valuable content and communicating through design. He lives in New York with his family.

Continue reading

How to Create Marketing Efficiency For Your Shopify Store in 2024 | DTC on Easy Mode Part 1

Branded Quizzes Done Right: Creating a Custom Product Recommendation Quiz

How to Optimize Your Ad Spend with a Quiz

Turn More Visitors into Customers

Schedule a session with our conversion experts to discover how you can drive more revenue with consumer-consented data.
Get a Demo