Edit and Test Mobile Styles in Your Email Campaign

Many of your contacts are likely using their phones and tablets to view your emails. So it's important to design with mobile devices in mind. To make your emails look great on any device, take advantage of Mailchimp's mobile styles, and preview and test before you send.

In this article, you'll learn how to customize, preview, and test your email's appearance on a mobile device.

Before you start

Here are some things to know before you begin this process.

• We use media queries to find out the capability of a device, and we optimize the email for it. If something looks wrong, that device might not support media queries and you may need to develop a custom template.
• These apps and devices don't support media queries: Android Yahoo Mail App, Blackberry OS 5, Samsung Galaxy S3+, Windows Mobile 6.1, Windows Phone 7 and 8.

Edit and preview mobile styles

Mailchimp's drag-and-drop templates can adjust the style of your email for mobile devices. This happens automatically when someone opens your email on their phone or tablet. You can change the default mobile styles to fit your needs.

Edit and preview mobile styles in the new builder

To edit mobile styles in the new builder, follow these steps.

1. Click the Styles tab, then select Mobile.
   
2. Use the drop-down menus to edit the Email, Text, Button, and Divider styles as needed.
3. Click Preview and select the Mobile tab.
4. Click X to exit the preview.

Depending on the mobile device and application used to view the email, its appearance may vary.

Edit and preview mobile styles in the classic builder

To edit mobile styles in the classic builder, follow these steps. If you're using a custom-coded template, you'll have to update your mobile styles manually.

1. Click the Style tab, then choose Mobile Styles.
   
2. Use the drop-down menus to edit the mobile styles as needed, and click Save.
3. Click the Preview drop-down and select Enter preview mode.
   
4. Click the Mobile tab.
5. Click X to exit the preview.

Depending on the mobile device and application used to view the email, its appearance may vary.

Test your email

To view a draft of your email on your mobile device, send a test email. If you have a paid plan, use Inbox Preview to see how your email will appear in different email clients on various devices.

If you’re using the classic builder, you can push your email to the Mailchimp mobile app on your device.

Push to mobile in the classic builder

To streamline your testing, preview your emails on the Mailchimp mobile app. Check out our articles on Mailchimp for iOS or Mailchimp for Android to get started.

Install the mobile app on your device and push an email from the classic builder directly to the app so you can see how it appears.

To push an email from your computer to your mobile device using the classic builder, follow these steps.

1. Click the Preview drop-down and choose Push to mobile.
   
2. In the pop-up modal, click Push To Mobile. If you haven’t already downloaded the mobile app, the pop-up modal will display links to the App Store and Google Play.
3. On your mobile device, open the preview from the push notification you receive.

If you receive the push notification and dismiss it, you'll need to repeat these steps to view your email.

Troubleshoot images in text blocks in the classic builder

Images inside Text content blocks may stretch when viewed on a mobile device, because responsive templates don't constrain those images. To keep your images in the classic builder from stretching, use an Image content block. If you want to place text and an image in the same block, try the Image Card or the Image + Caption block. To learn more, check out our article about email behavior on mobile.

Next steps

Want to learn more about mobile devices and your emails? Check out our research on the impact of mobile use on email engagement.

To learn more about testing your emails, check out our article on email testing tips.