Mobile design mode

  1. Overview
  2. Demo
  3. How to activate it
  4. How it works
  5. Customization options

Overview

With BEE’s Mobile design mode, your customers can easily design emails and pages for mobile without the need to switch back and forth between editing and preview. When enabled, your customers will be able to:

  • move between desktop and mobile view to see and edit content;
  • understand how their design looks on mobile without leaving the editor to go into preview;
  • instantly visualize the results of mobile optimization options – such as do not stack/reverse stack/hide on mobile;
  • stretch out BEE’s design flexibility and build mobile-first campaigns when needed.

Demo

Here is a video explaining why we built Mobile design mode and how it enhances the design UX of BEE.

 

Do you want to try it? Here is a demo of a fictitious application where you can play around with Mobile design mode.

How to activate it

If your application doesn’t have Mobile stage mode, you need to activate it. It takes just a few clicks:

  • Login into the developer portal
  • Click Details next to the application you want to configure
    • We recommend you first familiarize yourself with this feature under a DEV or QA application
  • Click view more under Application configuration.
  • Under the Services section, toggle Enable mobile design mode ON and click the Save button.
  • Your application now has Mobile design mode!

How it works

When this feature is enabled, users will see two new icons in the editor’s upper left, one for desktop and one for mobile.

the new icons visibile when mobile design mode is active

The desktop view will use the full width available in your browser window. Clicking on the Mobile icon will reduce the work area width to 320px.

Switching between desktop and mobile view

This view retains most of the editor’s functionality, so users can continue working on their email or page.

 

Mobile optimization settings

BEE provides settings, both for rows and content blocks, to change how content behaves on mobile and create a mobile version of an email or page:

  • Hide on mobile/Hide on desktop
    • A content property to hide a block when displaying the email/page on a specific device.
  • Do not stack on mobile
    • When turned on for a row, columns for that row will not be stacked on mobile devices and look the same as the desktop version.
  • Reverse stacking on mobile
    • When turned on for a row, columns for that row will stack in reverse order, i.e. from the rightmost to the leftmost.

Using these settings becomes more accessible with Mobile design mode, as users can immediately see their effect in the desktop and mobile views.

There is an additional aid for the Hide on setting: a “Visibility” icon next to the Desktop and Mobile icons.

Visibility icon when hiding blocks for mobile/desktop
When Visibility is ON (the default behavior):

  • BEE will display content blocks set as hidden for the current device;
  • those blocks will have a blurred effect to signify that they are hidden for that device;
  • they will also have a small icon in the outline of the block when hovering with the mouse.

Button with hide on property applied, blurred.

When Visibility is OFF:

  • elements set as hidden for the current view are removed;
  • the template will appear as the version of the email/page meant for mobile audiences;

Here is how the Visibility toggle changes the experience when editing a recent BEE Plugin newsletter.

Using the visibility icon when editing a newsletter.

Finally, when entering preview, the device preview will match the stage, so if I’ editing on the mobile view, BEE will send me to the mobile preview. Of course, this does not apply if you are not using the BEE preview because you’ve implemented yours.

Editor limitations in mobile view

When in mobile view, BEE retains most of its functionalities, with a few exceptions:

  • If a block with a text element – text block, title, button – is hidden on mobile, the text cannot be changed and the text toolbar won’t pop up, so users can only make changes in the editor’s sidebar.
  • the content area width cannot be changed – it can only be changed in the desktop view;
  • columns in a row can be added and deleted, but not resized;

Customization options

We built Mobile design mode as a “plug-and-play” feature, where you just need to enable it in your Developer account and your customers will start using it. However, BEE gives you a few client-side configuration options to further customize the UX inside your app, depending on use cases you may need to cover. You can load these settings into BEE’s initial configuration as part of the workspace section.




workspace: {
  type: 'default', // default, mixed, amp_only, html_only
  stage: 'desktop', // desktop, mobile, global
  displayHidden: 'blur', // blur, hide
  hideStageToggle: true, // default = false
}


Here is a brief description of the parameters and their options. They are all optional.

Parameter Description Values Default
type loads different workspace types (currently used to handle AMP content visibility). default, mixed, amp_only, html_only default
stage Define if the editor starts in desktop view, mobile view, or global (i.e. without desktop/mobile views.) desktop, mobile, global inherits Developer account configuration
displayHidden if defined, the Visibility toggle will not be available in the editor, and hidden elements will behave based on the parameter value. blur, hide blur
hideStageToggle if true, the mobile/desktop icons to switch view are not visible true, false false

Use cases

  • Mobile-first design: Start the editor in Mobile view, and let the user switch as needed.
  • Mobile-only editing: Start the editor in Mobile view, and hide the widget to switch views.
  • Control hidden elements visibility: Remove the “Visibility” toggle and decide if elements with a “hide on” property can be visible with the blur effect or are not visible during editing.
  • Custom UI controls: start the editor in a predefined mode and offer your UI controls to switch between views and hidden elements visualization. To do so, you can use the loadStageMode method to trigger a change from your application.



bee.loadStageMode({
  type: 'mobile',
  display: 'hide',
})


You can also use the loadStageMode method to disable Mobile editing mode altogether.




bee.loadStageMode({
  type: 'global',
})