Edit and Test Mobile Styles in a Campaign

Mobile devices are an increasingly popular way for your contacts to view your email campaigns. This means it's now more important than ever to design with mobile devices in mind. To be sure your campaigns will 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 customize, preview, and test your email campaign's appearance on a mobile device.

Edit Mobile Styles

Mailchimp's drag-and-drop templates offer customizable mobile styles that take effect when we detect someone is reading the email on their phone or tablet. The default styles include font size and line height settings that work well on a smaller screen. You can make additional changes to these at any time.

If you're using a custom coded template, you'll have to update your mobile styles manually.

Types of Templates

To edit mobile styles in a drag-and-drop template, follow these steps.

  1. In the Content section of the Campaign Builder, click Edit Design.
    In the Content section, click edit design
  2. On the Design step, Click the Design tab.
    Template Selector
  3. Click Mobile Styles.
    Template Selector
  4. Use the drop-down menus and other fields to edit the mobile styles as needed, and click Save.

Preview and test your email campaign on a mobile device to view the changes.

Troubleshooting

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 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 campaign behavior on mobile.

Preview Mobile Design

Mailchimp's Preview Mode represents how your styles typically appear on common mobile devices. Depending on the mobile device and application your contact uses to view email, the actual appearance may vary.

To see how your campaign might look on a mobile device, follow these steps.

  1. In the Content section of the campaign Builder, click Edit Design.
    In the Content section, click edit design
  2. On the Design step, click the Preview and Test drop-down menu and choose Enter Preview Mode.
  3. Click the Mobile tab.
    Example of mobile preview for a campaign seen on the right side of the screen.

Test Mobile Campaigns

To view your draft campaign on your mobile device, you can push the campaign to the Mailchimp app, send a test email, or use inbox preview.

Push to Mobile

To streamline your testing, you can preview your campaigns on the Mailchimp mobile app. After you set it up on your devices, you can push a campaign directly to the app so you can see how it appears

Mailchimp's mobile app is available for iOS and Android.

To push a campaign from your computer to your mobile device, follow these steps.

  1. In the Content section of the Campaign Builder, click Edit Design.
    In the Content section, click edit design
  2. On the Design step, click the Preview and Test drop-down menu and choose Push to mobile.
  3. In the Push to Mailchimp's Mobile App pop-up modal, click Push to Mobile.
    Pop-up modal to confirm push to mobile with cursor on button.
  4. On your mobile device, open the preview from the push notification you recieve.

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

Next Steps

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

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


Was this article helpful?

Anything else we can do to improve our site?