Hiding content on mobile devices

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. 

Content block options

When this feature is turned on, all content blocks in the Drag and Drop 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.

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

This example 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.

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.

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.

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.