Preview email in Design Studio
Design Studio New UpdatedPreview your emails to make sure your messaging and styling work across different settings in people’s browsers and email clients.
This article applies to Design Studio
We are currently piloting Design Studio, our new email design system, and making some information available to customers. If you don’t have access to Design Studio, please continue to use our other email editors.
This article covers how to preview messages within Design Studio
To preview a Design Studio message within a campaign, check out Connect an email to an automation.
To request review from teammates without access to Customer.io, you can send them a test message, share a screenshot, and more! It’s always a good idea to send yourself a test message so you know how your email looks in your inbox.
Access preview settings
In the visual editor, you can preview a few settings while you edit by clicking these icons at the top:
- Desktop and mobile views
- Light and dark modes (dark mode coming soon!)
A more in-depth preview is available when you turn on Preview in the canvas toolbar. From this view, you can preview liquid (coming soon!), review across device dimensions, and simulate blocked images and visual impairments.
Check responsiveness
Preview your message at different heights and widths to make sure that your email is responsive on devices of all sizes.
In the visual editor, turn the preview toggle on in the canvas toolbar. Then open the dropdown menu at the top. Choose between Desktop, Mobile, Responsive, or specific devices.
Preview controls
Click to preview your message with different visual settings. You can block images, change your color scheme, or adjust for visual impairments.
Block images
You can see how your message looks without images loaded by clicking Block images in the preview controls dropdown.
Some email clients have remote content loading disabled by default, requiring email recipients to manually opt-in to image loading for each email. If your email contains crucial content inside images, the recipients may miss out on this information without images loaded.
Being able to see this difference allows you to modify your emails so they still contain the information you wish to convey even when images are blocked. Always include alt text in case the images don’t load too so your recipients understand what the image was meant to convey.
Color scheme
Preview your color scheme to make sure your message will be visible to everyone in your audience.
Choose between Light mode, Dark mode, or Forced dark mode.
For Dark Mode to work, you must add specific code to your message.
Forced dark mode emulates color inversion that email clients do. Some email clients—including Outlook and Gmail, will find areas of your email with dark text and light background and flip them to match the user’s Dark Mode preference. We don’t have full control over these cases, so it’s always a good idea to test your images and colors.
Visual impairments
You can simulate a variety of visual impairments to help you design inclusive emails and support your entire audience.
You can filter for:
- Protanopia: Red-green
- Deuteranopia: Red-green
- Tritanopia: Blue-yellow
- Achromatopsia: Total
You can only apply one filter at a time.
