Working with Mobile-Responsive Content

Follow

Pro Tip

If you would like to move something on the desktop or mobile version of a page without affecting the placement on the other version, hold down the Command (Mac) or Control (Windows) key while you make the change.

Pro Tip

If you would like an element to appear on only one version (desktop or mobile) of a page, you can do this by hiding the element on one version: Click the element and select the Visibility icon in the Properties pane to toggle the visibility.

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 will help you out with:

  • Making existing content mobile-responsive.
  • Managing the mobile-responsive version of your content.
  • Understanding how Google search rules affect your mobile-responsive content.

What is mobile responsive?

Mobile Responsive allows you to serve either a mobile or desktop version of your content automatically to visitors, depending on their browser size, without using a redirect. When Mobile Responsive is set up and enabled on a page/popup/sticky bar, any visitor using a mobile device will see the mobile view of your content, while anyone using a desktop device will be served the desktop view.

How does it work in Unbounce?

We set the "break point" for your mobile-responsive content at 600px. This means that any browser window with a viewport of 600px or less will be served 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, but the viewport behaves like smaller browser window, so retina phones show the mobile version of the content. 

Starting your 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/sticky bar, 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/popup/sticky bar and customize 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.

Building Your Mobile-Responsive Content

There's a few things you'll need to customize your mobile-responsive content and start serving it to your mobile visitors: 

Desktop / Mobile View: Click the buttons on the bottom right of the Unbounce Builder window to toggle between Desktop and Mobile view.

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



Mobile 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. The text box itself can also be resized separately on desktop and mobile.

Any adjustments to font, font size, format or line height made from the Text Editor will affect both views.

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. 


Enabling Your Mobile Content

You may need to manually enable mobile view for your page (popup/sticky bar 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.
    Show_Mobile_Version__Landing_Page_.gif
  2. Save and publish (or re-publish) your page.

To enable mobile view for your popup/sticky bar:

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

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

On-click mobile popups are triggered by the visitor. 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 for 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.

Was this article helpful?
5 out of 5 found this helpful