In the two weeks or so following the launch of Canvas, we’ve had a bit of time to reflect on creating the layouts and elements that allow you to create robust, mobile-friendly email newsletters. One thing that particularly stood out was how important it is to have the right tools and processes in place – especially when working in a team.

As an email coder, I was particularly interested in the waterfall model used to develop each of the Canvas layouts – each of which consist of multiple layouts and a selection of elements (text fields, buttons etc). Each of these pieces required close collaboration between both our email code and design teams – which even amongst the most well-behaved of us, can be fraught with danger.

So, here’s a look at the 6 steps, from kickoff, PSD handover to testing, that our team worked through to create the templates. Hopefully our workflow will help with your next project, no matter if it’s 10 unique templates, or one.

Step 1: Choose the best tools for communicating in teams

First of all, it was really important that we found a means to collaborate and share between design, email coding and whoever wanted to jump into the project. We tried a number of approaches to discussing and clarifying issues, including the use of Shipment, LayerVault and a HipChat room. At the end of the day, we selected Basecamp – not only were its todo lists already familiar to many within Campaign Monitor, but are pretty good for sorting through coding tasks and facilitating deeper discussions around each of them.

BasecampWe use Basecamp to collaborate internally and between teams

For template issues (for example, VML code not working as expected in Outlook), JIRA was selected – again, a tool that is very familiar to the team. Using JIRA allowed us to also loop in our testing team, without forcing them to use tools outside of their existing workflow.

Step 2: Get to know the template

Once everyone was settled on collaboration tools, it was time to receive the Photoshop mocks in PSD format from the design team. This was a bit of a discovery phase, requiring the email developers to have a good look through PSDs of both the desktop and mobile versions of a template.

Mason templateA Desktop mock for the Mason template – click for detail

Things that we focused on included identifying standard layouts (one, two, and three columns) that email coders are generally familiar with, vs non-standard, more adventurous ones. Seeing how the same layout or element looks translated between desktop and mobile is always very interesting; thankfully our designers are pretty used to working with responsive emails (and their quirks), so aren’t prone to making outrageous demands as far as layouts go!

Step 3: Identify tricky layouts and elements; code and test them

Anyone who has coded an email template from scratch knows that often, finding out what works and what doesn’t across many email clients can be quite an exploratory process. With our templates, some of the elements had to be coded and tested aside from the template-in-progress, to ensure they could be incorporated into the design. As always, some things may not look exactly the same across all email clients, but they should at least degrade gracefully – and look good.

Also, if something in an email design turns out to be actually impossible, it’s good to give that feedback early, since design changes can often have ripple effects.

Step 4: Create assets

Now that we’re fairly confident that the template mocks can be turned into a rock-solid email template, it’s time to slice away and create assets. This includes both graphic elements in the template itself, and placeholder photos from the mockup.

To ensure images are optimized for Retina displays, we exported them from the PSDs provided at 2x size, and then resized down to 1x using the image’s width and height attributes.

So icon, much zoomOne of the icons, zoomed in for detailed work

The exception to this were background images (for example, those used in bulletproof buttons), which we usually exported at both 1x and 2x sizes.

Step 5: Start coding!

While each Canvas template is designed to be fairly dynamic as far as combining layouts and elements goes, we found that coding a long, static HTML file with placeholder content helped us envision the final product. A modified LESS framework was developed during this stage, with each template’s styles.less file containing a number of variables for basic styles and calculations, followed by styles which are specific to the template. CodeKit was used to process the LESS files and speed up browser testing.

As an aside, the ever-helpful Stig on our team created a Chrome extension for overlaying the PSD designs over HTML pages. Called Blueprint, this extension allowed the team to achieve an unprecedented degree of pixel-perfection.

Working with Blueprint

Hopefully we can get Stig to open up more about it in a later post!

Step 6: Test IRL – not just virtually

Once a template looks and acts as desired (in the browser at least), it’s time to test. At this stage, we usually imported the campaign into Campaign Monitor to run a quick Design and Spam test and/or tested in Litmus. If some clients looked off, we’d progress to live device tests. In addition to a few Windows and Outlook email client versions in VMware, we also stocked up a few different devices – particularly, mobile handsets – to test on.

