Mobile design mode

Overview

The BEE editor includes a lot of ways that you can optimize your designs for mobile devices. You can hide content from certain devices, or control how they stack on smaller screens. Needless to say, there are quite a few features that you can use to customize the responsive behavior for your message.

However, we know that it can be cumbersome to repeatedly switch back and forth between the editor stage and the preview mode. With that in mind, we are happy to announce the new mobile design mode! This option allows you to decide whether the editor stage replicates the desktop or mobile design. Mobile design mode is only available for Team and Agency plans. 

How it works

When working inside of the editor, you'll now see a couple of icons in the upper left-hand corner of the editor stage.

These icons function as a toggle that allows you to switch between a desktop and mobile view. The desktop view will allow you to work with the same editor you're already familiar with. If you switch to the mobile view, the editor content area will reduce to 320px. 

When you have the mobile view enabled, you can continue to design your message using all the same features and options. Keep in mind that the mobile design mode uses a grey backdrop that is not part of your message design.

Back to top

Visibility Options

If you're using "hide on mobile/desktop" on any content blocks within your message, you'll see another icon show up to the right of the design mode toggle. This icon determines whether or not you want content blocks that are hidden from your selected design mode to populate on the editor stage.

In the screenshot below, we see someone working in mobile design mode with the toggle turned on. 

With visibility turned on, the designer can still see content that is hidden from mobile devices on the editor stage. If the designer wants the design mode to function more like a preview, then this option can be turned off.

Hidden Content

With these updates, we've made a small adjustment to how hidden content populates on the editor stage. Have you noticed that a certain content block appears translucent or out of focus? You're probably looking at a content block that is hidden from the type of device that your chosen design mode is reflecting.

Say, for example, you've inserted two versions of your company logo into a design. One logo has been optimized for mobile, while the other has been optimized for desktop. As a result, you have hidden these content blocks from the respective devices.

When working with the editor in desktop design mode, any content that is hidden from that view will appear translucent.

In the example above, the logo on top is the one that is hidden from mobile. It appears as expected in this design mode as a result. However, the logo below is hidden from desktop - so the opacity of the content block has been removed so that you can easily identify which one is which, without needing to check the content settings.

Similarly, you'll see the opposite behavior in the same example in mobile design mode.

Now the opacity has been reduced on the desktop-optimized content.

Keep in mind that, when hidden content is selected in the design mode that it is hidden from, you can only make changes to it in the editor sidebar. If the hidden content is text-based, for example, you'll need to switch to the design mode where it is always visible to update the content. However, you can alter the settings for the content block from any view. 

Note that this behavior only occurs when visibility mode is enabled. If you'd prefer to see only the version of the content that is appropriate for your design mode, you can turn off visibility mode.

We hope that you can utilize these new design modes to streamline your email creation workflow! If you have any questions or concerns, feel free to reach out to the support team through the web widget in your account.

Back to top