Email newsletter template design
Our digital designer, Tessa MacTaggart, shares her tried and trusted process for creating email newsletter templates.
We often receive requests for a “blank” newsletter design – one which will ultimately be populated by our clients themselves and sent on a regular basis (weekly/monthly).
Each section will have intro text which clicks through to a main article/blog post and it may, or may not, have an image. Anyone in the email industry would understand the technical and design difficulties around this type of request because more often than not, content dictates design.
This is not an impossible task if you stick to a few simple guidelines that can make managing and using this template easy!
Before I get into the details it is worthwhile to share a bit about our approach. One way to create email newsletters is to use the drag and drop functionality available in email sending platforms, like MailChimp for example. However, we prefer having more control over the layout therefore we code email newsletters in Dreamweaver. Some things are just not possible to do with a drag and drop editor. It’s also easier to create a more unique layout this way.
Here is my 5 step process for creating email newsletter templates.
1 - Start with the end in mind
Ask some questions:
- Are there different sections within your newsletter (.e.g. New business, Staff Wellness, Events etc)
- Will each article link through to a blog/landing page on your website?
- Will each article need an image or will some sections be text only?
- Will there be calls to action?
2 - So many possibilities!
Because we’re working with a design that will vary in length from one edition to the next, I usually make allowance for that within my design by creating sections with 1, 2, 3 or even 4 columns which will enable us to simply cut/paste what is needed or delete what we don’t need each edition. A bit like a “drag and drop” template (but with no dragging and dropping…).
At this point I put good old pen (or my sons’ crayons) to paper and start a drawing a rough design! Here is a wireframe mockup for a newsletter we did recently:
3 - Keep it simple
There’s a lot more freedom for design when it’s you doing the heavy lifting each month, but when you are creating a “fool-proof” template a client may be using, simplicity is key. Here is my “go-to” checklist:
- All images to be exactly the same height and width but may be resized within the html depending on which container they are in. The benefits are:
- Our client doesn’t have to think and wonder about different size images per section
- If an article gets moved around from one section to the next, no resizing is required
- Creates consistency throughout the design
- Easier to ensure the mailer looks great on mobile too.
- Text – text stays as text. Do not use images for headlines. Besides it not rendering well on mobile if it get’s scaled down, it’s difficult for the client to manage and understand. And the most obvious – not best practice!
With this in mind, start creating your design in a platform like Photoshop. Whilst designing, keep in mind:
- “How will this section I am doing now render on mobile” – don’t make it impossible or difficult to code.
- Fonts – stick to system fonts for copy and headlines. Set the correct sizes, colours, line spacing etc in Photoshop
- Make sure your canvas size is the right size to export your slices later
4 - Let's start coding
Now I’m quite lucky to have an incredible team to back me up and take over all the coding and testing – but I’m no newbie to it either and have designed and built many email templates in my time. What I can suggest is:
- Stick to what you know
- Keep it simple. In our experience tabular designs work best and we’ve tweaked and perfected a template which (I’m boasting here) renders well on 99% of devices on a Litmus rendering test. Even on the difficult email platforms (looking at you here, Outlook)
- Test again
- Test one last time!
5 - Handing over
The day has come and your shiny new email newsletter template is ready for delivery! A short training session and a little instruction manual goes a long way. Our client might be populating the template themselves, or, they might be sending us the content to set in the template for each edition. Either way, it’s important to communicate all the processes and turnaround time to avoid frustration at a later stage.
For the DIY client there may be some “after sales services” required to do a little tweak here and there. They might even appreciate – even though we stick to keeping it simple – that it’s more technical than they anticipated.
I would love for you to share your own newsletter template design process or let me know how this process helped you. Please leave a comment below or contact us if you would like us to create your newsletter template.