Website Pop-ups: The Good, the Bad, and 18 Rules You Should Never Break

Suzanne Scacca.
June 19, 2018
Website Pop-ups: The Good, the Bad, and 18 Rules You Should Never Break.
A website is a place where a business can educate its audience about its brand. What it does. Why it does it. What they’ll get out of being there. That, in and of itself, is a lot of information. When designing a website for your clients, the last thing you want is to overdo it. The web is not a place for excess and its users typically don’t have the patience to sift through pages and pages stuffed full of information just to get to the relevant bits. That’s why minimalism will endure as a design trend. It allows web designers to convey a lot about a brand and its message, without having to spell it all out on the page. It gives brands a cleaner, more buttoned-up look while also clearing a path to conversion for visitors. But just because you design with simplicity and minimalism in mind, doesn’t mean you can’t share additional messages with visitors. You just have to find less cumbersome and intrusive ways to do so. Years ago, the pop-up was introduced as a means to do this. It kept related and relevant information within the website without having to intrude on the well-designed page. However, Google has since cracked down on the usage of pop-ups that it deems disruptive to the user experience, which has some designers and developers confused about what they’re supposed to do now. So, what does it mean? Is the pop-up no longer a viable way to promote special offers, share value-add content, subscribe new followers, or recover nearly-lost sales? In this article, I’m going to cover the current state of website pop-ups and give you some best practices to adhere to when using them.

The Current State of Website Pop-ups

First, let’s talk about what pop-ups look like today, how they’re used, and why you would even want to include them in your web design plan.

Types of Pop-ups

A modal is the most common type users encounter on the web. Freelancers Union Trigger It can literally pop open on a web page, slide into the page, or just be there right from the point of entry. While these usually can be found in the dead-center of the page, some websites now place them closer to the bottom of the page or even stick them in the corner. An interstitial or overlay pop-up is one that covers the entire screen, usually upon entering a website. Wishpond Interstitial A notification bar is one that can permanently stick to the top or bottom of a website. Grain Top Bar

5 Very Good Reasons to Use Pop-ups

You might think that with the backlash from Google on mobile pop-ups (I’m getting to that soon…) that it would be best to stay away from pop-ups altogether. However, I’ll give you 5 very good reasons why most of the websites you design should include them:

1. They’re Attention-Grabbing

No one has patience to read anymore, which is why delivering attention-grabbing micro-messages in pop-ups are so great.

2. They Draw the Eyes to What’s Most Important

Pop-ups deliver extra value to online visitors—and they know it. So, when a pop-up appears, they’re going to immediately be drawn to that offer or value-added opportunity.

3. They’re Versatile

Pop-ups no longer move visitors out of the browser window or clog up their desktop with ads they weren’t aware of. You now have so many different types to work with and they can be triggered at different points of the website experience:
  • Upon entry
  • After a certain point of scrolling
  • Triggered by an action
  • Right before exiting

4. They Keep the Site Clean

As I mentioned before, minimalism is important for making a website aesthetically pleasing. But if you have a special message you really want to get in front of visitors and don’t want to take up precious and limited real estate to do it, you can use pop-ups to deliver it.

5. They Increase Conversions

Sumo studied its users’ pop-ups and the conversion rates associated with them. What they found was that pop-ups have the potential to convert at a rate of about 3%, on average. Pop-ups that are designed really well, however, have the potential to convert 9% of visitors that encounter them. You can also use them to increase engagement on the site. Ask them to fill out a survey, share something on social media, or to watch a video on a landing page.

But What’s the Deal with Mobile Pop-ups?

Okay, so Google doesn’t hate mobile pop-ups. It just wants web developers to be smarter about how they use them since pop-ups can be disruptive for users, in general, though definitely more so on smaller mobile screens. As a result, Google has begun issuing penalties to mobile websites that use these three kinds of pop-ups: Google Bad Pop-ups In summary, stay away from:
  • Pop-ups on the first page of a mobile user’s visit
  • Pop-ups that hide the majority of the web page behind it
  • Interstitials
Got it? Now, let’s talk about what you should do when using website pop-ups.

