Hiding content on mobile devices

mobilehide.gif

Optimizing for mobile

Mobile design is not only about the layout responsiveness, but 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 design and/or content elements when the message displays on mobile devices. And that's what this new BEE feature is all about!

Content block options

When this feature is turned on, all content blocks in the BEE editor will include a new "Hide on mobile" setting in the property panel. To use it, simply scroll down in the right panel untill you see the "Block options" section, as shown below here.

hideonmobile.png

You can check the result of turning this property on for a specific content block by going into the Preview and selecting the Mobile view. You will see that as you toggle between Desktop and Mobile the content blocks for which "Hide on mobile" has been turned on will not be shown.

An example

To illustrate how this feature can be used, let's take one of the templates available in BEE Pro, the New Year Event template.

newyearevent.png

This beautiful template uses an excellent image as the content background to capture the user 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, and it had a problem: when viewed on mobile devices, the top part of the message had an empty space that took 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 the empty spaces over the image background needed for the desktop view, and hide them on mobile devices to change the way the message renders there.

NYE_edit.png

Thanks to this useful new feature, we can now build a message that has an optimized layout for desktop screens while also providing a better viewing experience when opened on mobile devices.

As you can see from this updated screenshot, much more of the content is now immediately shown when the message is viewed on a mobile device. This reduces the need for vertical scrolling and can certainly contribute to higher engagement on that 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 user of BEE Plugin (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. More on configuring server-side application settings.

Have more questions? Submit a request

Comments