Of course, more often than not these steps would bleed into one another, or be repeated – email coding and testing is seldom quick, clean or without incident. However, end results speak for themselves – a first batch of 10 robust templates, delivered on time and now ready to use in your account. Jump on in and try your hand at creating a unique email design – if we hadn’t mentioned it here, the coding and testing behind the templates would likely never have crossed your mind.

Send better email campaigns Subscribe to our email course to learn how to create and send high-performing email campaigns that drive results for your business. GET THE FREE EMAIL COURSE
  • Lotta hardman

    The designs are great! It would be even greater if the templates could be re-imported with for ex. Language changes in the unsubscribe and view in browser – default fields. No i cannot use template for finnish clients.

  • Ros Hodgekiss

    Hi Lotta – good news here, language support is coming and we’ll certainly let you know when it’s ready. Subscribe to the blog using the blue button to the right so you don’t miss any news here 😀

  • Ben Carver

    Great advice! This is very similar to my own template workflow

  • Allie

    New templates look wonderful!

    Would love to be able to switch over to source view like I can in your other templates. Any chance this feature will be coming soon?

  • Peter Yee

    As an coder to another, how would you tackle the default left and right spacing by Gmail mobile app?

  • Ros Hodgekiss

    @Ben – that’s awesome, I wouldn’t expect anything less than a structured process from you, Ben :)

    @Allie – A source view is certainly something we’re considering; keep an eye on the blog as you’ll hear about it here first 😀

    @Peter – Personally, I think they’ve introduced the margin for ergonomic reasons (same happens in iOS Mail) and from experience, attempts to override these kind of “system margins” (like in Outlook) can sometimes have unexpected consequences. With Gmail, your best bet is perhaps to either go for a fluid-width layout, or ensure there isn’t excessive padding between a text container / block and whatever container it’s nested in.

  • Jaina

    Interesting to read that all your images are retina read. Of course that’s uber important right now, but are there any implications on performance of emails?

    Great read here – always interesting to read how other people’s workflows work!

  • Ros Hodgekiss

    Hi Jaina, good point here – the main thing for email designers to consider is how image sizes affect load times. For example, I’ve seen emails with 10Mb+ animated GIFs – this might be passable over wifi, but not so great over cellular data. So by all means we encourage beautiful, crisp images in email campaigns, but highly recommend testing load times on your smartphone to get a first-hand idea of how email payloads are affecting performance. Thanks so much for writing in!

  • Marc

    The ability of creating templates nice looking and easy to use for our clients is the MAIN reason I choosed CM, as a graphic designer.

    So this new editor is exciting. For non english languages users, the possibility (as in previous editor) to edit in proper language is “sine qua non”. Happily I’ve read Ros announcing it will come soon. The soonest is the best.

    An other nice feature in previous template builder was the choice of background colors for email body or articles and colors for texts (links, title…) I did not found here.

    I agree that a simple logo in the header could be more elegant than a 600 px banner, but some clients prefer it. I did not see à template that way.

    I did not found either the “send to a friend” personalisation choice. Yes it is in the footer but before our clients could put it in articles of our templates.

    Thanks for everything.


  • Ros Hodgekiss

    Thank you, Marc – really appreciate the feedback here. We’re certainly looking at how we can extend Canvas as far as colors and internationalization goes, so please watch this space. You’re right about it not being possible to add a “Forward to a Friend” link to text at present, so note down this request and keep you updated – it’s a very good call :)

  • bryan deady

    hmmm, so far not impressed, the previous template builder worked fine. This feels likes it is dumbed down. I can see no way of viewing the source code, and I seem oblige to select a template as a starting point rather than just having the option of a template or creating my own as with the previous version. Limited font styling, for instance how do I change font colour?

    Granted early days, but if you are targeting a non tech savvy market then the UI should lend itself to being a click and play environment. This just seems really limited as if Campaign Monitor are creating a solution to be used how they want rather than how the customer wants.

    Overall seems a backwards step rather than building on the merits of the previous template builder. Thankfully all the previous templates I have created still work in the old builder.

  • bryan deady

    not even intuitive as to how you align text, that’s pretty basic stuff.

  • bryandeady

    or change from serif to sans serif !!!!!!

  • Fionnuala McIvor

    Thanks for your feedback here, Bryan – I’ve just replied to your email too :)
    As mentioned, updates are coming to Canvas soon enough. Thanks so much for your patience!

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

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

Get started for free