The Good, The Bad and The Ugly of a Pop Up Website

pop up website

Pop-up Websites

A pop up website and pop-ups on your website are those things on your website which suddenly appear out of nowhere. They usually allow the website visitor to sign up for the newsletter or download an eBook. 

They are marketers dreams but are they perfect for web users? In this in-depth article, I will explore the good, the bad and the ugly of pop-ups.

A website without pop-ups? That’s like a sandwich with no bread. It just doesn’t work.

How effective they are in your marketing campaign and how to properly use them to enhance the user experience.

My experience using a pop up website? I use pop-ups on my own website and all my client’s websites. They are effective when done right and it is the case of less is more. Use pop-ups to enhance your website’s user experience.

What is a pop-up? 

A pop-up window is a small, temporary window that can be opened and closed by the user.

Before I continue let’s address what are pop-ups. A promotional pop-up is a small window that is usually positioned above your website content. These pop-ups usually appear in the centre of your screen and they are designed to look like a box that can be closed by clicking on the X icon.

There are a variety of pop-ups, and they range from simple modal windows to sophisticated ones that can be triggered by a user action.

What is the goal of a popup? 

The goal of promotional pop-ups is to get your website visitors to sign up for your newsletter, download an eBook or buy a product. Focused All Day (this website uses over 10 popups. You can’t see them all the time, they’re not intrusive, but they are designed to assist the user)

What are the different types of popups?

Easily create a pop-up using a Model Popup, Info Bar – a notification or option form at the top or bottom of your page.

different-types-of-popups
Pop Up Plugin Software allowing you to create different types of pop ups for your websites
  1. Model Popup – a lightbox overlay. 
  2. Info Bar – a notification or option form at the top or bottom.
  3. Slide-In – notification that’s listed in from the corners of the screen.
  4. Before/ After – a banner that can be embedded before or after all of your blog posts.
  5. In content Form – create the pop-up and then use the shortcode to place it where ever you like on your website
  6. Widget Box – display a pop up in your blog sidebar. It might contain a pop-up signup form.
  7. Convert Mat – cover the entire screen with your message.
  8. Full-screen popup – an overlay with a call to action (CTA).

What websites have popups?

I find the key difference is some are more prominent and the others are not instructive. 

Website Pop-up examples

I have a ‘get more leads’ text in the top right-hand corner of my blog sidebar. Clicking the link results in a popup appearing on your screen. It asks for your email address and then the next step is a confirmation screen within the same panel. Screenshot, used in the featured image of this blog.

How to create pop-up ads in HTML?

The best way to get started with pop-ups is to use a service that provides you with a ready-made pop-up code. This saves you the hassle of going through all of the steps of coding your pop-up. I can add software to your website if you hire my web design services or maintenance plans.

What makes a good pop-up website?

A good pop up will help with your marketing and should:

  1. Appear on your website only once in a while. It will usually appear on the bottom of the screen and will give the user a choice to close it or not.
  2. Surfaces on the visitor’s screen when they are about to leave your website. It will act as a barrier to keep the user from closing it and will offer relevant content, such as a newsletter subscription form.
  3. Top of the screen and it will allow the visitor to close it. It will usually give the user the option to download an eBook or to subscribe to the newsletter.
  4. Bottom of the screen and it will ask the user for a rating. The pop-up will usually come up after the user has finished reading an article or viewing a product.
  5. Overlay on the screen and it will ask the website visitor for an opinion. The pop-up will be triggered by a user action, such as filling out a survey or rating a product.
  6. In-line notification. It will usually appear while the user is filling out a form or making a purchase.
  7. The pop-up will usually come up after the user has finished reading an article or viewing a product.
  8. They convert well – Numerous case studies show pop-ups work well.
  9. They get people’s attention – Pop-ups are one of the most effective ways to grab people’s attention.
  10. They block out surrounding content – Pop-ups automatically load before any surrounding content, so you block out any distractions.
  11. They focus on one message – If your site is full of different messages, pop-ups can help you focus on one thing.
  12. They’re relatively easy to implement – You can easily create pop-ups with the right WordPress plugin.
  13. They’re not intrusive – Pop-ups don’t intrude on user experience as interstitials do.
  14. They can increase conversions – If you use them correctly, pop-ups can increase conversions.
  15. Pop-ups can give you the edge – They might not guarantee first place in the SERPs, but they have the potential to give you a boost.