18 Best Practices for Using Website Pop-ups

  1. Never use pop-ups for the sole purpose of having a trendy design element in place. If you waste visitors’ time with a meaningless disruption, you’ll lose their trust.
  2. Design the pop-up to look just as good as the rest of your website.
Cooking Light Modal
  1. Make sure they’re responsive.
  2. Keep copy short and to the point.
  3. Don’t use the passive aggressive Yes/No calls-to-action unless it’s your brand’s personality to be that way. If you’re including two CTAs, do it in a way that positively encourages them to take action on the primary one.
  4. If you’re going to collect contact information, ask only for one thing: their email address.
  5. Make sure the content of the pop-up is relevant to the page it appears on.
Optin Monster Corner
  1. If you can, avoid showing pop-ups on the first page. Give visitors a chance to acclimate first. For the record, though, this is one of the entry pop-up types Google does allow for (since privacy is so important):
College Humor Entry Modal
  1. Follow Google’s rules for mobile: no interstitials, no oversized modals, and no pop-ups on the first page.
  2. Don’t feel like desktop and mobile pop-ups need to be identical. Design pop-ups for each device type.
  3. Always include an easy way to get out of the pop-up: either click outside of it or place an “X” button in the top-right.
  4. Time your pop-ups to appear at just the right moment of the on-site experience (like right before visitors are about to exit).
OptinMonster Exit Intent
  1. Set frequency rules, so visitors don’t keep seeing pop-ups on every page or on every visit.
  2. Place pop-ups in the right location.
  3. If you want to intrude (and think visitors will be okay with it), put them in the center of the screen.
Wishpond Modal
  1. If you want to share a special offer, use a sticky bar.
Yoast Bottom Bars
  1. If you want to give them something to think about as they move around the site, put the pop-up off to the side.
Cooking Light Side
  1. Use audience segmentation and targeting to create customized pop-up messages.
Delaware Online Shaded Modal

Wrapping Up

If you have something really valuable to share with visitors or know you have a way to positively lure them back to your site, give website pop-ups a shot. And don’t be afraid to A/B test them the way you do other elements on your site. There’s so much here to play with, including design, copy, placement, CTA, triggers, and more.

Suzanne Scacca

Suzanne Scacca is a freelance writer by day, specializing in web design, marketing, and technology topics. By night, she writes about, well, pretty much the same thing, only those stories are set under strange and sometimes horrific circumstances.

Read Next

3 Essential Design Trends, February 2024

From atypical typefaces to neutral colors to unusual user patterns, there are plenty of new website design trends to…

Surviving the Leap from College to Real-World Design

So, you’ve finished college and are ready to showcase your design skills to the world. This is a pivotal moment that…

20 Mind-Bending Illusions That Will Make You Question Reality

Mind-bending videos. Divisive Images. Eye-straining visuals. This list of optical illusions has it all. Join us as we…

15 Best New Fonts, February 2024

Welcome to February’s roundup of the best new fonts for designers. This month’s compilation includes some innovative…

The 10 Best WordPress Quiz Plugins in 2024

Whether it’s boosting your organic search visibility or collecting data for targeted email marketing campaigns, a great…

20 Best New Websites, February 2024

It’s almost Valentine’s Day, so this latest collection is a billet-doux celebrating the best of the web this month.

Everything You Need to Know About Image Formats In 2024

Always trying to walk the tightrope between image quality and file size? Looking to branch out from JPGs and PNGs this…

The 10 Best Logos of 2023 - Ranked

From vintage aesthetics to innovative new color schemes, we’ve seen a lot of creative logo designs this year. In this…

Exciting New Tools for Designers, February 2024

2024 is well underway and shaping up to be an interesting year. So, to help you keep your focus on working hard and…

The Art of Engineering AI Prompts

In the rapidly evolving world of artificial intelligence, the ability to communicate effectively with AI tools has…

15 Best New Fonts, January 2024

In this month’s roundup of the best new fonts, we find a large number of vintage, retro, and revival typefaces. Is it…

5 Web Design Disasters That Will Ruin Your 2024

Welcome to 2024, where web design is as fast-paced as ever. You know how crucial a killer website is nowadays — your…