It is possible to display your emails depending on the screen on which they are opened. For example, the images in the standard (computer) version can be different from those in the mobile version. To ensure that your emails always display as intended, edit and test the mobile version before sending it to your recipients.
Edit the Mobile Version
In the Edition interface, on the left panel, you have options. In the section Global configurations, you can edit Default mobile display styles:
Here you can edit text sizes, colors, styles, links and fonts:
To define widths for the mobile version, go to Default styles:
Then, select the Widths tab:
- Breakpoint - The moment when the design of a responsive design site changes according to the size of the screen. It can be 600 px.
- Maximum width - Use a maximum width of about 300 px to make your e-mail appear as you want it to.
- Content margins - Left and right margins.
- Space between blocks - Space between the columns (if your message has columns).
These global configurations for the mobile version will apply to all elements of this email. However, you can still change an element individually by editing its block (e.g. text block).
To edit the mobile characteristics of an element, select Mobile display:
You can determine whether the content will appear or not in the mobile version with the Hide in responsive option.
Test the Mobile Version
Once you have validated your email, you can send a test to verify that it displays as intended on the mobile devices and messaging applications at your disposal (see Guide on Validating and Testing an Email).
You can also check the preview to see what your email will look like on your mobile device. To do this, go to the test page and click the icon in the header. This will give you a preview, but it is still preferable to make a real test to see the real rendering.