Previewing and testing your email

Previewing your email

As you add modules to your email, you'll see the Preview of your email being populated with the modules. This updates live as you select settings (such as colours), and add content.

You can select different devices to preview the email on by selecting the device icons on the top left of the preview screen. You can also adjust the size of the preview by dragging the sides of the email preview.

But why is this important? Why does the width of a device impact the rendering of an email?

In your Email Design System, there will be some CSS known as a media query. This can control what the email looks like for devices under a specific width that you define in the EDS.

For example, let's say you have some text that has a font size of 12, but on mobile devices you want that same bit of text to have a font size of 16.

The media query in the Email Design System essentially says, when the screen width is below a certain point (for example 600px - so all mobile devices) then make sure the font size is 16px. But when the screen width is above 600px (all desktop devices and most tablets) then the font size will be 12px.

This number of 600px can be any number and is defined by the person coding the Email Design System.

This is the same in the Taxi preview too. When dragging the preview to different sizes, if a width of 600px has been set in the media query, anytime the preview is over 600px the font will be 12px, any time it is under 600px the font will 16px.

There is a minimum value set on the tablet width of 681px

You can also preview 'Images Off', and if you have your Litmus account connected, 'Litmus Previews' by selecting the 3 dots beside the device icons.

This allows you to see what the email will look like once you send it.

For email previews, you can set custom viewports. This allows you to set a max-width for when you would like your email to display for another device type.

For example, if you set mobile to 320 and tablet to 720 anything under 720 will be tablet preview and when the width hits 320 it will change to mobile preview

To do this:

1. Head to your Organisation settings and select General

2. Scroll to Email Preview Settings

3. Select 'Enable custom viewports'

4. Enter the max-width in pixels for mobile and tablet

5. Select 'Save Changes'

Sending a test email

Before you export your email, you'll want to send yourself a test email. You can send emails directly from Taxi for Email to any user of your Taxi account, or to any test email addresses that you've set up in your account.

To send a test email:

1. From the email you're working on, click 'Send Test Email'

2. Choose the recipient from the dropdown, and press 'Send Test Email' You can search for a user or team using the search box. The email address show alphabetically under each heading. You can also add a new Test Address from here.

3. Your test email has now been sent

Before you send a test email, make sure you select any segments if you want to show specific variants of content in dynamic emails.

You can select yourself to be a recipient of the test email.

Read next: Testing and approving your emails | Exporting your email