Working with Mobile-Responsive Content

Within the Builder, you can access a mobile-responsive version of your content at any time by toggling over to the mobile-responsive area of the Builder. The mobile-responsive version of your content is also fully customizable, so you can get things looking just the way you want. 

This article describes how to :

• Make existing content mobile-responsive.
• Manage the mobile-responsive version of your content.
• Understand how Google search rules affect your mobile-responsive content.

What is Mobile Responsiveness?

Mobile Responsive allows you to serve either a mobile or desktop version of your landing pages, popups, and sticky bars automatically to visitors, depending on their browser size, without using a redirect. When enabling the mobile version, any visitor using a mobile device will see the mobile view of your content, just how any visitor arriving from a desktop device will see the desktop view.

How does it work in Unbounce?

We set the breakpoint for your mobile-responsive content to 600px. This means that any browser window with a viewport of 600px or less will see the mobile view of the content. Any browser with a viewport of greater than 600px will see the desktop version of the content.

Retina displays (like the iPhone) are technically larger than 600px due to their high resolution. Still, the viewport behaves like smaller browser window, so devices with retina display show the mobile version of the content. 

Creating Mobile-Responsive Content

You have three options for making mobile-responsive content in Unbounce:

1. Start from a template: All Unbounce templates are mobile responsive, so if you're creating a brand new page/popup, starting from one of these templates will mean that most of the initial setup work is done for you already.
2. Update an existing page: You can update any existing content to be mobile responsive. The objects from your desktop will appear in your mobile version, but you'll need to arrange them. Keep a keen eye on the out-of-bound warnings to make sure everything displays properly.
3. Start from a blank page: As always, you can start with a blank page or popup and customize it to suit your brand. Build your desktop content as normal — all objects added to your content will appear in your mobile version. And again, keep a keen eye on the out-of-bound warnings to make sure everything displays properly.

Looking for more resources? Take a gander at our Get Mobile Ready guide for some great tips and tricks. 

Building Your Mobile-Responsive Content

There are a few things you'll need to customize your mobile-responsive content.  

Start by enabling the Mobile version of your page: Click the buttons on the bottom right of the Unbounce Builder window to toggle between Desktop and Mobile view.

Layout Assistant: This feature is the best way to get started on customizing your mobile-responsive content. You can apply the Layout Assistant to your whole page, popup, or individual sections, which will get you to a much friendlier starting point.  

Here's an example section, before and after applying the Layout Assistant: 

The Layout Assistant is a huge game-changer if you're designing your content from a blank template. The feature works best if you apply it first, then go ahead with the detail work. Try to avoid making changes before you apply Layout Assistant, as this can cause minor reparenting issues.

Resizing text: You can resize the text from your desktop version to fit your mobile version. Select the text box and use the scale bar on the upper right of the Properties Tab to adjust the font size on the mobile version only.

Forms and buttons: Forms and buttons will be the same across your mobile and desktop view. You can hide a button on one view and show a different one in the other view. Your form must be consistent across both versions though. 

Hiding and Displaying Content: If you would like an element to appear on one version of your page only, use the Contents Panel to hide the elements on either version.

1. Click the Contents panel on the bottom right-hand side of the builder.
2. From the hierarchical list of elements on your page, click the eye icon to the left of the element to hide or show the content. 

Check out our documentation for more tips on editing your mobile version of your landing page without changing the desktop version. 

Enabling Your Mobile Content

You may need to manually enable mobile view for your page (popup templates are mobile-responsive by default, but only some landing page templates are).

To enable mobile view for your landing page:

1. Click the "Mobile" on/off toggle button at the bottom right of the Unbounce Builder.
   
2. Save and publish (or re-publish) your page.

To enable mobile view for your popup:

1. Click the "Mobile" on/off toggle button at the bottom right of the Unbounce Builder.
   
2. Save and publish (or re-publish) your popup.

Modifying an existing page to be mobile responsive

If you have a page that pre-dates the release of Mobile Responsive, it can still be made responsive. The concepts described above will still apply, but the initial adjustment of the mobile view for your existing pages will likely take a bit longer than if you create a new page with Mobile Responsive design in mind (or start from a new Mobile Responsive Template). 

Tracking mobile vs. desktop visitors

Currently, Unbounce doesn't differentiate between mobile and desktop when counting visitors and views. But you can utilize Google Analytics then segment and filter those stats to track and compare mobile vs. desktop visits to your content. Learn how to add Google Analytics to your Unbounce pages here. And check out this post in our Community for tips on segmenting and filtering your data in GA.

Understanding How Using Mobile Popups May Affect Your Google Rankings

In 2017, there was a bit of panic around the interwebs that Google was “banning” mobile popups. This stemmed from a January 10, 2017 change whereby “pages where content is not easily accessible to a user on the transition from the mobile search results may not rank as high.”

That being said, Google was also quick to point out that “this new signal is just one of hundreds of signals that are used in ranking and the intent of the search query is still a very strong signal, so a page may still rank highly if it has great, relevant content.”

So what’s the deal?

If you want your pages to rank well with Google search, mobile popups may not be the best solution (with a few exceptions).

High Relevance

Google points out repeatedly in their announcement that if the page content is highly relevant, you may still rank highly, as this new signal is just one of hundreds that determine your page ranking. If you have a high-performing page that matches your visitors expectations, the benefit of the popup may be greater than the risk of triggering this one signal. We’ve also yet to see any evidence of rankings being affected by the updated signal change.

User Activated Popups

Only page visitors can trigger On-click mobile popups. As they aren’t interruptive in the same way, these popups shouldn’t be affected by the new signal.

Google Approved

Google also points out two use cases where mobile popups would not be affected by the new signal:

• Interstitials that appear to be in response to a legal obligation, such as for cookie usage or age verification
• Login dialogs on sites where content is not publicly indexable.
  For example, this would include private content such as email or unindexable content that is behind a paywall.

Related Articles

How Do I Edit In Mobile View Without Affecting Desktop?

HIding and Displaying Objects