Did you know that 81% of email marketers consider email the most preferred marketing channel for customer acquisition?

Given that amazing statistic, it’s important to make sure your email is well designed. The color schemes, chosen images, email layout and even the fonts you use has an impact on the email performance.

Feeling perplexed about you losing subscribers owing to a bad email design? We got your back with a list of email design tips to avoid mistakes in your email templates.

Let’s start from the basics.

Mistake #1:

Do you still travel in horse carriages because your ancestors did so traveling across bumpy roads? One of the prime mistakes that most email designers tend to commit is sticking to the 600px email width. In the late 90s the maximum desktop width was 800px and so email designers used to create emails of 600px width to compensate the display pane of most webmail interface.

 

Later when emails began being opened in mobile devices, the tradition of creating an email of 600px width stuck on.

But modern email clients such as Thunderbird, Apple Mail, Windows Mail, iOS mail display the emails in full width and most devices have a minimum display width of 1024px. So, you can create full width emails where the email content is restricted at 700-800px width and rest of the email area is covered by a background color or repeating images.

The desktop layout of the above email by Domino’s has a background image that is repeated seamlessly.

Learning: Create a full width email with a constant background color or repeating background image.

Mistake #2:

In conjunction to email opens in devices with high display resolutions, email designers still fail to use retina images in their emails. In case you’re wondering how would not using retina images affect an email design, here is an example.

In the email example by Sneaker Freaker, the right image is the original email and left imitates a situation where a non-retina image is viewed on a high-density screen.

Learning: Use images with resolution double than the display container width. If your email width is 800px, use images of 1600px width scaled to 800px.

Mistake #3:

As per Litmus survey of January, 47% of email open happened on mobile devices. Yet, most email designers don’t create a separate mobile layout. Most email designers tend to create a desktop layout and hope that the email is visible when scaled down for mobile devices.

Moreover, most brands have navigation menu on the top of the email which scales down when viewed on a mobile device. In the above example, when the email is viewed in a mobile device, the menu shrinks and becomes hard to tap. It is better to hide the navigation menu behind a hamburger menu when viewed in a mobile device as done by REI.

Learning: Always adopt a mobile first layout or single column layout that looks good in both desktop and mobile devices.

Mistake #4:

Consistent email elements help your subscribers to recognize your emails and associate with your brand personality. While the color scheme of your email changes with occasion and purpose, some email designers tend to forget to maintain the consistency or forget to include branding elements such as brand logos, consistent header and footer.

Learning: Always remember to include your brand logo in the header itself for easy recognizability.

Mistake #5:

Modern emails rely heavily on images to convey the email message. This is a very risky step considering the fact that email clients tend to disable images by default and it may convey an incomplete message. Your email design should have a 80: 20 text to image ratio wherein the text is not relying on the image much.

This email by Frank Body uses the text of the email copy to convey the message and images for representation purposes.

Learning: Use images to further explain what your email copy is conveying and not vice versa

Mistake #6:

Any time you visit a website, your email browser downloads any font that is not available on your system but is needed for displaying the text correctly. Unfortunately, this was not possible in email clients and thus email designers used to play safe by using email-safe fonts or system-based fonts.

Thankfully, some email clients support custom fonts and so email designers can experiment with custom fonts. However, use those fonts which have a valid fallback font available. Here is the list of custom fonts and valid fallback font.

Learning: Custom fonts are no longer restricted to images and can be used in email copy as well but only if it has appropriate fallback font available.

Mistake #7:

English and other languages which follow the left to right reading pattern tend to read information in the form of a giant ‘F’. Owing to this, most email designers tend to stuff all the vital information in the first fold itself and that sometimes creates information overload.

Learning: Always implement visual hierarchy when designing your emails. Adopt an inverted pyramid layout or zig-zag pattern for catering information in an orderly manner.

In the above email by Safety Girl, the email content is arranged in a way that it is easy to scan over yet gives complete information.

Learning: Adopt an apt visual hierarchy for catering information.

Mistake #8:

In case you are using an animated GIF in your email, it is important to remember that Outlook and Lotus Notes tend to only display the first frame of the GIF. Most email designers forget that and the end result is subscribers seeing a static image with nothing to convey.

 

This email by Netflix conveys information in the first frame which is followed by the animation.

Learning: NEVER leave the first frame of your animated GIF blank.

Mistake #9:

While creating a footer for their email, sometimes email designers forget to make it CAN-SPAM compliant. Make it a point to check whether your email footer has the following elements:

• Email Signature
• Easy to find Unsubscribe Link
• Physical Address
• Reason why your subscriber had subscribed

In the above email by Tracksmith, the footer is an example of a minimal email footer that is CAN-SPAM compliant.

Mistake #10:

While creating a dynamic email, it is very important to take into consideration the length of the email content which shall be dynamically fetched. If the content is long, it will overlap with existing content and if the content is smaller than the display container, it shall leave an uncomfortable amount of white space.

Wrapping Up:

While reading the above stated mistakes, you may find some of them to be too basic to be ever committed. Yet the email marketing domain is filled with such horrendous errors and it is better to play safe than design an apology email. Do you agree with our views? Share your ideas and email design tips in the comments below.

 

About the Author: Kevin, the Head of Marketing at EmailMonks – one of the fastest growing Email design and coding companies, specializes in – crafting email newsletter templates, PSD to HTML email conversion and free HTML email templates. He loves gadgets, bikes, jazz, and breathes ‘email marketing’. He enjoys sharing his insights and thoughts on email marketing best practices at his blog.