Advertisement
Email

The Complete Guide to Designing for Email

by

Designing for email is about getting to the point and making the most of the brief chance you have with your subscribers. You only get one shot, so it's worth employing as many tricks in the book as possible to make sure your message gets through. The underlying principles are all about respecting your readers by giving them something valuable in return for their time which is, after all, the reason they signed up to hear from you in the first place.


A Note Before We Get Started

Some of the suggestions that I'm going to make won't apply to every list, company or product. As always with email, test anything new and see how it performs to determine what's best for your subscribers.


Rule #1: Be Transparent

This is really important. Avoid using puzzling or cryptic sender names, subject lines, preheaders or copy. This will just confuse your readers and make them more likely to delete your email or mark it as junk.

Tell your readers who you are, exactly why you're emailing them, and exactly what they're going to get out of the experience. Have all of this as close to the top of the email as you can get it. This means as soon as your email is opened, your intentions and identity are clear, and your proposition won't be overlooked.

Make sure your sender name, subject line, preheader, and your 'above the fold' content is all meaningful and relevant to your reason for contacting your readers.

Try this Clear and obvious sender name subject line logo and opening content
Try this! Clear and obvious sender name, subject line, logo and opening content.

Rule #2: Be Obvious, Embrace Convention

It may seem boring, but being conventional really comes in handy with email. Emails are small and they're opened for a very brief period of time, so the function of every element needs to be crystal clear.

Make Your Links Obvious

Create nice, big, easily clickable and tappable buttons for your links. On mobile, make them 100% of the width so that they can easily be tapped with either thumb (no reaching required).

If you also wish to have text links within your copy, ensure they're bold and in a contrasting colour so they stand out. Try not to have too many links close together, which may cause a user to accidentally tap the wrong one.

About 50% of opens are on touch devices these days, so avoid language that doesn’t make sense, such as "click here".

email-graph
From Justine Jordan on litmus.com

Don't hesitate to add an arrow—studies have shown that they are more effective—but, as always, test on your own subscribers.

Make the Benefits of Clicking Obvious

The best buttons combine the benefit of clicking through with the action itself. For example, “Start using your new account” or “Claim your free trial”.


Rule #3: Say Less

Don't write much. Your recipients will scan the email for things that interest them rather than reading the whole email, so divide it into bite-sized pieces which are as short as possible.

Your aim with marketing email is to get people to click through to your website, so there is no need to delay that with a lengthy monologue, especially as a lengthy-looking email is going to overwhelm your readers with mental fatigue and make them more likely to hit "Delete".

Try this Short and punchy bites with clear calls to action
Try this! Short and punchy bites, with clear calls to action.

Make It Scannable

Design your email to be punchy. Text should appear in clear, delineated chunks that get to the point.

Use clear headings and call out key concepts in bold type so that your scanning readers can get the gist, even if they don't read everything (which most of them won't).

Try this Short punchy sentences with obvious buttons
Try this! Short punchy sentences with obvious buttons.

You Can Say More—Later

If you are in the business of sending longer content that your readers enjoy, I am definitely not saying that there is no place for it in email marketing.

People read email in all kinds of different scenarios. Some will be 'on the go' and between important meetings, others may be extremely bored in a dentist's waiting room, and I'm very sorry to tell you that others still will be on the toilet. These scenarios are all very different, but it's easy to cater to everyone by sticking to a logical hierarchy.

Provide the shortest and punchiest information first, and then include your longer-form content underneath. This way you aren't forcing anybody to wade through longer content except those who are actively working their way through your email.

Repeat Your Main Call to Action

If your email is long and a user has scrolled all the way through your content, make sure they have easy access to another call to action without having to scroll all the way back to the top of your email.

Try this Prioritise your main proposition then include secondary andor lengthier content underneath
Try this! Prioritise your main proposition, then include secondary and/or lengthier content underneath.

Promotional Emails and Announcements

These tips apply to marketing messages where there are typically one or two main things that you are contacting your subscribers about.

Don't Dilute Your Message

If you are writing to your readers about one thing, try not to dilute the message by adding lots of other things underneath or in a sidebar. With every additional option you compound the risk of derailing them.

