Using breakpoints

When designing an email, its display may vary depending on the dimensions of the recipients’ screens.

To ensure that the layout is always optimal, the Email Builder provides breakpoints that automatically adapt content to the device used.

A breakpoint corresponds to the moment when the display switches from one format to another:

• From desktop to tablet: 640px (modifiable via the body “styles” tab)
• From tablet to mobile: 450px

The breakpoints are defined by screen width values. Once these transitions have  been passed, the layout adjusts to provide better readability.

Here are the width values used in the Designer for each view:

• Desktop: 640px (modifiable via the body “styles” tab)
• Tablet: 500px
• Mobile: 320px

Good management of breakpoints will ensure fluid reading and a design adapted to all screens.

You can manage the styles of your email elements independently according to the different breakpoints. This allows you to optimize display on desktop, tablet and mobile devices.

To find out more about the detailed list of the elements you can adjust for each view here, see Independently modifiable elements on desktop and mobile.

When creating your emails, it's worth taking into account how the element styles adapt to different screen sizes.

• Start with the desktop version
  We recommend that you create your blocks and define your styles primarily for the desktop version, as they serve as a reference for other formats.

• Style inheritance in tablet and mobile views
  The values defined in the desktop version for widths, colors and font sizes are automatically applied to tablet and mobile versions.

• Independent modification of styles in tablet and mobile views
  In tablet and mobile views, these values appear in gray italics, indicating that they are inherited from the styles defined on the desktop version. However, you can still modify them without impacting other versions.

The mirror link allows you to preview your email in different screen resolutions, guaranteeing optimal display on multiple devices:

• Mobile view: from 320 px to 428 px
• Tablet view: from 480 px to 768 px
• Desktop view: 640 px and higher

Testing your email on these different resolutions enables you to anticipate any layout problems and ensure a smooth user experience, whichever environment your readers use.