Why pop-up websites are bad?

A pop up website is useful, but here are the ways that pop-ups are bad:

  1. Used in a way that is too aggressive, they can ruin your credibility and overall user experience.
  2. On your website every time, you open it. It will usually interrupt the user and steal their attention.
  3. As a full screen that covers your website content and gives the user no way of closing it.
  4. Appears on your website on every page that you visit. It doesn’t acknowledge that you have sen it and should not display it again for a certain amount of days or visit.  
  5. Ugly Pop-ups
  6. They’re not contextual – Pop-ups aren’t linked to any user behaviour so they’re essentially spam. Which might damage your brand – The spammy nature of pop-ups isn’t exactly reassuring. Pop-ups are considered intrusive by people.
  7. They’re not always effective – Some users will inevitably ignore your pop-ups.
  8. Google penalises websites that make it difficult for users to view content on mobile by using pop-up windows and interstitials. Makes sense! Pop up websites can be used but just don’t annoy people! If you create annoying pop-ups, your website becomes less visible to Google and other search engines. The less visible your website is to search engines, the less likely your website will show up on the search results page. Pop-ups can be an SEO issue: They can affect your rankings – Pop-ups can affect your search rankings. Pop-ups can be a usability issue.
  9. Some browsers block pop-ups. Here is an article on Google on how to turn pop-ups on an off in the Chrome browser. So, you put in the work and some people might block your pop-ups. The firefox browser has a pop-up blocker as well. 
  10. They can damage user experience – If you use them incorrectly, pop-ups can disrupt the visitor browsing experience. This can affect your bounce rate and hurt bounce rate impacting your SEO efforts.
  11. They are just too hard to track – If you can’t track the effectiveness of your pop-ups, how can you optimise your strategy? Popups don’t give you any analytics. Without a tracking system, you won’t know how many people clicked on your popup. PRO TIP The pop up website WordPress plugin/ software I install on clients websites allows them to see how many time a pop-up was seen (impressions) and how many times it was used (conversions). See screenshot below:
pop up tracking
Screenshot showing how many times the new pop up has been seen (impressions) and how many many times it has been successful (conversion). The next column shows the conversion rate as a percenatge.

Why pop-ups are bad UX?

A pop up website is not mobile-friendly. Mobile devices and pop-up windows do not mix very well. To combat this turn off your popups where the user doesn’t actively request them to show on a mobile device. The user, your marketing efforts and Google will thank you for this. 

Website Pop Up best practices

So, how do you avoid your pop up from falling into the bad points? 

How to use pop-ups

There are a few design tips you should keep in mind when creating your pop-up code:

  1. Make sure to design your pop-up as a scroll box. This is an effective way to target the message at the perfect time.
  2. You want to make sure your promotional pop-ups do not interfere with the user’s experience. You do not want your pop-up advertising blocking your website’s main call to action.
  3. Your chosen promotional pop-ups software should be easy to use. You want your pop-up to be easy to set up so that you can create a successful campaign. When I install the pop-up software on your WordPress website you receive a training video and links to support documentation to help you around the content panel. 

Pop-up best practices UX

  1. Large enough to get the attention of users. You want to make sure your pop up website code is large enough to capture the attention of your visitors.
  2. Visually appealing. You want your pop-up to be visually appealing so that you can keep the visitor interested.
  3. Make sure your pop up website is mobile friendly. You want your pop-up code to be optimised for mobile users. Google uses a mobile-first indexing. You can choose to display pop-ups for mobile traffic or not.
