Understanding email design pt.2 - The design

Senior Designer

Blogs

It’s really important to look at the overarching strategy when designing for email, if we’re working on a suite then it’s imperative they work as a coherent set of comms. It’s preferable to work on the entire suite in unison, or at least have a good understanding of future emails when working on the first design. It’s recommended to review the email content and strategy against any design considerations, so each solution we’re providing is tailored to that project and the users in mind. Once we’ve got a good idea of the email content, we can begin to think about layout. 

 

We’ve nearly reached the tipping point where mobile email opening rates surpass that of desktop email opening rates as 46% of all email opens now occur on mobile. This means it’s imperative that we’re also considering responsiveness in our email designs. 

The layout: Content and CTAs

Emails should be easy to skim, with content grouped into chunks and clear calls to action (CTAs) at the appropriate time. It’s important CTAs are placed after the correct amount of copy, too early and they feel pushy and sales-focused, too late and there’s a risk of user drop-off.

This is an example of the inverted pyramid method, by guiding a subscriber’s eye down the page to the CTA, they’ll be encouraged to click through to explore more.

The layout: one column

  • A Mobile first email design, but works just as well on desktop
  • This layout is very good for linear content, when you want to guide the user from A to B. 
  • This supports making it obvious which information is important and what you want users to do next

The layout: Multi-column

  • Using this layout provides  greater flexibility over how content is structured and allows relevant content to be grouped alongside each other, instead of stacking it which can give more weighting to the top
  • Good when you’re encouraging the user to take multiple actions or explore, instead of one linear process. 
  • 2-3 columns is the usual limit. You can add more, but beware of your grid becoming too small or complex, you’ll need to balance this with clear, uncluttered design.

The layout: zig zag

  • This layout is very similar to the one column approach in terms of its benefits and how content is structured, although it’s less simple to translate to mobile.
  • Good for laying out benefits of a service or product, or telling a story.

The layout: breaking the grid

  • This layout can create a unique and interesting design, that’s highly customized to the content
  • Using this approach won’t suit all projects, as it will require more work on the developers part, so whenever we’re thinking about employing this layout  developers should be consulted early.

A quick note about the fold…

Worried about the fold? There can be a tendency to cram all of the important information and CTAs at the top. However, with email the key is getting users to open the email, once it’s open a large portion of the real estate will be visible on screen. Arguably this could be more of an issue on mobile but this is offset by learnt scrolling behaviour.

Fonts

There’s two approaches to using fonts in email design, using system fonts or using web fonts (or a combination of web fonts and system fonts). Web fonts can be useful as they communicate more of a brand’s personality. The selection of system fonts (Arial, Verdana etc.) is fairly limited so can be a bit boring. 

 

It’s important to review which email clients and inbox providers the audience use before deciding if a web font is the best fit. The following providers have a good support of web fonts:

  • iOS Mail
  • Apple Mail
  • Android (default mail client,
  • not Gmail app)
  • Outlook 2000
  • Outlook.com app
  • Thunderbird

Remember to always check you have the right license for the fonts you’re using.

Image types - JPEGs, PNGs or GIFs?

  • JPEGs – perfect for pictures of people, product shots, and intricate illustrations. Essentially, any complex imagery.
  • PNGs – great for simple imagery and if you need a transparent background, such as  with icons & logos. PNG-24 or PNG-32 is recommended for smoother looking graphics
  • GIFs – have poor colour support and can be quite large files, but allow for movement which can really boost engagement
  • Before sending image assets to clients, it’s worth running them through optimisation software like ImageOptim and JPEGmini to remove unnecessary data.

 

Check out our Understanding Email part 1 to find out more about getting started.

 

Struggling with getting started, we’ve created a free design checklist to guide you through each step of the way, download link below.

 

If you would like to discuss how Make it Clear can help your organisation to create engaging emails, please contact hello@makeitclear.co.uk

Email design checklist