Checking your design on different email clients

By Preview your Design

Currently, you will need to use outside services to render email previews for various email clients. We recommend trying litmus.com to check out the previews of your email newsletters for different clients. You can send a test mail to this service and it lets the mail render on various email clients, captures the output, and then displays the previews.

Find your Litmus personal test mail address:

To find your personal Litmus address that you can send your test emails to, log in to your Litmus account. Then click “Checklist” on the left hand side:

 

Afterwards, click “Start a new Checklist” found on the top right of the screen.

A popup window will appear where you can find your personal test email:

Sending a test email using Mail Designer 365:

When you want to send a test email to litmus, click on the Testmail icon on the top left of your Mail Designer 365 window. Then, enter your personal Litmus address into the “To:” field:

Sending a test email to Litmus

Different email clients previews:

In Litmus, click “Checklist” again. Click on your email campaign. You will find the different previews of your email design for different email clients:

You can also individually preview the different email clients to get a closer look:

Downloading the previews:

You can also download the different previews. Click on “Checklist” again, which is found on the left side. Then, click on the “Share options” found on top of the window:

A popup window will appear. Click on “Download” and choose your preferred type of file for your download:

Preview displays in Mail Designer 365:

Mail Designer 365 does provide a preview for mobile devices. Keep in mind that this is only for the sole purpose of providing a rough idea of how the newsletter may look like on mobile devices. The actual rendering may be different, depending on the email client.

 

How Can We Help?

A Quick Tour of Mail Designer 365
Advanced Design Techniques
Appendix: Compatibility
Appendix: Keyboard Shortcuts
Approval
Background
Blend Modes
Creative Tools
Exporting a Design to Campaign Monitor
Exporting a Design to Mailchimp
Graphics and Other Objects
HTML Export
Image Areas
Images
Layout Blocks
Optimizing your Template for Mobile
Plain Text
Preparing your Design for Sending
Preview your Design
Send via Mail Designer 365
Sharing your Designs
Tables
Teamwork
Text Styles
The Inbox View
Using Retina Images with your Design
Working with Links and Buttons
Working with Text

Mobile and iPad preview

By Preview your Design

What does my design look like on a mobile or an iPad?

If you have finished the mobile version of our design, you can now preview the result for multiple iPhones and Androids right in Mail Designer 365  without the need of test sending it to yourself.

To do so, please click the Mobile Preview icon in the upper right corner of the application window:

You can also open a preview window by choosing “View” > “New Mobile Preview Window” from the top menu bar:

Switch here between multiple device preview and change the zoom factor so the preview fits your screen.

 

Just switch the devices by choosing from Mail Designer 365’s handy drop-down menu found on the top left of each preview device:

Here is a preview example for Android:

Check out this preview example for the iPhone 6s in Rose Gold:

If you have tablets, you can look at previews of different iPads. Here is a preview example on an iPad Pro:

 

 

 

How Can We Help?

A Quick Tour of Mail Designer 365
Advanced Design Techniques
Appendix: Compatibility
Appendix: Keyboard Shortcuts
Approval
Background
Blend Modes
Creative Tools
Exporting a Design to Campaign Monitor
Exporting a Design to Mailchimp
Graphics and Other Objects
HTML Export
Image Areas
Images
Layout Blocks
Optimizing your Template for Mobile
Plain Text
Preparing your Design for Sending
Preview your Design
Send via Mail Designer 365
Sharing your Designs
Tables
Teamwork
Text Styles
The Inbox View
Using Retina Images with your Design
Working with Links and Buttons
Working with Text

Changing the size of the preview window

By Preview your Design

Changing the size of the preview window

Mail Designer 365 allows you to set a zoom factor for device preview window:

When setting the device preview for example to 50%, you can have multiple device preview windows side by side on your display. In this way you can compare the preview for multiple devices at one glance.

 

How Can We Help?