pop up hide on mobile
The software I provide allows you to hide your pop up on certain devices such as mobile, phone or desktop.

Creating a Pop Up Strategy 

Once you have your pop-up, you need to develop a pop-up strategy that you can use to get the most out of your campaign. Here are a few tips you can use to develop a winning pop-up marketing strategy:

  1. Make sure to set up your pop-up code in the right places so that you can get the most out of your campaign.
  2. Make sure to target your pop-up advertising to your audience. 
  3. Pop-up code, message and positioning are optimised so that you can increase your campaign’s effectiveness.
  4. You want to make sure that you are tracking your pop up website code so that you can see how well your campaign is performing.
  5. When creating a popup, make sure you have a clear and direct call-to-action. If you don’t have one, your viewers will have no idea why they are even looking at your popup.
  6. If you are getting plenty of traffic and lots of conversions it is advised you sync contact fields of the pop-up directly with your email service provider. The software I provide integrates nicely with a wide range of email service providers and CRM’s. To name a few: ActiveCampaign, MailChimp, HubSpot, ConvertKit. This will help with your wider marketing campaigns. You can use these to create a followup email and embed a meeting link for a discovery call for example.
  7. Implement A/B testing – the pop-up software I install on your website will allow you to run two versions of the same pop-up. I have used this on my own website to increase conversion on the exit-intent pop-up. You get to choose how many people see the A/B test. AB testing example using the pop up plugin I can install on your website:
  1. Create a pop up you are proud of.
  2. Press duplicate and it will clone it.
  3. Now make a slight alteration and edit the clone. No code is needed, it’s drag and drop. Your change could be:
    1. The size of the text
    2. The copy, altering the language and tone
    3. Maybe you want to experiment with the background colour. Having a red background might make people think its a warning and you want green background.
    4. Then choose the size of the test. For example 100 website users with a 50/50 split.
    5. The software will know which one performed best by the number of people, for example, who signed up for your newsletter (if that was the call to action you were hoping for).
    6. The lead generation software will pick and implement the winner. How great is that

Pop-up code placement

There are a few places on your website where you can place them to increase conversions. Top of your website, at the bottom, only on specific posts. Regardless of where they should appear at a strategic time. For example, when a visitor is about to leave your site, or when they are about to finish reading an article.

Website Pop-Up Message

So how do you create promotional pop-ups that convert? If you are planning on using popups on your website, make sure you have a clear call-to-action, keep it simple and don’t overdo it. Here’s a step-by-step process I use to make sure each of my pop-ups stand out, generate leads, and bring new customers

  1. Define your ideal audience

Before you can create a pop-up, you need to know who you’re targeting. Then you need to segment people within that list. 

  • Gym Example Part 1 – if you run a gym, you might target women in their 20s who live in a certain area. 
  • Fashion blog Example Part 1- If you run a fashion blog, you might target women in their 20s who live in a certain area. But to truly create a pop-up that converts, you need to dig deeper. You need to understand why your ideal customer is visiting your site. See the next assets of examples below. 

So take some time to think about your ideal customer. Ask yourself:

  • What are the challenges they’re facing?
  • What do they need more than anything else in the world?

When you know the answers to those questions, it’ll be much easier to create a pop-up that converts.

2. Create a value prop

Promotional pop-ups can be used for more than just lead generation. But they can’t be used for anything. You need to decide what you want your pop-up to do. Do you want it to:

  • Gym Example Part 2 – Promote a new service? Like a personal fitness trainer. Collect emails? So when you have a discount or a sale you can send everyone an email. You can do this by using a pop-up form.
  • Fashion Example Part 2 – Promote a new product? Latest clothing trends? 

