4 Key Design Principles for Emails in 2016 & Beyond

4 Key Design Principles for Emails in 2016 & Beyond

1. Hierarchy

Email is a communication channel, the number one aim is to get a message across clearly, correctly, and cleverly.

Clearly – Can I read it? Do I understand it?
Correctly – Does it make sense? Is it appropriate? Is it the right image/product/offer?
Cleverly – Does it make me think? Does it engage me? Is it interesting?

The usual format looks something like this:
Subject line > preheader > main title > detail > action + optional secondary message > tertiary information > peripheral information

It’s a little formulaic and up for debate (view in browser at the bottom, unsub at the top or is that the other way around?) but in general, content must be shaped in such a way that leads the recipient into engagement and action, like a funnel. Engagement in this context means turning scanning into reading.

Consistency in this approach helps for many reasons including: accessibility, building trust, responsive layout reshaping, but it doesn’t mean every email has to look the same. Email design and development gets a bad rep because it has to follow such a seemingly limited grid system, with outdated inline code styles, but the reality is quite different. Mobile email adds an extra layer of design challenge and the bigtime email skill comes when able to break the grid visually in the design, but actually following the grid in code and to enhance from the baseline where necessary.

2. Speed

The performance of an email is more important now than ever before:

1. You have milliseconds before the email is deleted, if the email doesn’t load immediately or at least some parts, it may be skipped. You don’t get long to make an impression. This is one reason why you shouldn’t send one big image. The email can be as long as you deem reasonable, but it must be fast loading.

2. With all the jazz that comes with kinetic/interactive emails, email future looks brighter than ever before, but don’t kill it. This adds weight and if not implemented carefully will slow the email down so that it is ignored. The audience doesn’t have the patience (unlike you savvy people still reading this blog post) until they are engaged, and even then your emails can’t be slow. Slow kills.

3. Email is part of a journey. If the email works, and goes through to the website which is slow and unoptimised, then the hard work of the email was wasted. Get the website right and work hand in hand with email.

4. Mobile email is booming and will continue to do so, it’s common sense. Mobile devices can have intermittent or poor (limited) connections. New people come online every second, email speaks to them. Build and maintain brand image through this most personal channel. If the email is too slow then you lose them.

3. Flexibility

This concept is important at every level. Flexibility in the design and preview in browser and flexible rendering across all mail-clients. The web has a few key browsers (Chrome, Firefox, IE, Opera), but email has potentially thousands of combinations. Don’t believe me? Try this fun equation:

{No of mail-clients} x {No of browsers} x {No of mobile device brand} x {No of model numbers} x {No of screen sizes} x {No of screen types (px density)} x {No of operating systems}

add all the ones you can think of from the top of your head, and run the calculation for a rough idea.

Crazy right? And there are more variables added seemingly every day, plus other factors like how the email is sent, user specific settings, exchange servers, some new mail app you’ve never heard of – it’s all happening and without warning.

Pixel perfection only exists in a static environment like Photoshop. This means we need to design and code to allow elements to move, but crucially that stakeholders in the process understand that emails will look different depending upon environment.

True flexibility is to embrace the differences, as Kevin Mandeville said at a TEDC15 workshop last year, we may be looking to see mailclient specific content served contextually in the future. What that means is: if you are viewing in Yahoo, you may see slightly different content to Gmail. We need to recognise and accept that different canvases will show slightly different results, and then use that in a positive way. Working with the differences rather than trying to make the email look exactly the same everywhere.

As an aside, contextual serving of content is already happening in a big way, with dynamic content and live imagery that is dependent upon things such as geolocation and what the weather is like; we are talking about flexibility here.

4. Accessibility

This is listed last but it needs to be considered at all times. Accessibility is the semantic ribbon that ties all these principles together. It is also a yardstick of sensibility for the ever expanding lawless email landscape, where we are starting to see impressive/terrifying things like entire checkouts in email.

Always make sure your most important content can be consumed by everyone. Check out some great resources on this newsletter from Paul Airy here.

  • Matt Carroll

    I teared up a little when I read this passage:
    “Pixel perfection only exists in a static environment like Photoshop.
    This means we need to design and code to allow elements to move, but
    crucially that stakeholders in the process understand that emails will
    look different depending upon environment.”
    I think I am going to get that tattooed on my forehead if it’s cool with you. I have been telling the “stakeholders” this from the beginning of time but never so well articulated. Thank you.

  • mahesh

    Hi Mike Ragan,
    Thanks for this article. i know that for an Email you should concentrate on attractive subject line and clear minimal design will lead to a best email marketing experience.