A Quick Tour of Mail Designer 365
Advanced Design Techniques
Appendix: Compatibility
Appendix: Keyboard Shortcuts
Approval
Background
Blend Modes
Creative Tools
Exporting a Design to Campaign Monitor
Exporting a Design to Mailchimp
Graphics and Other Objects
HTML Export
Image Areas
Images
Layout Blocks
Optimizing your Template for Mobile
Plain Text
Preparing your Design for Sending
Preview your Design
Send via Mail Designer 365
Sharing your Designs
Tables
Teamwork
Text Styles
The Inbox View
Using Retina Images with your Design
Working with Links and Buttons
Working with Text

Refreshing the preview window

By Preview your Design

Hit the refresh button

If you change an image or layout block in your template, then you can click the refresh button to update the view in the preview window.

First, choose the device you want to use to preview your design.

Then, you can always find the refresh button on the top right of the device. It doesn’t matter if your device is in the vertical position:

 

Or the horizontal position:

 

 

How Can We Help?

A Quick Tour of Mail Designer 365
Advanced Design Techniques
Appendix: Compatibility
Appendix: Keyboard Shortcuts
Approval
Background
Blend Modes
Creative Tools
Exporting a Design to Campaign Monitor
Exporting a Design to Mailchimp
Graphics and Other Objects
HTML Export
Image Areas
Images
Layout Blocks
Optimizing your Template for Mobile
Plain Text
Preparing your Design for Sending
Preview your Design
Send via Mail Designer 365
Sharing your Designs
Tables
Teamwork
Text Styles
The Inbox View
Using Retina Images with your Design
Working with Links and Buttons
Working with Text

Setting up a custom preview device

By Preview your Design

Custom preview device

You can also define your own preview device, if you want to preview your template on a display with a certain resolution. 

Open you email template. Click “Mail Designer 365.” From the drop down menu, choose “Preferences:”

Click on the smartphone icon:

 

You will see a list of all the devices available for preview at the moment. Click the “+” in order to add a new display resolution to this list:

Change the name and choose the resolution you want to use.

Unchecking the checkbox in front of each entry lets you determine which devices will be available in the drop down menu.

 

 

How Can We Help?

A Quick Tour of Mail Designer 365
Advanced Design Techniques
Appendix: Compatibility
Appendix: Keyboard Shortcuts
Approval
Background
Blend Modes
Creative Tools
Exporting a Design to Campaign Monitor
Exporting a Design to Mailchimp
Graphics and Other Objects
HTML Export
Image Areas
Images
Layout Blocks
Optimizing your Template for Mobile
Plain Text
Preparing your Design for Sending
Preview your Design
Send via Mail Designer 365
Sharing your Designs
Tables
Teamwork
Text Styles
The Inbox View
Using Retina Images with your Design
Working with Links and Buttons
Working with Text

Open the preview window

By Preview your Design

Preview your design

After you optimize your design for mobile devices, it’s time to check the preview. We can now preview the result for multiple devices right within Mail Designer 365. This handy feature removes the need of sending preview emails to your own devices.

Open the preview window

Clicking one of the mobile preview buttons in the toolbar will open an additional window where you can see the mobile version of your design as it would appear on an iPhone or an Apple Watch.

Click this icon:

You will see a drop-down menu. As you can see, you have many preview options:

 

 

From the top of the preview window, you can choose from a variety of preview devices:

You can also change the zoom factor for the preview window:

Move your cursor on the iPhone’s display in order to scroll through your message.

For rotation, click the little rotate icon:

As you can see, it will rotate the iPhone into landscape mode.

 

 

How Can We Help?

A Quick Tour of Mail Designer 365
Advanced Design Techniques
Appendix: Compatibility
Appendix: Keyboard Shortcuts
Approval
Background
Blend Modes
Creative Tools
Exporting a Design to Campaign Monitor
Exporting a Design to Mailchimp
Graphics and Other Objects
HTML Export
Image Areas
Images
Layout Blocks
Optimizing your Template for Mobile
Plain Text
Preparing your Design for Sending
Preview your Design
Send via Mail Designer 365
Sharing your Designs
Tables
Teamwork
Text Styles
The Inbox View
Using Retina Images with your Design
Working with Links and Buttons
Working with Text