How do I optimize my landing page for mobile devices?

Our new mobile workspace in the landing page creator lets you preview and modify the mobile version of your landing page. It gives you the ability to customize the mobile version by:

  • scaling and resizing text and images
  • hiding and restoring elements
  • repositioning elements
  • replacing background images

 

You can use the mobile workspace for modifying:

  • blank templates you use to build your page from scratch,
  • ready-made page templates you can customize to fit your marketing needs,
  • your existing landing pages you’d like to update.

Click Preview to open a separate tab where you can check how the changes you’ve made will appear on your customers’ devices.

 

How do I access the landing page mobile workspace?

If you’re creating a new landing page, simply click the mobile workspace icon to open the workspace.

mobile workspace icon in the top toolbar

For your existing landing pages, click the mobile workspace icon in the landing page creator. A pop-up modal will open asking you to confirm that you’d like us to convert the page. Once you do, the mobile workspace will open.

Once the landing page is converted, its mobile version can be viewed on mobile devices. The break point for mobile versions in GetResponse is 600 px. So, if your landing page appears in a viewport 600 px or smaller, we’ll serve its mobile version.

Note: If you don’t go to the mobile workspace for all the variants of your landing page and thank-you page before saving it, we’ll ask you to confirm whether you’d like us to convert them to mobile versions.

 

How can I reposition elements in the mobile workspace?

Drag and drop elements to move objects in the mobile workspace. Please note that some changes in the mobile workspace can affect the desktop version:

  • Moving elements to a different section, or removing an object from a box, affects the desktop version of the landing page as well.
  • Moving elements within a section applies to the mobile version only. Nothing changes in the desktop version.

We’ll notify you each time this happens by showing you a number next to the mobile workspace icon.

number showing next to desktop workspace icon

The number indicates how many of your changes affect the desktop version. (The same works for changes you make in the desktop version that affect the mobile version.)

You can only move elements within a specific workspace area. It’s not possible to place any elements on the far sides of the workspace (they’re covered by diagonal stripes). It’s because they may not be visible right away in the viewport of mobile devices. Your customers would need to scroll to see objects placed there. We want to make sure your landing page displays correctly on small screens, so we let you know where it’s best not to place objects.

out of bounds area visible

 

How to scale and resize elements in the mobile workspace?

You can also resize it to change the width of the text frame. Then, you can scale an object to increase or decrease text size in the mobile workspace.

Resizing and scaling allow you to modify text fields in the mobile workspace so that they appear in the viewport just the way you want them to. Here’s how to do it:

  1. Click on the object to display the sizing handles.

sizing handles visible

 

2.To resize, click and drag the sizing handles on the sides to change the width of the text frame.

resizing text

 

3. To scale, click and drag the sizing handles in the corners to make the text smaller or bigger.

scaling text

 

Scaling and resizing objects in the mobile workspace won’t cause any changes in the desktop workspace.

 

Can I remove elements in the mobile workspace?

You can hide elements in the mobile workspace. To do this, click on the visibility icon that appears after you’ve selected an element.

visibility icon shown

To view the hidden elements, click the Show hidden button in the top toolbar. The workspace area is grayed out and the hidden object becomes visible. You can now:

  • Restore the element. To do this, simply click on the visibility icon again.
  • Keep the element hidden. To do this, click on the Hide elements button now visible next to the mobile workspace icon.

hidden options revealed

 

Note: It’s not possible to add or delete elements in the mobile workspace. You need to switch to the desktop workspace to do this.

 

Can I edit text fields and replace background images in the mobile workspace?

You can edit text fields and replace background images in the mobile workspace. Here’s how to do it:

  • For text elements, double-click an element to open the toolbar with the editing options. You can change text size, color, and alignment.
  • For background images, click an image for the Edit and Replace buttons to appear. Double-click the image to open the toolbar for more editing options.