Edit and Test Mobile Styles in a Campaign

Mobile devices are an increasingly popular way for your subscribers 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. Navigate to the Campaigns page.
  2. Choose a draft campaign to edit and click  Edit, or click  Create Campaign and follow the steps to begin a new email campaign.
  3. Navigate to the Design step of the Campaign Builder.
  4. Click the Design tab.
    Template Selector
  5. Click Mobile Styles.
    Template Selector
  6. 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 subscriber uses to view email, the actual appearance may vary.

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

  1. Navigate to the Design step of the Campaign Builder.
  2. 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. Or, if you or your colleagues have several different types of mobile devices, create and send to a mobile test list of all your addresses.

If you don't have a variety of devices to test with, try Inbox Preview. To learn more, check out our article on how to test with 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. Navigate to the Design step of the Campaign Builder.
  2. Click the Preview and Test drop-down 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.

Test with a List

To test with a list, you'll need to create a mobile test list, send to it, and then review your campaign across devices.

Create a Test List

First, you'll replicate an existing list, but only the list settings and forms will be copied. No subscriber data is moved.

To create a mobile test list, follow these steps

  1. Navigate to the  Lists page.
  2. Select the drop-down menu next to the list you want to work with, and click  Replicate list.
    Select Replicate list from the list's drop-down menu.
  3. Input a new list name, and click Replicate.
    Name your list and click to Replicate it.
  4. Add your email address or your colleague's email addresses as the subscribers. 

 

Send Your Campaign

Now, you can use that list to send a test campaign. To send the test, follow these steps.  

  1. Navigate to the  Campaigns page.
  2. Click the drop-down menu of the campaign you want to test, and choose Replicate.
    Select to replicate a campaign from its drop-down menu.
  3. Navigate to the Recipents step and choose your new test list.
  4. On the  Setup step, rename the campaign.
  5. On the  Confirm step, click  Send Now.

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?

Technical Support