Have you ever searched the web on your mobile phone, clicked on a link for a promising looking site only to be confronted by a pop-up form you can’t dismiss?
Frustrating. You might spend a minute or two trying to figure out how to get rid of the form that’s totally blocking the site’s content. But you’ll quickly get frustrated and bounce, moving on to a site that’s more mobile friendly.
I’m not a huge fan of pop-up forms but there is no denying they work. The pop-up form is the highest converting form on this site. Recent tests by big SEO and marketing companies like SumoMe and Moz show that pop-ups and their cousin the “welcome mat” are still work and work well.
But you’re going to need to re-evaluate your pop-up game and fast.
On January 10th, 2017, Google will update its mobile-friendly search algorithm to add smartphone content visibility as a ranking signal.
Google plans to penalize sites using “intrusive” elements they call “interstitials”. In plain English, this means features like pop-ups or the popular welcome mats. It could even affect the banner style newsletter signup forms that are popping up across the top of many bloggers’ websites.
This means that websites that use pop-up boxes or welcome mats for things like newsletter subscription forms or Facebook likes may find that their website doesn’t perform as well as it used to in mobile search.
Since mobile browsing now makes up more than 50% of internet usage worldwide, this should have you worried. On this site, for example, only 14% of our visitors arrive via mobile, but that’s still 14%. I’d hate to lose any of that traffic.
If you’re a blogger, there are chances your mobile visitors make up even more of your traffic than 14%.
So, what should you do to protect your mobile Search Rankings? First, let’s figure out what an “intrusive” pop-up is.
What is an “intrusive” pop-up?
According to Google’s Webmaster Central Blog, the following usage can be considered “intrusive”:
- Showing a pop-up that covers the main site content, either immediately after users navigate to a page from the search results, or while they’re looking through the page. So, even time delayed popups will be affected.
- Displaying a standalone form that the user has to dismiss before accessing the main content. This would include those “welcome mats” that are becoming so popular lately.
- Using a layout where the above-the-fold portion of the page appears similar to a popup form or welcome mat, but the original content has been inlined underneath the fold. Examples of this are the very popular banner style signup forms seen at the top of many blog sites these days.
Here is a visual of these definitions right from Google itself:
Now that we have an idea of what we’re dealing with, we’ll cover ways to fix your site for both WordPress and Blogger/Blogspot users.
Tricks for WordPress Users
MailChimp is a very popular newsletter service for WordPress because their introductory service is free and easy to use. Creating a pop-up is simple and it’s quick to add it to your site.
But the default MailChimp pop-up doesn’t have any option to disable the form on smaller screens. Other services like ConvertKit already have options to show pop-ups (called modal on ConvertKit) only on desktop computers. Hopefully, MailChimp will follow soon.
For other newsletter services, check your provider’s Help documents for more info.
The best option to prepare your site for Google’s changes is to use a plugin that will allow you to integrate MailChimp and other newsletter services with the option to hide the pop-up on mobile. Here are 2 good options:
This first plugin is for MailChimp only.
There are a wide number of pop-up plugins for WordPress that integrate with MailChimp. We like this one because it’s easy to use yet packed with options.
You can display your MailChimp form as a Lightbox (pop-up), slider or widget. The lightbox comes with 4 different styles to choose from.
You can also use the Live Preview editor to edit your form. Options include customizing colors, Google fonts and a WYSIWYG content editor. You can customize everything down to the button hover color.
And the best part of this plugin is that you can filter display by device. Options include show/hide on desktop, tablet and mobile.
You can also set behavior based on page, i.e. hide on Home Page or show only on Post Pages.
The slider form is equally customizable with filter by display options. You can customize your trigger as well as choose whether the form will slide in on the left or right.
Finally, add a customizable widget to your sidebar or other widget area.
Oh, but wait, there’s more. You can add an in-post form, top bar form or flipbox. Or add a form using a shortcode.
I seriously can’t believe this plugin is free, it has so many great features.
There is a premium (paid) version (which you won’t really need) that includes things like A/B testing, analytics and more themes.
Definitely worth checking out.
Already have a MailChimp popup form you want to be able to keep using?
This handy, free popup plugin allows you to create an HTML or text popup. Just embed your default MailChimp code into the plugin and set your options which include disabling the popup on mobile.
You can also customize the popup display and choose which pages it displays on.
If you’d like to keep your existing MailChimp form while disabling it on mobile, this is a great way to go.
This plugin will also work for any other newsletter service that provides a form embed code. Paste your code into a text popup, set your settings and go.
So, there you have 2 options for WordPress: build a new form using a highly customizable plugin or keep using your existing default form with an easy-to-setup popup plugin.
Blogger/Blogspot users, you may be despairing, thinking since Blogger doesn’t have plugins, you’re out of luck. But I have a great way to add a subscribe form that can be disabled on mobile.
I looked at a number of options but this is THE option to add a popup to your Blogger webiste that is friendly to Google’s new popup guidelines:
This handy service includes a FREE plan that includes use on 1 site with unlimited forms, page level targeting and integration with MailChimp.
You create a form using their free themes and then integrate it with your MailChimp account. In fact, MailMunch integrates with a number of newsletter services including:
- Constant Contact
- Active Campaign
- Infusion Soft
- Campaign Monitor
- Mailer Lite
- HTTP Post
The free themes are pretty basic but you can’t beat free and their site is very easy to use and set up. Install a simple line of code into your template above the <head> tag and any changes you make to your forms in the MailChimp dashboard automatically update to your site.
A nice feature is the ability to add images or videos to your form. You can also use time-delayed popups.
Create in-post forms as well as top bar and fly in forms to add to your Blogger site.
It’s super easy to disable the mobile pop-up. When creating your form, under the Behavior tab, select the Display Rules. Under “Which devices do you want the form to show on?” section, toggle off Mobile Devices.
For a free service without limits, this is a really great option.
Hello Bar – a different solution
The other tools I found for Blogger all came with a price tag. If you’re not in love with MailMunch as much as I am (Why not, I ask you. Why not?) then give Hello Bar a try.
Hello Bar adds a customizable and non-intrusive bar at the top or bottom of your website. You can collect emails, get Facebook likes or add a custom message to your site with a Hello Bar.
Hello bar integrates with:
- Constant Contact
- Campaign Monitor
- Infusion Soft
- Mad Mimi
- Vertical Response
By default, email collection forms are integrated with Hello Bar only, so make sure you go into your “Contact” panel and setup your integration.
You have to upgrade to remove the Hello Bar logo but I don’t find their logo in the top left corner that obvious so I wouldn’t bother.
The best part is that you can customize your bar styles and even height. The bar is fairly unobtrusive on mobile but I would make sure you offer the option to close the bar.
Update your mobile popup settings now
Avoid Google mobile rank penalties and make sure you get your mobile popup layout in hand.
I’ve included 2 great options for WordPress and 2 for Blogger to help you get onboard with the new updates.