The Basics of Email Design

Have you ever wondered why can’t you use the same fancy design in your email templates as on your website? Read on below and you’ll learn the basics / limitations of email design.

Short glance into email history

Email was born in the very early days of Internet. Industry players were in a big rush for capturing as many email users as possible. Obviously they were not really interested in cooperating with each other in building their email clients or rendering engines.

history of email clients

This is the reason why email coding is still the trickiest thing you can do with HTML. The email clients we use today have very different email rendering engines in the background, and standardization is very slow.

600 px email width – myth or reality?

Due to smaller screen sizes back in the early days of HTML emails 600 px became the most used email width.

screen resolution statistics from 1999 to 2011

Image source: nngroup.com

But do you still need to use 600 px email width these days?

Although screen sizes increased a lot since then, there are still couple email clients like Yahoo Mail and Outlooks which might have problems with wide emails.

Most Outlook users use the 3 column view in which most of the screen is covered by the first two columns and less than 50% of the screen remains for email viewing.

Outlook 2013 screenshot

In Yahoo mail users use a similar 3 column view too and on top of that they are displayed banner ads on the right side of the screen, which takes up extra space.

We conducted series of email rendering tests to figure out how different email widths behave in Yahoo and Outlook.

Let’s take a look at the below 750 px wide email template from Econsultancy.com in Yahoo Mail.

econsultancy responsive email template in yahoo mail

You can see that the right side of the email is cut on the most common 1366×768 px resolution. The email would be cut in Outlooks as well on the same screen size.

Based on our tests the maximum email width that can fit into the screen in Outlook and Yahoo is roughly 650 px. So if significant number of your subscribers use these email clients you should stay under 650 px or simply use the most common 600 px width, like industry leaders – Mailchimp, Campaignmonitor, Getresponse, etc. – do.

Stretching the limits of email design

Besides email width there are many other limitations of email design, which you need to accept or just invest the extra work required for a workaround.

Video in email?

Most email clients won’t support embedded video in your email. Only some email clients – like Apple Mail or iOS – support embedded HTML5 video.

If most / or desired segment of your list uses the above mentioned email clients you’re good to go with embedded video otherwise use animated GIFs in your email.

Use animated GIFs instead

With animated GIFs you can “almost” reach the same effect as with a video, so don’t be afraid to use them. They work in most email clients – but won’t play in Outlook 2007-2013 for example, and will only show the first frame of the animation.

For more creative animated GIF examples check out this previous blog post.

Modern fonts?

Designers and marketers are bored with Arial or Times New Roman so they are always looking for ways to improve.

That’s what Mailchimp listened to so they built in some Google Fonts into their email builder.

Couple email clients support the tags, @font-face or @import, to allow you to use any font of your choice. The font needs to be hosted somewhere, such as Google fonts, or imported using the @import tag.

But the majority of email clients won’t support them so always make sure that you have built-in failover for a web-safe font.

web safe fonts

Background images?

Some email clients, particularly Outlook 2007+ and Hotmail, will automatically disable background images in your email campaigns.

Try to avoid background image use and create designs where text and images are well separated.

Image source: Reallygoodemails.com

If you really need to use background images you can use VML (Visual Markup Language) to make them work in Outlooks as well. Regardless always make sure that you have a failover background color too, which will make your email enjoyable even if background images don’t appear.

Do you need to send fancy HTML emails at all?

There are some use cases when very minimal – plain text like – HTML emails will work better than design heavy HTML emails.

For example B2B (cold) emails, on-boarding emails, online course emails are mostly very minimal HTML emails.

If your email is text content heavy and you truly want to focus on the power of words, it’s quite likely that you don’t need a very fancy email design at all.

For example I once asked Joanna Wiebe from Copyhackers, why was she using plain text like emails? She told me that these perform better than fancy design heavy HTML emails.

In most cases you’ll still need to send emails which include a series of images:

  • Your logo – To show off that the given email belongs to your brand.
  • Images of your products / services – Could you imagine a pure text email from Bestbuy? Most people expect to receive image heavy, visually appealing, stylish emails with nice pictures from businesses.
  • Social icons – To promote your other online communication channels to your email subscribers.

Before you start designing your first email template check out what kind of emails do others in your industry send, since you need to stand out of the crowd and find your own voice to be successful in the fierce competition today.

Don’t guess – test!

Email design can be tricky and the limitations can be exactly that – very limiting. That’s why Email on Acid offers a free 7 day trial to all users. Preview how your email will look on different email clients in seconds.

Leave a Reply