Whatever you decide, your pop-up should be focused on a single goal. For example, if you want your pop-up to collect email addresses, it needs to offer something specific and valuable to entice your audience to sign up. Or if you want your pop-up to promote a new product, it needs to offer a super-specific story that will get your audience excited about your product. Your pop-up should also focus on a single demographic. For example, if you want your pop-up to promote a new product, it might be best to focus on a single-gender. Once you know your value prop, you can focus on how to design your pop-up. If you’re not clear on your ideal customer’s needs, you can’t create a pop-up that will help you meet them. 

3. Decide what to give away

Your pop-up is only going to convert if your audience wants what you’re offering. So you need to make sure you’re giving away something they want. 

  • Gym Example Part 3 – If you run a gym, it might offer a free workout. Whatever you’re giving away, you need to make sure it’s high quality. if you’re giving away a workout, it needs to be something you’d want to do yourself.
  • Fashion Example Part 3 – If you’re a fashion blog, your pop-up might offer a full outfit that matches the latest trend and if you’re giving away an entire outfit, it needs to be high quality.

Whatever you’re giving away, you should be proud of it. Otherwise, you’ll have a hard time selling it to your audience

4. Decide where to place your pop-up

Once you know your value prop and where you want to place it, you need to decide where your pop-up will go.

  • Gym Example Part 4 – If you want to create a pop-up that collects email addresses, you can place it at the top or bottom of your blog posts.
  • Fashion Example Part 4 – If you want to create a pop-up that promotes a new product, you can place it at the end of your blog posts or in the sidebar.

Whatever you decide, you need to make sure you’re placing your pop-up in the right spot

5. Decide how many promotional pop-ups to show

Once you’ve decided where to place your pop-up, you need to decide how many times to show it to your audience.

  • Gym Example Part 5 – If you’re running a pop-up for a free workout to increase email signups, you might want to show it to your audience once a day for a week.
  • Fashion Example Part 5 – For example, if you’re running a pop-up for a new product, you might want to show it to your audience once a day for a week.

Once you know how many times you want to show your pop-up, you’re ready to create it.

6. Know when to turn it off

Your pop-up is only going to convert if your audience wants to sign up. If they don’t want to sign up, they’ll just close your pop-up and move on. So you need to make sure your pop-up works.

For example, if you’re running a pop-up to collect email addresses, you might want to turn it off after 24 hours. That way, if your pop-up doesn’t work on the first day, you can go back and optimise it. Your turn off switch should also tell you when your pop-up is working.

By turning it off you can optimise your pop-up and make it work for your audience. Which takes us back to the A/B split testing I spoke about earlier on.

7. Test your pop-up

Once you’ve created your pop-up, you need to test it. For example, if you’re running a pop-up to collect email addresses, you might want to test it on a small group of your audience and see how well it converts.

That way, you can optimise it before you scale it up. Once your pop-up is converting well, you’re ready to go.

Pop-up alternatives

Why settle on purely a pop up website. You can use a call to action which are permanently on your website such as web banners. Websites I create include web banners and popups. It’s good to have more than one method of trying to engage with your target audience and give the visitor more ways of getting in touch. 

pop-ups alternatives
Pop-ups alternatives example. When you exit my homepage a pop up appears asking you to ring. Before the website pop up there is a web banner askign yout o contact me.

When I create websites I target these banners to appear after a certain amount of paragraphs or before a certain amount of headings. The more banners you create the higher the chance of a conversion. Not because of quantity but quality. The more different banners you have in your inventory you can use assign them to target specific pages and posts. 

Conclusion 

To conclude it’s safe to say you, me and search engines have a love, hate relationship with them. The key is to use a pop up website wisely. Don’t bombard the visitor with them. Give your site user value such as a free coupon for your products and the pop up only appears on exit or the product page. 

I use promotional pop-ups on my website and my client’s websites and they bring great results. If you are interested in having the software on your website please get in touch. If you have any feedback or personal experiences on pop-ups please let me know on Twitter.