We regularly talk to customers who are keen on building mobile-optimised 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: 'Optimising 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 the new brandparents 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 optimisations to our customers, it's about time that everyone gets to create responsive email campaigns.

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:

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.