Remove All Non-Essential Elements

Assess your email's design, identify anything that is not essential to conveying your message, then remove it. Fewer distractions means clearer communication.

Don’t Give Too Many Choices

Too much choice increases cognitive load on your readers, making them less likely to make a decision.

Think about what the minimum requirement is to get someone to click through to your website, then gradually introduce more of the required detail. Overloading people with too much choice at the start is only going to encourage task abandonment.

If you are trying to get your subscribers to choose a product and buy, don't present all of the options in the email. Just get them through to your website, and start introducing the needed complexity there.

Try Gradually Engaging People

Sometimes it's intimidating to receive an email that immediately says, "BUY IT! SIGN UP! COMMIT!!"

Instead, try to get people over to your site on a prior step of the journey, such as "select your shoe size to see available styles" rather than "buy these shoes".

Have a Focal Point

Make the primary call to action the main focal point of your email. Ensure your readers don't have to search for a call to action in a sea of sameness.

Creating a focal point is easy. First of all, make sure you have a primary goal. Then you just need to make it larger than everything else, and ensure there's enough space around it so that the eye is drawn to this area first. This applies more to your desktop design when a user will see quite a lot of the email at once.

Use Whitespace Around Elements

If you have many things that are all a similar size and weight with no whitespace around them, they will appear as one big, amorphous block that the eye will simply skip over. Use whitespace around elements to help draw the eye to the things that matter.

Try this A clear focal point and a structure that guides the reader
Try this! A clear focal point and a structure that guides the reader.

Universal Tips

If People Want to Leave, Let Them Go

Don’t bury, hide or obscure your unsubscribe information. Apart from it being unlawful in many countries, it’s rude and counter-productive. If someone wants to unsubscribe from your newsletter and you make it impossible for them to do so, they aren’t going to go back to being a happy subscriber. It will just generate ill will towards your brand as they will be forced to continue processing your emails (or set up a filter to send your messages to trash).

Avoid Having Too Many Vertical Divisions

The more vertical divisions there are in a layout, the more distracting it is to the eye. Stick to two or three vertical divisions within a grid.

Solid borders are also very distracting to the eye, so keep these to a minimum.

Try this Fewer vertical divisions make it easier on the eye
Try this! Fewer vertical divisions make it easier on the eye.

Practical Considerations

Keep It Under 600px Wide

This is generally the safest maximum width for your desktop design to ensure users won't have to scroll horizontally.

Use Progressive Enhancement

Before giving every box rounded corners and drop shadows, think about how your layout will work without these enhancements. Treat that as your 'base' design, to which you'll add your rounded corners and shadows as enhancements.

Creating bold shapes with square edges looks just as great, and users on newer email clients will get to see your rounded corners as an added bonus.

This approach will save you a lot of time when it comes to building your email. If you have to create a rounded cornered text box with a drop shadow and it has to work on every email client, you will have to build the effects using images, which can be very time-consuming especially when creating reusable templates.

Give Your Design Some Breathing Room

Embrace the fact that it's not always possible to get things looking identical in every email client down to the very last pixel. Design with this in mind to ease headaches further down the track.

Create designs that have a bit of breathing room, where it won't matter if one client is adding 7 pixels of mystery space underneath. At the very least, refrain from extra-finicky tiny details that are going to look broken if they are one pixel out.

Consider the Whole Experience

Your email is a cohesive whole, so think about how everything works together. Users will see the email in their inbox first and read your sender name, subject and preheader. Then they'll probably see a version of your email with images disabled, the default for most email clients. Finally, they'll see your email as you intended it—if they enable images.

Make sure that everything ties together well, and that subscribers will still be able to understand your message, even with images turned off.

In the email inbox left and with images off right
In the email inbox (left) and with images off (right).

Don’t include your main message in an image. It will be blocked by default and many email clients won’t display your alt tags either.

In the example below, you can see how almost everything in the message would be missed without images turned on, because all of the text is contained within images and the alt text has not been styled to make it readable.

A Velocity Frequent Flyer email with images off left and images on
A Velocity Frequent Flyer email with images off (left) and images on (right).

