Hiding content on mobile or desktop devices

Avatar
Matteo Mazzolari
Created
Updated
Follow

mobilehide.gif

NEW: Hide on Desktop!

We recently released a highly requested update to this handy feature: hide on desktop. That's right, you are now able to toggle between always showing a specific content element:

hide_on_disabled.jpg

Or hiding it when the email is opened on a desktop computer:

hide_on_enabled_desktop.jpg

Or hiding it when it's opened on a mobile device:

hide_on_enabled_mobile.jpg

Optimizing for Mobile

Mobile design is not only about the layout responsiveness. It's also about having the appropriate content in the right context.
 
An email that may yield excellent results on desktop screens may not work as well when the user needs to scroll on his mobile device to reach the call to action.
 
The best way to solve this challenge is to hide unnecessary content according to the device of the user. This will improve both readability and email conversion rate.
 
That's what this BEE feature is aiming to accomplish!

Content Block Options

All content blocks in the BEE editor will now include a Hide on setting in the property panel. To use it, scroll down in until you see the Block options section.

hide_on_disabled.jpg

You can check the result by going into the Preview and selecting the Mobile view. You will see that the content blocks for which Hide on has been turned on will not be visible.

An example

Let's take one of the templates available in BEE Pro, the New Year Day Event template.

newyearevent.png

This beautiful template uses an excellent image as the content background to capture the user's interest. The design uses large empty spaces to balance background and content in order to increase the aesthetic impact of the message.

NYE_desktop.png

This template was built before the Hide on mobile option was available. It had a problem: when viewed on mobile devices, the top part of the message had an empty space that took up too much of the screen, pushing some of the key content below the fold and thus requiring unnecessary vertical scrolling.

NYEmob.png

By leveraging Hide on mobile, the problem can now easily be corrected. We can use transparent dividers to create empty spaces over the image background needed for the desktop view and hide them on mobile devices to change the way the message renders.

NYE_edit.png

Thanks to this useful new feature, we can now build a message that has an optimized layout for desktop! We can also provide a better viewing experience when opened the message is viewed on mobile devices.

As you can see from this updated screenshot, the viewing experience on a mobile device is way better! This can certainly contribute to higher engagement in your email campaign.

NYEmob_2.png

How to Activate This Feature

If you are a user of BEE Free or BEE Pro, this feature is already active in the BEE editor and you can use it immediately. Enjoy!

If you are a BEE Plugin user (i.e. you have embedded the BEE editor in your software application), you will need to be on a paid plan and turn on the feature in the server-side configurations for each instance of BEE Plugin that you have created in the developer portal. Here you can read more on configuring server-side application settings.
Have more questions? Submit a request

Comments