Mobile Optimization Options
Table of contents:
- Desktop vs Mobile Preview
- Do not stack on mobile
- Reverse stacking on mobile
- Hide content on desktop/ Mobile (Updated!)
Often content in an email is organized in multiple columns. When viewed on a mobile device, those columns can become quite narrow and lead to a sub-optimal reading experience. In order to guarantee a better experience while reading emails on mobile devices, BEE generates HTML code that makes columns stack vertically. This way content is reorganized in a way that makes zooming unnecessary and is easy to scroll with a finger.
Sometimes you may want to make changes to the default mobile optimization settings that the BEE editor uses. There are plenty of different features you can use in order to do this. Let’s go over the different options that can impact the mobile version of your design.
Desktop vs Mobile Preview
Vertical stacking is supported by the most popular mobile email clients. In some cases, the desktop version will be displayed. This happens when a client lacks support for standard CSS. For any email client compatibility, please see the email client support section.
One Size Doesn't Fit All
Although it normally helps, there are cases in which vertical stacking of columns may not lead to an optimal result.
A common scenario is using a row to display a navigation bar with text links or icons. In that scenario, as shown below, a vertical layout could create excessive empty space, hiding important elements of the message or giving too much visibility at the top of the email to content that is not supposed to be that prominent.
Do not stack on mobile
The Do not stack on mobile row setting allows users of the BEE editor to decide when to override the default stacking behavior.
The option is available in the right panel as a row property, toggled off by default.
Email design best practices suggest a careful use of this display setting. A user-friendly vertical layout on mobile makes sense in most cases. As always, it is up to you and your creativity when and how to use this option.
Reverse stack on mobile
In some cases, the columns stacked on mobile can work better in a reversed order.
Here is an example from a BEE Template:
The same template also has a section where images are aligned on the right
This is how these two sections render on mobile by default.
Here is how the email layout renders when columns are stacked in reverse order.
Hide on desktop/mobile (Updated!)
We're excited to announce that the Hide on feature is now available on both the content level and the row level. This means you can now hide individual content blocks or entire rows from a specific type of device.
Hiding Content
All content blocks in the BEE editor include a Hide on setting in the property panel. To use it, scroll down until you see the Block options section.
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.
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.
Hiding Rows
If you need to hide a larger portion of your message, you might consider hiding an entire row instead. The workflow is almost identical to the one you use to hide individual content blocks.
To start, you'll just want to make sure that you select the row you want to hide. The row-level settings for this option are found at the bottom of the Row Properties section of the editor sidebar, which is directly above the Column Properties section.
Activating the feature (BEE Plugin only)
If you are a BEE Plugin user, please note that this feature shipped in an OFF state by default and therefore users of the BEE editor in your application will not see it until you enable it.
You can enable the feature with one click in the server-side configurations for your BEE Plugin application within the BEE Plugin admin panel.
Interested in learning more about creating content for mobile devices in the BEE editor? Check out Mobile design mode for more!
Comments
9 comments
Thanks! This is a great addition.
Thanks—our team's been dying for this!
Is there a way to have an image I have used on the right side in a row to appear before the left side item when viewed on mobile?
i.e. A B
to:
B
A
^Our team would also love a feature to assign the order in which multi-column structures stack on mobile.
^^^^ I'd like information on this too please Beepro!
Hi ALL, stack order is not available yet, but it's on our list (it's a big list, but this one has a lot of votes 😉).
Just waiting to finish some important developments to start adding it.
Hi!
I have a solution, but a little hack in the exported html is required to work.
So, in the editor you have to make both of version (A B and B A) and after exporting newsletter you have to add classes or ids to the containers of these versions in the html file(i.e .hideOnMobile and .hideOnDesktop), then the css below into tags:
@media (max-width: 720px) {
.hideOnMobile{
display: none;
}
}
@media (min-width: 725px) {
.hideOnDesktop{
display: none;
}
}
It worked for me.
Hi,
Is there any way I can set "Do not stack on mobile" enable by default?
Hi Nick, you can create a template with the toggle enabled. At the moment, is not possible to fix it by default.
Please sign in to leave a comment.