Return On Subscriber – Email Marketing Blog

Today we are going to cover how to add a “View Mobile Version” to your email campaigns. All you will need to complete this is the ability to upload/FTP new HTML files to your hosting server. Nothing horribly complex here, and your web team/developer will yawn at this.

Before we get started, I want to show you an example of what we’re talking about from the Sony newsletter.  Below, you can see the header from their email newsletter, where I have highlighted the call out to “View mobile version”

After clicking through on this link, you are taken to the mobile version of the email in your mobile browser, which you can see below.

Why do I need a Mobile Version of my Emails?

The answer to that question, like most when it comes to email marketing, is “it depends”.  Due to the lack of standards of the mobile inbox and different technologies in play, there is simply no way to design a layout that will work across the landscape. For example, iPhone, Palm Pre and Blackberry Storm to some extent, will do an adequate job of rendering your email, albeit very small. However the top selling smart phone – the Blackberry Curve – will not. And since most people receive the exact same emails on their mobile device as they do in their desktop client, we can’t deliver a unique message to each – it’s all or nothing.  An analogy I like to use is Johnny Five from Short Circuit (filmed right here in Oregon). Just as Johnny Five thinks he is human, but is not, a mobile email client thinks it can read HTML, but can’t. So creating a link to a mobile version is going to be your best way to control the experience.  You will also be able to track the click through on this link to know how many mobile users you have and whether or not to dedicate more resources to this emerging channel.

Linking to the Mobile Version in your Creative

First off, we need some real estate in your email header. Ideally, this should be somewhere near the pre-header, where you will usually find whitelist instructions or “view as a webpage”. The prevailing concept here is to keep it on the mobile screen before the scroll. Once we have defined that placement, we will need to provide the URL that we are linking to. Before we create that link, we need to create the mobile version.

Creating the Mobile Version

There are a few ways of going about this. One simple, one that requires a little more skill. The simple way to do this to take the text version of your email campaign you normally create which would be sent via multipart or to susbscribers who have requested text only, and host that at a dedicated URL on your website.  For example, let’s look at how REI does it.

All they are actually doing here is linking to the text version on the web, which has been uploaded and is hosted at REI.com. So instead of counting on the email client to deliver the ideal version, they are allowing you to choose. You don’t need to even save this as HTML, as a browser will click through to .txt extension just fine. So, to recap, take the text version of your email, save this in notepad as a .txt file, and upload to a directory on your website.  REI uses a /email/ directory folder and names the file with the corresponding date of the campaign.

When formatting the hosted text version, you will not be able to mask URL’s in HTML.  Let’s take a look at one section of their text version:

You can see here that URL is simply placed below the description. When viewing the REI version on a Blackberry, this link will not be clickable. This may differ from device to device, but the content is still very readable and the link is there if you choose to act on it. You will want to follow best practices for formatting text emails here, which will carry over to the mobile screen.

A more advanced approach to this is to create an HTML version with the mobile screen in mind, like the Sony example above. To do this, you will need to utilize some basic HTML knowledge. Doing it this way will allow you to add some minimal imagery, link your text to URL’s, and implement tracking code from either your Email software or Web analytics tool.

Table width is the main thing to keep in mind when creating this basic HTML. The Sony example sets the table width at 350px, a best practice standard for mobile screens. Another method would be to use a percentage width (width=”100%“). This will manipulate the content to the device screen. A percentage width will be your best bet to fit every device and rotation, maybe try out both and see what works better for you. However, make sure that your imagery is also modified to the mobile screen and is used sparingly.

Once you have created the HTML, upload to a directory on your website and take this URL an put behind your “View Mobile Version” in your email.

View both a Text and HTML version of the latest eROI newsletter for inspiration.

As always, let us know how this works for you in comment below. Stay tuned to Return on Subscriber for more on Mobile in October!

Follow @AlexCWilliams on Twitter