Skip to main content

Specifying a unique mobile design with breakpoints

Easily build a single campaign form with unique look and feel on desktop and mobile devices.

Gregory Switzer avatar
Written by Gregory Switzer
Updated over 3 weeks ago

Suppose you have a robust campaign. While the messaging will remain the same, you would like your mobile visitors to see a special version of the form with unique imagery and colors. BDOW! can handle this, and you actually have a couple of ways to tackle the problem. Display Rules have always been able to target desktop and mobile devices, but there is one major drawback for this particular scenario: if you rely on Display Rules, you have to maintain settings across two campaign forms (the desktop version and the mobile version). Ideally, you could manage settings and integrations within a single campaign form, but tweak the look and feel for desktop and mobile devices.

This is exactly the use case for Mobile Breakpoints!

Adding a Mobile Breakpoint to a campaign

Every campaign form defaults to the "desktop" design. If you would like to add a breakpoint to configure a special mobile look and feel, simply toggle Mobile view in the design tool and start editing!

Note: Some design elements, such as Text Fields, will be shared in both the desktop and mobile views—if you change the verbiage in one view, it will be modified in the other. This is because Mobile Breakpoints are intended to customize the look and feel rather than to create two completely distinct campaign forms.

  1. Log into Site Manager and access the campaign design tool.

  2. Navigate to the Design tab.

  3. Click the mobile icon to open Mobile view.

  4. Use the design tools to customize the form for mobile users.

If you would like to work on the main desktop version of the form, just click the Desktop view icon:

Removing a Mobile Breakpoint

You may decide that a unique mobile design does not make sense for the campaign, or perhaps you would just like to wipe the slate clean and start over on the breakpoint.

Resetting the mobile design is easy to do:

  1. Access the Design tab of the campaign.

  2. On the Breakpoint control panel, click the kebab menu and select Reset Mobile Changes.

This will clear any special designs or overrides for mobile visitors and the main version of the form will be displayed.

Frequently asked questions

How does BDOW! decide when to show the desktop view and when to show the mobile view?

Mobile Breakpoints are triggered based on the width of the screen. The mobile view will be shown if the display is less than or equal to 480 pixels.

Will Display Rules still work if I add a Mobile Breakpoint?

Yes! Mobile Breakpoints and Display Rules will both be applied. If you configure a Display Rule that only targets desktop visitors, for example, the campaign form will never load for mobile users (thus, the unique Mobile Breakpoint view will never get seen). As a result, BDOW! users typically choose one method or the other when targeting device platforms.

All other Display Rules will still be applied, too. So you can absolutely use the Mobile Breakpoint feature while specifying a URL or targeting a specific country, for example.

Why is my mobile view overwriting my desktop view?

Remember that the Mobile Breakpoint feature is intended to tweak the look and feel of a campaign form on mobile devices. Some elements, such as text fields, will always be shared on both views. If you need build a more unique design for your mobile visitors, we recommend using Display Rules instead.

Did this answer your question?