Designing responsive HTML emails using design modes

Design modes

Use design modes to visually design how your HTML email looks on different screen sizes. Tabular currently offers two design modes:

Desktop mode:
screen sizes greater than 480 pixels wide
Mobile mode:
screen sizes equal to and less than 480 pixels wide

In general, you start with designing your email in desktop mode. When you're done with the desktop version, you can go into mobile mode to tweak your email design to also look perfect on phone screens.

Any styling change to a block you make in mobile mode will overwrite the styling for that block in desktop mode, this includes the following styling settings:

Visibility
Maximum width
Corner radius
Horizontal alignment
Vertical alignment
Margin
Padding
Borders
Background
Typography (text) styling

When you use Tabular to generate the email HTML, Tabular will make sure that the responsive styles are correctly generated. In practice this means that the HTML will be coded mobile-first and hybrid fluid.

How to stack Columns underneath each other in mobile mode

This is helpful for when you have a row of blocks in desktop mode that you wish to show on multiple lines in mobile mode. You can achieve that using the following steps:

We assume you have a Row block in your email that contains any child block.
Go into mobile mode by clicking on the mobile phone icon in the upper center of the email editor.
Select the Row block through the Layers menu.
In the styling menu, under the Layout section, click on the switch for setting content on multiple lines.

Use the 'content on multiple lines' setting to display columns underneath each other in mobile phone devices.

In mobile mode we can then alter the width each column to control how the grid is structured. Say for example, we have a Row block containing four Image blocks, side-by-side:

We can then go into mobile mode and enable the Content on multiple lines setting. Then, we can alter the width of each Image to transform our layout from 4 images to any grid format, for example:

In mobile mode you can specify a custom width to each child of a Row block, transforming a Row into a grid structure.

How to hide email blocks only on mobile phone screens

Select the block that you wish to hide on mobile phone screens from the Layers menu.
Go into mobile mode by clicking on the phone icon on the top center of the editor.
In the Styling menu, click on the icon that shows an eye-off icon (eye with a line through it). You'll notice that now the selected block is no longer visible in mobile mode.
If you go back to desktop mode, you'll notice that the block is visible.

How to hide email blocks only on desktop screens

Select the block that you wish to hide on desktop screens from the Layers menu.
Go into desktop mode by clicking on the desktop icon on the top center of the editor.
In the Styling menu, click on the icon that shows an eye-off icon (eye with a line through it). You'll notice that now the selected block is no longer visible in desktop mode.
Go into mobile mode by clicking on the phone icon on the top center of the editor, and make sure that the block is still selected.
In the Styling menu, click on the icon that shows an eye icon. You'll notice that the selected block will become visible in mobile mode.
If you go back to desktop, you'll notice that the block is still invisible in desktop mode.