Part of chapter: Styling and editing emails

Designing responsive HTML emails using design modes

Use design modes to exactly control how responsive HTML emails look on desktop and mobile screens.

Design modes

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

  1. Desktop mode:
    screen sizes greater than 480 pixels wide
  2. 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:

  1. We assume you have a Row block in your email that contains any child block.
  2. Go into mobile mode by clicking on the mobile phone icon in the upper center of the email editor.
  3. Select the Row block through the Layers menu.
  4. 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:

Row block containing four Image blocks

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

  1. Select the block that you wish to hide on mobile phone screens from the Layers menu.
  2. Go into mobile mode by clicking on the phone icon on the top center of the editor.
  3. 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.
  4. If you go back to desktop mode, you'll notice that the block is visible.

How to hide email blocks only on desktop screens

  1. Select the block that you wish to hide on desktop screens from the Layers menu.
  2. Go into desktop mode by clicking on the desktop icon on the top center of the editor.
  3. 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.
  4. 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.
  5. 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.
  6. If you go back to desktop, you'll notice that the block is still invisible in desktop mode.
Go back to chapter: Styling and editing emails