Client previews
The preview in Better Email is a browser rendering of your email. It is accurate for structure and content, but it can't tell you what Outlook 2016 does to your padding or how Gmail lays out a two-column module. Client Previews answers that. It sends the email to a rendering service, which opens it in real email clients and devices and returns a screenshot from each one.
Where to find it
Client previews work in two places:
- The Campaign Workspace. Open the Review tab and choose Client Previews next to Preview, Rendered and Code. The colour scheme menu on the Overview, Feedback and Review tabs also links to it.
- The Design System preview. In the preview window of the Design System Editor, choose Client Previews next to Preview and Rendered.
The two serve different stages. In a Campaign you check the email a marketer is about to send. In the Design System preview you check modules and settings while you build them, before any Campaign uses them.
How it works
- Choose Generate Previews.
- Better Email renders the email as it currently stands and sends that HTML to the rendering service.
- Each client gets its own card. Each card shows Preview queued..., then Generating preview..., then the screenshot.
- Click a card to open the screenshot full size.
What gets rendered depends on where you are:
- In a Campaign, Client Previews renders the latest Revision, with any variant pins you set in Preview. If you are viewing an older Revision, the option is hidden. Results are shared by everyone on the Campaign, so generating from an old Revision would replace the current screenshots for the whole team.
- In the Design System preview, it renders exactly what the preview window shows: the modules, settings values and Destination you have selected. Results are shared by everyone working on that Design System.
You can stop a run with Stop generating. A client that hasn't returned a screenshot after five minutes shows Latest preview failed. Generate again to retry it.
Previous runs
Each time you choose Refresh Previews, Better Email keeps the earlier screenshots. The last 20 runs are kept per Campaign and per Design System, so you can compare a fix with the version before it.
In the full-size view:
- ← and → move between clients.
- ↑ and ↓ move between runs, newest first. The footer shows which version you are on, for example Version 2 of 5.
When you move to another client, you stay on the same run, so you can step through every client for one version of the email.
Supported clients
Client previews currently cover 17 clients and devices.
| Category | Client |
|---|---|
| Desktop | Microsoft Outlook 2019 (Windows) |
| Desktop | Microsoft Outlook 2016 (Windows) |
| Desktop | Apple Mail, light |
| Desktop | Apple Mail, dark |
| Desktop | Microsoft Outlook 2019 for Mac, light |
| Desktop | Microsoft Outlook 2019 for Mac, dark |
| Web | Gmail in Firefox |
| Web | Outlook.com in Chrome |
| Web | Outlook.com in Chrome, dark mode |
| Web | Office 365, light |
| Web | Office 365, dark |
| Web | Yahoo Mail in Chrome |
| Web | iCloud Mail |
| Mobile | iPhone 13 |
| Mobile | iPhone SE |
| Mobile | Android 9 |
| Mobile | iPad Air |
The dark entries are real dark mode renders, so they show what each client does with your dark styles or its own recolouring. For a quick check while you edit, use the dark mode preview instead. It is instant and needs no rendering run.
When to use it
A run takes a few minutes, so it isn't a substitute for the live preview while you edit. Run it when:
- a Campaign is ready for final review, especially for an important send
- you change a module's layout, tables or spacing in a Design System
- you add or change dark mode styles
- a recipient reports that an email looks broken in a specific client