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.

  • Billy Ryan

    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

  • Billy Ryan

    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

    Does the mobile version actually make the Unsubscribe Link disappear?

  • Aaron Fuqua

    Does the mobile version actually make the Unsubscribe Link disappear?

  • Mathew Patterson

    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.

  • Mathew Patterson

    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

    Is it possible to rename (different language) or remove top bar? I mean top: “Web version, settings, unsubscribe”.

  • Tomasz K

    Is it possible to rename (different language) or remove top bar? I mean top: “Web version, settings, unsubscribe”.

  • Paul Hughes

    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. : (

  • Paul Hughes

    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

    @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.

  • David Greiner

    @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

    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.

  • Jeremy Harrison

    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

    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

    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

    Also, what’s the bit with the conditional MSO 9 and the “_tmplitem=…” ?

  • Damon R

    Also, what’s the bit with the conditional MSO 9 and the “_tmplitem=…” ?

  • Ros Hodgekiss

    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.

  • Ros Hodgekiss

    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

    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…

  • Shawn Peters

    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

    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.

  • Ros Hodgekiss

    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

    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?

  • Jen Cartwright

    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

    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.

  • Ros Hodgekiss

    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.

Want to improve your email marketing? Subscribe to get tips on improving your email marketing delivered to your inbox.
X

Join 200,000 companies around the world that use Campaign Monitor to run email marketing campaigns that deliver results for their business.

Get started for free