Style Your Alt Tags

You can add CSS styles to images (or their parent cell or link tags) to ensure that they display nicely in clients that support alt tags. This can really improve the overall experience for your subscribers.

Test for Colour Blindness

If you're using Photoshop, this is built in. There are also plenty of tools that will allow you to see how your design is going to look to the 10% of people with some form of colour vision deficiency.

Link Everything

When building, don't just link your buttons. Make sure you link everything so that users can click anywhere. Link the image, the button and headline. Heck, even link the text if it works.


How to Design Mobile-Friendly Email

There are a few ways that you can approach creating a mobile-friendly email.

1. Single Column, Device-Agnostic Design

This is hands-down the easiest way to have a mobile-friendly email. Using this method, the images and text are set to be quite large so that whether the email is viewed on a desktop or a mobile, the font is readable and the images are big enough already.

EmailTypes-DeviceAgnostic

The benefit of this type of design is that you only need to code a single layout. It's definitely your quickest and easiest option. Smartphone clients that support scaling will scale your email down to 100% width, and on those that don't, there will be very little horizontal scrolling.

The downside is that the desktop version is very large in scale (which I don't personally see as a downside).

To achieve this layout:

  1. Design your email at about 450px wide
  2. Headings should be at least 30px
  3. Body copy should be at least 20px

2. Fully responsive email design

A fully responsive HTML email uses media queries to display the email in a certain way, depending on the size of the device that it is being viewed on. Almost none of the major desktop and webmail clients support media queries, but many smartphone and tablet mail clients do. This means that coding responsive emails is a little back-to-front compared to coding responsive websites, in that your desktop version is your 'base' version, and you use a max-width query to adjust the layout to smaller devices.

EmailTypes-Responsive

The benefit of this type of design is that you can create a great multi-column email that translates to an easy-to-read, single-column mobile version. Media queries are also versatile because you can target specific screen sizes and also specific pixel density screens (for displaying high resolution images).

The downside is that the Gmail app for Android (the most popular mail client on Android) does not support media queries, and can generate some unusual results when rendering your fully responsive email builds. Fully responsive emails also take much longer to code than their device-agnostic cousins.

3. Fully Fluid Email Design

Think of this as being responsiveness without the media queries.

EmailTypes-Fluid

This method involves creating a fluid design, 100% wide, with a maximum width of around 600px set on the outer table. Conditional comments are required (for Outlook) as well as a media query (for Apple Mail which, hilariously, doesn't support the max-width property).

The benefit of this type of design is that it's going to be responsive in every email client, including the Gmail for Android app. This method can also be used in conjunction with media queries to further refine things like text size and buttons on those clients that support them.

The downside is that it will only work well with designs that are fairly uncomplicated and generally have no more than one column. Two column content is okay as long as it's small enough to look fine in a narrow column on a smartphone screen.

You also have to be able to use percentage widths for your images, which is not always possible when creating templates (often images in templates have to have a set pixel width).


Further Enhancing Your Email Design

And finally, there are a few fancy things that you can put to good use to start creating really fancy emails that truly stand out.

Background Images

Background images used to be something for the "Too Hard" pile, but thanks to Stig Morten Myre and the folks at Campaign Monitor, there is now a super easy Bulletproof Email Backgrounds generator that takes all the hassle right out of it. There's no longer any need to hold back on adding background images to your campaigns.

Web Fonts

Using web fonts is also a really great way to make your design stand out from the rest. With a little extra design consideration and a little extra build time, it's easy to implement web fonts that will render really well in a surprising number of email clients.

CSS3 Animation

Modern email clients (such as Apple Mail and those on the iPhone and Android devices) actually support CSS3 Animation, which means you can start thinking about adding some seriously cool stuff to your campaigns. Transitions, as well as keyframe animations, render quite well and can be a fantastic addition to email (as long as they degrade gracefully) because they don't increase the file size as much as an animated GIF would.


Conclusion

There's a lot to take into account when designing for email! The tips listed in this article will give you a solid start, and look out for more posts in this series which will go into various aspects (such as using web fonts and responsive design) in more detail.

Related Posts