The no-design design guide to email templates

A design guide that’s not about design? Hear me out. Because if you haven’t tackled basic no-coding email template design, let me tell you it’s 80% understanding ‘the rules’ and 20% getting creative.

That doesn’t mean it’s not fun or that you can’t create scroll-worthy templates without being an expert coder. It’s just a case of understanding how emails work - something I learned when I put together my own newsletter.

Being a busy gal I have no time for finicky processes, so I use Mailerlite, an easy-to-use Email Service Platform (ESP, swanky) that has a free plan and gives me all the functionality I need - including the ability to schedule emails, which I’m a big fan of. 

The drag-and-drop approach (common across most of these types of platforms) makes design a question of creating the right assets according to those rules. Speaking of which:

Think content first

What kind of email are you designing? A wordy newsletter? A snappy sales email? Depending on what the email needs to communicate you’ll need to consider things like banners, hero images, icons and calls to action. Text-to-image ratio is important in email design erring ideally towards 70:30 or 60:40. Avoiding text-only graphic headers will help here and will increase your email’s accessibility.

600 is the magic number

The width of a standard template in pixels. When you’re designing your email, think in divisions of 600 so you can get your proportions right - whether that’s margins, graphics or text boxes. You can play with the image scaling when creating your template, but if you start with correctly sized images and graphics, you’ll find your template will come together more quickly.

Check how much flexibility your ESP gives you before you start. Some (like Mailerlite) have presets for left and right-hand margins, but you can add padding top and bottom between sections to your heart’s content. Others (like Mailchimp) let you fiddle with spacing on all sides. However much flexibility they give, they’re still working to that set width, so bear that in mind.

Mobile is king

Almost everyone reads their emails on their phones now, but mobile email clients aren’t as kind to your design as desktop ones, so always think about how that snazzy graphic will look when it’s shrunk down to a smaller portrait screen. 

Most ESPs will let you design specifically for mobile and tinker with settings so that you have more control. Just make sure you preview both versions.

Don’t forget to check your fonts

Managing expectations here: the number of fonts on offer is limited. (Sometimes you can upload your brand fonts so worth checking.) So you have to choose whether you want to: 

• Hand-code headers and text blocks to match your brand fonts

  Pros: 

  • Not impossible or difficult once you know how

  • Full branding throughout the email

  Cons:

  • More time needed to format any text featured in the email and test that it works across the top email clients (Gmail, Apple Mail, Outlook etc)

  • Depending on the reader’s device they may never see it and will see a substitute system font.
    

• Picking a system font you know will render reliably, that complements your brand font and leaving graphics like headers, footers and content-relevant graphics to keep everything on brand.

  Pros:

  • Quick to set up and easier for you/your client to manage when creating ongoing campaigns

  • More likely to render reliably across the main email clients. (NB Your ESP offering you a font isn’t a guarantee it will show unless it’s a web safe font.)

  Cons:

  • Limited selection

    May jar with other brand elements
    (NB always include a system/web safe font option on all brand/rebrand projects - especially if email marketing is a priority.)

Whatever font you go with, don’t rely on what you see in the email builder - send yourself a test so you can see for yourself. Which brings me to my final rule…

Test, test and test again

Ideally with as many different email clients as possible. You can use a dedicated platform like Testi (This could be a shared responsibility if you’re designing a template for a client rather than for yourself.)

Checking desktop vs mobile is non-negotiable. Email builders give you a decent preview of how your email will look in an inbox, but it’s not bulletproof, so it’s up to you to check and adjust. While you’re there check how those web safe fonts look, whether graphics aren’t too tiny and that your design still works in dark mode.

It’s a given that older versions of Outlook will chew your beautiful design up and spit it out (ask any email developer about white lines in Outlook and watch them twitch), but I wouldn’t sweat that one unless you’re designing for a client who knows that their customers/readers are Outlook worshippers 😳

That’s it! Email template design by nature demands that you keep things simple and uncluttered, which can make it feel like you’re just digitally plonking things in boxes, but once you get your head around the rules you can have fun with what you plonk in those boxes.

S/O to my pal and email obsessive, Sonal at MailPimps - who’s always on hand to make sure my emails play by the rules. See for yourself! Sign up for my 2-minute work/life news round-up here.