Built in to the Message Editor is the ability to easily create a mobile-optimized version of your messages. You can see the mobile version of your message by selecting Mobile Web Version from the Message Version menu.
NOTE: The width of the mobile container is 320px.
This view presents your message in a mobile format, allowing you to see exactly what recipients will see when viewing your message on a mobile device. This makes it easier to understand if you need to make any adjustments to your message to make it mobile friendly (e.g., change some formatting or make an image responsive so it scales appropriately on a phone or tablet).
Create a mobile version
While the mobile version of a message is not automatically created for you, any content you've added in the Email Designer or Email Code view can be added to the mobile version with the click of a button. To do so:
- Select the Mobile Web Version view.
- Click the Refresh button at the top-right to copy in the content/latest changes.
Generally, you'll create and finalize your message in the Email Designer and then refresh your mobile version to copy the content over so that you can verify that your styles, spacing, images, etc. are optimized for mobile devices.
NOTE: Updates to your messages in the Email Designer and Email Code views are not automatically transferred to the Text and Mobile versions and vice-versa. This is intentional so that you can optimize these versions for mobile and text-only recipients. However, as you continue to manage messages in your account, remember to keep your Text and Mobile versions up-to-date as well. You can do this by clicking the Refresh button to pull in the latest changes.
How do recipients view the mobile version of your message?
The mobile version of a message is not automatically shown to recipients if they open the message on a mobile device. To view it, they must click the mobile version link that you must add to your message in one of two ways:
- Default link - You can set up a default mobile link to display in all messages. You can then decide whether to include this link each time you send a message. The downside to this method is that you cannot control the link's placement; it always displays at the top of your message (generally, this is where this link should be placed so that it's easily accessible).
- Manual link - You can manually add a mobile link to each message. This method enables you place the link anywhere you'd like.
Refer to the section below to learn how to configure both of these links.
How to add a mobile version link to your message
Set up and insert a default mobile version link
- In the Admin interface, navigate to Messages > Options > Manage Web/Mobile Version.
- Set the Enable Web Version Link to YES (this is required for the default and manual links).
- Add and format the text of the mobile link (e.g., "Click HERE to view a mobile-friendly version of this message.").
- The system automatically generates the mobile version link for you. Copy the link that displays in the HTML Version field.
- Highlight the text that will host the link (e.g., "HERE").
- Click the Insert/Edit Link button in the toolbar.
- In the pop-up, select the appropriate protocol (e.g., http, https) and paste the link in the URL field.
- Click OK to create the link.
- Click Save to save your default link.
NOTE: You can repeat these steps to create a text-only version of this link as well.
Now, whenever you send a message, you can check either or both of the Web Version Link boxes (shown below) to include (or not) the default link. Recipients viewing the message on a mobile device can click this link to view a mobile-optimized version.
Insert a unique manual link for a message
- In the Admin interface, navigate to Messages > Options > Manage Web/Mobile Version.
- Set the Enable Web Version Link to YES (this is required for the default and manual links).
- The system automatically generates the mobile version link for you. Copy the link that displays in the HTML Version field.
- Navigate back to your message in Message Editor (Email Designer view).
- Insert a WYSIWYG (or other) zone where you want your link to be.
- Add and format the text of the mobile link (e.g., "Click HERE to view the mobile version of this message.").
- Highlight the text that will host the link (e.g., "HERE").
- Click the Insert Link button in the toolbar.
- In the pop-up, make sure Link Type is set to URL, and then paste the link into the URL field.
- Optionally, configure any other link options/styles; click OK to create the link.
Now, whenever you send this message, recipients viewing it on a mobile device can click this link to view a mobile-optimized version.
NOTE: Keep in mind that if you've also set up a default mobile link, you'll want to ensure the Web Version Link options, HTML Email and Text Email, are disabled when sending this message (these options control whether the default link is included). If you don't, your message will include your manual link and the default link.