Create mobile-friendly email templates in one click

October 28, 2011

We regularly talk to customers who are keen on building mobile-optimized email templates, but have hit a roadblock. It's easy to empathise, as while we've put a fair amount of effort into providing resources on designing mobile email, chances are that you'll hit at least one of the following hurdles:

Skill: 'Everyone says that you should 'code email like it's 1999'. After getting my head around that, I'm now being told to use CSS3 - help!'
Time: 'Optimizing for mobile adds a whole bunch more coding and testing tasks. My clients can't afford to cover this.'
Resources: 'I don't have a device to test on.'
Motivation: 'This is going to be hard.'

One of the aims of our new template builder has been to overcome these hurdles. In essence, make it really easy to create email campaigns that look just as slick on your iPhone or Android handset, as they do in the inbox. Plus, save you loads of testing time, as you can be confident that they will just work.

After yammering on about mobile optimizations in this blog, it's about time that everyone gets to create responsive email campaigns for themselves and their clients.

Switching between desktop to mobile versions

In order to fulfill this, we've added a toggle button to the bottom of the template builder's preview pane. This switches between the desktop and mobile version of an email template, so you can customize things to your heart's delight without having to repeatedly test on a mobile device:

Desktop vs. mobile versions in the template builder

As you can guess, we've already rolled all the necessary @media queries into the template code, so at no point do you have to get elbows-deep into CSS3.

Learning from the code

That said, these templates provide ample opportunity to learn about some of the coding fundamentals behind creating responsive designs. It's worth mentioning that you can export your template builder creations, fire them up in your favorite editing software and see how we've narrowed layouts, resized images and more, simply by using a few lines of CSS.

Finally, we'd love to hear your questions or feedback in regards to creating mobile email templates in the new builder. It has already saved us a lot of time and mental energy when creating our monthly newsletter, so hopefully it will do the same for you, too.

Posted in: New Features & Updates, Tips & Resources

14 Comments

Billy Ryan
October 28, 2011 10:16pm

Have to say that I really like the new template builder, just one question… Is there any way I can move the sidebar over to the right instead of on the left
Aaron Fuqua
October 28, 2011 11:46pm

Does the mobile version actually make the Unsubscribe Link disappear?
Mathew Patterson
October 31, 2011 9:37pm

Billy - at the moment it isn’t possible, but thanks for the suggestion.

Aaron, only the top unsubscribe link is hidden in the mobile version, there is another one at the bottom still. In the limited screen space, that is a trade off to get content up higher.
Tomasz K
November 1, 2011 3:55am

Is it possible to rename (different language) or remove top bar? I mean top: “Web version, settings, unsubscribe”.
Paul Hughes
November 4, 2011 5:46am

I have the same request as Tonaz on October 31st - Can you put a teaser infront so iphone or gmail users

you talk about it here back in 2006 as best practise - but your new template wont do it. I love CM ut my buddy used Mailchimp and he has this function on his. : (
David Greiner
November 4, 2011 5:58am

@Tomasz and @Paul, we hear you loud and clear on that one and will be supporting multiple languages for each template soon. Keep an eye on the blog, we’ll announce it here as soon as it’s available. Thanks for the feedback too, we’re definitely listening.
Jeremy Harrison
November 7, 2011 5:53am

I think the most effective MOBILE email you can send is text-only. As soon as people see HTML email templates these days they assume it’s something that can be read later (or worse, never). People using email on mobile devices are browsing for personal emails that require their attention right away and they more quickly archive or delete mass emails. My tests have shown personalized text emails (meaning little to no HTML) win every time.
Damon R
November 19, 2011 3:35am

I noticed the css in the media queries for these emails contain styles like: table[class=w10], td[class=w10], img[class=w10]

Are those formatted specifically for CM? or would I write styles like that for any email, regardless of the service?
Damon R
November 19, 2011 3:55am

Also, what’s the bit with the conditional MSO 9 and the “_tmplitem=...” ?
Ros Hodgekiss
November 19, 2011 5:29am

Hi Damon, these are just regular @media queries using attribute selectors (to prevent issues with Yahoo! Mail). You can use them in any email marketing service that doesn’t strip out @media queries on import.

I’d love to know under what conditions you’re seeing what I presume is Outlook code - could you kindly get in touch with our support team with details? I can’t seem to see it in the template source code.
Shawn Peters
November 24, 2011 8:08pm

I just created a template using this template builder because I couldn’t get my template to work in Gmail mobile (including android app and via browser). I just sent an email out and voila!...the template is exactly the same as the desktop.

I know you guys have been working hard on this, but it is getting very frustrating because it *should just work* but it just doesn’t.

Please help…
Ros Hodgekiss
November 25, 2011 6:31am

Hi Shawn, thanks for your earlier email to support. To reiterate what I said in my response for the benefit of others, Gmail does not support @media queries or display: none; For this reason, you’ll always see the desktop version when viewing email templates on Gmail for Android, iOS and elsewhere.

Unfortunately, this is a limitation in Gmail, not with our template code. We too are perpetually frustrated that things that should just work in Gmail often don’t, as our commitment to the Email Standards Project will testify.
Jen Cartwright
January 6, 2012 8:42pm

I just used your template builder to build a three column content-heavy newsletter, but it’s not viewable on my BlackBerry. It just comes across as HTML rendering in code. Is there anything that can be done to ensure that BlackBerry clients will be able to view this properly?
Ros Hodgekiss
January 7, 2012 3:36am

Hi Jen, mind me asking, which model Blackberry are you using? Unfortunately, there are many Blackberry models out there with variable levels of HTML email support. It’s likely that your handset is not configured to display HTML email and therefore, you’re seeing the code instead.

My recommendation would be to ensure you put care into the plain-text version of your campaigns and provide a webversion link, early on in the email. But due to limitations in older Blackberry devices, we can’t promise a great viewing experience for everyone.

Blog