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.
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.
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 Outlook, that might have problems with wide emails.
Most Outlook users use the 3-column view. This covers most of the screen by the first two columns and less than 50% of the screen remains for email viewing.
In Yahoo mail, users use a similar 3-column view too. 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.
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 Outlook’s 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 a 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, such as Apple Mail or iOS, support embedded HTML5 video.
If most/the 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.
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, which inspired them to build in some Google Fonts into their email builder.
Couple email clients support the tags,
@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
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.
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, onboarding emails, online course emails are mostly very minimal HTML emails.
If your email is text-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.
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.
Author: Alex Ilhan
Hailing all the way from England, Alex brings his email development expertise along with an endless stream of cups of tea and British cynicism. Follow him on Twitter: @omgitsonlyalex.